為Web應用新增Meilisearch全文搜尋支援

為Web應用新增Meilisearch全文搜尋支援配圖

從電子商務平臺到內容管理系統 (CMS),網路應用程式會生成和處理大量資料。從這些資料中高效提取相關資訊對於實現無縫的使用者體驗至關重要。因此,使用逐字查詢匹配的傳統搜尋功能是不夠的。您需要的是全文搜尋。

全文搜尋可以檢查文件或資料庫的完整內容,讓您可以根據特定的單詞或短語從大型資料集中檢索相關資訊。它考慮了出現頻率和多語言內容等因素,從而獲得更準確、更全面的搜尋結果。

Meilisearch 是這類搜尋引擎中的佼佼者,它利用全文搜尋的強大功能,為開發人員和終端使用者提供了靈活而強大的工具。

本教程演示如何將 Meilisearch 整合到 Node.js Web 專案中。

什麼是 Meilisearch?

Meilisearch 是一個開源搜尋引擎,可為終端使用者提供快速、相關的搜尋結果。它不允許出現錯字,預設設定可滿足大多數專案的需要。

Meilisearch 還具有很強的可定製性,提供了許多調整搜尋結果相關性的功能。在這些功能中,最值得注意的是排名規則,您可以根據自己的專案進行調整。

它提供直觀的 RESTful API,可無縫整合到幾乎任何企業網站中。您可以自行託管,也可以使用其官方雲託管解決方案 Meilisearch Cloud,輕鬆快速地開始使用。本教程使用 Meilisearch Cloud

前提條件

要繼續學習,您需要:

如何設定 Meilisearch

瀏覽 Meilisearch Cloud,建立賬戶或登入。確保確認電子郵件地址。

接下來,點選 “Create a project“,一個執行 Meilisearch 例項的伺服器,你將在其中新增網站的資料集。

新增 Project name(例如,book-app)並選擇您喜歡的地區。然後點選 Create。建立專案後,您可以單擊 “Settings” 檢視專案的詳細資訊,如訪問資料集的 URL、保護 Meilisearch 例項的 API 金鑰以及其他資訊。

books-app 專案概覽頁面

books-app 專案概覽頁面。

有三個 API 金鑰,每個金鑰代表不同的授權級別

  • Master key – 此金鑰可解鎖所有路由,也是唯一可訪問端點以建立和刪除 API 金鑰的金鑰。只有使用主金鑰才能在受保護的環境中管理 API 金鑰。
  • Default Search API key – 該金鑰只允許訪問搜尋路由。可以在客戶端程式碼中使用。
  • Default Admin API key – 該金鑰可訪問除 /keys 之外的所有 API 路由,後者用於建立和刪除 API 金鑰。您只能在受保護的環境中使用此金鑰。

如何使用 Meilisearch 編制資料索引

索引是儲存和組織可搜尋資料的核心元件。它們充當文件的容器 – 包含一個或多個欄位的物件。

Meilisearch中的每個索引都是獨立和可定製的,允許個性化的搜尋排序規則和過濾選項。

如何建立索引和新增文件

  1. 在導航欄中,單擊專案中的 Indexes 選項卡。
  2. 單擊 Create an index。然後,輸入索引名稱(例如,書籍)並單擊 Create index
  3. 選擇匯入文件的方式。本指南將匯入一個 JSON 檔案,其中包括來自 Google Book API 的 13 個圖書條目。
  4. 單擊 File upload 並上傳 JSON 檔案,然後 Import documents

注:每個文件都必須有一個包含 primary key 的主欄位,主鍵是所有文件中都必須存在的具有唯一值的屬性。在大多數情況下,這個值就是文件 ID。如果主鍵不存在,文件將無法成功上傳。

如何更新和刪除文件

Meilisearch Cloud 目前不提供修改或刪除文件的方法,但您可以使用 REST API 路由或 SDK。下面的程式碼演示瞭如何使用 REST API 端點更新或刪除文件。本教程使用 cURL 來處理路由,但你也可以使用像 Postman 這樣的 API 平臺。

1. 要更新檔案,請按以下路由傳送 PUT 請求:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/indexes/{index_uid}/documents
/indexes/{index_uid}/documents
/indexes/{index_uid}/documents

上面的 index_uid 是專案的索引名稱:

 

突出顯示索引名稱

突出顯示索引名稱。

