spanner fts demo

SPANNER全文搜索演示

概述

spanner-search-demo是一個Web應用程序，允許用戶執行文本搜索並查看結果。該應用程序是使用VUE.JS為前端構建的，並使用後端。該應用程序旨在展示雲扳手的全文搜索功能。

先決條件

• Node.js（版本20或以後推薦）
• Golang（版本1.23.0）
• 啟用了雲扳手的Google雲項目
• 服務帳戶具有訪問扳手的許可（請參閱https://cloud.google.com/iam/docs/creating-managing-managing-service-accounts）

項目設置

安裝依賴項

要安裝必要的依賴項，請運行：

npm install

編譯和開發熱填充

要啟動開發服務器，請運行：

npm run serve

然後可以通過以下方式訪問Web應用程序：

  App running at:
  - Local:   http://localhost:3000/
  - Network: http://192.168.0.192:3000/

編譯和生產

要建立生產項目，請運行：

npm run build

後端設置

安裝GO依賴項

確保您已安裝。然後，通過運行安裝必要的GO依賴項：

go mod tidy

將樣本數據導入雲扳手

創建一個Spanner實例，數據庫和表。

 CREATE TABLE Restaurants (
  id STRING(MAX) NOT NULL ,
  dateAdded TIMESTAMP OPTIONS (
    allow_commit_timestamp = true
  ),
  dateUpdated TIMESTAMP OPTIONS (
    allow_commit_timestamp = true
  ),
  address STRING(MAX),
  categories STRING(MAX),
  primaryCategories STRING(MAX),
  city STRING(MAX),
  country STRING(MAX),
  keys STRING(MAX),
  latitude FLOAT64,
  longitude FLOAT64,
  name STRING(MAX),
  postalCode STRING(MAX),
  province STRING(MAX),
  sourceURLs STRING(MAX),
  websites STRING(MAX),
  name_token TOKENLIST AS (tokenize_fulltext(name)) HIDDEN,
  categories_token TOKENLIST AS (tokenize_substring(categories)) HIDDEN,
  city_Tokens TOKENLIST AS (TOKENIZE_FULLTEXT(city)) HIDDEN,
) PRIMARY KEY (id);;

創建全文搜索索引

CREATE SEARCH INDEX RestaurantsIndex ON Restaurants(name_token, categories_token);

使用美國各地的樣本數據快餐店，並將其進口到雲扳手中，以展示其全文搜索功能。編輯import.go配置扳手設置。

go run main.go -import -file=Datafiniti_Fast_Food_Restaurants_Jun19.csv

運行後端服務器

要啟動後端服務器，請編輯main.go配置SPANNER設置，然後運行以下命令：

go run main.go

前端設置

使用該應用程序

執行搜索

1. 在您的Web瀏覽器中打開應用程序。
2. 在搜索欄中輸入您的搜索查詢。
3. 單擊“搜索”按鈕執行搜索。

查看搜索結果

搜索結果將顯示在搜索欄下方。每個結果都包括諸如國家，城市，姓名，地址，網站和類別之類的詳細信息。

偵錯

打印執行的查詢

該應用程序將執行的SQL查詢打印到控制台以進行調試目的。這有助於驗證查詢的正確性。

打印搜索結果

該應用程序還將每個搜索結果打印到控制台。這有助於驗證搜索結果的正確性。

目錄結構

 project-root/
├── main.go
├── importer/
│   ├── import.go
├── search/
│   ├── search.go
│   └── results.go
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   │   └── tailwind.css
│   ├── App.vue
│   └── main.js
├── babel.config.js
├── postcss.config.js
├── tailwind.config.js
├── package.json
├── README.md
└── vue.config.js

附加信息

尾風CSS

該項目使用Tailwind CSS進行樣式。確保在tailwind.config.js和Postcss.config.js中正確設置尾風CSS配置。

VUE配置

VUE配置在vue.config.js中定義，該vue.config.js設置了開發服務器端口和其他設置。