Skip to content

Commit aa70e46

Browse files
liyupiliyupi
committed
前端 - 完成页面开发和核心功能
1 parent cd832f3 commit aa70e46

File tree

22 files changed

+3156
-0
lines changed

22 files changed

+3156
-0
lines changed

‎coder-test-frontend/.gitignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
# Environment variables
27+
.env
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# Package manager
34+
package-lock.json
35+
yarn.lock
36+
pnpm-lock.yaml

‎coder-test-frontend/DEPLOYMENT.md‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
# 部署说明
2+
3+
## 开发环境启动
4+
5+
### 前提条件
6+
1. 确保已安装 Node.js 16 或更高版本
7+
2. 确保后端服务已在 `http://localhost:8123` 运行
8+
9+
### Windows 用户
10+
双击运行 `start.bat` 文件，或在命令行中执行：
11+
```cmd
12+
start.bat
13+
```
14+
15+
### macOS/Linux 用户
16+
在终端中执行：
17+
```bash
18+
./start.sh
19+
```
20+
21+
### 手动启动
22+
1. 安装依赖：
23+
```bash
24+
npm install
25+
```
26+
27+
2. 启动开发服务器：
28+
```bash
29+
npm run dev
30+
```
31+
32+
访问地址：`http://localhost:3000`
33+
34+
## 生产环境部署
35+
36+
### 1. 构建项目
37+
```bash
38+
npm run build
39+
```
40+
构建完成后，`dist` 目录包含所有静态文件。
41+
42+
### 2. 部署到服务器
43+
44+
#### 使用 Nginx
45+
```nginx
46+
server {
47+
listen 80;
48+
server_name your-domain.com;
49+
root /path/to/dist;
50+
index index.html;
51+
52+
# 处理 Vue Router 的历史模式
53+
location / {
54+
try_files $uri $uri/ /index.html;
55+
}
56+
57+
# API 代理到后端
58+
location /api {
59+
proxy_pass http://localhost:8123;
60+
proxy_set_header Host $host;
61+
proxy_set_header X-Real-IP $remote_addr;
62+
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
63+
proxy_set_header X-Forwarded-Proto $scheme;
64+
}
65+
}
66+
```
67+
68+
#### 使用 Apache
69+
在 `dist` 目录创建 `.htaccess` 文件：
70+
```apache
71+
<IfModule mod_rewrite.c>
72+
RewriteEngine On
73+
RewriteBase /
74+
RewriteRule ^index\.html$ - [L]
75+
RewriteCond %{REQUEST_FILENAME} !-f
76+
RewriteCond %{REQUEST_FILENAME} !-d
77+
RewriteRule . /index.html [L]
78+
</IfModule>
79+
```
80+
81+
### 3. 环境变量配置
82+
在生产环境中，可以创建 `.env.production` 文件配置环境变量：
83+
```
84+
VITE_API_BASE_URL=https://your-api-domain.com/api
85+
```
86+
87+
## Docker 部署
88+
89+
### 1. 创建 Dockerfile
90+
```dockerfile
91+
# 构建阶段
92+
FROM node:18-alpine as build-stage
93+
WORKDIR /app
94+
COPY package*.json ./
95+
RUN npm install
96+
COPY . .
97+
RUN npm run build
98+
99+
# 生产阶段
100+
FROM nginx:alpine as production-stage
101+
COPY --from=build-stage /app/dist /usr/share/nginx/html
102+
COPY nginx.conf /etc/nginx/conf.d/default.conf
103+
EXPOSE 80
104+
CMD ["nginx", "-g", "daemon off;"]
105+
```
106+
107+
### 2. 创建 nginx.conf
108+
```nginx
109+
server {
110+
listen 80;
111+
server_name localhost;
112+
root /usr/share/nginx/html;
113+
index index.html;
114+
115+
location / {
116+
try_files $uri $uri/ /index.html;
117+
}
118+
119+
location /api {
120+
proxy_pass http://backend:8123;
121+
proxy_set_header Host $host;
122+
proxy_set_header X-Real-IP $remote_addr;
123+
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
124+
proxy_set_header X-Forwarded-Proto $scheme;
125+
}
126+
}
127+
```
128+
129+
### 3. 构建和运行
130+
```bash
131+
docker build -t coder-test-frontend .
132+
docker run -p 80:80 coder-test-frontend
133+
```
134+
135+
## 常见问题
136+
137+
### 1. 跨域问题
138+
如果遇到跨域问题，确保：
139+
- 开发环境中 Vite 代理配置正确
140+
- 生产环境中 Nginx/Apache 代理配置正确
141+
- 后端服务允许跨域请求
142+
143+
### 2. 路由问题
144+
如果页面刷新后出现 404：
145+
- 确保服务器配置了 Vue Router 的历史模式支持
146+
- 检查 `try_files` 配置是否正确
147+
148+
### 3. API 请求失败
149+
检查：
150+
- 后端服务是否正常运行
151+
- API 地址是否正确
152+
- 网络连接是否正常
153+
154+
### 4. 构建失败
155+
常见原因：
156+
- Node.js 版本过低
157+
- 依赖包版本冲突
158+
- 内存不足
159+
160+
解决方案：
161+
```bash
162+
# 清除缓存
163+
npm cache clean --force
164+
165+
# 删除 node_modules 重新安装
166+
rm -rf node_modules package-lock.json
167+
npm install
168+
```

