阑星月1. 项目概述与背景
这个基于Spring Boot的服装销售平台是我在毕业设计期间完成的一个全栈项目，旨在构建一个功能完善的B2C电商系统。随着线上购物成为主流消费方式，传统服装零售业面临数字化转型需求。本项目采用前后端分离架构，后端使用Spring Boot框架，前端基于Vue.js，数据库选用MySQL，实现了从商品展示到订单管理的完整电商业务流程。
在技术选型上，Spring Boot提供了快速开发的能力，其自动配置特性大大简化了项目搭建过程。Vue.js的响应式数据绑定和组件化开发模式，使得前端界面开发效率显著提升。MySQL作为成熟的关系型数据库，保证了交易数据的安全存储和高效查询。整个系统采用RESTful API风格设计接口，前后端通过JSON格式进行数据交互。
提示：对于毕业设计级别的电商系统，建议优先考虑功能完整性而非性能极限。Spring Boot+Vue的组合在开发效率和社区支持方面具有明显优势，适合学生项目快速落地。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 系统架构设计
2.1 技术栈组成
本系统采用典型的三层架构设计：
表现层：
- Vue.js 2.x + Element UI组件库
- Axios处理HTTP请求
- Vue Router管理前端路由
- Vuex进行状态管理
业务逻辑层：
- Spring Boot 2.7.x
- Spring Security实现认证授权
- MyBatis-Plus作为ORM框架
- Redis缓存热点数据
数据持久层：
- MySQL 8.0关系型数据库
- Alibaba Druid连接池
- Flyway数据库版本控制
2.2 系统模块划分
系统主要分为以下核心模块：
-
用户中心模块
- 注册/登录（JWT认证）
- 个人信息管理
- 地址簿管理
-
商品模块
- 商品分类管理
- 商品CRUD操作
- 商品搜索与筛选
-
订单模块
- 购物车功能
- 订单创建与支付
- 订单状态追踪
-
后台管理模块
- 用户权限管理
- 内容管理（公告/资讯）
- 数据统计与分析
2.3 数据库设计要点
数据库设计遵循第三范式，主要实体关系包括：
- 用户(users) ↔ 订单(orders)：一对多
- 商品(goods) ↔ 订单项(order_items)：一对多
- 商品分类(categories) ↔ 商品(goods)：一对多
关键表设计考虑：
sql复制CREATE TABLE `goods` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL COMMENT '商品名称',
`category_id` bigint NOT NULL COMMENT '分类ID',
`price` decimal(10,2) NOT NULL COMMENT '售价',
`original_price` decimal(10,2) DEFAULT NULL COMMENT '原价',
`stock` int NOT NULL DEFAULT '0' COMMENT '库存',
`main_image` varchar(255) DEFAULT NULL COMMENT '主图URL',
`detail` text COMMENT '商品详情',
`status` tinyint DEFAULT '1' COMMENT '状态：1-上架 0-下架',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_category` (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. 核心功能实现
3.1 用户认证模块
采用JWT(JSON Web Token)实现无状态认证：
java复制// JWT工具类核心代码
public class JwtUtil {
private static final String SECRET = "your-secret-key";
private static final long EXPIRATION = 86400L; // 24小时
public static String generateToken(UserDetails userDetails) {
Map<String, Object> claims = new HashMap<>();
claims.put("sub", userDetails.getUsername());
claims.put("created", new Date());
claims.put("roles", userDetails.getAuthorities());
return Jwts.builder()
.setClaims(claims)
.setExpiration(new Date(System.currentTimeMillis() + EXPIRATION * 1000))
.signWith(SignatureAlgorithm.HS512, SECRET)
.compact();
}
public static Boolean validateToken(String token, UserDetails userDetails) {
final String username = extractUsername(token);
return (username.equals(userDetails.getUsername()) && !isTokenExpired(token));
}
}
前端在axios拦截器中添加Token：
javascript复制// 请求拦截器
service.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = 'Bearer ' + token
}
return config
},
error => {
return Promise.reject(error)
}
)
3.2 商品展示与搜索
商品列表接口采用分页查询：
java复制@GetMapping("/goods")
public Result listGoods(
@RequestParam(required = false) String keyword,
@RequestParam(required = false) Long categoryId,
@RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "10") Integer size) {
QueryWrapper<Goods> wrapper = new QueryWrapper<>();
if (StringUtils.isNotBlank(keyword)) {
wrapper.like("name", keyword);
}
if (categoryId != null) {
wrapper.eq("category_id", categoryId);
}
wrapper.eq("status", 1);
Page<Goods> goodsPage = goodsService.page(new Page<>(page, size), wrapper);
return Result.success(goodsPage);
}
前端实现商品筛选组件：
vue复制<template>
<div class="filter-container">
<el-input
v-model="listQuery.keyword"
placeholder="搜索商品名称"
style="width: 200px"
@keyup.enter.native="handleFilter"
/>
<el-select
v-model="listQuery.categoryId"
placeholder="选择分类"
clearable
@change="handleFilter"
>
<el-option
v-for="item in categories"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</div>
</template>
3.3 购物车与订单系统
购物车数据结构设计：
java复制public class CartItem {
private Long goodsId;
private String goodsName;
private String goodsImage;
private BigDecimal price;
private Integer quantity;
private Boolean selected;
}
订单创建关键逻辑：
java复制@Transactional
public Order createOrder(Long userId, OrderCreateDTO dto) {
// 1. 验证收货地址
Address address = addressService.getById(dto.getAddressId());
if (address == null || !address.getUserId().equals(userId)) {
throw new BusinessException("收货地址无效");
}
// 2. 获取购物车选中商品
List<CartItem> cartItems = cartService.getCheckedItems(userId);
if (cartItems.isEmpty()) {
throw new BusinessException("请选择要购买的商品");
}
// 3. 检查库存并扣减
checkStock(cartItems);
// 4. 生成订单
Order order = new Order();
order.setOrderNo(generateOrderNo());
order.setUserId(userId);
order.setTotalAmount(calculateTotal(cartItems));
// 设置其他订单字段...
// 5. 保存订单及明细
orderMapper.insert(order);
saveOrderItems(order, cartItems);
// 6. 清空购物车
cartService.clearCheckedItems(userId);
return order;
}
4. 后台管理系统实现
4.1 权限控制设计
基于RBAC模型设计权限系统：
- 用户(user) ↔ 角色(role)：多对多
- 角色(role) ↔ 权限(permission)：多对多
Spring Security配置核心：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.csrf().disable()
.authorizeRequests()
.antMatchers("/admin/**").hasRole("ADMIN")
.antMatchers("/api/**").authenticated()
.anyRequest().permitAll()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()))
.sessionManagement()
.sessionCreationPolicy(SessionCreationPolicy.STATELESS);
}
}
4.2 商品管理功能
商品CRUD接口示例：
java复制@RestController
@RequestMapping("/admin/goods")
public class GoodsAdminController {
@Autowired
private GoodsService goodsService;
@PostMapping
public Result createGoods(@Valid @RequestBody GoodsCreateDTO dto) {
Goods goods = convertToGoods(dto);
goodsService.save(goods);
return Result.success(goods.getId());
}
@PutMapping("/{id}")
public Result updateGoods(@PathVariable Long id, @Valid @RequestBody GoodsUpdateDTO dto) {
Goods goods = goodsService.getById(id);
if (goods == null) {
throw new BusinessException("商品不存在");
}
// 更新商品信息...
goodsService.updateById(goods);
return Result.success();
}
@GetMapping("/{id}")
public Result getGoods(@PathVariable Long id) {
Goods goods = goodsService.getById(id);
return Result.success(goods);
}
@DeleteMapping("/{id}")
public Result deleteGoods(@PathVariable Long id) {
boolean success = goodsService.removeById(id);
return success ? Result.success() : Result.fail("删除失败");
}
}
4.3 数据统计与分析
使用ECharts实现销售数据可视化：
javascript复制// 月销售统计图表
initSalesChart() {
const chart = echarts.init(this.$refs.salesChart);
this.$axios.get('/admin/statistics/monthly-sales').then(res => {
const option = {
title: { text: '月度销售统计' },
tooltip: { trigger: 'axis' },
legend: { data: ['销售额', '订单量'] },
xAxis: { data: res.data.months },
yAxis: [{ type: 'value', name: '销售额' }, { type: 'value', name: '订单量' }],
series: [
{ name: '销售额', type: 'bar', data: res.data.amounts },
{ name: '订单量', type: 'line', yAxisIndex: 1, data: res.data.counts }
]
};
chart.setOption(option);
});
}
5. 项目部署与测试
5.1 开发环境搭建
后端环境：
- JDK 1.8+
- Maven 3.6+
- MySQL 8.0
- Redis 5.0+
前端环境：
- Node.js 14+
- Vue CLI 4.5+
项目启动步骤：
bash复制# 后端
mvn clean install
mvn spring-boot:run
# 前端
npm install
npm run serve
5.2 生产环境部署
使用Docker容器化部署：
dockerfile复制# 后端Dockerfile
FROM openjdk:8-jdk-alpine
VOLUME /tmp
COPY target/*.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
# 前端Dockerfile
FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
Nginx配置示例：
nginx复制server {
listen 80;
server_name yourdomain.com;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
5.3 系统测试要点
功能测试用例：
- 用户注册登录流程
- 商品搜索与筛选功能
- 购物车添加/删除商品
- 订单创建与支付流程
- 后台商品管理操作
性能测试指标：
- 首页加载时间 < 2s
- 商品列表页API响应时间 < 500ms
- 支持100并发用户同时浏览
- 订单创建事务成功率 > 99.9%
经验分享：在测试阶段要特别注意边界条件，比如库存为0时的商品购买、并发下单时的库存扣减等场景。建议使用JMeter进行压力测试，确保系统在高负载下的稳定性。
6. 项目总结与改进方向
通过这个项目的开发，我深入掌握了Spring Boot和Vue.js的全栈开发流程。系统实现了电商平台的核心功能模块，但在以下方面还有改进空间：
-
性能优化：
- 引入Redis缓存热门商品和分类数据
- 实现静态资源CDN加速
- 数据库查询优化，添加适当索引
-
功能扩展：
- 增加第三方登录（微信、支付宝）
- 实现优惠券和促销活动系统
- 开发移动端APP（使用Uniapp跨平台方案）
-
架构升级：
- 微服务化拆分（商品服务、订单服务等）
- 引入消息队列处理高并发订单
- 实现分布式事务保证数据一致性
这个项目作为毕业设计，不仅帮助我巩固了理论知识，更重要的是培养了解决实际问题的能力。建议后续开发者可以从业务场景出发，先确保核心流程的完整实现，再逐步扩展周边功能。