@TOC

---

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

0前提

温馨提示：我做的思路可能是复杂化了或者说代码写的不规范，如果你觉得可以更加简便的话欢迎分享到评论区或者自己改写一下我的代码，我的后端是写的很简单的没有什么路由分发是直接写的，你可以自由优化，以及在需要验证用户是否登录和验证用户token是否正确的我没有进行验证，你们可以自行添加 小程序的其他部分你可以看看我往期的文章

1.一些准备

1.1表

用户表user

字段名称	类型（长度）	允许空	主键	外键	自增	唯一	说明
id	int	否	是	否	是	是	用户id
opendId	varchar(50)	否	否	否	否	否	微信opendid（唯一标识）
avatar	varchar(100)	否	否	否	否	否	微信头像
name	varchar(20)	否	否	否	否	否	微信昵称
gender	int	否	否	否	否	否	性别
phone	varchar(20)	否	否	否	否	否	手机号
address	varchar(20)	否	否	否	否	否	居住地址
state	int	否	否	否	否	否	审核状态
communityId	int	是	否	是	否	否	小区id
creatTime	timestamp	否	否	是	否	否	创建时间
updateTime	timestamp	否	否	是	否	否	更新时间

1.2总体思路

描述：在平台上用户可以在我的页面跳到个人信息页，对于自己的个人信息进行查看以及对于自己的个人信息进行编辑，编辑头像、昵称、手机号、地址等等（进一步的需要将用户归属哪一个小区也写上去，用户可以绑定不同的小区）

实现：当用户在我的页面是点击个人设置就可以跳转到个人信息页，在页面加载时获取对应用户id的个人信息，页面内有一个编辑按钮，当用户点击编辑按钮时，页面的文本框就变为输入框，将原来获取到的个人信息复制一份到输入框中，当用户点击保存之后将输入框的数据将上传到后端进行全部替换（进一步的优化写法应该是在前端先判断一下信息对比有无发生变化如果没有发生变化，那么就不需要调用后端接口，有变化也只是上传变化了的信息而不是全部信息上传）

2.前端

前端：页面内元素有初始用户信息和编辑用户信息，以及判断是否为编辑模式的变量，当点击编辑按钮时间初始用户信息复制到编辑用户信息中，然后点击保存时将编辑用户信息传给后端

代码实现：

   //选择图片进行上传
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.editedUserInfo.avatar = res.tempFilePaths[0];
        }
      });
    },
    async getUserInfo() {
      try {
        const res = await this.$myRequest({
          method: 'get',
          url: '/userDetail?userId=' + this.$store.state.user.id
        });
        console.log(res.data.data);
        if (res.error) {
          this.$message.error(res.error);
        } else {
          this.userInfo = res.data.data;
        }
      } catch (error) {
        // 捕获异常，显示通用错误消息或者其他处理
        console.error('请求发生错误:', error);
      }
    },
    editChanges() {
      this.editMode = true;
      // 将原始用户信息拷贝一份到 editedUserInfo 中，用于编辑时的修改
      this.editedUserInfo = { ...this.userInfo };
    },
    async saveChanges() {
      this.userInfo = { ...this.editedUserInfo };
      const res = await this.$myRequest({
        method: 'post',
        url: '/editUser',
        data: {
          avatar: this.editedUserInfo.avatar,
          name: this.editedUserInfo.name,
          address: this.editedUserInfo.address,
          phone: this.editedUserInfo.phone,
          userId: this.$store.state.user.id
        }
      });
      uni.showToast({
        title: '修改成功',
        icon: 'success'
      });
      this.editMode = false;
    }

3.后端

后端：接受前端用户传来编辑用户信息，保存到用户表里面（接口编写逻辑：接口名字-接收前端传值-sql语句-sql操作-返回信息） 代码实现：

// 获取用户信息
app.get('/userDetail', (req, res) => {
  const userId = req.query.userId;
  const query = `SELECT * FROM user WHERE id = ?`; // 假设用户信息存储在名为 users 的表中
  connection.query(query, [userId], (err, results) => {
    if (err) {
      console.log(err);
      return res.json({
        error: '获取用户信息失败，请稍后重试',
      });
    }

    if (results.length === 0) {
      return res.json({
        error: '用户不存在',
      });
    }

    // 返回用户信息
    res.json({
      data: results[0],
    });
  });
});
//编辑用户信息
app.post('/editUser', (req, res) => {
  const {
    avatar,
    name,
    address,
    phone,
    userId
  } = req.body;

  const query = `UPDATE user SET avatar=?, name=?, address=?, phone=? WHERE id=?`;
  connection.query(query, [avatar, name, address, phone, userId], (err, results) => {
    if (err) {
      console.log(err);
      return res.status(500).json({
        error: '更新用户信息失败，请稍后重试'
      });
    }
    // 返回成功响应
    res.json({
      message: '用户信息更新成功'
    });
  });
});

4.验证结果

5.每日一题：

介绍一下浅拷贝和深拷贝的区别（在本文的将初始用户信息复制到编辑用户信息就是一个浅拷贝）

浅拷贝和深拷贝在赋值一个对象时的主要区别在于拷贝的深度不同。浅拷贝只复制引用，而深拷贝则递归地复制引用的对象。以下是两者的详细比较：

1. 浅拷贝：

• 定义：浅拷贝是指重新分配一块内存，创建一个新的对象，但里面的元素是原对象中各个子对象的引用。
• 特点：对于基本数据类型的成员对象，浅拷贝会直接将属性值赋值给新的对象。如果属性是引用类型（例如对象或数组），则拷贝的是内存地址，而不是实际的对象或数组本身。这意味着如果原对象或它的子对象发生变化，浅拷贝后的对象也会受到影响，因为它们实际上指向的是同一个内存地址。
• 应用场景：在不需要完全独立副本，或者对象结构较为简单、不包含复杂嵌套对象时，浅拷贝是一个更高效的选择。

1. 深拷贝：

• 定义：深拷贝是指重新分配一块内存，创建一个新的对象，并将原对象中的元素，以递归的方式，通过创建新的子对象拷贝到新对象中。这样，新对象和原对象没有任何关联。
• 特点：深拷贝会递归地复制对象及其所有嵌套的对象和数组，确保新对象和原始对象是完全独立的。对原对象的修改不会影响深拷贝后的对象，反之亦然。
• 应用场景：当需要确保对象的完全独立性，或者对象结构复杂、包含大量嵌套对象时，深拷贝是更好的选择。