yanlongqi
9540478583
主要改动: - 重新设计登录页面,使用原生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>
200 lines
4.1 KiB
Markdown
200 lines
4.1 KiB
Markdown
# 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 # 项目说明
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 后端服务器
|
||
|
||
```bash
|
||
# 安装依赖
|
||
go mod tidy
|
||
|
||
# 运行服务器
|
||
go run main.go
|
||
```
|
||
|
||
服务器将在 `http://localhost:8080` 启动
|
||
|
||
### 前端开发服务器
|
||
|
||
```bash
|
||
# 进入前端目录
|
||
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` - 健康检查端点
|
||
|
||
## 开发
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
go mod tidy
|
||
```
|
||
|
||
### 构建
|
||
|
||
```bash
|
||
go build -o bin/server.exe main.go
|
||
```
|
||
|
||
### 运行编译后的程序
|
||
|
||
```bash
|
||
# Windows
|
||
.\bin\server.exe
|
||
|
||
# Linux/Mac
|
||
./bin/server
|
||
```
|
||
|
||
## 特性
|
||
|
||
- 基于 Gin 框架的高性能 HTTP 服务器
|
||
- 自定义日志中间件
|
||
- RESTful API 结构
|
||
- 健康检查端点
|
||
- 用户登录系统（基于JSON文件存储）
|
||
- 题目练习功能
|
||
- 答题统计功能
|
||
- React + TypeScript + Vite 前端
|
||
- Ant Design Mobile UI组件库
|
||
|
||
## 用户系统
|
||
|
||
用户数据存储在 [users.json](users.json) 文件中，格式如下：
|
||
|
||
```json
|
||
{
|
||
"用户名": {
|
||
"password": "密码",
|
||
"avatar": "头像URL",
|
||
"nickname": "昵称"
|
||
}
|
||
}
|
||
```
|
||
|
||
### 测试账号
|
||
|
||
- 用户名: `admin` / 密码: `123456`
|
||
- 用户名: `test` / 密码: `test123`
|
||
|
||
## 前端开发
|
||
|
||
前端项目位于 `web/` 目录，使用 **yarn** 作为包管理工具。
|
||
|
||
### 安装依赖
|
||
```bash
|
||
cd web
|
||
yarn install
|
||
```
|
||
|
||
### 运行开发服务器
|
||
```bash
|
||
yarn dev
|
||
```
|
||
|
||
开发服务器运行在 `http://localhost:3000`
|
||
|
||
### 构建生产版本
|
||
```bash
|
||
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
|
||
- 清晰的项目架构，易于扩展
|