# 校园二手交易平台

**Repository Path**: frozenbird07/web

## Basic Information

- **Project Name**: 校园二手交易平台
- **Description**: 一个前后端分离的校园二手交易平台，vue+element+echarts，软件工程大作业，已经通过验收。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 44
- **Forks**: 0
- **Created**: 2023-04-10
- **Last Updated**: 2026-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, HTML, JavaScript, CSS

## README

# 闲猫 (Xianmao) 校园二手交易平台

<div align="center">

![Version](https://img.shields.io/badge/version-1.2-blue)
![Vue](https://img.shields.io/badge/Vue-3.2-4FC08D)
![Spring Boot](https://img.shields.io/badge/Spring%20Boot-2.7.5-6DB33F)
![MySQL](https://img.shields.io/badge/MySQL-8.0-4479A1)

**校园二手交易平台** — 小组开发

</div>

## 项目简介

软件工程大作业，闲猫是一个面向大学生的**校园二手交易平台**，支持商品发布、审核、浏览、购买、收藏、订单管理等完整交易流程。前端使用 Vue 3 + Vite + Element Plus，后端使用 Spring Boot + MyBatis-Plus，数据库采用 MySQL。

## 项目亮点

前端设计为本人大学初次纯手工完成全套UI设计，美观度及动画方面还是有一定可取之处的

## 快速启动

### 前置要求

- Node.js 16+
- JDK 8+
- Maven 3+
- MySQL 8.0

### 后端

```bash
cd backend

# 1. 创建数据库（配置中为 mydb）
mysql -u root -p -e "CREATE DATABASE mydb DEFAULT CHARACTER SET utf8mb4;"

# 2. 导入建表脚本
mysql -u root -p mydb < sql/transaction_sql.sql

# 3. 修改配置（可选）
# 编辑 src/main/resources/application-dev.yml（开发环境）或 application-pro.yml（生产环境），修改数据库账号密码

# 4. 启动
mvn spring-boot:run
# 后端运行在 http://localhost:9080
# Swagger 文档: http://localhost:9080/swagger-ui/
```

### 前端

```bash
cd frontend

npm install
npm run dev
# 前端运行在 http://localhost:5173
```

### 快速体验（不启动后端）

修改 `frontend/src/pages/person.vue` 中的登录标志位 `logged` 为 `true`，可跳过登录直接查看前端效果。

## 功能介绍

### 用户系统
- **邮箱注册**：使用邮箱验证码完成注册
- **登录/登出**：JWT Token 认证
- **权限分离**：普通用户与管理员使用相同登录入口，根据权限展示不同功能
- **个人信息**：编辑昵称、头像、收货地址
- **找回密码**：通过邮箱验证码重置密码

### 商品浏览
- **分类浏览**：按数码产品、食品、图书、服饰等 16 种分类筛选商品
- **商品搜索**：关键词搜索商品
- **商品详情**：查看商品图片、描述、价格、卖家信息
- **收藏商品**：收藏感兴趣的商品，在个人中心查看

### 交易流程
1. 买家浏览商品，点击购买
2. 填写收货地址（需先在个人中心添加）
3. 卖家发货，更新物流信息
4. 买家确认收货，完成交易

### 商品发布
- 普通用户可发布闲置商品（需上传图片）
- 发布后进入管理员审核流程
- 审核通过后商品在商城展示
- 管理员可在后台审核/下架商品

### 管理后台（管理员）
- 审核待发布商品
- 下架违规商品
- 查看全站数据统计图表（ECharts 可视化）
- 支持导出报表

## 技术栈

### 前端 (frontend/)

| 技术 | 用途 |
|------|------|
| Vue 3 + Composition API | 前端框架 |
| Vite 4 | 构建工具与热更新 |
| Element Plus 2.3 | UI 组件库 |
| Vue Router 4 | 客户端路由 |
| Axios | HTTP 请求 |
| ECharts 5.3 | 数据可视化 |
| Animate.css | 过渡动画 |
| vue-live2d | Live2D 看板娘 |
| xlsx | Excel 导出 |

### 后端 (backend/)

| 技术 | 用途 |
|------|------|
| Spring Boot 2.7.5 | 后端框架 |
| MyBatis + MyBatis-Plus 3.5.1 | ORM 与数据访问 |
| MySQL 8.0 | 关系型数据库 |
| JWT (java-jwt 3.10) | Token 认证 |
| Swagger 3.0 (springfox) | API 文档 |
| Spring Mail | 邮箱验证码 |
| Hutool 5.7 | Java 工具库 |
| Lombok | 代码简化 |
| Joda-Time | 日期时间处理 |

## 项目结构

```
xianmao/
├── backend/                          # Spring Boot 后端
│   ├── pom.xml                       # Maven 依赖
│   ├── sql/transaction_sql.sql       # 数据库建表脚本 + 测试数据
│   └── src/main/java/cn/edu/gxu/
│       ├── ProjectApplication.java   # 启动类
│       ├── Basic/                    # 常量 + 统一返回结果
│       ├── configure/                # CORS、拦截器、Swagger、MyBatis-Plus 配置
│       ├── controller/               # 控制器（9个）+ DTO（16个）
│       ├── dao/                      # MyBatis Mapper 接口（9个）
│       ├── model/                    # 实体类（8个）
│       ├── service/                  # 服务接口 + 实现（13个）
│       └── resources/
│           ├── application.yml       # 主配置文件
│           ├── application-dev.yml   # 开发环境配置
│           ├── application-pro.yml   # 生产环境配置
│           └── mapper/               # MyBatis XML 映射文件（9个）
│
├── frontend/                         # Vue 3 前端
│   ├── package.json
│   ├── vite.config.js                # Vite 构建配置
│   ├── index.html
│   └── src/
│       ├── main.js                   # 应用入口
│       ├── App.vue                   # 根组件（导航栏、路由视图、全局消息/加载）
│       ├── router/index.js           # 路由：/welcome /shop /auction /help /customer
│       ├── pages/                    # 5个页面级组件
│       ├── components/               # 22个可复用组件
│       └── material/                 # 图标与图片资源
│
└── README.md
```

## 数据库设计

数据库 **11 张表**：

| 表名 | 说明 |
|------|------|
| `userlog` | 用户账号（account, password-MD5, authority, email） |
| `userinfo` | 用户资料（nickname, avatar） |
| `personinfo` | 收货信息（telephone, name, address） |
| `category` | 商品分类（16种：数码产品、食品、图书、服饰等） |
| `commodityinfo` | 商品信息（名称、价格、描述、分类、状态、卖家） |
| `images` | 商品图片 |
| `collect` | 用户收藏 |
| `order` | 订单（买家、卖家、价格、物流状态） |
| `audit` | 商品审核记录 |
| `comment` | 用户评论 |
| `sellcommodity` | 卖家商品关联 |

## API 路由

| 前缀 | 说明 |
|------|------|
| `/user` | 登录、注册、验证码、改密 |
| `/commodity` | 商品查询、发布、详情 |
| `/category` | 商品分类 |
| `/collect` | 收藏增删查 |
| `/shop` | 下单、支付、发货、收货 |
| `/person` | 个人数据统计 |
| `/personal` | 个人信息 |
| `/manage` | 管理员审核、下架、统计 |
| `/userOrder` | 订单查询 |