软件工程开发实训 - 电商系统

一个前后端分离的电商系统项目，基于 Spring Boot + Vue 3 开发。

📋 项目简介

本项目是一个完整的电商系统，包含前台商城和后台管理功能。前台提供商品浏览、搜索、详情查看、购物车等核心功能；后台提供用户管理、商品管理、分类管理、轮播图管理等管理功能。

🛠️ 技术栈

后端

• 框架: Spring Boot 2.7.18
• Java版本: JDK 8
• 数据库: MySQL 5.7+
• ORM: MyBatis-Plus 3.5.3.1
• 构建工具: Maven 3.9+
• 验证码: easy-captcha 1.6.2

前端

• 框架: Vue 3.4.0
• 语言: TypeScript 5.3.3
• 构建工具: Vite 5.0.0
• 路由: Vue Router 4.2.5
• 状态管理: Pinia 2.1.7
• HTTP客户端: Axios 1.6.0
• UI框架: Bootstrap 4.6.2
• 图标: Bootstrap Icons 1.10.5

🚀 快速开始

环境要求

后端：

• JDK 8 或更高版本
• Maven 3.9+
• MySQL 5.7+ 或 8.0+

前端：

• Node.js 16+
• npm 或 yarn

启动步骤

1. 数据库准备

创建数据库（如未创建）：

CREATE DATABASE mall CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

导入数据库脚本（如有）：

-- 执行参考资料/教学视频资料/mall项目/mall项目后端 - 教学视频/mall.sql

2. 后端启动

# 进入后端目录
cd backend

# 配置数据库（可选，默认使用 root/123456）
# 方式1：设置环境变量
export DB_USERNAME=your_username
export DB_PASSWORD=your_password
export DB_URL=jdbc:mysql://localhost:3306/mall?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8

# 方式2：修改 src/main/resources/application.yml

# 启动后端服务
mvn spring-boot:run

后端服务运行在：http://localhost:8080

3. 前端启动

# 进入前端目录
cd frontend

# 安装依赖（首次运行）
npm install

# 启动开发服务器
npm run dev

前端服务运行在：http://localhost:5173

4. 访问应用

• 前台商城: http://localhost:5173/
• 登录页面: http://localhost:5173/login
• 注册页面: http://localhost:5173/register
• 后台管理: http://localhost:5173/admin/*

📁 项目结构

ruankaishixun/
├── backend/                 # 后端项目
│   ├── src/
│   │   ├── main/java/      # Java源码
│   │   │   └── com/example/mall/
│   │   │       ├── controller/    # 控制器（REST API）
│   │   │       ├── service/        # 服务层
│   │   │       ├── dao/            # 数据访问层
│   │   │       ├── entity/          # 实体类
│   │   │       └── dto/             # 数据传输对象
│   │   └── main/resources/
│   │       ├── application.yml      # 配置文件
│   │       └── mapper/              # MyBatis XML映射
│   ├── pom.xml                      # Maven配置
│   └── README.md                    # 后端文档
│
├── frontend/                # 前端项目
│   ├── src/
│   │   ├── api/            # API接口封装
│   │   ├── router/         # 路由配置
│   │   ├── store/          # 状态管理（Pinia）
│   │   ├── utils/          # 工具函数
│   │   ├── views/          # 页面组件
│   │   ├── App.vue         # 根组件
│   │   └── main.ts         # 入口文件
│   ├── public/
│   │   ├── assets/         # 静态资源（图片等）
│   │   └── libs/           # 第三方库（Bootstrap等）
│   ├── package.json        # 依赖配置
│   ├── vite.config.ts      # Vite配置
│   └── README.md           # 前端文档
│
└── README.md               # 项目主文档（本文件）

✨ 功能模块

前台功能

• ✅ 商城首页（分类导航、轮播图、商品推荐）
• ✅ 商品列表（分类筛选、关键词搜索、价格排序）
• ✅ 商品详情（图片轮播、商品信息、加入购物车）
• ✅ 购物车（商品管理、数量修改、批量删除）
• ✅ 用户登录/注册（验证码验证）

后台管理

• ✅ 用户管理（列表、编辑、批量删除）
• ✅ 分类管理（增删改查）
• ✅ 轮播图管理（增删改查）
• ✅ 商品管理（增删改查、搜索、排序、图片路径自动生成）

📚 相关文档

• 后端开发文档 - 后端API接口、配置说明
• 前端开发文档 - 前端项目结构、功能说明
• 图片资源管理方案 - 图片资源管理规范

🔧 常用命令

后端

# 启动开发服务器
cd backend
mvn spring-boot:run

# 编译打包
mvn clean package -DskipTests

# 仅编译
mvn compile -DskipTests

前端

# 启动开发服务器
cd frontend
npm run dev

# 构建生产版本
npm run build

# 预览构建产物
npm run preview

# 类型检查
npm run type-check

🔑 默认配置

数据库配置

• 用户名: root（可通过环境变量 DB_USERNAME 修改）
• 密码: 123456（可通过环境变量 DB_PASSWORD 修改）
• 数据库: mall（可通过环境变量 DB_URL 修改）
• 端口: 3306

服务端口

• 后端: 8080
• 前端: 5173

API代理

前端通过 Vite 代理 /api 到后端 http://localhost:8080

📝 开发注意事项

1. 图片资源: 所有图片放在 frontend/public/assets/ 目录下
2. 商品图片路径: 使用分类编码提取数字生成路径（如 C003 → c3）
3. 状态管理: 用户信息存储在 localStorage，页面刷新后自动恢复
4. 逻辑删除: 所有删除操作均为逻辑删除，数据不会真正从数据库删除
5. 验证码: 登录和注册需要验证码，通过 /common/captcha 接口获取

🐛 常见问题

后端无法启动

• 检查 MySQL 是否运行
• 检查数据库连接配置是否正确
• 查看 application.yml 配置

前端无法连接后端

• 确认后端服务运行在 8080 端口
• 检查 Vite 代理配置（vite.config.ts）
• 查看浏览器控制台网络请求

图片不显示

• 确认图片在 frontend/public/assets/ 目录下
• 检查路径格式是否正确
• 查看浏览器控制台是否有 404 错误

📄 许可证

本项目为软件工程开发实训项目。

👥 贡献

本项目为教学实训项目，欢迎提出改进建议。