# 实训项目 **Repository Path**: durant778/practical-training-project ## Basic Information - **Project Name**: 实训项目 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-20 - **Last Updated**: 2025-12-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 拍卖系统前端 一个基于 Vue 3 的现代化拍卖系统前端应用，支持游客浏览、用户竞拍、管理员审核等功能。 ## 📋 项目简介 这是一个功能完整的拍卖系统前端项目，实现了三种用户角色的权限管理： - **游客**：浏览商品列表、查看商品详情、搜索商品 - **登录用户**：竞拍商品、收藏商品、发布商品、管理订单、留言、私聊 - **管理员**：审核用户、商品、留言，封号处理 ## ✨ 功能特性 ### 游客功能 - ✅ 浏览商品列表（仅显示已审核通过且未售出的商品，超出拍卖时间的商品不显示） - ✅ 通过商品名称、分类、起拍价格范围搜索商品 - ✅ 查看商品详情（图片、名称、介绍、起拍价、当前最高价、剩余时间、卖家信息、留言） ### 登录用户功能 - ✅ 所有游客功能 - ✅ 竞拍商品（输入竞拍价格确认竞拍） - ✅ 收藏/取消收藏商品 - ✅ 给卖家留言 - ✅ 联系卖家（私聊功能） - ✅ 发布拍卖商品（需管理员审核） - ✅ 个人中心管理： - 查看个人发布的商品列表（支持按时间、名称查询） - 修改未审核通过的商品信息 - 删除商品 - 发货（当有用户购买时） - 查看购买的商品列表（订单管理） - 确认收货 - 评价卖家（一星到五星，影响卖家信誉等级） - 查看收藏列表（支持按时间、名称查询） - 查看个人留言列表（查看卖家回复） - 修改个人信息和密码 ### 管理员功能 - ✅ 用户审核（通过/拒绝） - ✅ 用户封号处理 - ✅ 商品审核（通过/拒绝） - ✅ 留言审核（通过/拒绝） - ✅ 数据统计仪表盘 ## 🛠️ 技术栈 ### 核心框架 - **Vue 3.3.4** - 渐进式 JavaScript 框架 - **Vue Router 4.2.5** - 官方路由管理器 - **Pinia 2.1.7** - 状态管理库 ### UI 组件库 - **Element Plus 2.4.4** - 基于 Vue 3 的组件库 - **@element-plus/icons-vue 2.3.1** - Element Plus 图标库 ### 工具库 - **Axios 1.6.2** - HTTP 客户端 - **dayjs 1.11.10** - 日期处理库 - **Vite 5.0.8** - 下一代前端构建工具 ### 开发工具 - **vite-plugin-mock 3.0.2** - Mock 数据插件 - **mockjs 1.1.0** - 生成随机数据的库 ## 📁 项目结构 ``` 拍卖系统/ ├── mock/ # Mock 数据文件 │ ├── admin.js # 管理员接口 Mock │ ├── auth.js # 认证接口 Mock │ ├── comment.js # 留言接口 Mock │ ├── order.js # 订单接口 Mock │ ├── product.js # 商品接口 Mock │ └── user.js # 用户接口 Mock ├── src/ │ ├── api/ # API 接口封装 │ │ ├── admin.js # 管理员 API │ │ ├── comment.js # 留言 API │ │ ├── index.js # Axios 配置 │ │ ├── order.js # 订单 API │ │ ├── product.js # 商品 API │ │ └── user.js # 用户 API │ ├── layouts/ # 布局组件 │ │ ├── AdminLayout.vue # 管理员布局 │ │ └── MainLayout.vue # 主布局 │ ├── router/ # 路由配置 │ │ └── index.js # 路由定义 │ ├── stores/ # 状态管理 │ │ └── user.js # 用户状态管理 │ ├── views/ # 页面组件 │ │ ├── admin/ # 管理员页面 │ │ │ ├── Comments.vue # 留言审核 │ │ │ ├── Dashboard.vue # 仪表盘 │ │ │ ├── Products.vue # 商品审核 │ │ │ └── Users.vue # 用户管理 │ │ ├── Chat.vue # 私聊页面 │ │ ├── Favorites.vue # 收藏列表 │ │ ├── Home.vue # 首页 │ │ ├── Login.vue # 登录页 │ │ ├── MyComments.vue # 我的留言 │ │ ├── MyOrders.vue # 我的订单 │ │ ├── MyProducts.vue # 我发布的商品 │ │ ├── ProductDetail.vue # 商品详情 │ │ ├── Profile.vue # 个人中心 │ │ ├── PublishProduct.vue # 发布商品 │ │ └── Register.vue # 注册页 │ ├── App.vue # 根组件 │ ├── main.js # 入口文件 │ └── style.css # 全局样式 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 └── README.md # 项目文档 ``` ## 🚀 快速开始 ### 环境要求 - Node.js >= 16.0.0 - npm >= 7.0.0 或 yarn >= 1.22.0 ### 安装依赖 ```bash npm install ``` ### 开发运行 ```bash npm run dev ``` 访问 http://localhost:3000 ### 构建生产版本 ```bash npm run build ``` ### 预览生产构建 ```bash npm run preview ``` ## 👥 用户角色和权限 ### 游客（未登录用户） **权限范围：** - 浏览商品列表（仅显示已审核通过且未售出的商品） - 搜索商品（按名称、分类、价格范围） - 查看商品详情（包括商品信息、卖家信息、留言） **限制：** - 无法参与竞拍 - 无法收藏商品 - 无法留言 - 无法发布商品 ### 登录用户 **权限范围：** - 所有游客权限 - 竞拍商品 - 收藏/取消收藏商品 - 给卖家留言 - 联系卖家（私聊） - 发布商品（需管理员审核） - 管理个人发布的商品 - 管理订单（确认收货、评价卖家） - 查看收藏列表 - 查看留言列表 - 修改个人信息和密码 **限制：** - 只能修改未审核通过的商品 - 只能删除自己发布的商品 - 竞拍价格必须高于当前最高价 ### 管理员 **权限范围：** - 所有登录用户权限 - 审核用户注册申请 - 审核商品发布申请 - 审核留言内容 - 封号处理（对违规用户） - 查看系统统计数据 ## 📱 页面说明 ### 公共页面 #### 首页 (Home) - 显示所有已审核通过且未售出的商品 - 支持按名称、分类、价格范围搜索 - 显示商品基本信息（图片、名称、价格、卖家、剩余时间） #### 商品详情页 (ProductDetail) - 显示商品完整信息 - 游客：可查看信息，但无法竞拍、收藏、留言 - 登录用户：可竞拍、收藏、留言、联系卖家 - 显示留言区和卖家回复 ### 用户页面（需登录） #### 登录页 (Login) - 用户名密码登录 #### 注册页 (Register) - 用户注册（需管理员审核） #### 个人中心 (Profile) - 修改个人信息（邮箱、头像） - 修改登录密码 - 快捷入口到其他功能页面 #### 发布商品 (PublishProduct) - 填写商品信息（图片、名称、介绍、起拍价、截止时间） - 提交后等待管理员审核 #### 我发布的商品 (MyProducts) - 查看个人发布的所有商品 - 支持按时间、名称查询 - 修改未审核通过的商品 - 删除商品 - 发货（当有用户购买时） #### 我的订单 (MyOrders) - 查看所有购买的商品 - 支持按时间、名称查询 - 确认收货 - 评价卖家（一星到五星） #### 我的收藏 (Favorites) - 查看收藏列表 - 支持按时间、名称查询 - 取消收藏 #### 我的留言 (MyComments) - 查看个人留言列表 - 支持按时间、商品名称查询 - 查看卖家回复 #### 私聊 (Chat) - 与卖家实时聊天 - 查看聊天历史 ### 管理员页面（需管理员权限） #### 管理后台首页 (AdminDashboard) - 系统数据统计 - 总用户数、总商品数 - 待审核商品数、待审核留言数 #### 用户管理 (AdminUsers) - 查看所有用户列表 - 搜索用户（按用户名、邮箱） - 审核用户（通过/拒绝） - 封号处理 #### 商品审核 (AdminProducts) - 查看所有商品列表 - 搜索商品（按名称） - 查看商品详情 - 审核商品（通过/拒绝） #### 留言审核 (AdminComments) - 查看所有留言列表 - 搜索留言（按内容） - 审核留言（通过/拒绝） ## 🔌 API 接口 ### 认证接口 #### 登录 ``` POST /api/auth/login Body: { username, password } Response: { token, user } ``` #### 注册 ``` POST /api/auth/register Body: { username, email, password } Response: { id, username, email } ``` ### 用户接口 #### 获取用户信息 ``` GET /api/user/info Headers: Authorization: Bearer {token} Response: { id, username, email, avatar, role, creditLevel } ``` #### 更新用户信息 ``` PUT /api/user/info Body: { email, avatar } Response: { id, username, email, avatar } ``` #### 修改密码 ``` POST /api/user/change-password Body: { oldPassword, newPassword } Response: { message } ``` #### 联系卖家 ``` POST /api/users/:id/contact Body: { message } Response: { message } ``` #### 获取私聊消息 ``` GET /api/users/:id/messages Response: [{ id, fromUserId, toUserId, content, createTime, user }] ``` #### 发送私聊消息 ``` POST /api/users/:id/messages Body: { message } Response: { id, content, createTime } ``` ### 商品接口 #### 获取商品列表 ``` GET /api/products?page=1&pageSize=12&keyword=&category=&minPrice=&maxPrice= Response: { list, total } ``` #### 获取商品详情 ``` GET /api/products/:id Response: { id, name, description, image, startPrice, currentPrice, seller, ... } ``` #### 发布商品 ``` POST /api/products Body: { image, name, description, startPrice, endTime } Response: { id, name, ... } ``` #### 更新商品 ``` PUT /api/products/:id Body: { image, name, description, startPrice, endTime } Response: { id, name, ... } ``` #### 删除商品 ``` DELETE /api/products/:id Response: { message } ``` #### 竞拍商品 ``` POST /api/products/:id/bid Body: { price } Response: { message } ``` #### 收藏商品 ``` POST /api/products/:id/favorite Response: { message } ``` #### 取消收藏 ``` DELETE /api/products/:id/favorite Response: { message } ``` #### 获取我的商品列表 ``` GET /api/products/my?page=1&pageSize=10&keyword=&startDate=&endDate= Response: { list, total } ``` #### 获取收藏列表 ``` GET /api/products/favorites?page=1&pageSize=12&keyword=&startDate=&endDate= Response: { list, total } ``` #### 发货 ``` POST /api/orders/:id/ship Response: { message } ``` ### 订单接口 #### 获取订单列表 ``` GET /api/orders?page=1&pageSize=10&keyword=&startDate=&endDate= Response: { list, total } ``` #### 获取订单详情 ``` GET /api/orders/:id Response: { id, productName, price, orderStatus, ... } ``` #### 确认收货 ``` POST /api/orders/:id/confirm Response: { message } ``` #### 评价卖家 ``` POST /api/orders/:id/rate Body: { rating, comment } Response: { message } ``` ### 留言接口 #### 获取商品留言列表 ``` GET /api/products/:id/comments Response: [{ id, user, content, reply, createTime }] ``` #### 添加留言 ``` POST /api/products/:id/comments Body: { content } Response: { id, content, createTime } ``` #### 回复留言 ``` POST /api/comments/:id/reply Body: { content } Response: { id, reply } ``` #### 获取我的留言列表 ``` GET /api/comments/my?page=1&pageSize=10&keyword=&startDate=&endDate= Response: { list, total } ``` ### 管理员接口 #### 获取用户列表 ``` GET /api/admin/users?page=1&pageSize=10&keyword=&status= Response: { list, total } ``` #### 审核用户 ``` PUT /api/admin/users/:id/approve Body: { approved: true/false } Response: { message, data } ``` #### 封号处理 ``` PUT /api/admin/users/:id/ban Body: { reason } Response: { message, data } ``` #### 获取商品列表（审核） ``` GET /api/admin/products?page=1&pageSize=10&keyword=&status= Response: { list, total } ``` #### 审核商品 ``` PUT /api/admin/products/:id/approve Body: { approved: true/false } Response: { message, data } ``` #### 获取留言列表（审核） ``` GET /api/admin/comments?page=1&pageSize=10&keyword=&status= Response: { list, total } ``` #### 审核留言 ``` PUT /api/admin/comments/:id/approve Body: { approved: true/false } Response: { message, data } ``` ## 🎭 Mock 数据 项目集成了 Mock 服务，可以在没有后端服务器的情况下进行开发和测试。 ### Mock 数据说明 #### 测试账号 - **管理员**：用户名 `admin`，密码 `admin123` - **普通用户**：任意用户名和密码都可以登录 #### 默认数据 - **示例商品**：2 个已审核通过的拍卖商品 - **示例用户**：3 个用户（1 个管理员，2 个普通用户） - **示例留言**：1 条留言（带卖家回复） ### 使用 Mock 数据 Mock 数据在开发环境下自动启用。如果后端服务器（`localhost:8080`）不可用，会自动使用 Mock 数据。 ## 🔧 配置说明 ### Vite 配置 项目使用 Vite 作为构建工具，配置文件为 `vite.config.js`： - **开发服务器端口**：3000 - **API 代理**：`/api` -> `http://localhost:8080` - **路径别名**：`@` -> `src` ## 📝 开发规范 ### 代码风格 - 使用 Vue 3 Composition API - 使用 `