主要改动: - 重新设计登录页面,使用原生input替代antd-mobile组件以更好控制样式 - 添加密码可见性切换功能(眼睛图标) - 实现登录/注册切换UI,注册链接移至底部 - 优化输入框样式,添加明显的边框和背景色 - 实现移动端防缩放功能(touch-action + JS事件监听) - 配置Vite代理解决CORS问题,API请求使用相对路径 - 完善CLAUDE.md和README.md文档,添加文档同步更新规范 - 更新技术栈说明,明确使用yarn作为包管理工具 技术细节: - 渐变背景(紫色主题) - 白色输入框带半透明边框,聚焦时显示光晕效果 - 防止移动端双指缩放和双击缩放 - Vite代理配置: /api/* -> http://localhost:8080 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
AnKao Web 项目
这是一个使用Go语言和Gin框架构建的Web应用项目。
项目结构
AnKao/
├── main.go # 主程序入口
├── internal/ # 私有应用代码
│ ├── handlers/ # HTTP请求处理器
│ ├── middleware/ # 中间件
│ └── models/ # 数据模型
├── pkg/ # 公共库代码
│ └── config/ # 配置管理
├── web/ # 前端项目目录
│ ├── src/ # 源代码
│ │ ├── pages/ # 页面组件
│ │ ├── components/ # 可复用组件
│ │ └── main.tsx # 入口文件
│ ├── vite.config.ts # Vite配置(含API代理)
│ └── package.json # 前端依赖
├── go.mod # Go模块文件
├── CLAUDE.md # 开发规范文档
└── README.md # 项目说明
快速开始
后端服务器
# 安装依赖
go mod tidy
# 运行服务器
go run main.go
服务器将在 http://localhost:8080 启动
前端开发服务器
# 进入前端目录
cd web
# 安装依赖 (使用 yarn)
yarn install
# 运行开发服务器
yarn dev
前端开发服务器将在 http://localhost:3000 启动
注意: 前端使用 Vite 代理,所有 /api/* 请求会自动转发到后端服务器,无需配置 CORS。
API端点
用户相关
POST /api/login- 用户登录POST /api/register- 用户注册
题目相关
GET /api/questions- 获取题目列表GET /api/questions/random- 获取随机题目GET /api/questions/:id- 获取指定题目POST /api/submit- 提交答案GET /api/statistics- 获取统计数据POST /api/reset- 重置进度
其他
GET /api/health- 健康检查端点
开发
安装依赖
go mod tidy
构建
go build -o bin/server.exe main.go
运行编译后的程序
# Windows
.\bin\server.exe
# Linux/Mac
./bin/server
特性
- 基于 Gin 框架的高性能 HTTP 服务器
- 自定义日志中间件
- RESTful API 结构
- 健康检查端点
- 用户登录系统(基于JSON文件存储)
- 题目练习功能
- 答题统计功能
- React + TypeScript + Vite 前端
- Ant Design Mobile UI组件库
用户系统
用户数据存储在 users.json 文件中,格式如下:
{
"用户名": {
"password": "密码",
"avatar": "头像URL",
"nickname": "昵称"
}
}
测试账号
- 用户名:
admin/ 密码:123456 - 用户名:
test/ 密码:test123
前端开发
前端项目位于 web/ 目录,使用 yarn 作为包管理工具。
安装依赖
cd web
yarn install
运行开发服务器
yarn dev
开发服务器运行在 http://localhost:3000
构建生产版本
yarn build
API代理
开发环境下,Vite已配置代理,前端 /api/* 请求会自动转发到 http://localhost:8080,无需担心CORS问题。
页面结构
- 登录页 (
/login) - 用户登录和注册,支持密码可见性切换 - 首页 (
/) - 题目练习、随机题目、题目列表、筛选等功能 - 我的 (
/profile) - 用户信息、退出登录
特性
后端特性
- 基于 Gin 框架的高性能 HTTP 服务器
- 自定义日志中间件
- RESTful API 结构
- 健康检查端点
- 用户登录和注册系统(基于JSON文件存储)
- 题目练习功能
- 答题统计功能
前端特性
- React + TypeScript + Vite 技术栈
- Ant Design Mobile UI组件库
- 移动端优化,防止双指缩放
- CSS Modules 样式隔离
- 现代化的登录/注册界面
- 密码可见性切换功能
技术栈
后端
- Go 1.25.1
- Gin v1.11.0 - Web 框架
前端
- React 18 - UI框架
- TypeScript - 类型安全
- Vite - 构建工具
- Ant Design Mobile - UI组件库
- React Router - 路由管理
- Less - CSS预处理器
- Yarn - 包管理工具
开发工具
- API代理配置(Vite)
- CSS Modules
- 清晰的项目架构,易于扩展
Description
Languages
TypeScript
53.7%
Go
30.6%
Less
15.1%
HTML
0.6%