SpringBoot+elasticsearch实现全文检索,做一个简单的搜索引擎
SpringBoot+elasticsearch实现全文检索,做一个简单的搜索引擎一、什么是elasticsearch答:“ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口。Elasticsearch是用Java开发的,并作为Apache许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中..
SpringBoot+elasticsearch实现全文检索,做一个简单的搜索引擎
一、什么是elasticsearch
答:“ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口。Elasticsearch是用Java开发的,并作为Apache许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。我们建立一个网站或应用程序,并要添加搜索功能,但是想要完成搜索工作的创建是非常困难的。我们希望搜索解决方案要运行速度快,我们希望能有一个零配置和一个完全免费的搜索模式,我们希望能够简单地使用JSON通过HTTP来索引数据,我们希望我们的搜索服务器始终可用,我们希望能够从一台开始并扩展到数百台,我们要实时搜索,我们要简单的多租户,我们希望建立一个云的解决方案。因此我们利用Elasticsearch来解决所有这些问题及可能出现的更多其它问题。”
二、配置Elasticsearch和logstash
https://blog.csdn.net/fjyab/article/details/81101284
https://blog.csdn.net/wzn1054162229/article/details/101480921
注:上方博客可能配置方式不同,请自行参照。其中配置logstash将数据库数据导入到Elasticsearch中时,如果运行不能连接,那么数据库连接JAR包请放到下方路径下:
三、后台代码编写
1、创建SpringBoot项目,通过spring boot操作elasticsearch需要通过spring data elasticsearch来实现
2、导入依赖,和yml配置
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- elasticsearch -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-elasticsearch</artifactId>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.46</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
server:
port: 8888
spring:
data:
elasticsearch:
cluster-name: es
cluster-nodes: 127.0.0.1:9300
jackson:
default-property-inclusion: non_null
3、编写实体类:Goods .java
@Data
@Document(indexName = "goodscat", type = "docs", shards = 1, replicas = 0)//选中elasticsearch索引
public class Goods {
private Long cid;
private String name;
private String isParent;
private String parentId;
private Long level;
private String pathid;
}
4、编写repository层,创建GoodsRepository.java,继承ElasticsearchRepository
public interface GoodsRepository extends ElasticsearchRepository<Goods,Long> {
}
5、编写service和serviceImpl
public interface SearchService {
PageResult<Goods> search(SearchRequest request);
}
@Slf4j
@Service
public class SearchServiceImpl implements SearchService {
@Autowired
private GoodsRepository goodsRepository;
@Autowired
private ElasticsearchTemplate template;
@Override
public PageResult<Goods> search(SearchRequest request) {
int page = request.getPage() - 1;
int size = request.getSize();
//创建查询构建器
NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();
//结果过滤
queryBuilder.withSourceFilter(new FetchSourceFilter(new String[]{"cid", "name"}, null));
//分页
queryBuilder.withPageable(PageRequest.of(page, size));
//过滤
queryBuilder.withQuery(QueryBuilders.matchQuery("name", request.getKey()));
//查询
AggregatedPage<Goods> result = template.queryForPage(queryBuilder.build(), Goods.class);
//解析结果
//分页结果解析
long total = result.getTotalElements();
Integer totalPages1 = result.getTotalPages(); //失效
Long totalPages = total % size == 0 ? total / size : total / size + 1;
List<Goods> goodsList = result.getContent();
//解析聚合结果
return new PageResult(total, totalPages, goodsList);
}
}
6、编写分页工具类
@Data
@AllArgsConstructor
@NoArgsConstructor
public class PageResult<T> {
private Long total;// 总条数
private Long totalPage;// 总页数
private List<T> items;// 当前页数据
public PageResult(Long total, List<T> items) {
this.total = total;
this.items = items;
}
}
6、编写controller
@RestController
public class SearchController {
@Autowired
private SearchService searchService;
/**
* 搜索功能
* @param request
* @return
*/
@GetMapping("search")
public ResponseEntity<PageResult<Goods>> search(SearchRequest request) {
return ResponseEntity.ok(searchService.search(request));
}
}
7、编写一个搜索条件接收类,用来接收前台搜索条件,和分页条件
public class SearchRequest {
private String key;// 搜索条件
private Integer page;// 当前页
private static final Integer DEFAULT_SIZE = 10;// 每页大小,不从页面接收,而是固定大小
private static final Integer DEFAULT_PAGE = 1;// 默认页
public String getKey() {
return key;
}
public void setKey(String key) {
this.key = key;
}
public Integer getPage() {
if(page == null){
return DEFAULT_PAGE;
}
// 获取页码时做一些校验,不能小于1
return Math.max(DEFAULT_PAGE, page);
}
public void setPage(Integer page) {
this.page = page;
}
public Integer getSize() {
return DEFAULT_SIZE;
}
}
8、返回的json数据格式
{
"total": 3,
"totalPage": 1,
"items": [
{
"cid": 50010363,
"name": "许愿瓶/幸运星瓶"
},
{
"cid": 70000558,
"name": "英国特许公认会计师ACCA"
},
{
"cid": 50004583,
"name": "英国特许公认会计师ACCA"
}
]
}
四、Vue+Element前端编写
1、创建vue项目
2、安装 axios 插件,在当前项目下的终端输入命令: npm install --save axios vue-axios
安装 Element 插件,在当前项目下的终端输入命令:npm i element-ui -S
3、在 src 文件夹下的程序入口 main.js 中导入
import axios from 'axios'
import VueAxios from 'vue-axios'
// element-ui 引入文件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//注册 VueAxios, axios
Vue.use(VueAxios, axios)
Vue.use(ElementUI)
4、导入template,编写静态页面,并绑定下方方法和属性
<template>
<div>
<!-- 上方搜索框,和下拉即时搜索 -->
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
select-when-unmatched="true"
:debounce="0"
></el-autocomplete>
<el-button slot="append" icon="el-icon-search" @click="onSubmit"></el-button>
<!-- 下方搜索结果显示 -->
<div class="div2" v-show="con">
<p style="font-size:22px">
搜索
<span style="color: #F08080">{{state}}</span>的结果(总共搜索到
<span style="color: #F08080">{{total}}</span>条记录)
</p>
<p v-for="entity in All" class="p2">
<a href="http://www.baidu.com">{{entity.name}}</a>
</p>
<!-- 分页组件 -->
<el-pagination
background
layout="prev, pager, next"
:total="total"
:page-size="15"
@current-change="handleCurrentChange"
:current-page="page"
></el-pagination>
</div>
</div>
</template>
注:其中显示搜索内容的p标签,因为绑定了v-for和element产生了冲突,会报错,但是不影响效果,请忽略
5、编写各部分js代码,定义属性,方法,请求。各方法属性有注释,请认真查看
<script>
//导入axios,进行ajax访问
const axios = require("axios");
export default {
data () {
return {
con: false,//控制下方显示框,隐藏或显示
restaurants: [],//即时搜索,下拉框信息
state: '',//搜索条件
timeout: null,
All: [],//下方显示框数据集合
total: 0, //搜索返回的总结果数量
page: 1,//分页的当前页数
};
},
watch: {
state: { // 监视字段,页数
handler () {
if (this.state.length > 0) {//如果有搜索条件
this.restaurants = [];//先清空即时搜索集合数据
this.loadAll();//查询
} else {
this.con = false;//没有搜索条件,隐藏下方数据显示窗口
this.restaurants = [];
this.All = [];//并清空结果集合
this.page = 1;//分页归一
}
}
},
page: { // 监视字段,页数
handler () {
this.loadAll();//如果页面发生变化,就查询新的页面的数据
}
}
},
methods: {
//分页是上下页,触发的方法
handleCurrentChange (val) {//当前页
this.page = val;
console.log(`当前页: ${val}`);
},
loadAll () {
var app = this;
axios.get("http://localhost:8888/search", {
params: {
'key': app.state,//搜索条件
'page': app.page//当前第几页
}
}).then(function (resp) {
app.total = resp.data.total;//当前数据一共有多少条
var rs = resp.data.items;
app.All = rs;//给显示结果的集合赋值
if (rs.length > 0) {
for (var i = 0; i < 10; i++) {//只显示10条提示
app.restaurants[i] = { value: rs[i].name, cid: rs[i].cid }//给及时搜索下拉框赋值
}
}
}).catch(function (error) {
console.log(error);
});
},
querySearchAsync (queryString, cb) {//加载即时搜索条件
var results = this.restaurants;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 1000 * Math.random());
},
handleSelect (item) {//选中下拉提示的数据时触发
if (this.All != "") {
this.con = true;//显示结果
}
},
onSubmit () {
if (this.All != "") {//点击查询图标时,显示结果
this.con = true;
}
}
},
};
</script>
6、编写style样式
<style>
.el-autocomplete {
width: 400px;
}
.p2 {
margin-left: 160px;
text-align: left;
font-size: 20px;
}
a {
color: #4f5a75;
}
.div2 {
/* background: blue; */
margin-top: 25px;
padding-top: 25px;
margin-left: 270px;
width: 750px;
height: 600px;
border: 1px solid #b0c4de;
}
</style>
五、演示效果
1、即时搜索
2、搜索结果分页显示
六、项目dome源码和sql文件
链接:https://pan.baidu.com/s/190d0nQhFQ-ZIS1dcAqdNig
提取码:tbp5
更多推荐
所有评论(0)