购物车 列表页（读取自己当前登录用户的 购物车数据 从数据库获取来渲染）

前端思路：

1.购物车页面一进来要要发送一个请求获取列表数据，传递token过去

2. 将后端返回的数据保存到vuex中，这里新建了一个单独的 购物车的vuex 为：cartlist.js文件

     created() {
        this.getData();
      },
      computed: {
        ...mapState({
          list: (state) => state.cartlist.list,
        }),
      },
    async getData() {
      let res = await http.$axios({
        method: "POST",
        url: "api/cartData",
        // 前端发请求带上 headers，参数为token
        headers: {
          token: true,
        },
      });
      console.log(res.result, res.result.length, "fasdfasdfas");
   
      res.result.forEach((v) => {
        v["checked"] = true;
      });
   
      if (res.code == 400) {
        Toast(res.msg);
        return;
      }
      if (res.result.length && res.code == 200) {
        Toast(res.msg);
        this.CART_DATA(res.result);
      } else {
        Toast("暂无数据");
        this.CART_DATA(res.result);
      }
    },
   

后端 写一个获取购物车列表数据接口

1. 获取到前端传递过来的token 并解析 拿到tel，进行sql查询user表，把查询到的这条数据 id 作为用户uid

2. 通过用户uid 查询购物车cartlist表，将查询到的数据返回给前端

    // 购物车列表接口
   router.post('/api/cartData', function (req, res, next) {
     // 前端传递过来的手机号
     let tokens = req.headers.token;
     let tokenObj = jwt.decode(tokens) //结果 { tel: '18666554444', iat: 1628506659 }
     connection.query(`select * from user where tel ="${tokenObj.tel}"`, function (e, r) {
       let uid = r[0].id
       connection.query(`select * from cartlist where uid ="${uid}"`, function (e, result) {
         res.send({
           data: {
             code: 200,
             success: true,
             msg: "数据获取成功",
             result: result
           }
         })
       })
     })
   
   })