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
安装依赖
cd frontend
npm install
开发模式
npm run dev
构建生产版本
npm run build
预览生产版本
npm run preview
🔧 配置说明
Vite 配置
// 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)
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)
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 接口
认证接口
// 登录
POST /api/auth/login
{
"username": "user",
"password": "password"
}
// 注册
POST /api/auth/register
{
"username": "newuser",
"email": "user@example.com",
"password": "password"
}
// 获取当前用户
GET /api/auth/me
订单接口
// 获取订单列表
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": "备注"
}
🎯 路由配置
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 }
}
]
🔒 权限控制
路由守卫
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 拦截器
// 请求拦截器 - 添加认证头
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)
}
)
📱 响应式设计
断点配置
/* 移动端 */
@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;
}
}
🚀 部署
构建生产版本
npm run build
构建完成后，dist 目录包含所有静态文件。
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 规则
🤝 贡献指南
- Fork 项目
- 创建功能分支：
git checkout -b feature/new-feature - 提交更改：
git commit -am 'Add new feature' - 推送分支：
git push origin feature/new-feature - 提交 Pull Request
📄 许可证
MIT License
注意: 这是一个演示项目，生产环境使用前请进行充分的安全测试和性能优化。