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
相关文章：
Vue+Go 自定义打字素材的打字网站
Typing_Key_Board 这是一个基于Vue 3和Go语言的自定义素材打字练习网站，灵感来源于常用字打字练习，解决了大多数网站无法自定义打字素材的问题。在 Typing_Key_Board (简称TKB)中，用户可以自定义打字素材进行练习，在复习代码的同…...
生产级编排AI工作流套件：Flyte全面使用指南 — Data input/output
生产级编排AI工作流套件：Flyte全面使用指南 — Data input/output Flyte 是一个开源编排器，用于构建生产级数据和机器学习流水线。它以 Kubernetes 作为底层平台，注重可扩展性和可重复性。借助 Flyte，用户团队可以使用 Python SDK…...
JUC入门（二）
5、8锁现象：就是关于锁的八个问题 谁来充当锁？要锁的是什么东西？这个锁有什么用？ 其实锁的作用就是：哪个线程先拿到锁，谁就有先执行同步方法的权力 那么谁能充当锁？任何对象都可以充当锁 要…...
深入浅出：CPU寻址方式完全指南（从理论到实践）
引言：为什么需要寻址方式？ 当我们写下一行高级语言代码（比如 int sum a b;），计算机底层是如何找到变量 a 和 b 的？ 寻址方式（Addressing Modes） 就是 CPU 定位操作数的策略&#…...
PyQt5基本窗口控件（对话框类控件）
对话框类控件 QDialog 为了更好地实现人机交互，比如Windows及Linux等系统均会提供一系列的标 准对话框来完成特定场景下的功能，如选择字号大小、字体颜色等。在PyQt5中定 义了一系列的标准对话框类，让使用者能够方便和快捷地通过各个类完成…...
【PostgreSQL系列】PostgreSQL 复制参数详解
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
给easyui的textbox绑定回车事件
项目有一个textbox输入框，需要绑定一个回车搜索事件。 一开始想着，直接使用js的on或者jquery的keydown方法直接绑定，但是事件不生效。 $("#propName").textbox({width: 200,prompt: "请输入物品名称进行搜索" }).keydo…...
量子计算 | 量子密码学的挑战和机遇
量子计算在密码学中的应用现主要体现在对现有加密算法的威胁上。最著名的例子是Shor算法，该算法能够在多项式时间内分解大整数，从而威胁到基于大数分解的加密算法，如RSA加密。此外，量子计算还可以加速某些类型的密码分析ÿ…...
什么是着色器 Shader
本人就是图形学结课了，对 OpenGL着色器还有很多疑问嘿嘿 文章目录 为什么要有着色器vshaderfshader 本文围绕 vshader 和 fshader 代码示例讲解。 （着色器代码取自本人简单OpenGL项目 https://github.com/DBWGLX/-OpenGL-3D-Lighting-and-Shadow-Modeli…...
STM32H562----------启动时钟分析
1、H562启动过程分析 1.1、启动模式 复位方式有三种：上电复位、硬件复位和软件复位。当产生复位后，离开复位状态后 CM33 内核做的第一件事就是 读取堆栈指针 MSP 的初始值及程序计数器指针 PC 的初始值： 1、从地址 0x0000 0000 处读取出堆栈指针 MSP 的初始值，该值即栈…...
MIT 6.S081 2020 Lab4 traps 个人全流程
零、写在前面 做之前可以看看Chapter 4：Traps and systems calls，了解XV6 下的陷入机制 https://pdos.csail.mit.edu/6.828/2020/xv6/book-riscv-rev1.pdf 这个实验旨在探索系统调用如何实现了trap，会先做一个有关栈的练习，然后…...
基于YOLOv8-OBB的旋转目标检测：从数据制作到自动标注完整指南
一、引言 目标检测作为计算机视觉中的核心任务，广泛应用于安防监控、自动驾驶、工业质检等场景。传统的目标检测方法多使用水平边界框（HBB）进行目标定位。然而在一些特殊应用场景（如遥感图像、文本检测、PCB检测等）中…...
【自然语言处理与大模型】向量数据库：Chroma使用指南
Chroma是一款功能强大的开源 AI 应用数据库，专为高效数据存储与检索而设计。它不仅支持 Embedding 和 Metadata 的存储，还集成了多项核心功能，包括向量搜索、全文搜索、Document 存储、Metadata 过滤以及多模态检索。此外，Chroma …...
一文掌握工业相机选型计算
目录 一、基本概念 1.1 物方和像方 1.2 工作距离和视场 1.3 放大倍率 1.4 相机芯片尺寸 二、公式计算 三、实例应用 一、基本概念 1.1 物方和像方 在光学领域，物方（Object Space）是与像方（Image Space）相对的…...
【周输入】510周阅读推荐-3
前文 【周输入】510周阅读推荐-1-CSDN博客 【周输入】510周阅读推荐-2-CSDN博客 本次推荐 目录 前文 本次推荐 算法技术 模型产品 算法技术 vLLM和DeepSpeed部署模型的优缺点_vllm deepspeed-CSDN博客 优点缺点总结vLLM 适用于推理 优化内存管理 高效并行化 功能单…...
机器学习（11）——xgboost
文章目录 1. 算法背景和动机1.1. 提升算法（Boosting）1.2. XGBoost的改进动机2. 算法基础 3. 核心创新3.4 稀疏感知算法 4. 系统优化4.1 列块(Column Block)4.2 缓存感知访问4.3 外存计算 5. 算法细节5.1 树生长策略5.2 特征重要性评估5.3 自定义目标函数…...
大语言模型上下文长度：发展历程、局限与技术突破
1. 引言：什么是上下文长度及其重要性 上下文长度（Context Length），也称为上下文窗口（Context Window），指的是大语言模型（LLM）在处理和生成文本时能够有效记忆和利用的信…...
ControlNet简洁
ControlNet 什么是ControlNet ControlNet是一种用于控制扩散模型生成结果的网络结构。该结构可以将边缘图，结构图等信息注入扩散模型，从而能够对生成结果进行更为精细的控制。 ControlNet是怎么实现的 在模型结构方面，其大致结构如下图所…...
【C】C程序内存分配
文章目录 1. C程序内存布局 1. C程序内存布局 从低地址到高地址依次为： 代码段 存储内容：存放编译后的机器指令特点：代码段是只读的；可共享，多个进程可共享同一份代码 数据段 存储内容 已初始化的全局变量已初始化的静…...
论文学习：《引入TEC - LncMir，通过对RNA序列的深度学习来预测lncRNA - miRNA的相互作用》
长链非编码RNA ( long noncoding RNAs，lncRNAs )是一类长度通常大于200个核糖核苷酸的非编码RNA ，微小RNA ( microRNAs，miRNAs )是一类由22个核糖核苷酸组成的短链非编码RNA。近年来，越来越多的研究表明，lncRNA和miRNA…...
【每日一题丨2025年5.12～5.18】排序相关题
个人主页：Guiat 归属专栏：每日一题 文章目录 1. 【5.12】P1068 [NOIP 2009 普及组] 分数线划定2. 【5.13】P5143 攀爬者3. 【5.14】P12366 [蓝桥杯 2022 省 Python B] 数位排序4. 【5.15】P10901 [蓝桥杯 2024 省 C] 封闭图形个数5.【5.16】P12165 [蓝桥…...
AIDA64 extreme7.5 版本注册激活方法
一、AIDA 7.5 序列号 3BQN1-FUYD6-4GDT1-MDPUY-TLCT7 UVLNY-K3PDB-6IDJ6-CD8LY-NMVZM 4PIID-N3HDB-IWDJI-6DMWY-9EZVU 二、安装激活方法 激活步骤： 1、打开AIDA64软件，点击顶部菜单栏的“帮助”→“输入序列号” 2、将生成的序列号粘贴至输入框&a…...
Python 条件语句详解
条件语句是编程中用于控制程序流程的基本结构，Python 提供了几种条件语句来实现不同的逻辑判断。 1. if 语句 最基本的条件语句形式： if 条件:# 条件为真时执行的代码块示例： age 18 if age > 18:print("你已经成年了")2. …...
)
模型评估与调优(PyTorch)
文章目录 模型评估方法混淆矩阵混淆矩阵中的指标ROC曲线（受试者工作特征）AUCR平方残差均方误差（MSE）均方根误差（RMSE）平均绝对误差（MAE） 模型调优方法交叉验证（CV&#x…...
oppo手机安装APK失败报错：安装包异常
如果你的apk文件在oppo手机安装失败了，像这样： 先说我们当时解决方式： 如果还没上架应用市场的测试包，在上面图一中需要关闭“超级守护”，类似华为的纯净模式。如果开启了还还不行，安装页面的报错太笼统不…...
互联网大厂Java面试场景：从缓存到容器化的技术问答
场景：互联网大厂Java面试之旅 面试官：严肃的技术专家 应聘者：搞笑的水货程序员明哥 第一轮：缓存技术与数据库优化 面试官：明哥，你能谈谈Redis的常见使用场景和一些优化技巧吗？ 明哥…...
【android bluetooth 协议分析 01】【HCI 层介绍 6】【WriteLeHostSupport命令介绍】
HCI 指令 HCI_Write_LE_Host_Support 是 Bluetooth Host 向 Controller 发送的一条指令，用于启用或禁用主机对 Bluetooth Low Energy（LE）的支持能力。该指令属于 HCI（Host Controller Interface）命令集合中，…...
Helm配置之为特定Deployment配置特定Docker仓库（覆盖全局配置）
文章目录 Helm配置之为特定Deployment配置特定Docker仓库（覆盖全局配置）需求方法1：使用Helm覆盖值方法2: 在Lens中临时修改Deployment配置步骤 1: 创建 Docker Registry Secret步骤 2: 在 Deployment 中引用 Secret参考资料Helm配置之为特定Deployment配置特定Docker仓库（覆…...
项目：在线音乐播放服务器——基于SSM框架和mybatis
介绍项目 项目主要是基于SSM框架和mybatis进行实现 主要的功能： 登陆界面，用户注册，音乐的播放列表，删除指定的歌曲，批量删除指定的歌曲，收藏歌曲，查询歌曲，从收藏列表中删除收藏…...
Linux配置vimplus
配置vimplus CentOS的配置方案很简单，但是Ubuntu的解决方案网上也很多但是有效的很少，尤其是22和24的解决方案，在此我整理了一下我遇到的问题解决方法 CentOS7 一键配置VimForCPP 基本上不会有什么特别难解决的报错 sudo yum install vims…...
Ubuntu22.04开机运行程序
新建启动文件 sudo vim /etc/systemd/system/trojan.service 2. 写入配置文件 [Unit] DescriptionTrojan Proxy Service Afternetwork.target[Service] Typesimple ExecStart/home/cui/Downloads/trojan/trojan -c /home/cui/Downloads/trojan/config.json Restarton-failur…...
高效查询：位图、B+树
1. 位图（BitMap）与布隆过滤器（Bloom Filter） 1.1. 问题背景与解决方案 问题背景 场景：网页爬虫判重 搜索引擎的爬虫会不断地解析网页中的链接并继续爬取。一个网页可能在多个页面中出现，容易重复爬取。…...
HashMap的扩容机制
在添加元素或初始化的时候需要调用resize方法进行扩容，第一次添加数据初始化数组长度为16，以后每次每次扩容都是达到了扩容阈值（数组长度 * 0.75） 每次扩容的时候，都是扩容之前容量的2倍； 扩容之后&#…...
从坏道扫描到错误修复：HD Tune实战指南
一、硬盘检测的必要性 随着计算机使用时间的增加，机械硬盘和固态硬盘都会出现不同程度的性能衰减。定期进行硬盘健康检查可以：及时发现潜在故障；预防数据丢失风险；掌握存储设备实际状态。 二、HD Tune功能解析 性能测试&#x…...
Leetcode 3553. Minimum Weighted Subgraph With the Required Paths II
Leetcode 3553. Minimum Weighted Subgraph With the Required Paths II 1. 解题思路2. 代码实现 题目链接：3553. Minimum Weighted Subgraph With the Required Paths II 1. 解题思路 这一题很惭愧，并没有自力搞定，是看了大佬们的解答才有…...
算法加训之最短路 上（dijkstra算法）
目录 P4779 【模板】单源最短路径（标准版）（洛谷） 思路 743. 网络延迟时间（力扣） 思路 1514.概率最大路径（力扣） 思路 1631.最小体力消耗路径 思路 1976. 到达目的地的方案数 …...
01 Nginx安装及基本配置
01 Nginx安装 # 官网：https://nginx.org/en/ # 点击下载图1 Nginx下载官网 # https://nginx.org/en/download.html # 全是各个平台的源码包图2 Nginx下载版本 # 找到最下面的stable and mainline(稳定版和主线版)图3 找到最下面的稳定版 # https://nginx.org/en/li…...
ABP vNext 多租户系统实现登录页自定义 Logo 的最佳实践
🚀 ABP vNext 多租户系统实现登录页自定义 Logo 的最佳实践 🧭 版本信息与运行环境 ABP Framework：v8.1.5.NET SDK：8.0数据库：PostgreSQL（支持 SQLServer、MySQL 等）BLOB 存储：本地…...
Docker 网络
目录 前言 1. Docker 网络模式 2. 默认 bridge 网络详解 （1）特点 （2）操作示例 3. host 网络模式 （1）特点 （2）操作示例 4. overlay…...
btc交易所关键需求区 XBIT反弹与上涨潜力分析
在加密货币市场的浪潮中，狗狗币（DOGE）近期的走势吸引了众多投资者的目光。根据XBIT分析，狗狗币刚刚踏入关键需求区，此前虽从高点大幅下跌了10%，但XBIT去中心化交易所平台分析师认为，短期内它有望…...
深度剖析：YOLOv8融入UNetv2 SDI模块的性能提升之旅
文章目录 一、引言二、SDI多层次特征融合模块概述（一）背景和动机（二）模块设计原理 三、SDI模块实现（一）关键代码结构（二）代码解析 四、将SDI模块融入YOLOv8（一࿰…...
图像定制大一统？字节提出DreamO，支持人物生成、 ID保持、虚拟试穿、风格迁移等多项任务，有效解决多泛化性冲突。
字节提出了一个统一的图像定制框架DreamO，支持人物生成、 ID保持、虚拟试穿、风格迁移等多项任务，不仅在广泛的图像定制场景中取得了高质量的结果，而且在适应多条件场景方面也表现出很强的灵活性。现在已经可以支持消费级 GPU（16G…...
spark数据处理练习题详解【下】
12. (单选题) def main(args: Array[String]): Unit { println(func1("张三",f1)) } def func1(name:String,fp:(________________)): String { fp(name) } def f1(s:String): String { "welcome "s } 选择填空（） A.String>S…...
_条件渲染)
Vue基础(11)_条件渲染
原生css想让显示的元素隐藏，方式有以下几点： display: none; opacity: 0; visibility: hidden; 那么vue中是怎样实现元素显示/隐藏的呢？ 条件渲染 v-show 写法：v-show"表达式" 判断：表达式转换为布尔值(tr…...
湖北理元理律师事务所：债务优化服务的四维创新实践
在债务问题普遍影响家庭经济稳定的当下，专业法律服务机构的价值不仅在于提供解决方案，更需构建可持续的服务生态。湖北理元理律师事务所通过“法律心理技术教育”四维服务体系，探索出一条兼顾债务化解与生活质量保障的创新路径。 服务模式创…...
ubuntu工控机固定设备usb串口号
ubuntu工控机固定设备usb串口号 1、多个USB设备的ID相同 ubuntu系统中的串口使用权限并没有对所有的用户进行开放，所以在使用代码对串口进行操作时，需要打开用户对串口的使用权限，否则在代码中会出现“串口无法打开的报错”，只有…...
MongoDB的安装及简单使用
MongoDB 是一个开源的文档型 NoSQL 数据库，由 MongoDB Inc. 开发，专为灵活性和可扩展性设计。 特点： 1.文档模型：数据以 BSON（二进制 JSON）格式存储，支持嵌套结构。 2.动态 S…...
卷积神经网络进阶：转置卷积与棋盘效应详解
【内容摘要】 本文深入解析卷积神经网络中的转置卷积（反卷积）技术，重点阐述标准卷积与转置卷积的计算过程、转置卷积的上采样作用，以及其常见问题——棋盘效应的产生原因与解决方法，为图像分割、超分辨率等任务提供理论…...
Linux进程信号（三）之信号产生2
文章目录 4. 由软件条件产生信号5. 硬件异常产生信号模拟一下除0错误和野指针异常除0错误野指针错误 总结思考一下 4. 由软件条件产生信号 SIGPIPE是一种由软件条件产生的信号,在“管道”中已经介绍过了。 软件条件不就绪，很明显这个软件条件没有直接报错ÿ…...
【AWS入门】Amazon SageMaker简介
【AWS入门】Amazon SageMaker简介 [AWS Essentials] Brief Introduction to Amazon SageMaker By JacksonML 机器学习(Machine Learning，简称ML) 是当代流行的计算机科学分支技术。通常，人们在本地部署搭建环境，以满足机器学习的要求。 AWS…...