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设置了开发服务器端口和其他设置。