# ShopSystem

**Repository Path**: chenfu666/ShopSystem

## Basic Information

- **Project Name**: ShopSystem
- **Description**: 这是一个基于Spring Boot和Vue.js构建的完整商城系统，支持商品管理、订单管理、用户管理、支付功能等核心电商功能。系统采用前后端分离架构，提供完整的后台管理界面和用户前端界面。
不过是基础版哈
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-21
- **Last Updated**: 2026-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 商城系统 (ShopSystem)

我的博客:https://blog.ichenfu.cn/
## 📖 项目简介

这是一个基于Spring Boot和Vue.js构建的完整商城系统，支持商品管理、订单管理、用户管理、支付功能等核心电商功能。系统采用前后端分离架构，提供完整的后台管理界面和用户前端界面。

### 🎯 主要功能
- **用户管理**：用户注册、登录、个人信息管理
- **商品管理**：商品分类、商品发布、库存管理、图片上传
- **订单管理**：订单创建、支付、状态管理、订单查询
- **支付功能**：集成支付接口，支持支付回调处理
- **后台管理**：完整的管理后台，包含数据统计和配置管理
- **API配置**：支持第三方API配置管理
- **定时任务**：订单超时自动取消

## 🛠️ 技术栈

### 后端技术
- **框架**：Spring Boot 2.7+
- **持久层**：MyBatis
- **数据库**：MySQL 8.0+
- **缓存**：Redis (可选)
- **邮件**：JavaMail
- **构建工具**：Maven
- **Java版本**：JDK 17+

### 前端技术
- **框架**：Vue 3 + Vite
- **路由**：Vue Router
- **UI组件库**：Element Plus
- **HTTP客户端**：Axios
- **开发语言**：JavaScript/TypeScript

## 📁 项目结构

```
QiMoExam/
├── src/main/java/com/shopsystem/shopping/
│   ├── controller/          # 控制器层
│   │   ├── api/            # API接口
│   │   └── PayResultController.java
│   ├── entity/             # 实体类
│   ├── mapper/             # MyBatis映射器
│   ├── service/            # 业务逻辑层
│   ├── config/             # 配置类
│   ├── interceptor/        # 拦截器
│   ├── common/             # 公共工具类
│   └── task/               # 定时任务
├── src/main/resources/
│   ├── application.yml     # 应用配置
│   ├── mapper/             # XML映射文件
│   └── static/             # 静态资源
├── vue-frontend/           # 前端项目
│   ├── src/
│   │   ├── views/          # 页面组件
│   │   ├── router/         # 路由配置
│   │   └── main.js         # 入口文件
├── sql/                    # 数据库脚本
├── upload/                 # 文件上传目录
└── pom.xml                 # Maven配置
```

## 🚀 快速开始

### 环境要求
- JDK 17+
- Maven 3.6+
- MySQL 8.0+
- Node.js 16+
- npm 7+

### 1. 数据库准备

```bash
# 创建数据库
mysql -u root -p
CREATE DATABASE shopsystem CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

# 导入数据
mysql -u root -p shopsystem < sql/init.sql
```

### 2. 后端配置

编辑 `src/main/resources/application.yml`：

```yaml
server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/shopsystem?useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: your_password
    driver-class-name: com.mysql.cj.jdbc.Driver
  
  mail:
    host: smtp.example.com
    username: your_email@example.com
    password: your_password
    port: 587
    properties:
      mail:
        smtp:
          auth: true
          starttls:
            enable: true

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.shopsystem.shopping.entity

# 文件上传配置
file:
  upload-dir: F:/Coding/QiMoExam/upload/
```

### 3. 编译运行后端

```bash
# 进入项目目录
cd F:/Coding/QiMoExam

# 编译项目
mvn clean package

# 运行应用
mvn spring-boot:run
# 或者
java -jar target/shopping-1.0.0.jar
```

应用将在 `http://localhost:8080` 启动。

### 4. 前端配置与运行

```bash
# 进入前端目录
cd vue-frontend

# 安装依赖
npm install

# 开发环境运行
npm run dev

# 构建生产版本
npm run build
```

前端将在 `http://localhost:5173` 启动（Vite默认端口）。

## 🔧 配置说明

### 邮件配置
系统支持邮件发送功能，用于用户注册验证等。需要配置SMTP服务器信息。

