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