思路
- 前端header组件中增加搜索框,给button绑定点击事件,点击搜索按钮时发送ajax请求将input框中内容传给后端
- 后端service层创建函数模糊查询,controller层,路由层…
- 前端新增search.ejs用于显示查询结果,view-blog.js下新建页面路由,注册路由
前端
- header.ejs中,增加搜索框:
- 给button 绑定点击事件,点击搜索按钮时发送ajax请求(/api/search)将input框中内容传给后端页面路由:
- 新建search.ejs用于显示查询结果:
- widgets下新建search-user.ejs用于显示用户查询结果:
页面路由
- 【service层】创建2个函数=》getBlogList函数根据searchContent模糊的连表分页查询blogs表和users表;getUserList函数根据searchContent模糊查询users表中userName: service-blog.js和user.js:
- 【controller层】创建getSearchBlogList, getSearchUserList函数=》调用service层getBlogList,getUserList函数进行2个模糊查询,根据返回的blogId分页查询blogs表,根据返回的userName查询users表,将2个数组以及查询到的总用户count返回给路由层: controller下新建blog-search.js:
- 【路由层】调用controller层getSearchBlogList, getSearchUserList函数=》将blogData和userData返回给前端的页面路由: view-blog.js下新建页面路由/search,接受动态参数searchContent(不需要登录验证):
实现加载更多
- 【前端】 search.ejs中调用load-more组件时多传递一个动态参数searchContent:
- 【路由层】 routes-api下新建search.js:
- 【app.js注册路由】
效果
- 搜索“z”:
- 搜索“加油”: