【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、重新導入資料

重新導入資料以及修改查詢邏輯：