前端思路：
1.这个页面主要是获取数据库中的数据，所以一开始就来就要在 created执行获取地址数据的函数：pathData
2. 然后再methods中 写获取地址数据的请求方法 pathData，要带上token
3. 将获返回的结果保存到vuex中，这个地址 在store的modules文件夹中单独新建一个js文件保存
3.1 methods中引入 ...mapMutations(["my_Path"]),
// 在成功返回的回调函数中，将数据保存到vuex中 this.my_Path(res.data);
4. 从vuex中获取到state数据，注意获取方式，最后再ul li中使用for循环将真实的数据渲染到页面上
computed: {
...mapState({
list: (state) => state.pathlist.listpath,
}),
},
前端代码
<template>
<div class="my_path">
<header>
<Header>
<template #login>
<div></div>
</template>
<template #middle>
<div>我的地址</div>
</template>
</Header>
</header>
<section>
<Section>
<template #section>
<ul v-if="list.length">
<li v-for="(item, index) in list" :key="index">
<div>
<span>{{item.name}}</span>
<span>{{item.tel}}</span>
</div>
<div class="path-text">
<!-- province,
city,
county,
isDefault-->
<span>
<span
v-show="item.isDefault == 1 ? true :false"
:class="item.isDefault == 1 ? 'active':''"
>[默认]</span>
<span>{{item.province}} {{item.city}}{{item.county}}{{item.addressDetail}}</span>
</span>
</div>
</li>
</ul>
<div v-else>无数据,请添加地址</div>
<div class="addAdderss" @click="addAddress">
<span>添加地址</span>
</div>
</template>
</Section>
</section>
<Tabber></Tabber>
</div>
</template>
<script>
import Tabber from "@/components/common/Tabbar.vue";
import Header from "@/components/my/Header.vue";
import Section from "@/components/my/Section.vue";
import http from "@/common/api/request.js";
import { mapState, mapMutations } from "vuex";
export default {
name: "MyPath",
components: {
// Index,
Section,
Header,
Tabber,
},
created() {
// if (this.list.length != 0) {
this.pathData();
console.log(this.list.length);
// }
},
computed: {
...mapState({
list: (state) => state.pathlist.listpath,
}),
},
methods: {
...mapMutations(["my_Path"]),
// 获取地址
async pathData() {
let res = await http.$axios({
url: "/api/pathData",
method: "POST",
headers: {
token: true,
},
});
if (res.data.length == 0) {
console.log(res.data);
return;
} else {
// 将数据保存到vuex中
this.my_Path(res.data);
}
},
addAddress() {
this.$router.push({ name: "AddAds" });
},
},
};
</script>
<style lang="less" scoped>
.my_path {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: rgb(236, 230, 230);
}
section {
flex: 1;
overflow: hidden;
ul li {
height: 1.706667rem;
background-color: #fff;
div {
height: 0.8rem;
}
}
.addAdderss {
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.8rem;
span {
line-height: 0.8rem;
text-align: center;
width: 2.133333rem;
border-radius: 0.1rem;
background-color: #13acf3;
font-size: 0.426667rem;
color: #fff;
}
}
.active {
color: red;
}
.path-text {
// font-size: 0.373333rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
</style>
后端思路：
1.获取前端传递过来的参数：token
注意：
1.1 token 要解析，解析出来的token赋值为一个变量，然后判断token是否为null 如果为null 返回用户信息 让前端去做判断，跳转到登录页面
1.2 通过解析出来的token获取到电话号码${tokenObj.tel} 去查询用户user表,保存id作为用户uid
2. 根据uid 查询地址表path ，最后把查询到的信息返回给 前端用户
后端代码
// 读取数据库中保存的地址
router.post('/api/pathData', function (req, res, next) {
// 前端传递过来的token,解析token
let tokens = req.headers.token;
let tokenObj = jwt.decode(tokens) //结果 { tel: '18666554444', iat: 1628506659 }
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.length > 0) {
let uid = r[0].id
connection.query(`select * from path where uid ="${uid}"`, function (e, r) {
// console.log(r, '11111');
if (r.length > 0) {
res.send({
data: {
code: 200,
success: true,
msg: '获取数据成功',
data: r
}
})
} else {
res.send({
data: {
code: 200,
success: true,
msg: '没有数据',
}
})
}
})
}
})
}
})
