【ReactJs+springBoot项目——租房】第11章:编写爬虫抓取房源数据+开发搜索房源接口服务+整合前端开发实现搜索功能+优化搜索功能增加高亮和分页功能+热词推荐功能实现+拼音分词

编写爬虫抓取房源数据
开发搜索房源接口服务
整合前端开发实现搜索功能
优化搜索功能增加高亮和分页功能
热词推荐功能实现
拼音分词

1、WebMagic抓取数据

为了丰富我们的房源数据,所以我们采用WebMagic来抓取一些数据,目标网站是上海链家网。
在这里插入图片描述
1.1、引入依赖
依然在itcast-es工程中,编写爬虫相关的代码。

在这里插入图片描述
在这里插入图片描述

1.2、编写LianjiaPageProcessor

在这里插入图片描述
在这里插入图片描述

1.3、编写MyPipeline

在这里插入图片描述
在这里插入图片描述
1.4、开始抓取数据
抓取的数据:
在这里插入图片描述

一共抓取到2010条房源数据。
1.5、将图片上传到OSS

在这里插入图片描述
在这里插入图片描述
1.6、将数据导入到Elasticsearch
1.6.1、设置IK分词器
在这里插入图片描述
测试:
在这里插入图片描述

结果:
在这里插入图片描述

1.6.2、文档mapping
在这里插入图片描述
在这里插入图片描述

说明:
dynamic
dynamic 参数来控制字段的新增
true:默认值,表示允许选自动新增字段 false:不允许自动新增字段,但是文档可以正常写入,但无法对字段进行查询等操作strict:严格模式,文档不能写入,报错
index
index参数作用是控制当前字段是否被索引,默认为true,false表示不记录,即不可被搜索。
插入测试数据:
在这里插入图片描述

进行搜索测试:
在这里插入图片描述

在这里插入图片描述

如果使用其他字段搜索:

在这里插入图片描述
在这里插入图片描述

被设置为index为false的字段不能进行搜索操作。
1.6.3、批量导入数据
在这里插入图片描述
在这里插入图片描述

进行搜索测试:
在这里插入图片描述
在这里插入图片描述

2、开发搜索接口

在itcast-haoke-manage-api-server工程中,实现对外的搜索接口。
2.1、导入依赖

在这里插入图片描述
2.2、添加配置

在这里插入图片描述
2.3、编写vo
在这里插入图片描述
在这里插入图片描述

2.4、编写Controller

在这里插入图片描述

在这里插入图片描述

2.5、编写Service

在这里插入图片描述
在这里插入图片描述

2.5、启动测试
启动,发现报错:
在这里插入图片描述

原因是整合了Redis后,引发了netty的冲突,需要在启动类中加入:

在这里插入图片描述
重新启动,发现问题解决了。
在这里插入图片描述
在这里插入图片描述

3、整合前端开发

实现的效果:
在这里插入图片描述

3.1、编写home.js

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2、编写searchbar.js

在这里插入图片描述
在这里插入图片描述

3.3、修改home.css

在这里插入图片描述
3.4、新增search.css
在这里插入图片描述
4、优化搜索功能

4.1、高亮
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

整合到前端进行测试:
在这里插入图片描述

需要在页面中显示em标签以及定义其样式:
在这里插入图片描述

样式:
在这里插入图片描述

效果:
在这里插入图片描述

4.2、分页
4.2.1、添加分页组件

在这里插入图片描述

在这里插入图片描述

4.2、测试
在这里插入图片描述

5、热词搜索

需求:当无搜索结果或搜索结果只有一页时,显示搜索热词。最多显示5个热词。
热词:按照用户搜索的关键字以及搜索到的结果数量进行排序,数量越多的越排到前面,从而得到热词。
效果:

在这里插入图片描述

5.1、实现分析
根据热词的定义,我们可以知道,热词是来源于用户的搜索,那么就要记录用户的搜索关键字以及结果数量,然后 再排序得到热词。
在这里插入图片描述
说明:

1.用户搜索数据,首先进行Elasticsearch搜索
2.在搜索完成后,进行判断,是否需要查询热词
3.如果不需要,直返返回用户数据即可
4.如果需要查询,则进行再Redis中查询热词
5.对于用户搜索词的处理有两种方案
1.第一种方案,是在程序中进行处理,并且把搜索词以及命中的数据数量存储到redis中。该方案是同步进 行。
2.第二种方案,是将查询信息先记录到日志文件中,由后续的程序做处理,然后再写入到Redis中。该方案 是异步进行。
5.2、后台实现

在这里插入图片描述

在这里插入图片描述

5.3、整合前端实现
searchbar.js:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

home.js:
在这里插入图片描述
6、拼音分词

搜索时,需要对拼音也要支持的,如下:地铁、地tie、ditie 等都应该能够搜索到包含“地铁”的数据。
6.1、添加拼音分词插件
插件源码地址:https://github.com/medcl/elasticsearch-analysis-pinyin
下 载 :https://github.com/medcl/elasticsearch-analysis-pinyin/releases/download/v6.5.4/elasticsearch-analy sis-pinyin-6.5.4.zip

在这里插入图片描述
6.2、测试拼音分词

在这里插入图片描述

参数说明:
keep_first_letter: 启 用 此 选 项 时 , 例 如 : 刘 德 华 > ldh, 默 认 值 :true keep_separate_first_letter:启用该选项时,将保留第一个字母分开,例如:刘德华> l,d,h,默认: 假 的 , 注 意 : 查 询 结 果 也 许 是 太 模 糊 , 由 于 长 期 过 频 keep_full_pinyin: 当 启 用 该 选 项 , 例 如 : 刘 德 华 > [ liu,de,hua], 默 认 值 :true keep_original: 当 启 用 此 选 项 时 , 也 会 保 留 原 始 输 入 , 默 认 值 :false limit_first_letter_length: 设 置 first_letter 结 果 的 最 大 长 度 , 默 认 值 :16 lowercase: 小 写 非 中 文 字 母 , 默 认 值 :true remove_duplicated_term:当启用此选项时,将删除重复项以保存索引,例如:de的> de,默认值: false,注意:位置相关查询可能受影响

测试分词:
在这里插入图片描述

测试结果:
在这里插入图片描述
在这里插入图片描述

创建mapping:
在这里插入图片描述

说明:
这里使用的是name的子字段,通过fields指定。
插入数据:
在这里插入图片描述
搜索:

在这里插入图片描述

结果:
在这里插入图片描述

6.3、房源索引增加拼音支持

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

创建完成:
在这里插入图片描述
插入测试数据:

在这里插入图片描述

搜索“地铁”测试:
在这里插入图片描述
在这里插入图片描述

测试“ditie”搜索:
在这里插入图片描述
在这里插入图片描述
可以看到,通过拼音也可以搜索到数据,但是高亮显示中没有把拼音对应的中文高亮。
中文和拼音混合搜索:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.4、重新导入数据
重新导入数据以及修改查询逻辑:
在这里插入图片描述

测试:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值