spanner-search-demo 사용자가 텍스트 검색을 수행하고 결과를 볼 수있는 웹 응용 프로그램입니다. 응용 프로그램은 프론트 엔드에 vue.js를 사용하여 구축되어 백엔드로 이동합니다. 이 응용 프로그램은 Cloud Spanner의 전체 텍스트 검색 기능을 보여 주도록 설계되었습니다.
필요한 종속성을 설치하려면 실행하십시오.
npm install핫 릴로드로 개발 서버를 시작하려면 실행 :
npm run serve그런 다음 웹 응용 프로그램에 다음과 같은 방법으로 액세스 할 수 있습니다.
App running at:
- Local: http://localhost:3000/
- Network: http://192.168.0.192:3000/
생산 프로젝트를 구축하려면 실행 :
npm run build설치했는지 확인하십시오. 그런 다음 실행하여 필요한 GO 종속성을 설치하십시오.
go mod tidy스패너 인스턴스, 데이터베이스 및 테이블을 만듭니다.
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 편집하여 스패너 설정을 구성한 다음 다음 명령을 실행하십시오.
go run main.go검색 수행
검색 결과는 검색 표시 줄 아래에 표시됩니다. 각 결과에는 국가, 도시, 이름, 주소, 웹 사이트 및 카테고리와 같은 세부 사항이 포함됩니다.
이 응용 프로그램은 실행 된 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 구성이 Tailwind.config.js 및 postcss.config.js로 올바르게 설정되어 있는지 확인하십시오.
VUE 구성은 Vue.config.js에 정의되어 개발 서버 포트 및 기타 설정을 설정합니다.