Vue nodejs商城項目-商品列表價格過濾和加入購物車功能

一、價格過濾功能

GoodsList.vue

1. >>點擊價格區間時發送請求
2. methods:{
3.     getGoodsList(flag){
4.         var param = {
5.             // 請求時傳點擊的價格區間數據給后台
6.             priceLevel:this.priceChecked // 點擊的價格區間
7.         }
8.         ......
9.     },
10.     setPriceFilter(index){ // 點擊價格
11.         this.priceChecked = index;
12.         this.closePop();
13.         this.getGoodsList(); // 發送請求
14.     },
15. }

 

server/routes/goods.js 
獲取傳過來的參數，對價格參數進行處理，查詢價格區間內的數據庫數據

1. // 二級路由
2. /* GET goods page. */
3. router.get('/', function(req, res, next) {
4.    // express獲取請求參數
5.    let priceLevel = req.param("priceLevel"); // 傳過來的價格區間
6.    var priceGt = '',priceLte = '';
7.    let params = {};
8.    if(priceLevel != 'all'){ // 價格區間過濾功能
9.       switch (priceLevel){
10.          case '0':priceGt=0;priceLte =100;break;
11.          case '1':priceGt=100;priceLte =500;break;
12.          case '2':priceGt=500;priceLte =1000;break;
13.          case '3':priceGt=1000;priceLte =5000;break;
14.       }
15.       params = {
16.          salePrice:{
17.             $gt:priceGt,
18.             $lte:priceLte
19.          }
20.       }
21.    }
22.    ......
23. });

 

往下滾動分頁加載圖標效果

1. <!-- 加載中... -->
2. <img v-show="loading" src="/static/loading-svg/loading-spinning-bubbles.svg" alt="">
3.  
4. export default {
5.     data(){
6.         return {
7.             loading:false // 往下滾動"加載圖標"的出現效果:默認不出現
8.         }
9.     },
10.     methods:{
11.         getGoodsList(flag){
12.             this.loading = true; // 請求前出現
13.             axios.get("/goods",{
14.               params:param // 傳參
15.             }).then((res)=>{
16.                 var res = res.data;
17.                 this.loading = false; // 請求到數據圖標消失
18.                 if(res.status == "0"){
19.                     ......
20.                 }
21.             })
22.         }
23.     }
24. }

 

二、加入購物車功能

dumall數據庫建立users集合導入resource文件夾的dumall-users 

與商品列表接口一樣，先建立用戶數據的模型 
server/models/users.js

1. // 對應數據庫用戶數據在resource文件夾的dumall-users
2. var mongoose = require('mongoose');
3. var Schema = mongoose.Schema;
4.  
5. // 定義一個Schema
6. var userSchema = new Schema({
7.    'userId':String, // 或者 'userId':{type:String}
8.    'userName':String,
9.    'userPwd':String,
10.    'orderList':Array,
11.     'cartList':[ // 購物車列表
12.         {
13.             "productId":String,
14.             "productName":String,
15.             "salePrice":Number,
16.             "productImage":String,
17.             "checked":String, // 是否選中
18.             "productNum":String // 商品數量
19.         }
20.     ],
21.     "addressList":Array
22. })
23.  
24. // 輸出(導出)
25. module.exports = mongoose.model('user',userSchema); // 定義一個user模型，可以根據這個模型調用其API方法。
26. // 這個模型定義的是數據庫dumall的users集合數據，所以這個model取名user是對應這個集合，連接數據庫之后，這個模型會根據名字的復數形式"users"來查找數據集合。
27. // module.exports = mongoose.model('user',userSchema,'users'); 也可以后面注明鏈接的是數據庫的goods集合

數據庫鏈接(之前商品列表頁已連接)，查詢操作用戶數據，建立接口，實現加入購物車功能 server/routes/goods.js

1. // 加入到購物車
2. // 是二級路由，一級路由在app.js
3. router.post("/addCart",function(req, res, next){
4.   var userId = '100000077',
5.     productId = req.body.productId; // post請求拿到res參數：req.body
6.   var User = require('../models/users.js'); // 引入user模型
7.  
8.   // 查詢第一條:拿到用戶信息
9.   User.findOne({
10.     userId:userId // 查詢條件
11.   },function(err,userDoc){
12.     if(err){
13.       res.json({
14.         status:"1",
15.         msg:err.message
16.       })
17.     }else{
18.       console.log("userDoc"+userDoc); // 用戶數據
19.       if(userDoc){
20.         let goodsItem = '';
21.         userDoc.cartList.forEach(function(item){ // 遍歷用戶購物車，判斷加入購物車的商品是否已經存在
22.           if(item.productId == productId){
23.             goodsItem = item;
24.             item.productNum++; // 購物車這件商品數量+1
25.           }
26.         })
27.         if(goodsItem){ // 若購物車商品已存在
28.           userDoc.save(function (err2,doc2) {
29.             if(err2){
30.                 res.json({
31.                     status:"1",
32.                     msg:err2.message
33.                 })
34.             }else{
35.                 res.json({
36.                     status:'0',
37.                     msg:'',
38.                     result:'suc'
39.                 })
40.             }
41.           })
42.         }else{ // 若購物車商品不存在，就添加進去
43.           Goods.findOne({productId:productId},function(err1,doc){ // 從商品列表頁Goods查詢點擊加入購物車的那件商品信息
44.             if(err1){
45.               res.json({
46.                 status:"1",
47.                 msg:err1.message
48.               })
49.             }else{
50.               if(doc){
51.                 doc.productNum = 1;
52.                 doc.checked = 1;
53.                 userDoc.cartList.push(doc); // 添加信息到用戶購物車列表中
54.                 userDoc.save(function(err2,doc2){ // 保存數據庫
55.                   if(err2){
56.                     res.json({
57.                       status:"1",
58.                       msg:err2.message
59.                     })
60.                   }else{
61.                     res.json({
62.                       status:"0",
63.                       msg:'',
64.                       result:'suc'
65.                     })
66.                   }
67.                 })
68.               }
69.             }
70.           })
71.         }
72.       }
73.     }
74.   })
75. })

 

頁面實現加入購物車請求實現 GoodsList.vue

1. <!--傳入商品id參數-->
2. <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入購物車</a>
3.  
4. methods:{
5.     addCart(productId){ // 點擊加入購物車
6.         axios.post("/goods/addCart",{ // 接口設置在server/routes/goods.js
7.             productId:productId
8.         }).then((res)=>{
9.             var res = res.data;
10.             if(res.status==0){
11.                 alert("加入成功")
12.             }else{
13.                 alert("msg:"+res.msg)
14.             }
15.         })
16.     }
17. }

 

運行項目，點擊購物車，請求成功，數據庫購物車列表變化

• © 2018 GitHub, Inc.