Vue+Node+MongoDB实现商城系统——12.13.14章：地址及订单模块功能

一、地址

功能一：渲染地址列表

• 1、编写后台接口，根据req.cookies.userId,查询用户，并返回用户addressList
• 2、前台请求后，列表渲染

功能二：默认只展示3条数据

1. 使用vue的computed计算属性，截取原addressLists的前三条进行展示
   
   • slice(0,this.limit)方法截取前三条数据
2. 点击展开，显示全部地址
   
   • 直接更改limit的值会触发computed属性的更改

export default {
    data(){
        return{
            limit:3,
            addressLists:[]
        }
    },
    methods:{
        getAddressList(){
            ```
        },
        expand(){
            if(this.limit==3){
                this.limit=this.addressLists.length;
            }else{
                this.limit=3;
            }
        }
    },
    mounted(){
        this.getAddressList()
    },
    compouted:{
        addressListsFilter(){
            return this.addressLists.slice(0,this.limit)
        }
    }
}

功能三：设置默认地址

1. 点击时，传入addressId,发送post请求
2. 后台接收到请求后，req.body.addressId拿取id，根据userId查询addressList，根据addressId更新数据

router.post('/address/setdefault',function(req,res,next){
  var userId = req.cookies.userId,
      addressId = req.body.addressId;
  User.findOne({userId:userId},function(err,doc){
      var addressList = doc.addressList;
      addressList.forEach(function(item,index){
        if(item.addressId==addressId){
          item.isDefault=true;
        }else{
          item.isDefault=false;
        }

      })
      doc.save(function(err1,doc1){
        if(err){
          res.json({
            status:'1',
            msg:err.msg
          })
        }else{
          res.json({
            status:'0',
            msg:'',
            result:'1'
          })
        }
      })
  })
})

功能四：删除地址

1. 前端点击发送删除请求
2. 后台根据传入的addressId,userId删除对应数据($pull删除)

// 后端点：
User.update({
    userId:userId
},{
    $pull:{
        'addressList':{
            'addressId':addressId
        }
    }
},function(err,doc){
   .......
})

功能五：点击next跳转至订单确认

1. 使用v-bind:to属性来动态绑定路由地址，并携带参数
2. query携带参数

<div class="next-btn-wrap">
    <router-link class="btn btn--m btn--red" :to="{path:'orderConfirm',query:{'addressId':selectedAddId}}">Next</router-link>
</div>

二、订单