江苏龙网

  1. 主页 > 生活百科 > >

SpringBoot+Vue+ES 实现仿百度全文搜索

SpringBoot

今天要聊的就是「博客管理」中全文搜索的实现 ， 基于 SpringBoot+Vue+ES 实现 ， 先给大家看一下效果：

SpringBoot+Vue+ES 实现仿百度全文搜索

文章插图
 
全文搜索+关键字高亮 ， 是不是和百度的效果差不多 ， 话不多说 ， 直接聊如何实现 。
 
该网站前端是仿一个开源项目 ， 本人主要是做后端 ， 所以本教程涉及前端的部分会直接给代码 ， 不做深入讲解
数据准备 
首先我们的数据是存放在 MySQL 的 ， 建表语句如下 ， 再利用 MyBatis-Plus 实现普通查询 ， 比较简单 ， 也不是本文重点 ， 不做赘述 。
create table code_note ( id bigint not null auto_increment, title varchar(128) not null default '' comment '标题', md_content text comment 'md文本', html_content text comment 'html文本', summary varchar(256) comment '摘要', category varchar(10) comment '分类', type tinyint not null default 0 comment '类型:0-文字;1-视频', create_time datetime not null comment '创建时间', publish_time datetime not null comment '发布时间', status tinyint DEFAULT 0 COMMENT '0-草稿箱;1-已发表;2-已删除', primary key (id) ); INSERT INTO yitiao_admin.code_note (id, title, author, md_content, html_content, summary, category, type, create_time, publish_time, status) VALUES (14, '一条', 'yitiao', 'canal', '
canal
', null, '默认', null, '2023-01-30 10:28:17', '2023-01-30 10:28:17', 1); 复制代码 前端页面
前端是基于 element-ui 来实现的 ， 从文档找了半天 ， 决定用 table 来实现 ， 如果有更好的实现方式可以评论区留言 。
其实就是只有的一列的无边框的表格 ， 表格内又嵌入文本和按钮 ， 再就是一些样式的调整 ， 关键代码如下：
border >
 
margin-top: 5px;font-size: medium" v-html="scope.row.esContent">
{{ scope.row.author }} {{ scope.row.createTime }}
 
复制代码
「查询」和「全文搜索」按钮的切换使用的 v-if="searchShow",向后端发请求的部分如下：
fullSearch() { this.searchShow = true; this.pageShow = false; if (this.search === '' || this.Search === null) { this.search = 'spring' } request.get("/es/note/getByContent/", { params: { // pageNum: this.currentPage, // pageSize: this.pageSize, content: this.search } }).then(res => { console.log(res) this.searchTableData = https://www.isolves.com/it/cxkf/kj/2023-04-17/res.data }) } 复制代码 Docker安装ES
终于要到正题啦 ， 因为ES非常的耗内存 ， 我的服务器剩余内存只有不到2G ， 所以选择用Docker部署单机版的ES 。
sudo docker pull ElasticSearch:7.12.0 ## 创建挂载目录 config、data、plugins ， 开启全部权限 chmod -R 777 /data/opt/es ## 创建配置文件 cd config vim elasticsearch.yml http.host: 0.0.0.0 ## 启动容器 sudo docker run --name elasticsearch -p 9200:9200 -p 9300:9300-e "discovery.type=single-node"-e ES_JAVA_OPTS="-Xms84m -Xmx512m"-v /data/opt/es/config/elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml-v /data/opt/es/data:/usr/share/elasticsearch/data-v /data/opt/es/plugins:/usr/share/elasticsearch/plugins-d elasticsearch:7.12.0 # 查看日志 docker logs elasticsearch 复制代码
测试正常启动页面：http://101.43.138.173:9200/
插件使用
SpringBoot+Vue+ES 实现仿百度全文搜索

文章插图
 
集群黄色解决
SpringBoot+Vue+ES 实现仿百度全文搜索

文章插图
 
我们的elasticsearch是单节点的 ， 只有一个主服务没有从服务 ， 也就是说所以最简单的办法就是在创建索引的时候将备份数改为0 。
如果我们已经创建了索引 ， 那么我们可以直接更改索引的备份数方法举例如下：
## 请求方式为put ## url地址解释：IP地址:端口/索引名称/_settings（_settings 是接口的固定用法） curl -X PUT -H "Content-Type: Application/json" -d '{"number_of_replicas":0}' http://101.43.138.173:9200/Code_note/_settings --user name:password ## 返回 {"acknowledged":true} 复制代码


推荐阅读


上一篇：我们和OpenAI联创聊了聊GPT的当下局限：两年后可能就没了

下一篇：指针与内存对齐到底是什么鬼？