地址管理:删除地址 (在编辑地址中,点击其中一条地址进去编辑页面后才有删除功能) vant

348 阅读1分钟

前端->思路:

1.点击删除按钮:执行删除事件,采用的是vant组件中有删除事件,

  @delete="onDelete"

2. vant组件删除事件 默认有一个参数content ,就是前端地址相关信息,同时记得传递 token

前端代码

 // 删除
    async onDelete(content) {
      console.log(content, "delete");
      // 发送请求 执行删除sql语句
      let res = await http.$axios({
        url: "/api/deleteAddress",
        method: "POST",
        headers: {
          token: true,
        },
        data: {
          ...content,
        },
      });
      if (res.success) Toast(res.msg);
      //   跳转到 我的地址页面
      this.$router.push("/path");
    },
    

后端思路

1.获取前端传递过来的参数:token

 注意:
 1.1 token 要解析,解析出来的token赋值为一个变量,然后判断token是否为null 如果为null 返回用户信息 让前端去做判断,跳转到登录页面

2. 获取前端传过来的数据,并解构出 id 和 uid
 2.1  通过解析出来的token获取到电话号码${tokenObj.tel} 去查询用户user表,
 2.2  如果查到用户,就直接执行删除语句,删除条件 根据id 和uid来删,删除之后 给前端返回信息

    

后端代码 接口

// 删除地址
router.post('/api/deleteAddress', function (req, res, next) {
  // 前端传递过来地址信息
  console.log(req.body, 'req.body');
  let {
    id,
    uid,
  } = req.body
  console.log(id, uid, 'adfadsfadsfa');

  // 前端传递过来的token,解析token
  let tokens = req.headers.token;
  let tokenObj = jwt.decode(tokens) //结果 { tel: '18666554444', iat: 1628506659 }
  console.log(tokenObj.tel, "当前用户手机号");
  if (tokenObj == null) {
    res.send({
      data: {
        code: 400,
        success: false,
        msg: '请先登录'
      }
    })
  } else {
    // 根据token解析出来的手机号,来查询对应的用户表,查到对应的用户
    connection.query(`select * from user where tel ="${tokenObj.tel}"`, function (e, r) {
      if (r) {
        connection.query(`delete from path where id = ${id} and uid = ${uid}`, function (e, r) {
          if (r) {
            res.send({
              data: {
                code: 200,
                success: true,
                msg: '删除地址成功!!'
              }
            })
          }
        })
      }
    })
  }
})

image.png