2. 使用此路由,可以新增或更新已存在的文件列表。要更新文件,必須附加其主鍵。舊文件會根據新文件中的欄位進行部分更新。以下是一個示例,說明如何將圖書索引中文件的標題從 JavaScript for Kids 更新為 JavaScript Coding for Kids ,並新增 publisher 欄位:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
curl \
-X PUT '/indexes/books/documents' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer ' \
--data-binary '[
{
"id": "71nDBQAAQBAJ",
"title": "JavaScript Coding for Kids",
"publisher": "No Starch Press"
}
]'
curl \ -X PUT '/indexes/books/documents' \ -H 'Content-Type: application/json' \ -H 'Authorization: Bearer ' \ --data-binary '[ { "id": "71nDBQAAQBAJ", "title": "JavaScript Coding for Kids", "publisher": "No Starch Press" } ]'
curl \
-X PUT '/indexes/books/documents' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer ' \
--data-binary '[
{
"id": "71nDBQAAQBAJ",
"title": "JavaScript Coding for Kids",
"publisher": "No Starch Press"
}
]'

3. 將 <your-project-url><your-admin-api-key> 替換為 Project overview 頁面中的相應值:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"taskUid": 26, "indexUid": "books", "status": "enqueued", "type": "documentAdditionOrUpdate", "equeuedAt": "2023-05-26T07:52:24.127920065Z"
"taskUid": 26, "indexUid": "books", "status": "enqueued", "type": "documentAdditionOrUpdate", "equeuedAt": "2023-05-26T07:52:24.127920065Z"
"taskUid": 26, "indexUid": "books", "status": "enqueued", "type": "documentAdditionOrUpdate", "equeuedAt": "2023-05-26T07:52:24.127920065Z"

4. 在刪除文件方面,Meilisearch 包括三個路由(端點):

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/indexes/{index_uid}/documents // Deleting all documents
/indexes/{index_uid}/documents/{document_id} // Deleting a single document
/indexes/{index_uid}/documents/delete-batch // Deleting a selection of
documents
/indexes/{index_uid}/documents // Deleting all documents /indexes/{index_uid}/documents/{document_id} // Deleting a single document /indexes/{index_uid}/documents/delete-batch // Deleting a selection of documents
/indexes/{index_uid}/documents // Deleting all documents
/indexes/{index_uid}/documents/{document_id} // Deleting a single document
/indexes/{index_uid}/documents/delete-batch // Deleting a selection of  
documents

您可以從 MeiliSearch Cloud 或您的資料庫中獲取文件後,從 books.json 檔案的原始資料中獲取 document_id

下面是如何刪除上述更新的圖書的示例:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
curl \
-H 'Authorization: Bearer ' \
-X DELETE '/indexes/books/documents/71nDBQAAQBAJ'
curl \ -H 'Authorization: Bearer ' \ -X DELETE '/indexes/books/documents/71nDBQAAQBAJ'
curl \
-H 'Authorization: Bearer ' \
-X DELETE '/indexes/books/documents/71nDBQAAQBAJ'

傳送請求後,您的回覆應該如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"taskUid": 10, "indexUid": "books", "status": "enqueued", "type": "documentDeletion", "equeuedAt": "2023-05-26T07:20:11.1291066"
"taskUid": 10, "indexUid": "books", "status": "enqueued", "type": "documentDeletion", "equeuedAt": "2023-05-26T07:20:11.1291066"
"taskUid": 10, "indexUid": "books", "status": "enqueued", "type": "documentDeletion", "equeuedAt": "2023-05-26T07:20:11.1291066"

如何將 MeiliSearch 新增到網路服務中

1. 首先,在終端執行以下命令,從 GitHub 克隆啟動專案:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
git clone https://github.com/Tammibriggs/meilisearch-app.git
cd meilisearch​-app
npm install
git clone https://github.com/Tammibriggs/meilisearch-app.git cd meilisearch​-app npm install
git clone https://github.com/Tammibriggs/meilisearch-app.git
cd meilisearch​-app
npm install

如果檢查 package.json 檔案,應該會看到 start 命令。執行 npm start 在 localhost port3000 上執行 Node.js 專案。在瀏覽器中輸入 http://localhost:3000/ 時,應該會看到以下內容:

 

Meilisearch 演示啟動程式

Meilisearch 演示啟動程式。

2. 應用程式啟動並執行後,就可以新增 Meilisearch,這樣搜尋表單在提交時就會開始返回來自 Meilisearch 的結果。為此,請在終端執行以下命令安裝 Meilisearch:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install meilisearch
npm install meilisearch
npm install meilisearch

3. 您還需要安裝 dotenv npm 軟體包,以便從 .env 檔案載入敏感憑據。在終端執行以下命令

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install dotenv
npm install dotenv
npm install dotenv

4. 在專案根資料夾中建立一個 .env 檔案,並新增以下內容:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
YOUR_PROJECT_URL= '<your-project-url>'
YOUR_SEARCH_API_KEY= '<your-admin-api-key>'
YOUR_PROJECT_URL= '<your-project-url>' YOUR_SEARCH_API_KEY= '<your-admin-api-key>'
YOUR_PROJECT_URL= '<your-project-url>'
YOUR_SEARCH_API_KEY= '<your-admin-api-key>'

