Vue+Go 自定义打字素材的打字网站
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