@TOC

---

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

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

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

---

0前提

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

1.一些准备

1.1表

收货地址表address

字段名称	类型（长度）	允许空	主键	外键	自增	唯一	说明
id	int	否	是	否	是	是	收货地址id
name	varchar(20)	否	否	否	否	否	姓名
phone	varchar(20)	否	否	否	否	否	手机号
address	varchar(20)	否	否	否	否	否	地址
userId	int	否	否	是	否	否	用户id
creatTime	timestamp	否	否	是	否	否	创建时间
updateTime	timestamp	否	否	是	否	否	更新时间

1.2总体思路

描述：用户在我的页面可以点击我的收货地址跳转到用户的收货列表页，用户可以点击地址卡片跳转到地址卡片的详情并可以进行编辑，用户也可以在收货地址列表页点击添加地址之后跳转添加地址页（查看、编辑、添加功能都是集成在同一个页面，只是看有无地址id传入）

实现：当用户点击我的收货地址时跳转到收货地址列表页，页面加载时根据用户id去获取这个用户的收货地址列表，当用户点击地址卡片时，先判断用户是从哪一个页面进来，如果是我的页面进来的那就点击地址卡片之后url拼接上地址id跳转到下一页地址详情，地址详情页根据地址id获取地址详情，当点击添加地址时直接跳转到地址详情页，地址详情页去判断有无地址id传入，如果没有就是添加地址如果有的话就是查看和修改地址。

2.前端

代码实现：

      selectAddress(selectedAddress) {
      if (this.fromPage == 'order') {
        // 如果是从下单页面跳转过来的，则返回选中的地址
        uni.$emit('selectedAddress', selectedAddress);
        uni.navigateBack();
      } else {
        // 如果是从我的地址页面跳转过来的，则跳转到地址详情编辑页面
        uni.navigateTo({
          url: '/pages/wdshouhuoDetails/wdshouhuoDetails?addressId=' + selectedAddress.id
        });
      }
    },
    async userAddress() {
      try {
        const res = await this.$myRequest({
          method: 'get',
          url: '/userAddress?userId=' + this.$store.state.user.id
        });
        console.log(res.data.data);
        if (res.error) {
          this.$message.error(res.error);
        } else {
          this.addressList = res.data.data;
        }
      } catch (error) {
        console.error('请求发生错误:', error);
      }
    },
    goShouhuoDetails(addressId = null) {
      uni.navigateTo({
        url: '/pages/wdshouhuoDetails/wdshouhuoDetails' + (addressId ? '?addressId=' + addressId : '')
      });
    }

// 根据地址ID获取地址详情
    async getAddressDetail() {
      try {
        const res = await this.$myRequest({
          method: 'get',
          url: '/addressDetail?addressId=' + this.addressId
        });
        console.log(res.data.data);
        if (res.error) {
          this.$message.error(res.error);
        } else {
          const addressDetail = res.data.data;
          // 将获取到的地址详情赋值给页面中的对应变量
          this.name = addressDetail.name;
          this.address = addressDetail.address;
          this.phone = addressDetail.phone;
        }
      } catch (error) {
        // 捕获异常，显示通用错误消息或者其他处理
        console.error('请求发生错误:', error);
      }
    },
    // 添加地址
    async addAddress() {
      try {
        const res = await this.$myRequest({
          method: 'post',
          url: '/addAddress',
          data: {
            name: this.name,
            address: this.address,
            phone: this.phone,
            userId: this.$store.state.user.id
          }
        });
        console.log(res.data.data);
        if (res.error) {
          this.$message.error(res.error);
        } else {
          uni.showToast({
            title: '添加地址成功',
            icon: 'success'
          });
          // 添加成功后返回上一页
          uni.navigateBack();
        }
      } catch (error) {
        // 捕获异常，显示通用错误消息或者其他处理
        console.error('请求发生错误:', error);
      }
    },
    // // 修改地址
    async updateAddress() {
      try {
        const res = await this.$myRequest({
          method: 'post',
          url: '/updateAddress',
          data: {
            addressId: this.addressId,
            name: this.name,
            address: this.address,
            phone: this.phone
          }
        });
        console.log(res.data.data);
        if (res.error) {
          this.$message.error(res.error);
        } else {
          uni.showToast({
            title: '地址更新成功',
            icon: 'success'
          });
          // 更新成功后返回上一页
          uni.navigateBack();
        }
      } catch (error) {
        // 捕获异常，显示通用错误消息或者其他处理
        console.error('请求发生错误:', error);
      }
    }

