登录,登出,首次登录获取用户的信息,
全局拦截,哪些功能需要登录,哪些功能不需要登录,全局的模态框的实现,本质上是父子通信知识的讲解
绑定数据:
前台
<template>
<div>
<van-checkbox-group class="card-goods" v-model="checkedGoods">
<van-checkbox
class="card-goods__item"
v-for="item in goods"
:key="item.id"
:name="item.id"
>
<van-card
:title="item.title"
:desc="item.desc"
:num="item.num"
:price="formatPrice(item.price)"
:thumb="item.thumb"
/>
</van-checkbox>
</van-checkbox-group>
<van-submit-bar
:price="totalPrice"
:disabled="!checkedGoods.length"
:button-text="submitBarText"
@submit="onSubmit"
/>
</div>
</template>
<script>
import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';
export default {
components: {
[Card.name]: Card,
[Checkbox.name]: Checkbox,
[SubmitBar.name]: SubmitBar,
[CheckboxGroup.name]: CheckboxGroup
},
data() {
return {
checkedGoods: ['1', '2', '3'],
goods: [{
id: '1',
title: '进口香蕉',
desc: '约250g,2根',
price: 200,
num: 1,
thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
}, {
id: '2',
title: '陕西蜜梨',
desc: '约600g',
price: 690,
num: 1,
thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
}, {
id: '3',
title: '美国伽力果',
desc: '约680g/3个',
price: 2680,
num: 1,
thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
}]
};
},
computed: {
submitBarText() {
const count = this.checkedGoods.length;
return '结算' + (count ? `(${count})` : '');
},
totalPrice() {
return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 0);
}
},
methods: {
formatPrice(price) {
return (price / 100).toFixed(2);
},
onSubmit() {
Toast('点击结算');
}
}
};
</script>
<style lang="less">
.card-goods {
padding: 10px 0;
background-color: #fff;
&__item {
position: relative;
background-color: #fafafa;
.van-checkbox__label {
width: 100%;
height: auto; // temp
padding: 0 10px 0 15px;
box-sizing: border-box;
}
.van-checkbox__icon {
top: 50%;
left: 10px;
z-index: 1;
position: absolute;
margin-top: -10px;
}
.van-card__price {
color: #f44;
}
}
}
</style>
路由
path: '/cart',
name: 'Cart',
component: Cart
后台
// user表里面包含了地址列表,购物车列表,订单列表,所以我们把购物车数据写在用户users里面
//查询当前用户名下的购物车数据,首先要拿到用户的cookie
// 先判断一下, 如果
router.get('/cartList', function (req, res, next) {
//获取用户Id cookie要从req请求里面拿,res是往服务端写入
var userId = req.cookies.userId;
// console.log(req)
//通过User模型去findOne找到当前这个用户
db.User.findOne({
userId: userId
}, function (err, doc) {
// console.log(doc)
if (err) {
res.json({
code: 1,
msg: err.message
});
return;
}
res.json({
code: 200,
message: '成功',
//拿到用户名下的购物车商品数据
users: doc.cartList
})
})
})
console.log(req.cookies)
console.log(doc)
cookies
https://blog.csdn.net/fengtingYan/article/details/89354642
app.js全局拦截()
app.js
// 捕获登录状态
app.use(function (req, res, next) { // 进入路由之前优先进入function
console.log('111')
console.log(req)
if (req.cookies.userId) { // 有cookies,说明已经登录
next();
} else {
console.log("url:" + req.originalUrl);
if (req.originalUrl == '/users/login' || req.originalUrl == '/users/logout') { // 未登录时可以点击登录login登出logout和
next();
} else {
res.json({
status: '1001',
msg: '当前未登录',
result: ''
})
}
}
})
users.js
// 校验是否登录
router.get("/checkLogin",function(req,res,next){
if(req.cookies.userId){
res.json({
status:'0',
msg:'',
result:req.cookies.userName || ''
});
}else{
res.json({
status:'1',
msg:'未登录',
result:''
})
}
})