st/web-app-vue/启动指南.md

云酒馆 Vue 前台 - 快速启动指南

✅ 已完成的功能

认证模块

• ✅ 用户登录
• ✅ 用户注册
• ✅ Token 管理
• ✅ 路由守卫
• ✅ 自动登录检查

页面

• ✅ 登录页面（/auth/login）
• ✅ 注册页面（/auth/register）
• ✅ 首页（/）

技术栈

• ✅ Vue 3 + TypeScript
• ✅ Vite 5
• ✅ Element Plus
• ✅ Pinia
• ✅ Vue Router 4
• ✅ Axios

🚀 启动步骤

1. 启动 Go 后端

# 在项目根目录
cd server
go run main.go

确认后端启动成功：

• 看到日志：register table success
• 看到日志：前台静态文件服务已启动
• 访问：http://localhost:8888/app/auth/login （应该返回 404 或错误，这是正常的）

2. 启动 Vue 前端

# 在项目根目录
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. 查看登录/注册的请求和响应

查看存储的数据

在浏览器控制台运行：

// 查看 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