实现首页搜索功能

思路

  1. 前端header组件中增加搜索框,给button绑定点击事件,点击搜索按钮时发送ajax请求将input框中内容传给后端
  2. 后端service层创建函数模糊查询,controller层,路由层…
  3. 前端新增search.ejs用于显示查询结果,view-blog.js下新建页面路由,注册路由

前端

  1. header.ejs中,增加搜索框
    header.ejs
  2. 给button 绑定点击事件,点击搜索按钮时发送ajax请求(/api/search)将input框中内容传给后端页面路由:
    header.ejs
  3. 新建search.ejs用于显示查询结果:
    search.ejs
  4. widgets下新建search-user.ejs用于显示用户查询结果:
    search-user.ejs

页面路由

  1. 【service层】创建2个函数=》getBlogList函数根据searchContent模糊的连表分页查询blogs表和users表;getUserList函数根据searchContent模糊查询users表中userName: service-blog.js和user.js:
    service-blog.jsservice-user.js
  2. 【controller层】创建getSearchBlogList, getSearchUserList函数=》调用service层getBlogList,getUserList函数进行2个模糊查询,根据返回的blogId分页查询blogs表,根据返回的userName查询users表,将2个数组以及查询到的总用户count返回给路由层: controller下新建blog-search.js
    blog-search.js
  3. 【路由层】调用controller层getSearchBlogList, getSearchUserList函数=》将blogData和userData返回给前端的页面路由: view-blog.js下新建页面路由/search,接受动态参数searchContent(不需要登录验证):
    view-blog.js

实现加载更多

  1. 【前端】 search.ejs中调用load-more组件时多传递一个动态参数searchContent
    image.png
  2. 【路由层】 routes-api下新建search.js
    routes-api-search.js
  3. 【app.js注册路由】

效果

  1. 搜索“z”:
    效果
  2. 搜索“加油”:
    效果
,