‎coder-test-frontend/README.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
# 程序员技术练兵场 - 前端
2+
3+
这是一个基于 Vue 3 的前端应用，为程序员提供技术挑战和薪资评估的平台。
4+
5+
## 功能特性
6+
7+
- 🚀 **AI 智能生成关卡**：根据用户薪资水平动态生成技术挑战
8+
- 📊 **薪资评估系统**：基于答题表现评估技术水平
9+
- 🎯 **拖拽答题**：支持拖拽操作的交互式答题体验
10+
- 📈 **历史记录**：完整的挑战历史和成长轨迹
11+
- 💼 **投递建议**：基于技术水平提供职位投递建议
12+
- 📱 **响应式设计**：支持多种设备访问
13+
14+
## 技术栈
15+
16+
- **Vue 3** - 渐进式 JavaScript 框架
17+
- **Vue Router** - 官方路由管理器
18+
- **Pinia** - 状态管理库
19+
- **Element Plus** - Vue 3 组件库
20+
- **Axios** - HTTP 客户端
21+
- **Vite** - 前端构建工具
22+
23+
## 项目结构
24+
25+
```
26+
src/
27+
├── api/ # API 请求模块
28+
│ ├── user.js # 用户相关接口
29+
│ ├── level.js # 关卡相关接口
30+
│ └── userLevel.js # 用户关卡相关接口
31+
├── components/ # 公共组件
32+
├── router/ # 路由配置
33+
├── stores/ # 状态管理
34+
│ └── user.js # 用户状态
35+
├── utils/ # 工具函数
36+
│ └── request.js # 请求封装
37+
├── views/ # 页面组件
38+
│ ├── Home.vue # 首页
39+
│ ├── Login.vue # 登录页
40+
│ ├── Register.vue # 注册页
41+
│ ├── Challenge.vue # 挑战页面
42+
│ ├── History.vue # 历史记录
43+
│ └── Result.vue # 结果详情
44+
├── App.vue # 根组件
45+
└── main.js # 应用入口
46+
```
47+
48+
## 开发环境要求
49+
50+
- Node.js >= 16
51+
- npm 或 yarn
52+
53+
## 安装和运行
54+
55+
1. 安装依赖：
56+
```bash
57+
npm install
58+
```
59+
60+
2. 启动开发服务器：
61+
```bash
62+
npm run dev
63+
```
64+
65+
3. 构建生产版本：
66+
```bash
67+
npm run build
68+
```
69+
70+
4. 预览构建结果：
71+
```bash
72+
npm run preview
73+
```
74+
75+
## API 接口
76+
77+
前端通过以下接口与后端交互：
78+
79+
### 用户接口
80+
- `POST /api/user/register` - 用户注册
81+
- `POST /api/user/login` - 用户登录
82+
- `POST /api/user/logout` - 用户注销
83+
- `GET /api/user/current` - 获取当前用户
84+
85+
### 关卡接口
86+
- `POST /api/level/generate` - 生成关卡
87+
- `GET /api/level/{id}` - 获取关卡详情
88+
89+
### 用户关卡接口
90+
- `POST /api/user-level/submit` - 提交答案
91+
- `GET /api/user-level/{id}` - 获取闯关详情
92+
- `GET /api/user-level/history` - 获取闯关历史
93+
94+
## 主要页面说明
95+
96+
### 首页 (Home.vue)
97+
- 展示平台介绍和特色功能
98+
- 用户登录状态显示
99+
- 快速开始挑战入口
100+
101+
### 挑战页面 (Challenge.vue)
102+
- AI 生成技术关卡
103+
- 拖拽式答题交互
104+
- 实时薪资显示
105+
- 关卡难度匹配
106+
107+
### 历史记录 (History.vue)
108+
- 挑战历史列表
109+
- 统计数据展示
110+
- 快速查看结果详情
111+
112+
### 结果页面 (Result.vue)
113+
- 详细的评分结果
114+
- 薪资变化展示
115+
- 技术解析和建议
116+
- 投递公司推荐
117+
118+
## 开发注意事项
119+
120+
1. **薪资数据处理**：所有薪资相关字段保持字符串格式，避免精度丢失
121+
2. **拖拽功能**：使用原生 HTML5 拖拽 API 实现
122+
3. **响应式设计**：确保在不同设备上的良好体验
123+
4. **错误处理**：统一的错误提示和处理机制
124+
5. **路由守卫**：需要登录的页面进行权限验证
125+
126+
## 浏览器支持
127+
128+
- Chrome >= 87
129+
- Firefox >= 78
130+
- Safari >= 14
131+
- Edge >= 88
132+
133+
## 许可证
134+
135+
MIT License

‎coder-test-frontend/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>程序员技术练兵场</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎coder-test-frontend/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "coder-test-frontend",
3+
"version": "1.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"vue": "^3.4.0",
12+
"vue-router": "^4.2.5",
13+
"axios": "^1.6.2",
14+
"element-plus": "^2.4.4",
15+
"@element-plus/icons-vue": "^2.3.1",
16+
"pinia": "^2.1.7"
17+
},
18+
"devDependencies": {
19+
"@vitejs/plugin-vue": "^4.5.2",
20+
"vite": "^5.0.8"
21+
}
22+
}

0 commit comments

Comments
 (0)