Vue3+SpringBoot+Elasticsearch+ik分词实现分词搜索功能

我是真的c的

已于 2024-12-22 19:54:36 修改

阅读量1.4k

点赞数 34

CC 4.0 BY-SA版权

分类专栏：项目实战文章标签： spring boot java 前端后端 elasticsearch vue.js typescript

于 2024-12-20 20:20:30 首次发布

本文链接：https://blog.youkuaiyun.com/qq_17756429/article/details/144613324

系列文章目录

🥥Vue3+SpringBoot+Elasticsearch+ik分词实现分词搜索功能
 🍉Vue3+Ts+SpringBoot+Redis实现发送QQ邮箱注册功能
 🍎Vue3+SpringBoot+MySql使用Dplay.js实现弹幕功能

前言

在做期末大作业项目的过程中，因为我做的是视频网站所以是少不了搜索视频的功能的，但是简单的模糊查询感觉不够亮点，所以我使用了Elasticsearch搜索和数据分析引擎去实现复杂的搜索功能，并且记录我的项目开发过程以及分享给大家。附上官网链接：https://www.elastic.co/cn/elasticsearch
Elasticsearch 是一个开源的分布式 RESTful 搜索和分析引擎，几乎实时搜索。

这里附上效果图😁

一、下载Elasticsearch

我使用的Elasticsearch版本是：7.17.0

1.所有版本下载地址

Elasticsearch所有版本下载地址：>所有版本下载地址<

2.版本7.17.0下载地址

Elasticsearch7.17.0下载地址：>7.17.0下载地址<

二、下载Kibana

为了方便使用Elasticsearch我们可以下载他的可视化平台kibana。
注意：版本需要和Elasticsearch下载的版本一致
我使用的Kibana版本是：7.17.0

1.所有版本下载地址

Kibana所有版本下载地址：>所有版本下载地址<

2.版本7.17.0下载地址

Kibana7.17.0下载地址：>7.17.0下载地址<

三、安装Elasticsearch和Kibana

1.解压Elasticsearch

下载好之后，分别解压到建议是D盘，如图所示：
解压目录

2.运行Elasticsearch

进入到文件里，打开bin目录，双击启动Elasticsearch，如图所示：

3.访问Elasticsearch

运行完之后，浏览器输入http://localhost:9200/如果返回了以下格式的数据，说明Elasticsearch启动完成，如图所示：

4.Kibana同样操作

解压完成之后，进入bin目录打开kibana.bat启动，运行完成之后浏览器输入http://localhost:5601/app/dev_tools#/console，访问成功就可以在控制台左边写我们的DSL了，点击右边的运行按钮即可直接执行查询语句，如图所示：

四、下载ik分词插件

分词就是把一段中文或者别的划分成一个个的关键字，我们在搜索时会把自己的信息进行分词，会把数据库中或者索引库中的数据进行分词，然后进行一个匹配的操作，默认的中文分词器是将每一个字看成一个词，比如“我爱中国”会被分成“我”、“爱”、“中”、“国”，这显然是不符合要求的，所以我们需要安装中文分词器IK来解决这个问题！
IK分词器的分词算法有：
•ik__smart 最少切分
•ik_max_word 最细粒度划分
注意：版本需要和Elasticsearch下载的版本一致
我使用的ik分词插件版本是：7.17.0

1.所有版本下载地址

ik分词插件所有版本下载地址：>所有版本下载地址<

2.版本7.17.0下载地址

ik分词插件7.17.0下载地址：>7.17.0下载地址<

3.解压ik分词插件

需要把下载完成的压缩包解压到Elasticsearch目录下的plugins目录下的ik里面，解压完成之后，需要重新启动Elasticsearch，如图所示：

4.查看ik分词插件

然后我们可以在Kibana控制台里面输入GET /_cat/plugins?v查询所有插件，查看是否安装成功，如果显示了插件则安装成功，如图所示：

五、功能实现

1.SpringBoot导入pom依赖

1.先引入spring boot pom.xml依赖
注意：
Elasticsearch 7.x：推荐使用 Spring Data Elasticsearch 4.4.x 或 4.3.x，这些版本都与 Spring Boot 2.6.x 兼容。
Elasticsearch 8.x：推荐使用 Spring Data Elasticsearch 5.x，与Spring Boot 2.7.x 或更高版本兼容。
我的spring boot版本为：2.6.6

<!--elasticsearch-->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-elasticsearch</artifactId>
	<version>2.6.6</version>  <!-- 根据你的 Spring Boot 版本来选择 -->
</dependency>
<dependency>
	<groupId>org.springframework.data</groupId>
	<artifactId>spring-data-elasticsearch</artifactId>
	<version>4.4.6</version> <!-- 与 Spring Boot 2.6.x 兼容的版本 -->
</dependency>

2.配置application.yml文件

