200 lines
4.5 KiB
Markdown
200 lines
4.5 KiB
Markdown
# 云酒馆 Vue 前台 - 快速启动指南
|
||
|
||
## ✅ 已完成的功能
|
||
|
||
### 认证模块
|
||
- ✅ 用户登录
|
||
- ✅ 用户注册
|
||
- ✅ Token 管理
|
||
- ✅ 路由守卫
|
||
- ✅ 自动登录检查
|
||
|
||
### 页面
|
||
- ✅ 登录页面（/auth/login）
|
||
- ✅ 注册页面（/auth/register）
|
||
- ✅ 首页（/）
|
||
|
||
### 技术栈
|
||
- ✅ Vue 3 + TypeScript
|
||
- ✅ Vite 5
|
||
- ✅ Element Plus
|
||
- ✅ Pinia
|
||
- ✅ Vue Router 4
|
||
- ✅ Axios
|
||
|
||
## 🚀 启动步骤
|
||
|
||
### 1. 启动 Go 后端
|
||
```bash
|
||
# 在项目根目录
|
||
cd server
|
||
go run main.go
|
||
```
|
||
|
||
**确认后端启动成功：**
|
||
- 看到日志：`register table success`
|
||
- 看到日志：`前台静态文件服务已启动`
|
||
- 访问：http://localhost:8888/app/auth/login （应该返回 404 或错误，这是正常的）
|
||
|
||
### 2. 启动 Vue 前端
|
||
```bash
|
||
# 在项目根目录
|
||
cd web-app-vue
|
||
npm run dev
|
||
```
|
||
|
||
**确认前端启动成功：**
|
||
- 看到：`VITE v5.x.x ready in xxx ms`
|
||
- 看到：`Local: http://localhost:3000/`
|
||
- 看到：`Network: use --host to expose`
|
||
|
||
### 3. 访问应用
|
||
打开浏览器访问：**http://localhost:3000**
|
||
|
||
应该会自动跳转到登录页：**http://localhost:3000/auth/login**
|
||
|
||
## 🧪 测试流程
|
||
|
||
### 第一步：注册新用户
|
||
1. 点击「立即注册」链接，或直接访问 http://localhost:3000/auth/register
|
||
2. 填写注册信息：
|
||
```
|
||
用户名：test001
|
||
密码：123456
|
||
确认密码：123456
|
||
昵称：测试用户（可选）
|
||
邮箱：test@example.com（可选）
|
||
```
|
||
3. 点击「注册」按钮
|
||
4. 看到成功提示：「注册成功，请登录」
|
||
5. 自动跳转到登录页
|
||
|
||
### 第二步：登录
|
||
1. 在登录页输入刚才注册的信息：
|
||
```
|
||
用户名：test001
|
||
密码：123456
|
||
```
|
||
2. 点击「登录」按钮
|
||
3. 看到成功提示：「登录成功」
|
||
4. 自动跳转到首页
|
||
|
||
### 第三步：查看首页
|
||
1. 应该看到欢迎信息：「欢迎回来，测试用户！」
|
||
2. 看到用户统计数据（对话数量、消息数量等）
|
||
3. 右上角显示用户头像和昵称
|
||
|
||
### 第四步：退出登录
|
||
1. 点击右上角用户头像
|
||
2. 选择「退出登录」
|
||
3. 看到提示：「已退出登录」
|
||
4. 自动跳转到登录页
|
||
|
||
### 第五步：测试路由守卫
|
||
1. 退出登录状态
|
||
2. 直接访问 http://localhost:3000/
|
||
3. 应该自动跳转到 http://localhost:3000/auth/login
|
||
4. 看到提示：「请先登录」
|
||
|
||
## 📊 端口说明
|
||
|
||
| 服务 | 端口 | 地址 |
|
||
|-----|------|------|
|
||
| Go 后端 | 8888 | http://localhost:8888 |
|
||
| Vue 前端 | 3000 | http://localhost:3000 |
|
||
| API 代理 | - | /app/* → http://localhost:8888 |
|
||
|
||
## 🔍 调试技巧
|
||
|
||
### 查看网络请求
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 切换到 Network 标签
|
||
3. 筛选 Fetch/XHR
|
||
4. 查看登录/注册的请求和响应
|
||
|
||
### 查看存储的数据
|
||
在浏览器控制台运行：
|
||
```javascript
|
||
// 查看 Token
|
||
console.log(localStorage.getItem('st_access_token'))
|
||
|
||
// 查看用户信息
|
||
console.log(JSON.parse(localStorage.getItem('st_user_info')))
|
||
|
||
// 清除登录状态
|
||
localStorage.clear()
|
||
```
|
||
|
||
### 查看 Pinia Store 状态
|
||
安装 Vue DevTools 浏览器扩展，可以查看：
|
||
- Pinia Stores 状态
|
||
- 组件树
|
||
- 路由信息
|
||
|
||
## ❗ 常见问题
|
||
|
||
### Q1: 启动前端后，页面空白？
|
||
**A:** 检查浏览器控制台是否有错误。可能原因：
|
||
- 路由配置问题
|
||
- 组件导入路径错误
|
||
- 刷新页面试试
|
||
|
||
### Q2: 登录时提示「网络错误」？
|
||
**A:** 检查：
|
||
1. Go 后端是否正在运行
|
||
2. 后端地址是否正确（http://localhost:8888）
|
||
3. 浏览器控制台的网络请求详情
|
||
4. 是否有 CORS 错误
|
||
|
||
### Q3: 点击登录没反应？
|
||
**A:** 检查：
|
||
1. 浏览器控制台是否有错误
|
||
2. 表单验证是否通过
|
||
3. 网络请求是否发出
|
||
|
||
### Q4: 登录成功但没跳转？
|
||
**A:** 检查：
|
||
1. 路由配置是否正确
|
||
2. 浏览器控制台是否有路由错误
|
||
3. localStorage 是否保存了 token
|
||
|
||
## 📝 开发技巧
|
||
|
||
### 热更新
|
||
修改代码后，浏览器会自动刷新，无需手动刷新。
|
||
|
||
### 查看类型提示
|
||
在 VSCode 中，鼠标悬停在变量上可以看到类型信息。
|
||
|
||
### 快捷键
|
||
- `Ctrl + C` - 停止开发服务器
|
||
- `Ctrl + Shift + I` - 打开浏览器开发者工具
|
||
|
||
## 🎯 下一步开发
|
||
|
||
### 立即可做
|
||
1. 测试注册和登录功能
|
||
2. 检查 UI 效果
|
||
3. 优化样式细节
|
||
|
||
### 后续开发
|
||
1. 角色管理模块
|
||
2. 对话功能模块
|
||
3. 设置页面
|
||
4. WebSocket 集成
|
||
|
||
## 🎉 恭喜
|
||
|
||
Vue 认证模块已经完成！你现在拥有：
|
||
- 🎨 现代化的 UI
|
||
- 🔐 完整的认证流程
|
||
- 💪 类型安全的代码
|
||
- 🏗️ 清晰的项目结构
|
||
|
||
**开始测试吧！** 🚀
|
||
|
||
---
|
||
|
||
**创建日期**: 2026-02-10
|
||
**版本**: v1.0.0
|