效果如下:


搜索时列表动态变化,在我专栏下另一篇文章写了,这篇文章不再讲述,这篇文章只讲述如何从后端(打开vue_api_server这个文件夹,而不是vue_shop)修改代码来实现这个功能

我的思路:

1.我在订单的搜索栏中和用户管理模块的搜索栏中进行搜索,发现了订单搜索的sql语句和用户管理的sql语句略微不同。

2.我再去搜索一下商品,发现商品搜索的sql语句和订单的是类似的,都有引号括起来:

3.我又发现了Dao文件夹下面正好没有订单和商品的文件:

4.因此我觉得他们应该放在同一个文件夹下面,并且二者的搜索代码应该是类似的,只是订单模块可能少了代码,导致没办法只在前端调用接口就能实现搜索。

于是,我去找service文件夹,对比了OrderService.jsGoodService.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中给按钮添加点击事件:

10.2 黑马Vue电商后台管理系统 完善订单模块--搜索订单(修改后端)相关推荐

  1. 10.1 黑马Vue电商后台管理系统之完善订单管理模块--加入修改订单模块

    效果如下: 实现如下: 1.我仍然保留了添加地址这一个对话框,但只是绑定在另一个按钮上面,而点击左侧第一个按钮就会跳转到"修改订单"模块 <template v-slot=& ...

  2. 9.1黑马Vue电商后台管理系统商品管理模块完善:编辑商品的功能

    在原视频中,老师跳过了这个功能,我觉得自己去实现也可以锻炼自己,于是自己补充了编辑功能 同用户管理,权限管理等之前各个模块的编辑功能不同,因为商品具有很多可编辑的选项,所以选择像添加商品一样,单独放在 ...

  3. Vue电商后台管理系统(1)

    Vue电商后台管理系统(1) 登录 在components文件夹下创建登录组件,Login.vue,并快速生成template.script和style骨架. 配置路由,进入router文件夹,导入L ...

  4. Vue项目实战之电商后台管理系统(二) 主页模块

    前言 目录 前言 一.主页布局 1.1 整体布局 1.2 头部区域布局 1.3 左侧菜单布局 1.3.1 静态布局 1.3.2 通过axios请求拦截器来进行权限验证 1.3.3 通过axios获取左 ...

  5. Vue电商后台管理系统项目开发实战(一)

    前言 当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...

  6. vue电商后台管理系统--订单管理篇

    渲染订单table表格 <!-- 订单列表数据 --><el-table :data="orderList" border stripe><el-ta ...

  7. 关于黑马-Vue电商后台项目管理(2)

    2.2 后台项目的环境安装配置 安装MySQL数据库 关于数据库文件,黑马教程有提供一个叫phpstudy的软件,可以按照视频流程进行配置,但是之后可能会经常出现在该软件无法启动mysql.因此我们这 ...

  8. 10.4 Vue电商后台管理 完善订单模块--用Tab切换对订单进行分类

    1. 效果如下: 2. 实现代码 四个el-tab-pane中,< el-table >是一样的: <el-tab-pane name="all" label=& ...

  9. Vue全家桶 - 电商后台管理系统项目开发实录(详)

    目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤 码云相关操作 2. ...

最新文章

  1. A标签中通过href和onclick传递的this对象实现思路
  2. 神经网络与机器学习 笔记—LMS(最小均方算法)和学习率退火
  3. CTFshow 爆破 web27
  4. arcgis9.2的安装方法
  5. cfd计算linux windows,CFD计算分析时常用的数值模拟方法 | 坐倚北风
  6. SQL2005备份集中的数据库备份与现有的数据库不同,错误号码:3154,解决方法...
  7. PDH光端机的作用及其特点
  8. 开放开源 | DeepKE:基于深度学习的开源中文关系抽取工具
  9. python模拟猫狗大战_tensorflow实现猫狗大战(分类算法)-阿里云开发者社区
  10. ajax定时器怎么写,js定时器怎么写?就是在特定时间执行某段程序
  11. mysql如何给数据增加tab_怎么往mysql表里添加数据
  12. 一步步实现SDDC-vSphere Auto Deploy的妙用
  13. 从rpm包中提取文件的命令
  14. Test.ai完成1100万美元A轮融资,Google人工智能基金领投
  15. python中面向对象的ui_Python面向对象和图形用户界面(一)---- 面向对象
  16. 苍穹影视双端千月app源码,全新后台
  17. 字符串匹配算法:从这段代码判断你是不是在大气层
  18. 如何更换我的密钥对?
  19. 国产操作系统突破重围,中兴新支点系统宣布:30万+,并发布服务器模式
  20. adobe captivate 5.5 中文教程

热门文章

  1. 湿热气Daikin mmbbPsychrometrics Diagram 3.20 1CD
  2. 你现有的岗位工作多少年,薪资能赶上程序员?
  3. linux去掉文件空行,linux下删除文本的空行
  4. 跟妹子玩游戏结果一下日了好多天
  5. 内部存储与外部存储的区别
  6. 关于蓝桥杯的乱七八糟的话(经验、心得、建议、技巧)
  7. 微信开放平台之第三方平台开发,从哪里入手?
  8. install4j打包jar
  9. 山科大oj---体重正常吗?
  10. 互联网大佬纷纷宣布卸任CEO,为什么?