### 文件上传
默认上传目录为 `F:/Coding/QiMoExam/upload/`，可在配置文件中修改。

### API配置
系统支持动态配置第三方API参数，通过后台管理界面进行管理。

## 📡 API接口

### 用户相关
- `POST /api/user/register` - 用户注册
- `POST /api/user/login` - 用户登录
- `GET /api/user/profile` - 获取用户信息
- `PUT /api/user/profile` - 更新用户信息

### 商品相关
- `GET /api/products` - 商品列表
- `GET /api/products/{id}` - 商品详情
- `POST /api/products` - 添加商品（管理员）
- `PUT /api/products/{id}` - 更新商品（管理员）
- `DELETE /api/products/{id}` - 删除商品（管理员）

### 订单相关
- `POST /api/orders` - 创建订单
- `GET /api/orders` - 订单列表
- `GET /api/orders/{id}` - 订单详情
- `POST /api/orders/{id}/pay` - 订单支付
- `POST /api/orders/{id}/cancel` - 取消订单

### 支付相关
- `POST /api/pay/notify` - 支付回调通知
- `GET /pay/success` - 支付成功页面

### 管理后台
- `GET /api/admin/categories` - 分类管理
- `GET /api/admin/orders` - 订单管理
- `GET /api/admin/users` - 用户管理
- `GET /api/admin/config` - API配置管理

## 🎨 前端页面

### 用户端
- **首页** (`/`) - 商品展示和搜索
- **登录** (`/login`) - 用户登录
- **注册** (`/register`) - 用户注册
- **商品详情** (`/product/:id`) - 商品详情页
- **我的订单** (`/orders`) - 订单列表
- **个人中心** (`/profile`) - 个人信息管理
- **订单结果** (`/order-result`) - 订单支付结果

### 管理后台
- **登录** (`/admin/login`) - 管理员登录
- **首页** (`/admin`) - 数据统计
- **商品管理** (`/admin/product`) - 商品CRUD
- **分类管理** (`/admin/category`) - 分类管理
- **订单管理** (`/admin/order`) - 订单处理
- **用户管理** (`/admin/user`) - 用户管理
- **API配置** (`/admin/api-config`) - API配置

## 🔐 安全机制

### 后端安全
- **登录拦截器**：`LoginInterceptor` - 验证用户登录状态
- **管理员拦截器**：`AdminInterceptor` - 验证管理员权限
- **密码加密**：使用MD5或BCrypt加密存储
- **会话管理**：基于Token的认证机制

### 前端安全
- **路由守卫**：拦截未授权访问
- **Token存储**：localStorage存储认证信息
- **权限控制**：根据用户角色显示不同界面

## 📊 数据库设计

主要数据表：
- `user` - 用户表
- `product` - 商品表
- `category` - 分类表
- `order` - 订单表
- `api_config` - API配置表

详细表结构请查看 `sql/init.sql`。

## 🔄 定时任务

系统包含订单超时处理定时任务：
- **OrderTimeoutTask**：每分钟检查一次，自动取消超时未支付订单（默认30分钟超时）

## 📝 开发说明

### 代码规范
- 使用驼峰命名法
- 实体类使用 `@Data` 注解
- Service层使用 `@Service` 注解
- Controller层使用 `@RestController` 注解

### 开发流程
1. 创建实体类（Entity）
2. 创建Mapper接口和XML
3. 创建Service业务逻辑
4. 创建Controller接口
5. 前端对应页面开发

### 测试建议
- 使用Postman测试API接口
- 前端使用浏览器开发者工具调试
- 数据库操作前备份数据

## 🐛 常见问题

### 1. 数据库连接失败
检查 `application.yml` 中的数据库配置，确保MySQL服务已启动。

### 2. 前端跨域问题
后端已配置CORS支持，确保前端请求地址正确。

### 3. 文件上传失败
确保上传目录存在且有写入权限。

### 4. 邮件发送失败
检查SMTP配置，确保网络连接正常。

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 许可证

本项目仅供学习和参考使用。

## 📞 联系方式

- 项目地址：https://gitee.com/chenfu666/ShopSystem.git
- 作者：ChenFu

## 🙏 致谢

感谢所有为本项目做出贡献的开发者和学习者。

---

**注意**：在生产环境中使用前，请务必修改默认密码、配置安全的认证机制，并根据实际需求调整相关配置。