Vue+Go 自定义打字素材的打字网站-CSDN博客

本文链接：https://blog.csdn.net/VZS_0/article/details/148041832

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