效果如下:
搜索时列表动态变化,在我专栏下另一篇文章写了,这篇文章不再讲述,这篇文章只讲述如何从后端(打开vue_api_server这个文件夹,而不是vue_shop)修改代码来实现这个功能
我的思路:
1.我在订单的搜索栏中和用户管理模块的搜索栏中进行搜索,发现了订单搜索的sql语句和用户管理的sql语句略微不同。
2.我再去搜索一下商品,发现商品搜索的sql语句和订单的是类似的,都有引号括起来:
3.我又发现了Dao文件夹下面正好没有订单和商品的文件:
4.因此我觉得他们应该放在同一个文件夹下面,并且二者的搜索代码应该是类似的,只是订单模块可能少了代码,导致没办法只在前端调用接口就能实现搜索。
于是,我去找service
文件夹,对比了OrderService.js
和GoodService.js
,发现OrderService.js真的少了一句代码,于是加上了那句代码:
即,在module.exports.getAllOrders
下加入下面这句代码:
if(params.query) {
conditions["columns"]["order_number"] = orm.like("%" + params.query + "%");
}
仅仅加入这一句代码,其实就完善了前端的getOrderList()这个函数啦!
module.exports.getAllOrders = function(params,cb){
var conditions = {};
if(!params.pagenum || params.pagenum <= 0) return cb("pagenum 参数错误");
if(!params.pagesize || params.pagesize <= 0) return cb("pagesize 参数错误");
conditions["columns"] = {};
if(params.query) {
conditions["columns"]["order_number"] = orm.like("%" + params.query + "%");
}
if(params.user_id) {
conditions["columns"]["user_id"] = params.user_id;
}
if(params.pay_status) {
conditions["columns"]["pay_status"] = params.pay_status;
}
if(params.is_send) {
if(params.is_send == 1) {
conditions["columns"]["is_send"] = '是';
} else {
conditions["columns"]["is_send"] = '否';
}
}
之后再找到 routes/orders.js
文件,修改订单列表,加入下面这句代码:
// 订单列表
router.get("/",
// 参数验证
function(req,res,next) {
// 参数验证
if(!req.query.pagenum || req.query.pagenum <= 0) return res.sendResult(null,400,"pagenum 参数错误");
if(!req.query.pagesize || req.query.pagesize <= 0) return res.sendResult(null,400,"pagesize 参数错误");
next();
},
// 业务逻辑
function(req,res,next) {
var conditions = {
"pagenum" : req.query.pagenum,
"pagesize" : req.query.pagesize
};
if(req.query.query) {
conditions["query"] = req.query.query;
}
if(req.query.user_id) {
conditions["user_id"] = req.query.user_id;
}
if(req.query.pay_status) {
conditions["pay_status"] = req.query.pay_status;
}
if(req.query.is_send) {
conditions["is_send"] = req.query.is_send;
}
if(req.query.order_fapiao_title) {
conditions["order_fapiao_title"] = req.query.order_fapiao_title;
}
if(req.query.order_fapiao_company) {
conditions["order_fapiao_company"] = req.query.order_fapiao_company;
}
if(req.query.order_fapiao_content) {
conditions["order_fapiao_content"] = req.query.order_fapiao_content;
}
if(req.query.consignee_addr) {
conditions["consignee_addr"] = req.query.consignee_addr;
}
orderServ.getAllOrders(
conditions,
function(err,result){
if(err) return res.sendResult(null,400,err);
res.sendResult(result,200,"获取成功");
}
)(req,res,next);
}
);
当然不要忘记在前端的Order.vue
中给按钮添加点击事件: