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