spanner fts demo

การสาธิตการค้นหาข้อความแบบเต็มรูปแบบ

ภาพรวม

spanner-search-demo เป็นเว็บแอปพลิเคชันที่อนุญาตให้ผู้ใช้ทำการค้นหาข้อความและดูผลลัพธ์ แอปพลิเคชันถูกสร้างขึ้นโดยใช้ vue.js สำหรับส่วนหน้าและไปที่แบ็กเอนด์ แอปพลิเคชันนี้ออกแบบมาเพื่อแสดงความสามารถในการค้นหาข้อความแบบเต็มของ Cloud Spanner

ข้อกำหนดเบื้องต้น

• node.js (เวอร์ชัน 20 หรือแนะนำใหม่ ๆ )
• Golang (เวอร์ชัน 1.23.0)
• เปิดใช้งานโครงการ Google Cloud พร้อมคลาวด์ประแจ
• บัญชีบริการที่มีสิทธิ์ในการเข้าถึง Spanner (ดู https://cloud.google.com/iam/docs/creating-Managing-service-accounts)

การตั้งค่าโครงการ

ติดตั้งการพึ่งพา

ในการติดตั้งการพึ่งพาที่จำเป็นเรียกใช้:

npm install

รวบรวมและเติมเต็มความร้อนเพื่อการพัฒนา

ในการเริ่มต้นเซิร์ฟเวอร์การพัฒนาด้วยการเชื่อมโยงร้อนรัน:

npm run serve

เว็บแอปพลิเคชันสามารถเข้าถึงได้ด้วยวิธีต่อไปนี้:

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

รวบรวมและลดการผลิต

เพื่อสร้างโครงการสำหรับการผลิต Run:

npm run build

การตั้งค่าแบ็กเอนด์

ติดตั้งไปพึ่งพา

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งแล้ว จากนั้นติดตั้งการพึ่งพา GO ที่จำเป็นโดยการรัน:

go mod tidy

นำเข้าข้อมูลตัวอย่างไปยัง Cloud Spanner

สร้างอินสแตนซ์ของ 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);

ใช้ตัวอย่างร้านอาหารฟาสต์ฟู้ดข้อมูลทั่วอเมริกาและนำเข้าสู่ Cloud Spanner เพื่อแสดงความสามารถในการค้นหาข้อความเต็มรูปแบบ แก้ไข import.go เพื่อกำหนดค่าการตั้งค่า Spanner ของคุณ

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

เรียกใช้เซิร์ฟเวอร์แบ็กเอนด์

ในการเริ่มต้นเซิร์ฟเวอร์แบ็กเอนด์ให้แก้ไข main.go เพื่อกำหนดค่าการตั้งค่า Spanner ของคุณจากนั้นเรียกใช้คำสั่งต่อไปนี้:

go run main.go

การตั้งค่าส่วนหน้า

ใช้แอปพลิเคชัน

ทำการค้นหา

1. เปิดแอปพลิเคชันในเว็บเบราว์เซอร์ของคุณ
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

ข้อมูลเพิ่มเติม

tailwind css

โครงการใช้ Tailwind CSS สำหรับการจัดแต่งทรงผม ตรวจสอบให้แน่ใจว่าการกำหนดค่า CSS Tailwind ได้รับการตั้งค่าอย่างถูกต้องใน tailwind.config.js และ postcss.config.js

การกำหนดค่า VUE

การกำหนดค่า Vue ถูกกำหนดไว้ใน vue.config.js ซึ่งตั้งค่าพอร์ตเซิร์ฟเวอร์การพัฒนาและการตั้งค่าอื่น ๆ