智慧商城（Smart Mall）：基于 Spring Boot + Vue 3 的现代化电商平台实战

项目简介智慧商城Smart Mall是一个基于Spring Boot 3.2 Vue 3 Redis MySQL Nginx构建的现代化电商平台。该项目采用前后端分离架构完整实现了用户购物、商品管理、订单处理等核心电商功能是学习企业级 Java 全栈开发的优秀参考案例。技术栈详解后端技术栈技术版本职责Spring Boot3.2.x应用框架MySQL8.0关系型数据库Redis7.0缓存服务MyBatis Plus3.5.xORM框架Spring Security6.x安全框架JWT0.12.x身份认证Maven3.x构建工具前端技术栈技术版本职责Vue3.4.x前端框架Vite5.x构建工具Ant Design Vue4.2.xUI组件库Pinia3.x状态管理Vue Router4.x路由管理Axios1.xHTTP客户端Tailwind CSS3.xCSS框架TypeScript5.4类型安全核心功能模块用户端功能用户认证- 注册/登录基于 JWT 的无状态认证机制商品浏览- 分类筛选、关键词搜索、分页展示购物车管理- 添加商品、修改数量、删除商品订单管理- 创建订单、查看订单列表、订单详情地址管理- 收货地址增删改查个人中心- 用户信息查看与修改管理端功能商品管理- 商品的增删改查订单管理- 订单状态更新待付款、已付款、已发货、已完成数据仪表盘- 销售数据可视化展示架构设计项目结构SmartMall/ ├── backend/ # 后端代码 │ ├── src/main/java/com/example/smartmall/ │ │ ├── controller/ # REST API控制器层 │ │ ├── service/ # 业务逻辑层 │ │ │ └── impl/ # 服务实现类 │ │ ├── mapper/ # 数据访问层 │ │ ├── entity/ # 数据库实体 │ │ ├── dto/ # 数据传输对象 │ │ ├── config/ # 配置类 │ │ ├── filter/ # 过滤器 │ │ └── utils/ # 工具类 │ └── src/main/resources/ │ ├── application.yml # 应用配置 │ ├── schema.sql # 数据库初始化脚本 │ └── data.sql # 初始数据 │ ├── frontend/ # 前端代码 │ ├── src/ │ │ ├── components/ # 公共组件 │ │ ├── pages/ # 页面组件 │ │ │ └── admin/ # 管理员页面 │ │ ├── stores/ # Pinia状态管理 │ │ ├── api/ # API请求封装 │ │ ├── types/ # TypeScript类型定义 │ │ └── router/ # 路由配置 │ └── dist/ # 构建产物 │ ├── nginx/ # Nginx配置 └── docker-compose.yml # Docker编排关键设计亮点1. JWT 认证机制后端通过自定义JwtAuthenticationFilter实现 Token 验证// SecurityConfig.javaBeanpublicSecurityFilterChainsecurityFilterChain(HttpSecurityhttp)throwsException{http.csrf(AbstractHttpConfigurer::disable).sessionManagement(session-session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)).authorizeHttpRequests(auth-auth.requestMatchers(/**).permitAll()).addFilterBefore(jwtAuthenticationFilter,UsernamePasswordAuthenticationFilter.class);returnhttp.build();}前端通过 Axios 拦截器自动携带 Token// api/index.tsapi.interceptors.request.use((config){consttokenlocalStorage.getItem(token)if(token){config.headers.AuthorizationBearer${token}}returnconfig})2. 购物车服务实现购物车服务采用数据库存储方案支持同商品数量累加// CartServiceImpl.javapublicCartItemaddToCart(LonguserId,CartItemRequestrequest){CartItemexistingItemcartItemMapper.selectOne(newLambdaQueryWrapperCartItem().eq(CartItem::getUserId,userId).eq(CartItem::getProductId,request.getProductId()));if(existingItem!null){existingItem.setQuantity(existingItem.getQuantity()request.getQuantity());cartItemMapper.updateById(existingItem);returnexistingItem;}// 创建新购物车项...}3. 订单创建事务处理订单创建涉及多表操作使用Transactional保证数据一致性// OrderServiceImpl.javaTransactionalpublicOrdercreateOrder(LonguserId,CreateOrderRequestrequest){// 1. 验证购物车不为空// 2. 验证收货地址// 3. 生成订单号// 4. 计算总价并扣减库存// 5. 创建订单和订单明细// 6. 清空购物车}4. Docker 容器化部署项目提供完整的docker-compose.yml一键启动所有服务services:mysql:# 数据库redis:# 缓存backend:# 后端服务nginx:# 反向代理核心代码解读后端控制器示例[ProductController.java]展示了标准的 REST API 设计RestControllerRequestMapping(/api/products)RequiredArgsConstructorpublicclassProductController{privatefinalProductServiceproductService;GetMappingpublicResponsePageProductgetProducts(RequestParam(requiredfalse)LongcategoryId,RequestParam(requiredfalse)Stringkeyword,RequestParam(defaultValue1)Integerpage,RequestParam(defaultValue10)Integersize){PageProductproductsproductService.getProducts(categoryId,keyword,page,size);returnResponse.success(products);}}前端状态管理[user.ts]使用 Pinia 管理用户状态exportconstuseUserStoredefineStore(user,(){constuserrefUser|null(null)consttokenref(localStorage.getItem(token)||)constloginasync(username:string,password:string){constresponseawaitapiPost{token:string}(/auth/login,{username,password})token.valueresponse.data.token localStorage.setItem(token,token.value)awaitfetchUser()}return{user,token,login,logout,isAdmin}})前端页面示例[HomePage.vue]展示了商品分类和热门商品展示script setup langts import { ref, onMounted } from vue import api from /api import type { Product, Category } from /types import Carousel from /components/Carousel.vue import ProductCard from /components/ProductCard.vue const products refProduct[]([]) const categories refCategory[]([]) onMounted(async () { const productResponse await api.get(/products, { params: { page: 1, size: 8 } }) products.value productResponse.data.records const categoryResponse await api.get(/categories) categories.value categoryResponse.data }) /script快速开始环境要求JDK 21Node.js 20MySQL 8.0Redis 7.0启动步骤1. 数据库配置CREATEDATABASEsmart_mallCHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ci;2. 启动后端服务cdbackend mvn spring-boot:run# 服务启动在 http://localhost:80803. 启动前端服务cdfrontendnpminstallnpmrun dev# 服务启动在 http://localhost:51734. Docker 一键部署docker-composeup-d默认账号用户名密码角色admin123456管理员user123456普通用户API 接口一览模块接口方法描述认证/api/auth/loginPOST用户登录认证/api/auth/registerPOST用户注册用户/api/users/meGET获取当前用户商品/api/productsGET获取商品列表商品/api/products/:idGET获取商品详情购物车/api/cartGET获取购物车购物车/api/cartPOST添加商品订单/api/ordersGET获取订单列表订单/api/ordersPOST创建订单管理员/api/admin/productsPOST创建商品管理员/api/admin/orders/:id/statusPUT更新订单状态技术亮点总结无状态认证- 基于 JWT 的 Token 认证服务端无需维护会话状态事务一致性- 订单创建使用Transactional保证数据完整性类型安全- 前端使用 TypeScript后端使用强类型语言组件化开发- Vue 3 Composition API 组件复用容器化部署- Docker Compose 一键部署所有服务RESTful 设计- 标准的 REST API 接口规范总结智慧商城项目展示了一个完整的现代化电商平台开发流程涵盖了从需求分析、架构设计到代码实现的全过程。无论是学习 Spring Boot 后端开发还是 Vue 3 前端开发这个项目都是一个很好的实践案例。项目代码结构清晰遵循了业界最佳实践可以作为企业级电商系统开发的参考模板。如果您对某个模块有更深的兴趣欢迎深入研究源码进行学习