购物车列表的数据加载与渲染（有赞vant）

登录，登出，首次登录获取用户的信息，
全局拦截，哪些功能需要登录，哪些功能不需要登录，全局的模态框的实现，本质上是父子通信知识的讲解

绑定数据：

前台

<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:''
        })
    }
})

---