1. 项目概述
这个基于SpringBoot的前后端分离网上商城项目，是我在完成课程设计时开发的一个全功能电商平台。采用Java+SSM+SpringBoot+MySQL+Maven+Vue技术栈，实现了从商品展示到订单支付的完整电商业务流程。
项目最大的特点是采用了前后端分离架构，后端使用SpringBoot提供RESTful API，前端使用Vue.js构建用户界面。这种架构不仅提高了开发效率，也使得系统更加灵活和可扩展。
2. 技术选型与架构设计
2.1 后端技术栈
后端采用SpringBoot作为基础框架，主要基于以下考虑：
- SpringBoot的自动配置特性大大简化了项目配置
- 内嵌Tomcat服务器，部署方便
- 丰富的starter依赖，可以快速集成各种功能模块
数据库选用MySQL 5.7+，主要因为：
- 开源免费，适合学习项目
- 性能稳定，社区支持完善
- 与SpringBoot生态集成良好
2.2 前端技术栈
前端采用Vue.js框架，主要优势：
- 组件化开发，提高代码复用性
- 响应式数据绑定，简化DOM操作
- 丰富的生态系统和社区支持
开发工具选择：
- 后端：IntelliJ IDEA（推荐）或Eclipse
- 前端：VS Code或WebStorm
3. 数据库设计
3.1 核心表结构
项目包含以下主要数据表：
- 用户表(vip)：存储用户基本信息
- 商品表(product)：商品基本信息
- 订单表(order)：订单主信息
- 购物车表(shopping_cart)：用户购物车数据
- 退货表(return_goods)：退货记录
- 物流表(logistics)：物流信息
3.2 表关系设计
数据库采用关系型设计，主要表间关系：
- 用户与订单：一对多
- 商品与订单：多对多（通过中间表实现）
- 订单与物流：一对一
- 订单与退货：一对多
4. 核心功能实现
4.1 用户模块
用户模块实现了完整的注册、登录和个人中心功能：
java复制// 用户登录示例代码
@RequestMapping(value = "/vip/login")
public CommonResult login(@RequestParam String accountNumber,
@RequestParam String password) {
Vip vip = vipService.selectByKey(accountNumber);
if(vip != null && vip.getPassword().equals(password)){
return CommonResult.success("登录成功", vip);
}
return CommonResult.error("账号或密码错误");
}
关键点：
- 密码采用MD5加密存储
- 使用JWT实现无状态认证
- 个人中心包含密码修改、订单查看等功能
4.2 商品模块
商品模块实现了商品的CRUD操作和分类管理：
java复制// 商品查询接口
@RequestMapping(value = "/product/findByKey")
public CommonResult findByKey(String productNo) {
Product product = productService.selectByKey(productNo);
if(product != null){
return CommonResult.success("商品查询成功",product);
}
return CommonResult.error("商品查询失败");
}
功能特点：
- 支持商品多条件查询
- 实现商品分类和品牌管理
- 商品图片上传和展示
4.3 订单模块
订单模块处理从购物车到支付的完整流程：
java复制// 创建订单接口
@RequestMapping(value = "/order/add")
public CommonResult addOrder(Order order) {
if(order != null){
if(orderService.insertData(order)){
return CommonResult.success("创建订单成功",order);
}
}
return CommonResult.error("创建订单失败");
}
订单流程：
- 用户将商品加入购物车
- 结算生成订单
- 选择支付方式完成支付
- 商家发货
- 用户确认收货
4.4 支付模块
集成支付宝支付接口：
java复制// 支付宝支付接口
@PostMapping(value = "/create", produces = "text/html;charset=utf-8")
public String create(@RequestParam String orderNo,
@RequestParam String orderName,
@RequestParam String payPrice) {
return alipayService.create(orderNo, orderName, payPrice);
}
支付流程：
- 前端传入订单信息
- 后端调用支付宝接口生成支付表单
- 用户完成支付
- 支付宝异步通知支付结果
5. 项目部署与运行
5.1 环境准备
运行环境要求：
- Java 8+
- MySQL 5.7+
- Node.js 14+
- Maven 3.6+
5.2 后端启动步骤
- 导入项目到IDE
- 配置数据库连接信息
- 运行StartApplication主类
- 访问http://localhost:8080
5.3 前端启动步骤
- 安装Node.js和npm
- 进入前端项目目录
- 执行
npm install安装依赖 - 执行
npm run dev启动开发服务器 - 访问http://localhost:8081
6. 项目亮点与特色
- 完整的前后端分离架构
- RESTful API设计规范
- 支付宝支付集成
- 完善的用户权限管理
- 响应式前端设计
- 详细的业务日志记录
7. 常见问题与解决方案
7.1 数据库连接失败
可能原因：
- 数据库服务未启动
- 连接配置错误
- 驱动版本不匹配
解决方案：
- 检查MySQL服务状态
- 核对application.properties配置
- 确认pom.xml中的驱动版本
7.2 跨域问题
前端访问后端API时可能出现跨域问题，解决方案：
java复制// 全局跨域配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true)
.maxAge(3600);
}
}
7.3 支付回调处理
支付宝支付成功后需要进行回调处理：
java复制@PostMapping(value = "/payNotify")
public void payNotify(@RequestParam Map<String, String> map) {
if ("TRADE_SUCCESS".equals(map.get("trade_status"))) {
String orderNo = map.get("out_trade_no");
// 更新订单状态为已支付
orderService.updateOrderStatus(orderNo, "已支付");
}
}
8. 项目扩展方向
- 增加商品评价系统
- 实现优惠券和促销活动
- 接入微信支付
- 开发移动端APP
- 增加数据分析和报表功能
- 实现分布式架构改造
9. 开发心得与建议
在实际开发过程中，我总结了以下几点经验：
- 接口设计要规范，遵循RESTful原则
- 前后端分离项目要定义好接口文档
- 支付模块需要特别注意安全性
- 日志记录要详细，便于问题排查
- 代码要分层清晰，便于维护
对于初学者，建议：
- 先理解业务需求再写代码
- 多使用调试工具排查问题
- 注重代码规范和注释
- 定期备份代码和数据库
这个项目涵盖了电商系统的主要功能模块，通过实践可以全面掌握SpringBoot和Vue的开发技能。在开发过程中，我遇到了不少挑战，但也收获了很多宝贵的经验。