前端->思路:
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: '删除地址成功!!'
}
})
}
})
}
})
}
})