Typing_Key_Board

這是一個基于Vue 3和Go語言的自定義素材打字練習網站，靈感來源于常用字打字練習，解決了大多數網站無法自定義打字素材的問題。在 Typing_Key_Board (簡稱TKB)中，用戶可以自定義打字素材進行練習，在復習代碼的同時仍然可以練習打字速度，一舉兩得。

Github倉庫地址

Typing_Key_Board
歡迎大家來練手，貼出在線演示網址：（在線打字）佬們輕點。期待您的star~

項目截圖

• 自定義打字素材:
  

• 打字練習
  

• 打字歷史記錄（可以看到自己的進步）
  

項目結構

項目采用前后端分離架構：

• frontend: Vue+ Vite實現的前端
• backend: Go語言實現的后端API，使用SQLite存儲數據

功能特點

• 內置多種編程相關的打字練習素材
• 用戶可以自定義添加練習文本內容
• 支持英文的打字練習
• 實時顯示打字結果，正確顯示綠色，錯誤顯示紅色
• 允許刪除錯誤輸入并回滾進度
• 統計打字錯誤數量和準確率
• 打字歷史記錄功能，記錄每次練習的錯誤數和準確率
• 素材內容持久化保存到SQLite數據庫，不用擔心數據丟失。

前端本地啟動方法

# 進入前端目錄
cd frontend# 安裝依賴
npm install# 啟動開發服務器
npm run dev

前端會在 http://localhost:3000 啟動。

后端本地啟動方法

# 進入后端目錄
cd backend# 下載依賴
go mod tidy# 啟動服務器
go run main.go

后端API會在 http://localhost:8080 啟動。

技術棧

前端

• Vue
• Vue Router
• Vite
• Axios

后端

• Go
• Gin框架
• SQLite

使用Docker部署到云服務器

• 修改文件列表

  • main.js
  • main.go（修改TODO的位置的IP）

• 利用文件上傳工具上傳到云服務器的自建目錄下，項目結構如下：

   typing-app/├── frontend/│   ├── src/│   ├── public/│   ├── package.json│   ├── Dockerfile│   └── docker/│       └── nginx.conf├── backend/│   ├── main.go│   ├── go.mod│   ├── go.sum│   └── Dockerfile├── docker-compose.yml└── data/

• 進入項目目錄

cd /xxx/typing-app

• 使用 Docker Compose 構建鏡像

docker-compose build

• 等待成功后啟動容器

docker-compose up -d

• 檢查容器是否正常運行

docker-compose ps

應該顯示 frontend 和 backend 兩個容器的狀態為 up。

• 查看容器日志確保沒有出現錯誤

docker-compose logs

• 在服務器安全組打開8000和9000端口

• 訪問應用

http://服務器公網IP:8000進入即可訪問~

如果在使用過程中遇到問題可以參看下方的解決方案。

可能會遇到的問題

Ubuntu系統安裝Docker-compose

sudo apt install -y docker-compose

? 驗證安裝：

docker-compose --version

拉取鏡像遇到報錯

ERROR: Service 'backend' failed to build: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)

這個報錯通常是需要配置國內鏡像源：(/etc/docker/daemon.json)

{"registry-mirrors" : ["https://docker.registry.cyou","https://docker-cf.registry.cyou","https://dockercf.jsdelivr.fyi","https://docker.jsdelivr.fyi","https://dockertest.jsdelivr.fyi","https://mirror.aliyuncs.com","https://dockerproxy.com","https://mirror.baidubce.com","https://docker.m.daocloud.io","https://docker.nju.edu.cn","https://docker.mirrors.sjtug.sjtu.edu.cn","https://docker.mirrors.ustc.edu.cn","https://mirror.iscas.ac.cn","https://docker.rainbond.cc","https://do.nark.eu.org","https://dc.j8.work","https://dockerproxy.com","https://gst6rzl9.mirror.aliyuncs.com","https://registry.docker-cn.com","http://hub-mirror.c.163.com","http://mirrors.ustc.edu.cn/","https://mirrors.tuna.tsinghua.edu.cn/","http://mirrors.sohu.com/" ],"insecure-registries" : ["registry.docker-cn.com","docker.mirrors.ustc.edu.cn"],"debug": true,"experimental": false
}

重啟Docker服務

sudo systemctl daemon-reload

sudo systemctl restart docker

可以使用 docker pull golang:1.23.0 嘗試一下是否能成功，如果不成功則需要檢查DNS配置。

cat /etc/resolv.conf

修改配置文件為：

# Dynamic resolv.conf(5) file for glibc resolver(3) generated by resolvconf(8)
#     DO NOT EDIT THIS FILE BY HAND -- YOUR CHANGES WILL BE OVERWRITTEN
# 127.0.0.53 is the systemd-resolved stub resolver.
# run "systemd-resolve --status" to see details about the actual nameservers.# nameserver 127.0.0.53
nameserver 114.114.114.114
nameserver 8.8.8.8
options timeout:10 attempts:3 rotate single-request-reopen

• 延長嘗試的時間，確保能夠連接上并且下載，在這里我設置為10秒，也可以設置為更長的時間。
• 設置nameserver

啟動之后如果又修改了代碼怎么辦？

比如現在修改了Nginx的配置文件

嘗試直接重啟容器：

docker restart typingapp_frontend_1

如果不成功，就重建前端容器：

# 停止前端容器
docker stop typingapp_frontend_1
# 刪除前端容器
docker rm typingapp_frontend_1
# 重新創建并啟動前端容器
docker-compose up -d frontend

檢查是否正常運行：

docker ps

又比如修改了docker-compose文件

需要重新構建并啟動容器

docker-compose down
# docker-compose build backend
docker-compose build --no-cache backend
docker-compose up -d

總結：

? 修改了前后端的代碼之后，只需要先down掉容器，重新構建并上線即可。

進入前后端容器的方法

docker exec -it 容器name sh