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

菜鸟进阶－－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&
c51b
gt;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;

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