菜鸟进阶－－node+vue实现一个商城Demo(2):多条件模糊搜索＋分页

本文的目的只是纪录一下刚刚完成的个人demo,因为本人水平有限,所以将学习中遇到的坑加以总结，以免日后忘记。如果能能帮到您，不胜荣幸。如有不足，也恳请扶正。

上一章我们启动了项目，从这一章开始我们将逐步了解项目的各个组成部分，本章介绍项目的多条件模糊搜索功能以及分页功能。

效果如下

代码讲解：

前端部分

1.向服务器发送请求，并加载商品列表。
（这里因为要使用同步，vue的方法太麻烦了，偷了个懒用了jquery的ajax）

//加载商品列表
loadList_search: function() {
            $.ajax({
                url: '/goods/index',
                method: 'post',
                data: {
                    pageSize: this.pageSize,//设置一页显示的商品数量
                    page: this.page,//设置第几页，默认为1
                    priceLevel: this.priceALLcheck,//多条件的价格区间
                    searchValue: this.search//搜索值
                },
                async: false,//开启同步
                success: (res) => {
                    if (res.status == 1) {
                        this.pageCount = res.result.count;
                        this.goodList = res.result.list;
                    } else {
                        this.goodList = []
                        this.pageCount = 1
                    }
                }
            })
        },

加载分页插件，插件通过 import ‘@/util/page/index’ 引入

  pagee: function() {
            var _this = this;
            $('.page').createPage(function(n) {
                _this.page = n
                _this.loadList_search();
            }, {
                    pageCount: Math.ceil((_this.pageCount / 4)), //总页码,默认10
                })
        },

最后，通过vue的生命周期mounted() 方法加载：

mounted() {
        this.loadList_search()
        this.pagee()
    },

2.通过v-for 渲染商品列表，从服务器获取的数据放在goodList数组中

<ul>
      <li v-for="item in goodList">
           <div class="pic">
             <a href="#"><img v-bind:src="'static/'+item.productImage" ></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" @click="addList(item)">加入购物车</a>
              </div>
           </div>
      </li>
 </ul>

3.价格区间多条件筛选
方法很简单，通过v-for本地渲染，然后点击区间之后，向服务器传递它的index。

 <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy==true}">
     <dl class="filter-price">
         <dt>Price:</dt>
         <dd>
            <a href="javascript:void(0)"@click="priceALLcheck='all',filterBy=false,setPrice('false')" v-bind:class="{'cur':priceALLcheck=='all'}">All</a>    
         </dd>
         <dd v-for="(price,index) in priceList">
             <a href="javascript:void(0)" @click="priceALLcheck=index,filterBy=false,setPrice(index)" v-bind:class="{'cur':priceALLcheck==index}">{{price.startPrice}} - {{price.endPrice}}</a>
         </dd>
     </dl>
 </div>

4.模糊搜索
这里通过ref=”sea”实现搜索框内容和本地文件的双向绑定。

<span class="input-group-btn">
    <button class="btn btn-default" type="button" @click="search_mode()">Go!</button>
</span>
<input type="text" class="search-product" placeholder="search for..." ref="sea">

逻辑层,

search_mode: function() {
    var _this = this;
    this.search = this.$refs.sea.value;//把绑定值赋予全局变量search
    this.is_serach = true;
    if (this.search) {
        this.loadList_search()
        this.pagee()
    }
    else {
        alert('请输入关键字')
    }
},

后台部分

因为采用mysql，所以我们先封装一个config.js做启动用

module.exports = {
    mysql: {
        host: '127.0.0.1',
        user: 'root',
        password: '',
        database: 'mmall',
        port: 3307
    }
};

接下来就是后台的加载商品列表和搜索功能

/商品指引和搜索
router.post('/index', (req, res, next) => {
    var search = req.body.searchValue;
    let page = parseInt(req.param('page'));
    let pageSize = parseInt(req.param('pageSize'));
    let priceLevel = req.param('priceLevel');
    var minpr = '';
    var maxpr = '';
    let skip = (page - 1) * pageSize;
    if (priceLevel != 'all') {
        console.log(priceLevel);
        switch (priceLevel) {
            case '0': minpr = 0; maxpr = 100; break;
            case '1': minpr = 100; maxpr = 500; break;
            case '2': minpr = 500; maxpr = 1000; break;
            case '3': minpr = 1000; maxpr = 5000; break;
        };

    }
    else {
        minpr = 0; maxpr = 9999999999999;

    }
    pool.getConnection((err, connection) => {//创建连接池
        if (err) {
            console.log(err)
        }
        else {
        //如果连接成功，发送sql请求,先请求出符合搜索条件商品总个数再发出所有商品列表
            connection.query(goodsql.Count, ['%' + search + '%', minpr, maxpr, skip, pageSize], function (err1, result1) {
                connection.query(goodsql.queryByProductName, ['%' + search + '%', minpr, maxpr, skip, pageSize], function (err2, result2) {
                    connection.release();
                    if (err2) {
                        res.json(
                            {
                                status: 0,
                                msg: err2.message
                            }
                        )
                    }
                    else if (result2.length != 0) {
                        res.json({
                            status: 1,
                            result: {
                                count: result1[0].cnt,
                                list: result2
                            }
                        })
                    }
                    else {
                        res.json({
                            status: 2,
                            result2: '你要的不存在'
                        })
                    }

                });
            })

        }

    })
})

上面代码的 goodsql.Countd是封装的sql语言，代码如下:

var goodsQL = {
    // 列表展现用
    queryAll: 'SELECT *,(SELECT COUNT(*) FROM goods) as cnt FROM goods LIMIT ?,?',

    // 客户删除用
    delete: 'DELETE FROM goods WHERE userid = ?',

    // 条件查询用
    Count: 'SELECT (SELECT COUNT(*) FROM goods WHERE productName  LIKE ? AND salePrice >=? AND salePrice <=?  LIMIT ?,?) AS cnt ' ,
    queryByProductName: 'SELECT * FROM goods  WHERE productName LIKE ? AND salePrice >=? AND salePrice <=? LIMIT ?,? ',
};


module.exports = goodsQL;

如此就完成了模糊搜索和分页功能。