# ElasticSearch 设置
elasticsearch:
  # 设置 Elasticsearch 集群的名称
  cluster-name: my-elasticsearch-cluster
  # 设置 Elasticsearch 节点的地址，通常是主节点的 IP 地址和端口
  cluster-nodes: 127.0.0.1:9200
  # 启用检查机制，确保 Elasticsearch 服务可用
  check-enabled: true 
  # Elasticsearch 认证用户名，默认用户名为 elastic
  username: elastic
  # Elasticsearch 认证密码
  password: rqMnjy6CT+x2CUqSrXnl

3.前端示例代码

• 搜索页面示例代码

关键字内容高亮是通过正则表达式匹配实现的

<template>
<!-- 这里只是一个视频卡片的代码 -->
<div class="list">
    <div class="video-list" v-loading="loadingVideoList">
        <div class="item" v-for="item in searchResults">
            <div class="video-card">
                <div class="video-card-wrap">
                    <router-link :to="'/Video?id=' + item.id">
                        <div class="image">
                            <div class="image-warp">
                                <div class="cover">
                                    <img class="img" :src="item.coverUrl" alt="">
                                </div>
                            </div>
                            <div class="mask">
                                <div class="stats">
                                    <div class="wrap">
                                        <div class="left">
                                            <span class="item">
                                                <img class="icon" src="/src/assets/searchMain/play.svg" alt="">
                                                <span class="text">{
   
   {
   
    item.views
                                                                                    }}</span>
                                            </span>
                                            <span class="item">
                                                <img class="icon" src="/src/assets/searchMain/danmu.svg" alt="">
                                                <span class="text">{
   
   {
   
    item.danmus
                                                                                    }}</span>
                                            </span>
                                        </div>
                                        <span class="duration">
                                            07:18:03
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </router-link>
                    <div class="info">
                        <div class="wrap">
                            <router-link :to="'/Video?id=' + item.id">
                                <h3 :title="item.title" class="title">
                                    <!-- 使用高亮后的描述 -->
                                    <span v-html="highlightedDescription(item.title)"></span>
                                </h3>
                            </router-link>
                            <p class="bottom">
                                <router-link class="owner" to="/">
                                    <img class="icon" src="/src/assets/searchMain/owner.svg" alt="">
                                    <span class="author">{
   
   {
   
    item.nikename }}</span>
                                    <span class="date"> · {
   
   {
   
    item.createTime }}</span>
                                </router-link>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import {
   
    ref, reactive, onMounted } from 'vue'
import {
   
    ElMessage } from 'element-plus'
import {
   
    $searchVideo } from '../api/video.ts'

// 定义一个响应式的字符串，用来存储用户输入的搜索关键字
const searchValue = ref<string>('');
// 定义一个响应式的数组，用来存储搜索结果
const searchResults = ref<any[]>([]);
// 定义一个响应式的布尔值，表示加载状态
const loadingVideoList = ref(false);
// 搜索按钮点击事件的处理函数
const handleSearch = () => {
   
   
    // 判断搜索框是否为空，如果为空则提示用户输入关键字
    if (searchValue.value === '') {
   
   
        // 使用 Element UI 的消息提示组件，显示警告信息
        ElMessage.warning('请输入关键字');
        return; // 如果没有输入关键字，直接返回，不进行搜索
    }
    // 设置加载状态为 true，表示开始加载数据
    loadingVideoList.value = true;
    // 调用搜索接口，传入用户输入的搜索关键字（searchValue.value），并设置为空的描述（第二个参数为空字符串）
    $searchVideo(searchValue.value, '').then(res => {
   
   
        // 如果请求成功，且返回的数据是有效的（res.success 为 true）
        if (res.success) {
   
   
            // 将返回的搜索结果（res.result）存储到 searchResults 中
            searchResults.value = res.result;
        }
    });
    // 模拟加载的延时，500毫秒后将加载状态设为 false
    setTimeout(() => {
   
   
        // 设置加载状态为 false，表示加载完成
        loadingVideoList.value = false;
    }, 500); // 模拟一个加载过程，实际中可以根据真实的接口响应时间来设置
};


// 高亮显示
const highlightedDescription = (description: string) => {
   
   
    const keyword = videoSearchStore.keyword;
    if (!keyword) return description;
    // 将关键字按字符拆分（例如："原神" -> ["原", "神"]）
    const keywords = keyword.split('');
    // 构造正则表达式来匹配每个部分
    const regex = new RegExp(keywords.join('|'), 'gi');  // 使用 | 将每个部分连接起来，形成匹配任意一个的正则
    // 使用正则替换，将匹配到的部分包裹在 <em> 标签中
    const result = description.replace(regex, (match) => {
   
   
        return `<em class="keyword">${
     
     match}</em>`;
    });
    return result;
};
</script>

这里是axios的设置以及api的二次封装

// 创建一个 axios 实例，配置了基础 URL、请求超时时间和自定义请求头
const instance = axios.create({
   
   
  baseURL: 'http://localhost:8080/api/', // 请求的基础URL，所有的请求都会自动加上这个前缀
  timeout: 30000, // 设置请求的超时时间，单位为毫秒，这里设置为30秒
  headers: {