全栈项目|小书架|服务器端-NodeJS+Koa2 实现搜索功能

搜索功能会包含：热搜、搜索列表。

热搜功能在电商的搜索中经常看到，热搜数据的来源有两种

用户真实的搜索数据，根据算法进行排序
人为推送的数据

想想微博热搜是可以买的就知道热搜功能多么重要了。
我采用第二种方式简单实现。

第一种方式由于我目前还未实现，没办法介绍。
大伙儿可以参考下面几篇文章介绍热搜实现：

Redis简单案例(一) 网站搜索的热搜词
Redis 与搜索热词推荐
热搜算法是怎样实现的，具体些，求解？

热搜

前端页面效果图如下：

前端页面热搜只显示图书名称。因此表示一本图书只要返回 图书id，图书名称 即可。

为了方便实现，直接在路由中返回了JSON数据，省略了查询数据库的步骤，伪代码如下：

// 获取热搜书籍
router.get('/search/hot', async ctx => {let hotBooks= [{"id":10001,"name":"深入浅出Node.js"},{"id":10003,"name":"解忧杂货店"},{"id":10005,"name":"安徒生童话故事集"}]ctx.body = JSON.stringify(hotBooks)
})

以上就是热搜的实现，在客户端调用：http://192.168.**.***:3000/v1/book/search/hot，即可。

搜索列表

前端页面效果图如下：

前端页面的搜索结果通过卡片样式展示图书信息。
图书信息和首页的图书信息基本一致，书籍的搜索功能就是模糊查询数据库中book表里面的相关书籍。

ps：价格样式是为了测试前端的布局，数据库中没有真实数据。

首先肯定也是定义搜索接口，搜索接口中定义了三个参数，分别是：搜索关键字，搜索页数，每页数量，后两个参数作用是分页返回数据。

router.get('/search', async ctx => {const v =await new SearchValidator().validate(ctx)const books = await Book.getSearchBooks(v.get('query.q'), v.get('query.start'), v.get('query.count'))ctx.body = books
})

可以看到路由中的查询数据库的方法是getSearchBooks，具体实现如下：

static async getSearchBooks(q, start, count) {const books =await Book.findAll({where: {bkname: {[Op.like]: `%${q}%`}},offset: start, limit: count})if (!books) {throw new global.errs.NotFound("没有找到相关数据",100010)}return books}

最后在客户端调用：http://192.168.**.***:3000/v1/book/search/?q=node&start=0&count=20，通过模糊搜索之后有数据则返回搜索数据，没有数据则提示 "没有找到相关数据"

以上就是本次的介绍。

扫码关注公众号，轻撩即可。

全栈项目|小书架|服务器端-NodeJS+Koa2 实现搜索功能相关推荐

全栈项目|小书架|微信小程序-实现搜索功能
效果图上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...
全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果首页功能主要有搜索(下篇文章介绍) 图书列表图书列表分析一波: 列表是水平滑动点击列表会有按压效果:布局整体缩小每个布局的信息从上到下排列分别是:图片.书名.作者.出版社每个布局 ...
全栈项目|小书架|微信小程序-书籍详情功能实现
效果图实现分析从效果图上分析,书籍详情是通过点击首页的item后进入. 进入详情页之后页面顶部显示书籍的相关信息,同时判断用户是否登录,未登录则弹出一个授权登录窗口. 点击登录之后即可加载出用户评 ...
全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能
效果图这一节介绍,登录回调以及喜欢列表的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成 ...
零基础快速开发全栈后台管理系统（Vue3+ElementPlus+Koa2）—项目概述篇（一）
零基础快速开发全栈后台管理系统(Vue3+ElementPlus+Koa2)-项目概述篇(一) 一.项目开发总体框架二.项目开发流程三.项目技术选型
还不会小程序开发？适用于新手、前端、后端、全栈的小程序开发保姆级教程！
2017年,那个男人微信之父"龙哥",在公开课上提出"小程序".那时大家都还在享受移动互联网所带来的便捷体验,对于微信这个庞然大物所倡导的新物种显然是有点不知所 ...
面试超尴尬瞬间：我从没参与过一个全栈项目
写简历是找工作的第一步,第二步就是面试,那么简历就是一块敲开面试大门的敲门砖,所以写简历的根本目的就是要体现出你的专业水平和项目经验,那么什么样的简历能够快速的抓住HR的眼球呢?作为前端工程师的简历来 ...
王者荣耀全栈项目部署到阿里云服务器笔记
王者荣耀全栈项目部署到阿里云服务器笔记原创Charles_GX 最后发布于2020-03-27 01:27:00 阅读数 177 收藏展开王者荣耀全栈项目部署到阿里云服务器笔记学习的项目来自 ...
vue商城项目源码_CMS全栈项目之Vue和React篇（下）（含源码）
今天给大家介绍的主要是我们全栈CMS系统的未讲解完的后台部分和前台部分,如果对项目背景和技术栈不太了解,可以查看我之前的文章基于nodeJS从0到1实现一个CMS全栈项目(上) 基于nodeJS从0 ...

全栈项目|小书架|服务器端-NodeJS+Koa2 实现搜索功能

热搜

搜索列表

全栈项目|小书架|服务器端-NodeJS+Koa2 实现搜索功能相关推荐

最新文章

热门文章