商品列表分页和排序功能实现

系统管理员 2022-04-14 04:57 526阅读 0赞

本节我们实现商品列表的升降序、价格的过滤、商品列表的分页和loading功能

实现排序

既然要实现排序，必然要获取一个排序的参数，通过req.param()来获取前端传过来的参数

let sort = req.param("sort");

let = params = \{\};

let goodsModel = Goods.find(params);

将前端升序或降序的参数传递过来

声明对哪个字段进行排序 ，这里如salePrice金额 sort 1 为升序,-1 为降序

goodsModel.sort(\{'salePrice':sort\});

routes/goods.js

我们访问测试一下

升序 [http://127.0.0.1:3000/goods?page=1&pageSize=8&sort=1][http_127.0.0.1_3000_goods_page_1_pageSize_8_sort_1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

降序

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1][]

查询第二页数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2][]

至此后台接口已经实现了分页和价格排序功能

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

网页实现升序降序逻辑

分页及价格过滤

vue滚动加载 分页插件  [https://www.npmjs.com/package/vue-infinite-scroll][https_www.npmjs.com_package_vue-infinite-scroll]

安装分页插件 npm install vue-infinite-scroll --save

v-infinite-scroll="loadMore"   表示滚动的时候加载loadMore方法

infinite-scroll-disabled="busy"  是否需要禁用此方法,如果busy是true的话,那么默认滚动就会失效,如果是flase就可以滚动

infinite-scroll-distance="10"  鼠标滚动的距离离下面有多远，来触发我们的加载

安装完在vue的main.js里面使用一下

import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3][]

>>>>>

价格过滤功能实现

传一个priceLevel:this.priceChecked, // 筛选选择价格区间参数

node后端代码 routes/goods.js

vue前端代码

<template>
        <div>
          <nav-header></nav-header>
          <nav-bread>
            <span>Goods</span>
          </nav-bread>
          <div class="accessory-result-page accessory-page">
            <div class="container">
              <div class="filter-nav">
                <span class="sortby">Sort by:</span>
                <a href="javascript:void(0)" class="default cur">Default</a>
                <a @click="showFilterPop" href="javascript:void(0)" class="price">
                  Price 
                  <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg>
                </a>
                <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
              </div>
              <div class="accessory-result">
                
                <div class="filter stopPop" id="filter">
                  <dl class="filter-price">
                    <dt>Price:</dt>
                    <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceChecked=='all'}" @click="priceChecked='all'">All</a></dd>
                    <dd v-for="(price,index) in priceFilter" :key="index">
                      <a href="javascript:void(0)" @click="setPriceFilter(index)" v-bind:class="{'cur':priceChecked==index}">{
       { price.startPrice }}-{
       { price.endPrice }}</a>
                    </dd>
                  </dl>
                </div>
    
                
                <div class="accessory-list-wrap">
                  <div class="accessory-list col-4">
                    <ul>
                      <li v-for="(item,index) in goodsList" :key="index">
                        <div class="pic">
                          <a href="#"><img v-lazy="'/static/'+item.productImage" alt=""></a>
                        </div>
                        <div class="main">
                          <div class="name">{
       {item.productName}}</div>
                          <div class="price">{
       {item.salePrice}}</div>
                          <div class="btn-area">
                            <a href="javascript:;" class="btn btn--m">加入购物车</a>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
                        <img src="./../assets/loading-spinning-bubbles.svg" alt="" v-show="loading">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <nav-footer></nav-footer>
       </div>
    </template>
    <script>
        import './../assets/css/base.css'
        import './../assets/css/product.css'
        import './../assets/css/checkout.css'
        import './../assets/css/login.css'
        import NavHeader from '@/components/NavHeader.vue'
        import NavFooter from '@/components/NavFooter.vue'
        import NavBread from '@/components/NavBread.vue'
        import axios from 'axios'
        
        export default {
            data () {
                return {
                    goodsList: [],
                    sortFlag: true, // 排序字段
                    page:1, // 默认页
                    pageSize: 8, // 默认一页显示8条数据
                    busy:true,
                    loading:true,
                    priceFilter:[
                      {
                          startPrice:'0.00',
                          endPrice:'100.00'
                      },
                      {
                        startPrice:'100.00',
                        endPrice:'500.00'
                      },
                      {
                        startPrice:'500.00',
                        endPrice:'1000.00'
                      },
                      {
                        startPrice:'1000.00',
                        endPrice:'5000.00'
                      }
                    ],
                    priceChecked:'all'
                }
            },
            components: {
              NavHeader,
              NavFooter,
              NavBread
            },
            mounted () {
              this.getGoodList();
            },
            methods: {
              getGoodList (flag) {
                var param = { // 分页及排序参数
                  page:this.page,
                  pageSize: this.pageSize,
                  sort: this.sortFlag?1:-1,  // 升序是1 降序是-1
                  priceLevel: this.priceChecked
                }
                this.loading = true;
                axios.get("/goods", {params:param}).then((result)=>{
                  let res = result.data;
                  this.loading = false;
                  if(res.status=="0"){
                    if(flag){ // 如果是分页需要累计
                         // 将数组进行串联起来 concat表示将数组连接起来
                      this.goodsList = this.goodsList.concat(res.result.list);
                      if(res.result.count == 0){
                        this.busy = true;
                      } else {
                        this.busy = false;
                      }
                    } else { // 普通的请求
                      this.goodsList = res.result.list; 
                      this.busy = false;
                    }
                  } else {
                    this.goodsList = [];
                  }
                });
              },
              showFilterPop() { // 排序
                    // this.filterBy = true;
                    // this.overLayFlag = true;
                    this.sortFlag = ! this.sortFlag; // 点击后升序降序切换
                    this.page = 1; // 点击升降序后默认从第一页显示
                    this.getGoodList(); // 重新加载一次
              },
              loadMore () {
                  this.busy = true; // 在请求成功之前禁止再滚动加载
                  // 鼠标滚动实在太快了，滚动一秒钟可能有上千个请求，这样对服务器压力太大 因此必须要通过setTimeout来控制
                  // 只有第一个请求结束以后才能请求第二个
                  setTimeout(() => {
                      this.page++; // 滚动之后要给page++
                      this.getGoodList(true);
                  }, 500);
              },
              setPriceFilter(index) { // 价格过滤
                this.priceChecked = index;
                this.page = 1; // 价格过滤后分页从第一页重新开始
                this.getGoodList();
              }
            }
        }
    </script>

[http_127.0.0.1_3000_goods_page_1_pageSize_8_sort_1]: http://127.0.0.1:3000/goods?page=1&pageSize=8&sort=1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20220414/a16a03bdf832476d9393b5ea4fa5a6ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1]: /images/20220414/91179e9c790040a0806136794a6287af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2]: /images/20220414/0a2082ec239e4fd5b0c55614a6d5e493.png
[https_www.npmjs.com_package_vue-infinite-scroll]: https://www.npmjs.com/package/vue-infinite-scroll
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3]: /images/20220414/5632f8b5a66c444d8b68d64d09ec7a90.png