SpringBoot+Vue+ES 完成仿百度全文搜刮_springboard_奇闻趣事网
主页 > 奇闻趣事 >

SpringBoot+Vue+ES 完成仿百度全文搜刮_springboard

奇闻趣事 2023-05-04 12:31www.bnfh.cn奇闻趣事

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 '' ment '标题',
    md_content   text ment 'md文本',
    html_content text ment 'html文本',
    summary      varchar(256) ment '摘要',
    category     varchar(10) ment '分类',
    type         tinyint      not null default 0 ment '类型:0-文字;1-视频',
    create_time  datetime     not null ment '创建时间',
    publish_time datetime     not null ment '发布时间',
    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 来实现，如果有更好的实现方式可以评论区留言。

其实就是只有的一列的无边框的表格，表格内又嵌入文本和按钮，再就是一些样式的调整，关键代码如下

    
      
        
      
    

复制代码

「查询」和「全文搜索」按钮的切换使用的 v-if="searchSho",向后端发请求的部分如下

fullSearch() {
      this.searchSho = true;
      this.pageSho = 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 = 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/

插件使用

集群黄色解决

我们的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:passord

## 返回 {"acknoledged":true}
复制代码

刷新插件，集群变成绿色。

设置用户名密码

# vim elasticsearch.yml 

http.cors.enabled: true
http.cors.allo-origin: ""
http.cors.allo-headers: Authorization
xpack.security.enabled: true
xpack.security.transport.ssl.enabled: true
复制代码
docker exec -it fa41ca453d06 /bin/bash
./bin/elasticsearch-setup-passords interactive
## 输入密码
复制代码

设置成功后，用户名为elastic，密码为设置的值，es里多了一个索引.security-7

安装分词器

下载，版本一定要和es的对应，安装时注意，并不是一解压就好了。

查看插件的名字，解压后打开plugin-descriptor.properties文件，查看插件的名字，然后在挂载的plugins文件夹下新建文件夹，以插件的名字命名。

再将解压出来文件全部移动到插件名文件夹下才可以。

重启ES，查看日志

docker restart fa41ca453d06
docker logs fa41ca453d06
复制代码

至此，ES服务端部署完成，接下来就是基于SpringBoot操作ES。

Java客户端

spring-boot-starter-data-elasticsearch是比较好用的一个elasticsearch客户端，它内部会引入spring-data-elasticsearch。

版本对应关系

如果使用spring-boot-starter-data-elasticsearch，需要调整spring-boot的版本才起作用。

有下边这几种方法操作ElasticSearch

  • ElasticsearchRepository（传统的方法，可以使用）
  • ElasticsearchRestTemplate（推荐使用。基于RestHighLevelClient）
  • ElasticsearchTemplate（ES7中废弃，不建议使用。基于TransportClient）
  • RestHighLevelClient（推荐度低于ElasticsearchRestTemplate，因为API不够高级）
  • TransportClient（ES7中废弃，不建议使用）

案例代码

配置


 .springframeork.boot
 spring-boot-starter-data-elasticsearch
 2.7.7

复制代码
spring: 
  elasticsearch:
    rest:
      uris: 101.43.138.173:9200         # 多个用逗号隔开
#      username:                          ---用户名
#      passord:                          ---密码
      connection-timeout: 1000           # 连接超时时间
      read-timeout: 1000                 # 读取超时时间
复制代码

索引类

// 省略部分字段
@Data
@Document(indexName = "code_note")
@Setting(replicas = 0) // 副本为0，单机模式
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class EsCodeNote {
    @Id
    private Long id;
    /
      md文本
     /
    @Field(type = FieldType.Text, analyzer = "ik_max_ord")
    private String mdContent;
    /
      分类
     /
    @Field(type = FieldType.Keyord)
    private String category;
    /
      创建时间
     /
    @Field(type = FieldType.Date, format = DateFormat.custom,
            pattern = "yyyy-MM-dd HH:mm:ss||yyyy-MM-dd||epoch_millis")
    private Date createTime;
}
复制代码

mapper类

@Repository
public interface CodeNoteRepository extends ElasticsearchRepository {
}
复制代码

service层

@Service
@Slf4j
@RequiredArgsConstructor
public class CodeNoteService {
    private final ElasticsearchRestTemplate esRestTemplate;

    private final CodeNoteRepository codeNoteRepository;

    private final CodeNoteMapper noteMapper;
  public Object saveNoteToEs(EsCodeNote codeNote){
        return codeNoteRepository.save(codeNote);
    }

    public void saveNotesToEs(List codeNotes){
        codeNoteRepository.saveAll(codeNotes);
    }

    public List getFromEsByContent(String content) {
        //高亮
        String preTag = "";
        String postTag = "";
        BoolQueryBuilder boolQueryBuilder = ne BoolQueryBuilder().should(ne MatchQueryBuilder("mdContent", content));
        Query query = ne NativeSearchQueryBuilder()
                .ithQuery(boolQueryBuilder)
                .ithHighlightFields(ne HighlightBuilder.Field("mdContent").preTags(preTag).postTags(postTag)).build();
//        Query query1 = ne NativeSearchQueryBuilder()
//                .ithQuery(QueryBuilders.multiMatchQuery(content,"content","content.inner")).build();
//                .ithQuery(QueryBuilders.queryStringQuery(content)).build();

        SearchHits search = esRestTemplate.search(query, EsCodeNote.class);
        return search.stream().map(SearchHit::getContent).collect(Collectors.toList());
    }

    public void init() {
        List codeNotes = noteMapper.selectList(Wrappers.lambdaQuery(CodeNote.class));
        List esCodeNotes = BeanUtil.copyToList(codeNotes, EsCodeNote.class);
        this.saveNotesToEs(esCodeNotes);
    }
}
复制代码

controller

@RestController
@RequestMapping("/es")
@Slf4j
@RequiredArgsConstructor
public class EsRestController {

    private final CodeNoteService noteService;

    @PostMapping("/init")
    public Result createIndex() {
        noteService.init();
        return  Result.suess("init all notes suess");
    }

    @GetMapping("/note/getByContent")
    public Result> getByContent(@RequestParam("content")String  content) {
        return Result.suess(noteService.getFromEsByContent(content));
    }
}
复制代码
测试
先初始化全部数据
根据mdContent分词查询
至此后端的高亮查询已经实现，如果与前端结合，还需要对查询结果做进一步封装和处理。
前后端联调
后端构建返回VO
public class EsCodeNoteRes {
    private Long id;
    /
      题目
     /
    private String esTitle;
    private String author;
    /
      md文本
     /
    private String esContent;
    /
      html文本
     /
    private String htmlContent;
    // 省略部分
    /
      发布时间
     /
    @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
    private Date publishTime;
}
复制代码
对返回的结果封装
SearchHits searchHits = esRestTemplate.search(query, EsCodeNote.class);
        return searchHits.stream().map(search -> {
            EsCodeNote esCodeNote = search.getContent();

            search.getHighlightFields().forEach((k, v) -> {
                log.info("highlight key is [{}],content is [{}]", k, v.get(0));
                // 分别处理标题和正文
                if (k.equals("title")) {
                    esCodeNote.setTitle(v.get(0));
                }
                if (k.equals("mdContent")) {
                    esCodeNote.setMdContent(v.get(0));
                }
            });
            // 如果正文里没有关键字，取前100字符
            if (!esCodeNote.getMdContent().contains(postTag)){
                esCodeNote.setMdContent(esCodeNote.getMdContent().substring(0,100));
            }
            return EsCodeNoteRes.builder()
                    .id(esCodeNote.getId())
                    .esTitle(esCodeNote.getTitle())
                    .author(esCodeNote.getAuthor())
                    .esContent(esCodeNote.getMdContent())
                    .htmlContent(esCodeNote.getHtmlContent())
                    .summary(esCodeNote.getSummary())
                    .category(esCodeNote.getCategory())
                    .createTime(esCodeNote.getCreateTime())
                    .publishTime(esCodeNote.getPublishTime())
                    .build();
        }).collect(Collectors.toList());
复制代码
结果展示
道阻且长，行则将至。2023，扬帆起航。

原文链接http://juejin./post/7194734486327099429

 
        
 上一篇：微疑回应329妨碍变乱 
          下一篇：专管Chatgpt的执法来了，跟每小我私家都有关_专管  

        

          
天下奇闻趣事

          
        

               
      
    
    
  





  
Copyright © 2016-2025  www.bnfh.cn  怪异网 版权所有 Power by