426 lines
8.7 KiB
Markdown
426 lines
8.7 KiB
Markdown
# AIGC Demo - Vue.js 前端
|
||
|
||
这是一个基于 Vue.js 3 + Element Plus 的现代化前端应用，为 AIGC Demo 项目提供用户界面。
|
||
|
||
## 🚀 技术栈
|
||
|
||
- **Vue.js 3** - 渐进式 JavaScript 框架
|
||
- **Element Plus** - Vue 3 组件库
|
||
- **Vue Router** - 官方路由管理器
|
||
- **Pinia** - Vue 状态管理库
|
||
- **Axios** - HTTP 客户端
|
||
- **Vite** - 现代化构建工具
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
frontend/
|
||
├── src/
|
||
│ ├── components/ # 公共组件
|
||
│ │ ├── NavBar.vue # 导航栏
|
||
│ │ └── Footer.vue # 页脚
|
||
│ ├── views/ # 页面组件
|
||
│ │ ├── Home.vue # 首页
|
||
│ │ ├── Login.vue # 登录页
|
||
│ │ ├── Register.vue # 注册页
|
||
│ │ ├── Orders.vue # 订单列表
|
||
│ │ └── ...
|
||
│ ├── router/ # 路由配置
|
||
│ │ └── index.js
|
||
│ ├── stores/ # 状态管理
|
||
│ │ ├── user.js # 用户状态
|
||
│ │ └── orders.js # 订单状态
|
||
│ ├── api/ # API 接口
|
||
│ │ ├── request.js # Axios 配置
|
||
│ │ ├── auth.js # 认证接口
|
||
│ │ ├── orders.js # 订单接口
|
||
│ │ └── payments.js # 支付接口
|
||
│ ├── assets/ # 静态资源
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── App.vue # 根组件
|
||
│ └── main.js # 入口文件
|
||
├── index.html # HTML 模板
|
||
├── package.json # 依赖配置
|
||
├── vite.config.js # Vite 配置
|
||
└── README.md # 说明文档
|
||
```
|
||
|
||
## 🛠️ 安装和运行
|
||
|
||
### 前置要求
|
||
|
||
- Node.js 16+
|
||
- npm 或 yarn
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
cd frontend
|
||
npm install
|
||
```
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问 http://localhost:3000
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览生产版本
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 🔧 配置说明
|
||
|
||
### Vite 配置
|
||
|
||
```javascript
|
||
// vite.config.js
|
||
export default defineConfig({
|
||
plugins: [vue()],
|
||
resolve: {
|
||
alias: {
|
||
'@': resolve(__dirname, 'src')
|
||
}
|
||
},
|
||
server: {
|
||
port: 3000,
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://localhost:8080', // 后端服务地址
|
||
changeOrigin: true
|
||
}
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
### API 代理
|
||
|
||
前端开发服务器会自动将 `/api` 请求代理到后端服务器 `http://localhost:8080`，这样避免了跨域问题。
|
||
|
||
## 📱 功能特性
|
||
|
||
### 🎨 现代化 UI
|
||
- **Element Plus** 组件库，提供丰富的 UI 组件
|
||
- **响应式设计**，支持桌面、平板、手机
|
||
- **主题定制**，统一的视觉风格
|
||
- **图标支持**，Element Plus Icons
|
||
|
||
### 🔐 用户认证
|
||
- **登录/注册**，完整的用户认证流程
|
||
- **表单验证**，实时验证用户输入
|
||
- **状态管理**，Pinia 管理用户状态
|
||
- **路由守卫**，保护需要认证的页面
|
||
|
||
### 📋 订单管理
|
||
- **订单列表**，分页、筛选、搜索
|
||
- **订单详情**，完整信息展示
|
||
- **订单创建**，动态表单
|
||
- **状态管理**，订单状态流转
|
||
|
||
### 💳 支付集成
|
||
- **多种支付方式**，支付宝、PayPal
|
||
- **支付状态跟踪**，实时状态更新
|
||
- **支付记录**，完整的支付历史
|
||
|
||
### 👨💼 管理功能
|
||
- **用户管理**，用户列表和操作
|
||
- **订单管理**，管理员订单管理
|
||
- **权限控制**，基于角色的访问控制
|
||
|
||
## 🔄 状态管理
|
||
|
||
### 用户状态 (stores/user.js)
|
||
|
||
```javascript
|
||
export const useUserStore = defineStore('user', () => {
|
||
const user = ref(null)
|
||
const token = ref(localStorage.getItem('token'))
|
||
const isAuthenticated = computed(() => !!token.value && !!user.value)
|
||
|
||
const loginUser = async (credentials) => { /* ... */ }
|
||
const registerUser = async (userData) => { /* ... */ }
|
||
const logoutUser = async () => { /* ... */ }
|
||
|
||
return { user, token, isAuthenticated, loginUser, registerUser, logoutUser }
|
||
})
|
||
```
|
||
|
||
### 订单状态 (stores/orders.js)
|
||
|
||
```javascript
|
||
export const useOrderStore = defineStore('orders', () => {
|
||
const orders = ref([])
|
||
const currentOrder = ref(null)
|
||
const loading = ref(false)
|
||
|
||
const fetchOrders = async (params) => { /* ... */ }
|
||
const createNewOrder = async (orderData) => { /* ... */ }
|
||
const updateOrder = async (id, status) => { /* ... */ }
|
||
|
||
return { orders, currentOrder, loading, fetchOrders, createNewOrder, updateOrder }
|
||
})
|
||
```
|
||
|
||
## 🌐 API 接口
|
||
|
||
### 认证接口
|
||
|
||
```javascript
|
||
// 登录
|
||
POST /api/auth/login
|
||
{
|
||
"username": "user",
|
||
"password": "password"
|
||
}
|
||
|
||
// 注册
|
||
POST /api/auth/register
|
||
{
|
||
"username": "newuser",
|
||
"email": "user@example.com",
|
||
"password": "password"
|
||
}
|
||
|
||
// 获取当前用户
|
||
GET /api/auth/me
|
||
```
|
||
|
||
### 订单接口
|
||
|
||
```javascript
|
||
// 获取订单列表
|
||
GET /api/orders?page=0&size=10&status=PENDING
|
||
|
||
// 获取订单详情
|
||
GET /api/orders/{id}
|
||
|
||
// 创建订单
|
||
POST /api/orders/create
|
||
{
|
||
"orderType": "PRODUCT",
|
||
"currency": "CNY",
|
||
"orderItems": [...]
|
||
}
|
||
|
||
// 更新订单状态
|
||
POST /api/orders/{id}/status
|
||
{
|
||
"status": "PAID",
|
||
"notes": "备注"
|
||
}
|
||
```
|
||
|
||
## 🎯 路由配置
|
||
|
||
```javascript
|
||
const routes = [
|
||
{
|
||
path: '/',
|
||
name: 'Home',
|
||
component: Home,
|
||
meta: { title: '首页' }
|
||
},
|
||
{
|
||
path: '/login',
|
||
name: 'Login',
|
||
component: Login,
|
||
meta: { title: '登录', guest: true }
|
||
},
|
||
{
|
||
path: '/orders',
|
||
name: 'Orders',
|
||
component: Orders,
|
||
meta: { title: '订单管理', requiresAuth: true }
|
||
},
|
||
{
|
||
path: '/admin/orders',
|
||
name: 'AdminOrders',
|
||
component: AdminOrders,
|
||
meta: { title: '订单管理', requiresAuth: true, requiresAdmin: true }
|
||
}
|
||
]
|
||
```
|
||
|
||
## 🔒 权限控制
|
||
|
||
### 路由守卫
|
||
|
||
```javascript
|
||
router.beforeEach((to, from, next) => {
|
||
const userStore = useUserStore()
|
||
|
||
// 检查是否需要认证
|
||
if (to.meta.requiresAuth && !userStore.isAuthenticated) {
|
||
next('/login')
|
||
return
|
||
}
|
||
|
||
// 检查是否需要管理员权限
|
||
if (to.meta.requiresAdmin && !userStore.isAdmin) {
|
||
next('/')
|
||
return
|
||
}
|
||
|
||
next()
|
||
})
|
||
```
|
||
|
||
### API 拦截器
|
||
|
||
```javascript
|
||
// 请求拦截器 - 添加认证头
|
||
api.interceptors.request.use((config) => {
|
||
const token = localStorage.getItem('token')
|
||
if (token) {
|
||
config.headers.Authorization = `Bearer ${token}`
|
||
}
|
||
return config
|
||
})
|
||
|
||
// 响应拦截器 - 处理错误
|
||
api.interceptors.response.use(
|
||
(response) => response.data,
|
||
(error) => {
|
||
if (error.response?.status === 401) {
|
||
// 未授权，跳转到登录页
|
||
localStorage.removeItem('token')
|
||
window.location.href = '/login'
|
||
}
|
||
return Promise.reject(error)
|
||
}
|
||
)
|
||
```
|
||
|
||
## 📱 响应式设计
|
||
|
||
### 断点配置
|
||
|
||
```css
|
||
/* 移动端 */
|
||
@media (max-width: 768px) {
|
||
.page-header {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
/* 平板 */
|
||
@media (min-width: 769px) and (max-width: 1024px) {
|
||
.content {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
/* 桌面端 */
|
||
@media (min-width: 1025px) {
|
||
.container {
|
||
max-width: 1200px;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🚀 部署
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
构建完成后，`dist` 目录包含所有静态文件。
|
||
|
||
### Nginx 配置
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
|
||
location / {
|
||
root /path/to/dist;
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
location /api {
|
||
proxy_pass http://localhost:8080;
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🔧 开发工具
|
||
|
||
### VS Code 推荐插件
|
||
|
||
- **Vue Language Features (Volar)** - Vue 3 支持
|
||
- **TypeScript Vue Plugin (Volar)** - TypeScript 支持
|
||
- **ESLint** - 代码检查
|
||
- **Prettier** - 代码格式化
|
||
- **Auto Rename Tag** - 自动重命名标签
|
||
- **Bracket Pair Colorizer** - 括号配对着色
|
||
|
||
### 调试工具
|
||
|
||
- **Vue DevTools** - Vue 开发者工具
|
||
- **Pinia DevTools** - Pinia 状态管理工具
|
||
- **Element Plus DevTools** - Element Plus 组件调试
|
||
|
||
## 📝 开发规范
|
||
|
||
### 组件命名
|
||
|
||
- 组件文件名使用 PascalCase：`UserProfile.vue`
|
||
- 组件名使用 PascalCase：`UserProfile`
|
||
|
||
### 文件结构
|
||
|
||
```
|
||
components/
|
||
├── common/ # 通用组件
|
||
├── layout/ # 布局组件
|
||
└── business/ # 业务组件
|
||
```
|
||
|
||
### 代码风格
|
||
|
||
- 使用 Composition API
|
||
- 优先使用 `<script setup>` 语法
|
||
- 使用 TypeScript 类型定义
|
||
- 遵循 ESLint 规则
|
||
|
||
## 🤝 贡献指南
|
||
|
||
1. Fork 项目
|
||
2. 创建功能分支：`git checkout -b feature/new-feature`
|
||
3. 提交更改：`git commit -am 'Add new feature'`
|
||
4. 推送分支：`git push origin feature/new-feature`
|
||
5. 提交 Pull Request
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
---
|
||
|
||
**注意**: 这是一个演示项目，生产环境使用前请进行充分的安全测试和性能优化。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|