3.后端

（接口编写逻辑：接口名字-接收前端传值-sql语句-sql操作-返回信息） 代码实现：

// 获取用户收货地址接口
app.get('/userAddress', (req, res) => {
  const userId = req.query.userId;
  // 构造查询用户收货地址的 SQL 查询语句
  const query = `SELECT * FROM address WHERE userId = ?`;

  // 执行 SQL 查询，并将用户收货地址返回给客户端
  connection.query(query, [userId], (err, results) => {
    if (err) {
      console.log(err);
      return res.status(500).json({
        error: '获取用户收货地址失败，请稍后重试'
      });
    }
    // 如果结果为空，说明用户收货地址不存在
    if (results.length === 0) {
      return res.status(404).json({
        error: '用户收货地址不存在'
      });
    }
    // 返回用户收货地址信息
    res.json({
      data: results
    });
  });
});
// 获取地址详情
app.get('/addressDetail', (req, res) => {
  const addressId = req.query.addressId;
  const query = `SELECT * FROM address WHERE id = ?`; // 假设地址信息存储在名为 address 的表中
  connection.query(query, [addressId], (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('/updateAddress', (req, res) => {
  const {
    addressId,
    name,
    address,
    phone
  } = req.body;
  const query = `UPDATE address SET name = ?, address = ?, phone = ? WHERE id = ?`; // 假设地址信息存储在名为 address 的表中
  connection.query(query, [name, address, phone, addressId], (err, results) => {
    if (err) {
      console.log(err);
      return res.json({
        error: '修改地址失败，请稍后重试',
      });
    }

    // 返回成功消息
    res.json({
      message: '地址修改成功',
    });
  });
});
// 添加地址
app.post('/addAddress', (req, res) => {
  const {
    name,
    address,
    phone,
    userId
  } = req.body;
  const query = `INSERT INTO address (name, address, phone,userId) VALUES (?, ?, ?, ?)`; // 假设地址信息存储在名为 address 的表中
  connection.query(query, [name, address, phone, userId], (err, results) => {
    if (err) {
      console.log(err);
      return res.json({
        error: '添加地址失败，请稍后重试',
      });
    }

    // 返回成功消息和新增地址的ID
    res.json({
      message: '地址添加成功',
      addressId: results.insertId,
    });
  });
});

4.验证结果

5.每日一题：

介绍一下ES6存在哪些新特性

ES6（ECMAScript 2015）是 JavaScript 的一次重大更新，引入了许多新特性和语法改进，使得 JavaScript 更加强大、灵活和易于使用。以下是其中一些主要的新特性：

1. let 和 const 声明：引入了 let 和 const 关键字用于声明变量和常量，取代了 var，并且具有块级作用域。

2. 箭头函数：使用箭头（=>）定义函数，简化了函数的声明和使用，并且具有词法作用域。

3. 模板字符串：使用反引号（ ）包裹的字符串，可以包含插值表达式 ${}，更加灵活地处理字符串拼接和格式化。

4. 解构赋值：可以通过模式匹配的方式从数组或对象中提取值并赋给变量，减少了代码量和提高了可读性。

5. 默认参数值：可以为函数的参数指定默认值，简化了函数的定义和调用。

6. 展开运算符：使用 ... 将可迭代对象（如数组、对象等）拆分成单独的值，或将多个值合并成一个数组或对象。

7. 类与继承：引入了类（class）和基于原型的继承方式，使得 JavaScript 更加面向对象，同时提供了更加清晰和灵活的语法。

8. 模块化：引入了 import 和 export 关键字，支持模块化开发，使得 JavaScript 可以更好地组织和管理代码。

9. Symbol 和 Symbol属性：引入了 Symbol 数据类型和 Symbol 属性，用于创建唯一的标识符，防止属性名冲突。

10. Promise 和 async/await：引入了 Promise 对象用于处理异步操作，以及 async/await 关键字用于更加清晰和简洁地编写异步代码。

11. 迭代器和生成器：引入了迭代器和生成器的概念，使得 JavaScript 支持更加灵活和可控的迭代行为。

12. Map 和 Set 数据结构：引入了 Map 和 Set 数据结构，分别用于存储键值对和唯一值的集合，提供了更加高效和便利的数据操作方式。