我们可以看到在首页和商品详情页,都有搜索框提供给用户搜索商品,一般首页的搜索框用于搜索全网的商品,列表框用于搜索当前商品类型的商品,这里我们由于数据较少,就在列表页面实现全网搜索,如果希望在指定的类型数据里搜索,只需要在回传数据库数据的时候做一下过滤即可,好了,现在就让我们来看看搜索框的奥秘吧
3.jpg
效果图.gif
0.企业开发
1.企业开发中是通过Ajax动态监视搜索框的数据变化,这里是混合开发,所以通过提交按钮,得到搜索框的内容,至于Ajax,我在这里留一个猪脚
1.新知识点
beego高级查询:
https://beego.me/docs/mvc/model/query.md#contains
image.png
2.逻辑注意点
1.如果是搜索某一类商品,不是全局搜索,在获取所需要的数据的时候,要关联查询商品类型
2.如果将搜索的控制器和显示控制器分开,会造成的问题就是分页显示的问题,因为搜索的控制器如果要分页显示,要添加大量重复代码,如果不分页显示,要单独创建一个搜索界面,显然不符合大家的搜索习惯,所以这里搜索控制器和显示控制器共用一个,根据判断搜索框是否有内容,修改返回的商品数据
3.回传数据体验更好
image.png
image.png
一.页面搜索跳转
image.png
二.路由控制
image.png
三.商品搜索数据交互
1.获取用户输入内容
2.查询符合条件的商品
3.回传符合条件的数据
image.png
四.商品搜索控制方法优化
如果按照前面三部,会出现错误,因为没有页面的分页数据交互
image.png
image.png
只需要在获取数据的时候添加一个判断条件即可
