Vue+Node+MongoDB実現商城システム——12.13.14章:住所及び注文モジュール機能

一、住所
機能1:レンダリングアドレスリスト

1、reqによるバックグラウンドインタフェースを作成する.cookies.userIdは、ユーザを問合せ、ユーザaddressList

に戻る

2、フロントリクエスト後、リストレンダリング

機能2:デフォルトでは3つのデータしか表示されません

vueのcomputed計算プロパティを使用して、元のaddressListsの最初の3つを切り取って表示します.

slice(0,this.limit)メソッド最初の3つのデータ

を切り取ります.

展開をクリックすると、すべてのアドレスが表示されます

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

機能3:デフォルトアドレスの設定

クリックするとaddressIdが入力post要求

が送信される.

バックグラウンドは要求を受信後、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'
          })
        }
      })
  })
})

機能四:アドレスの削除

フロントエンドクリック送信削除要求

バックグラウンド受信addressIdに従ってuserIdは対応するデータ($pull削除)

を削除する.

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

機能5:nextをクリックして注文確認にジャンプ

は、v-bind:to属性を使用してルーティングアドレスを動的にバインドし、パラメータ

を携帯する.

query携帯パラメータ

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

二、注文