Vue nodejs商城項目-商品列表頁面組件

1. data(){
2.        return {
3.            goodsList:[], // 商品列表
4.            priceFilter:[ // 價格區間數組
5.                {
6.                    startPrice:'0.00',
7.                    endPrice:'100.00'
8.                },
9.                {
10.                    startPrice:'100.00',
11.                    endPrice:'500.00'
12.                },
13.                {
14.                    startPrice:'500.00',
15.                    endPrice:'1000.00'
16.                },
17.                {
18.                    startPrice:'1000.00',
19.                    endPrice:'5000.00'
20.                }
21.            ],
22.            priceChecked:'all', // 選中的價格區間
23.            filterBy:false, // 控制價格菜單的顯示
24.            overLayFlag:false, // 遮罩的顯示
25.  
26.            sortFlag:true, // 排序:默認升序
27.            page:1, // 當前第一頁
28.            pageSize:8, // 一頁有8條數據
29.  
30.            busy:true, // 滾動加載插件默認禁用
31.  
32.            loading:false, // 往下滾動"加載圖標"的出現效果
33.  
34.            mdShow:false, // 未登錄的模態框是否顯示
35.            mdShowCart:false // 已登錄的模態框是否顯示
36.        }
37.    },
38.    components:{
39.        NavHeader,
40.        NavFooter,
41.        NavBread,
42.        Modal
43.    },
44.    mounted:function(){
45.        this.getGoodsList();
46.    },
47.    methods:{
48.        getGoodsList(flag){
49.            var param = {
50.              page:this.page,
51.              pageSize:this.pageSize,
52.              sort:this.sortFlag ? 1 : -1 , // sortFlag為true升序
53.              priceLevel:this.priceChecked // 點擊的價格區間
54.            }
55.            this.loading = true;
56.            axios.get("/goods/list",{
57.              params:param // 傳參
58.            }).then((res)=>{
59.                var res = res.data;
60.                this.loading = false;
61.                if(res.status == "0"){
62.                  if(flag){ // true.商品數據累加
63.                    this.goodsList = this.goodsList.concat(res.result.list);
64.  
65.                    if(res.result.count == 0){ // 0條數據了，就不加載滾動加載方法了
66.                      this.busy = true; // 禁用
67.                    }else{
68.                      this.busy = false; // 啟用
69.                    }
70.  
71.                  }else{ // 只加載一頁
72.                    this.goodsList = res.result.list;
73.                    this.busy = false;
74.                  }
75.                }else{
76.                  this.goodsList = [];
77.                }
78.            })
79.        },
80.        sortGoods(){ // 點擊排序商品
81.          this.sortFlag = !this.sortFlag;
82.          this.page = 1; // 點擊價格排序后從第一頁開始
83.          this.getGoodsList(); // 重新加載數據
84.        },
85.        setPriceFilter(index){ // 點擊價格
86.            this.priceChecked = index;
87.            this.closePop();
88.            this.getGoodsList();
89.        },
90.        showFilterPop(){ // 點擊filterBy出現價格菜單和遮罩
91.            this.filterBy = true;
92.            this.overLayFlag = true;
93.        },
94.        closePop(){ // 關閉價格菜單和遮罩
95.            this.filterBy = false;
96.            this.overLayFlag = false;
97.        },
98.        loadMore(){ // 滾動加載插件方法
99.          this.busy = true; // 滾動就禁用，防止下一個滾動
100.          setTimeout(() => { // 一個滾動完成之后再滾動加載下一個
101.            this.page++;
102.            this.getGoodsList(true); // 滾動加載是累加數據，並不是只顯示一頁數據，so需要傳參去請求數據的地方判斷一下
103.          }, 500);
104.        },
105.        addCart(productId){ // 點擊加入購物車
106.          axios.post("/goods/addCart",{ // 接口設置在server/routes/goods.js
107.            productId:productId
108.          }).then((res)=>{
109.            var res = res.data;
110.            if(res.status==0){
111.              //alert("加入成功")
112.              this.mdShowCart = true; // 加入購物車成功，成功的模態框顯示
113.  
114.              // 購物車數量加1
115.              this.$store.commit('updateCartCount',1);
116.            }else{
117.              // alert("msg:"+res.msg)
118.              this.mdShow = true; // 未登錄模態框顯示
119.            }
120.          })
121.        },
122.        closeModal(){ // 關閉模態框
123.              this.mdShow = false; // 未登錄模態框消失
124.              this.mdShowCart = false; // 未登錄模態框消失
125.        }
126.    }

Node.js后端代碼

1. // 查詢商品列表數據
2. /* GET goods page. */
3. router.get('/list', function(req, res, next) {
4.    // res.send('hello,goods list'); // 測試路由，連接成功頁面出現'hello,goods list'
5.  
6.    // express獲取請求參數
7.    let page = parseInt(req.param("page")); // get請求數據拿到數據：res.param()
8.    let pageSize = parseInt(req.param("pageSize"));
9.    let priceLevel = req.param("priceLevel"); // 傳過來的價格區間
10.    let sort = req.param("sort");
11.    let skip = (page-1)*pageSize; // 跳過的數據條數，(分頁的公式).
12.    var priceGt = '',priceLte = '';
13.    let params = {};
14.    if(priceLevel != 'all'){ // 價格區間過濾功能
15.       switch (priceLevel){
16.          case '0':priceGt=0;priceLte =100;break;
17.          case '1':priceGt=100;priceLte =500;break;
18.          case '2':priceGt=500;priceLte =1000;break;
19.          case '3':priceGt=1000;priceLte =5000;break;
20.       }
21.       params = {
22.          salePrice:{
23.             $gt:priceGt,
24.             $lte:priceLte
25.          }
26.       }
27.    }
28.    let goodsModel = Goods.find(params).skip(skip).limit(pageSize); // 先查詢所有，skip(skip)跳過skip條數據，limit(pageSize)一頁多少條數據.即分頁功能實現
29.    goodsModel.sort({'salePrice':sort}); // 對價格排序功能
30.  
31.    goodsModel.exec(function(err, doc){
32.       if(err) {
33.          res.json({
34.             status:'1',
35.             msg:err.message
36.          })
37.       }else{
38.          res.json({
39.             status:'0',
40.             msg:'',
41.             result:{
42.                count:doc.length,
43.                list:doc
44.             }
45.          })
46.       }
47.    })
48.  
49. });