確保將 <your-project-url><your-admin-api-key> 替換為相應的值。

5. 接下來,在 server.js 檔案中匯入 meilisearchdotenv 軟體包,並配置 dotenv

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import {MeiliSearch} from 'meilisearch'
import dotenv from 'dotenv';
dotenv.config();
import {MeiliSearch} from 'meilisearch' import dotenv from 'dotenv'; dotenv.config();
import {MeiliSearch} from 'meilisearch'
import dotenv from 'dotenv';
dotenv.config();

6. 然後,初始化 Meilisearch,這樣你就可以開始處理你的 books-app 專案了。導航到 server.js 檔案,在 searchValue 變數定義後新增以下程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const client = new MeiliSearch({ host: process.env.YOUR_PROJECT_URL, apiKey: process.env.YOUR_SEARCH_API_KEY })
const client = new MeiliSearch({ host: process.env.YOUR_PROJECT_URL, apiKey: process.env.YOUR_SEARCH_API_KEY })
const client = new MeiliSearch({ host: process.env.YOUR_PROJECT_URL, apiKey: process.env.YOUR_SEARCH_API_KEY })

7. 其中一項重要功能是在提交表單時,使用附加到 URL 的搜尋值在 Meilisearch 中搜尋圖書索引。要啟用此功能,請在 client 變數定義後新增以下程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const index = client.index('books')
const searchResults = !!searchValue && await index.search(searchValue)
const index = client.index('books') const searchResults = !!searchValue && await index.search(searchValue)
const index = client.index('books')  
const searchResults = !!searchValue && await index.search(searchValue)

這段程式碼會建立一個圖書索引的引用。然後,如果您定義了 searchValue,它將使用 search() 方法在圖書索引中搜尋與搜尋值相匹配的文件。

8. 最後,修改 render() 方法如下,以顯示搜尋結果:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
res.render('index', {
books: searchResults ? searchResults.hits : [],
searchValue
})
res.render('index', { books: searchResults ? searchResults.hits : [], searchValue })
res.render('index', {
books: searchResults ? searchResults.hits : [],
searchValue
})

現在您可以開始搜尋圖書索引了:

使用搜尋表單搜尋 "books" 索引

使用搜尋表單搜尋 “books” 索引

9. 新增上述程式碼後,您的 server.js 檔案應如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import express from 'express';
import { MeiliSearch } from 'meilisearch';
import dotenv from 'dotenv';
dotenv.config();
const app = express();
const PORT = process.env.PORT || 3000;
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/', async (req, res) => {
const searchValue = req.query.search;
const client = new MeiliSearch({
host: process.env.YOUR_PROJECT_URL,
apiKey: process.env.YOUR_SEARCH_API_KEY,
});
const index = client.index('books');
const searchResults = !!searchValue && (await index.search(searchValue));
res.render('index', {
books: searchResults ? searchResults.hits : [],
searchValue,
});
});
app.listen(PORT, () => {
console.log(`listening at http://localhost:${PORT}`);
});
import express from 'express'; import { MeiliSearch } from 'meilisearch'; import dotenv from 'dotenv'; dotenv.config(); const app = express(); const PORT = process.env.PORT || 3000; app.set('view engine', 'ejs'); app.use(express.static('public')); app.get('/', async (req, res) => { const searchValue = req.query.search; const client = new MeiliSearch({ host: process.env.YOUR_PROJECT_URL, apiKey: process.env.YOUR_SEARCH_API_KEY, }); const index = client.index('books'); const searchResults = !!searchValue && (await index.search(searchValue)); res.render('index', { books: searchResults ? searchResults.hits : [], searchValue, }); }); app.listen(PORT, () => { console.log(`listening at http://localhost:${PORT}`); });
import express from 'express';
import { MeiliSearch } from 'meilisearch';
import dotenv from 'dotenv';
dotenv.config();
const app = express();
const PORT = process.env.PORT || 3000;
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/', async (req, res) => {
const searchValue = req.query.search;
const client = new MeiliSearch({
host: process.env.YOUR_PROJECT_URL,
apiKey: process.env.YOUR_SEARCH_API_KEY,
});
const index = client.index('books');
const searchResults = !!searchValue && (await index.search(searchValue));
res.render('index', {
books: searchResults ? searchResults.hits : [],
searchValue,
});
});
app.listen(PORT, () => {
console.log(`listening at http://localhost:${PORT}`);
});

您可以在 GitHub 上訪問本教程的完整程式碼

小結

Meilisearch 是一款出色的搜尋引擎解決方案,可增強網站的搜尋功能和使用者體驗。其卓越的速度、以相關性為重點的排名演算法和無縫整合過程使其成為優化網站搜尋功能的寶貴工具。

您的專案依賴哪種搜尋引擎?請在評論區告訴我們!

評論留言