简介本资源是一套已完整调试通过的SpringBootVueRedis前后端分离网上商城系统专为计算机类专业本科毕业设计、课程设计及Java全栈入门实践打造覆盖电商核心模块如商品管理、购物车、订单处理与用户权限控制。项目采用主流技术栈SpringBoot构建高可用后端服务Vue实现响应式前端界面Redis承担缓存加速与会话管理显著提升并发性能与开发效率。压缩包共2034个文件含1358个Markdown文档含部署说明、接口规范、设计思路、562个JavaScript源码文件Vue组件与API调用逻辑、69个JSON配置与数据文件整体117.18MB目录结构清晰含Windows下Redis部署指南等实用附录。已有124人学习下载配套SQL脚本、README详解及模块化代码组织便于快速理解架构分层、前后端交互流程与缓存集成方案助力开发者高效复现、二次开发与答辩展示。1. 项目背景与核心价值最近在整理硬盘时翻出了一个几年前做的老项目——“网上商城003”。这是一个典型的SpringBoot Vue Redis的前后端分离项目当时是为了学习新技术栈和应对面试而搭建的。虽然现在看代码有些稚嫩但麻雀虽小五脏俱全从用户登录、商品浏览、购物车、订单生成到简单的后台管理该有的流程基本都走通了。项目源码和SQL文件都还在我重新梳理了一遍把其中一些当时踩过的坑、以及现在看来可以优化的点都整理了出来。对于想入门全栈开发或者正在寻找一个完整项目来练手、丰富简历的朋友来说这个项目提供了一个非常清晰的、可运行的“骨架”。它不追求大而全的复杂业务而是聚焦于如何将SpringBoot、Vue、Redis这几个核心组件串联起来实现一个可工作的最小闭环。通过这个项目你能直观地理解前后端分离架构下数据是如何通过API流动的状态管理如用户登录态、购物车是如何借助Redis实现的以及一个基础的CRUD功能从前端表单到后端数据库的完整链路。2. 技术栈选型与项目结构解析这个项目选用了当时以及现在依然非常主流且经典的技术组合SpringBoot 2.x 作为后端框架Vue 2.x 作为前端框架Redis 作为缓存和会话存储。这个组合的优势在于生态成熟、学习资料丰富、社区活跃能让你把精力更多地放在业务逻辑和架构理解上而不是解决冷门框架的兼容性问题。2.1 后端SpringBoot结构剖析后端采用标准的Maven多模块结构这虽然不是必须的但对于理清依赖和职责分离很有帮助。核心模块大概是这样划分的mall-common: 存放通用工具类、常量定义、统一返回结果封装如Result类、全局异常处理器等。这是项目的基石确保代码风格和异常处理的一致性。mall-model: 实体类Entity和数据库映射对象。这里定义了User、Product、Order、CartItem等核心业务模型。我使用了Lombok来减少Getter/Setter的样板代码让实体类看起来更清爽。mall-mapper: 数据访问层这里集成了MyBatis-Plus。MyBatis-Plus的通用Mapper和Service封装让基础的CRUD操作几乎不用写SQL极大地提升了开发效率。例如对于用户表的查询只需要继承BaseMapperUser就能直接使用selectById、selectList等方法。mall-service: 业务逻辑层。这里包含了具体的业务实现。一个重要的设计是服务层的方法需要处理事务。例如创建订单createOrder方法通常会加上Transactional注解确保扣减库存、生成订单、清空购物车这几个操作在一个事务内完成要么全部成功要么全部回滚。mall-controller: 控制层提供RESTful API。这里的每个方法都对应前端的一个请求。我遵循了简单的规范使用RestController注解URL路径以/api开头方法上使用GetMapping、PostMapping等注解。返回的数据都包装在Result对象里包含状态码、消息和实际数据体。项目的配置文件application.yml是另一个重点。除了配置数据库连接、MyBatis-Plus外特别需要注意Redis的配置。你需要指定Redis服务器的地址、端口、密码如果有、以及使用哪个数据库默认是0。此外为了将HttpSession存储到Redis中实现分布式会话还需要配置spring.session.store-typeredis。这样当用户登录后其会话信息就不再局限于单个应用服务器即使有多台后端实例用户的登录状态也能保持。2.2 前端Vue项目架构前端是基于Vue CLI创建的标准项目。结构清晰src/api/: 这里集中管理所有对后端API的调用。每个业务模块一个JS文件比如user.js、product.js、order.js。使用axios库来发起HTTP请求并在这里统一设置了请求拦截器用于在请求头中添加Token和响应拦截器用于统一处理错误比如Token过期跳转到登录页。src/router/: Vue Router的配置。实现了路由守卫beforeEach在跳转到需要登录的页面如/cart,/order前会检查本地是否有Token没有则重定向到登录页。src/store/: Vuex状态管理。虽然这个项目规模不大但使用Vuex来集中管理用户信息、购物车数据等全局状态是非常合适的。例如用户登录成功后会将用户信息存入Vuex的state中并在各个组件中通过mapState辅助函数来获取。src/views/: 页面组件。如Home.vue首页、Login.vue登录、ProductList.vue商品列表、Cart.vue购物车、Order.vue订单页等。src/components/: 可复用的展示型组件。如商品卡片ProductCard.vue、页头导航NavBar.vue等。前端项目的vue.config.js里配置了代理解决开发环境下的跨域问题。将/api开头的请求代理到后端SpringBoot服务例如http://localhost:8080。这样前端在开发时调用/api/user/login实际上请求会被转发到后端的http://localhost:8080/api/user/login。2.3 Redis在项目中的角色Redis在这个项目中扮演了两个关键角色分布式会话存储如上所述通过Spring Session将HttpSession存到Redis。用户登录后会生成一个唯一的Session ID通常放在Cookie或前端LocalStorage的Token里后续请求携带这个ID后端就能从Redis中取出对应的用户会话信息实现状态保持。购物车缓存这是Redis非常经典的应用场景。用户未登录时购物车数据可以暂存于浏览器本地存储LocalStorage。但用户登录后为了在多设备间同步需要将购物车数据存储到服务器端。使用Redis的Hash数据结构非常合适Key可以是cart:userIdField是商品IDValue是商品数量等信息。这样对购物车的增删改查操作都非常高效。相较于直接存入数据库能极大减轻数据库压力提升响应速度。3. 核心业务流程与代码实现拆解让我们深入到几个核心业务功能看看前后端是如何协作的。3.1 用户登录与鉴权流程这是所有业务的起点。流程如下前端Login.vue用户填写用户名密码点击登录。前端调用src/api/user.js中的login方法该方法使用axios向/api/user/login发送POST请求携带用户名和密码。后端UserController.login接收参数调用UserService验证用户名和密码。验证通过后生成一个Token本项目使用JWT但早期版本可能用的是Session ID。为了安全密码比对应使用BCryptPasswordEncoder进行加密后比较而不是明文对比。将用户信息剔除了密码存入HttpSession由于配置了Spring Session实际存入Redis。将生成的Token或Session ID返回给前端。前端接收与存储前端收到登录成功的响应后将返回的Token存储到LocalStorage或Vuex中并更新Vuex中的用户状态为“已登录”。同时axios的请求拦截器会将该Token自动添加到后续所有请求的Header中通常是Authorization: Bearer token。后续请求鉴权后端可以配置一个拦截器或使用Spring Security。对于需要登录的API如/api/order/**拦截器会从请求Header中取出Token进行验证JWT验签或从Redis查询Session验证通过则放行否则返回401未授权错误。注意在早期的项目代码中可能没有使用JWT而是完全依赖Spring Session Redis。此时前端存储和传递的是JSESSIONID这个Cookie。两种方式各有优劣JWT是无状态的更适合纯API服务Session方式更传统与Spring Security集成更简单。你需要根据项目代码实际判断。3.2 商品浏览与加入购物车商品列表ProductList.vue页面加载时调用getProductListAPI。后端ProductController接收分页参数查询数据库返回商品列表。这里可以考虑引入Redis缓存将热门商品列表或商品详情缓存起来设置一个合理的过期时间能显著提升查询性能。加入购物车前端点击“加入购物车”按钮调用addToCartAPI传递商品ID和数量。后端CartController首先从请求的Token或Session中解析出当前用户ID。然后操作Redis。使用命令HSET cart:userId productId quantity。如果商品已存在则更新数量HINCRBY。这里有个细节在将商品加入购物车前必须校验商品是否存在以及库存是否充足。这通常需要查询一次数据库或缓存中的商品信息。虽然略有性能损耗但保证了业务的正确性避免用户将无效商品加入购物车。3.3 下单与库存扣减这是整个系统最需要关注一致性的地方。前端提交订单Order.vue用户从购物车页面进入确认商品和收货地址后点击“提交订单”。前端调用createOrderAPI通常只需传递选中的购物车商品ID列表和地址ID。后端订单创建OrderService.createOrder开启事务方法标注Transactional(rollbackFor Exception.class)。校验与锁定遍历商品列表查询商品详情和库存。这里直接使用数据库的select ... for update行锁是一种方式但在高并发下可能成为瓶颈。更常见的做法是使用Redis分布式锁或乐观锁。本项目早期版本可能没有做精细控制存在超卖风险。扣减库存执行update product set stock stock - quantity where id ? and stock quantity。这个SQL语句本身利用了数据库的原子性和行锁是一种乐观锁的实现通过stock quantity条件。生成订单向订单表order插入主记录向订单项表order_item插入商品明细。订单号可以使用“时间戳随机数”或“业务前缀分布式ID生成器”来确保唯一。清理购物车从Redis中删除已下单的商品项。事务结束如果以上步骤任何一步出现异常事务将回滚库存恢复订单不会生成。踩坑记录在最初的版本中我曾在Controller层调用多个Service方法来分别扣库存、创建订单但没有放在一个事务里。结果出现过库存扣了但订单没生成成功的“幽灵”数据。后来才意识到必须将整个下单流程包装在一个数据库事务中。此外对于超高并发的秒杀场景仅靠数据库事务和行锁是不够的需要引入Redis预减库存、消息队列异步下单等更复杂的方案但这超出了这个基础项目的范围。4. 项目部署与关键配置要让这个项目跑起来环境准备和配置是关键。4.1 后端部署要点数据库初始化运行项目SQL文件通常命名为mall.sql创建数据库、表和初始化数据如管理员账号、测试商品。Redis启动确保本地或远程Redis服务已启动。如果是Linux常用命令是systemctl start redis如果是Windows可以下载Redis Desktop Manager或者运行redis-server.exe。修改配置文件打开src/main/resources/application.yml修改以下关键配置spring: datasource: url: jdbc:mysql://你的数据库IP:3306/mall_db?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghai username: 你的用户名 password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver redis: host: 你的Redis IP # 本地是127.0.0.1 port: 6379 password: # 如果有密码则填写 database: 0 session: store-type: redis # 启用Redis存储Session打包与运行在项目根目录下执行Maven命令mvn clean package会在target目录下生成一个jar文件。然后使用java -jar your-project.jar即可启动。也可以使用nohup命令在后台运行。4.2 前端部署要点安装依赖进入前端项目目录通常是一个包含package.json的文件夹运行npm install或yarn install安装所有依赖包。配置API地址开发环境代理在vue.config.js里配置好了。但生产环境需要打包。你需要修改前端调用API的基地址。通常有两种做法在src/api/request.js或axios的创建文件中根据process.env.NODE_ENV判断环境设置不同的baseURL。更灵活的做法是将API基地址设置为相对路径/api然后在部署时通过Nginx等Web服务器将/api的请求反向代理到后端服务。这样前端代码就与环境无关了。打包运行npm run build会在dist目录下生成静态文件HTML, JS, CSS。部署将dist目录下的所有文件上传到你的Web服务器如Nginx, Apache的静态资源目录。并配置Web服务器将/api路径的请求代理到后端SpringBoot应用的地址。4.3 使用Docker Compose一键部署进阶对于学习而言手动部署每一步都有价值。但对于快速演示或希望环境一致可以使用Docker Compose。你需要编写一个docker-compose.yml文件定义三个服务MySQL、Redis、SpringBoot应用。前端静态文件依然可以通过Nginx服务来托管。这样只需要一条docker-compose up -d命令就能拉起整个项目所需的所有服务非常方便。5. 常见问题排查与优化建议在运行和扩展这个项目时你可能会遇到以下问题5.1 启动报错与连接问题数据库连接失败检查application.yml中的数据库URL、用户名、密码是否正确。确认MySQL服务是否已启动且允许远程连接如果IP不是localhost。Redis连接失败同样检查配置。如果Redis有密码必须在配置文件中填写。如果是云服务器检查防火墙是否开放了6379端口。端口冲突SpringBoot默认端口是8080如果被占用可以在application.yml中修改server.port。前端代理失败开发时前端页面无法调用API。检查vue.config.js中的proxy配置目标地址是否为后端正在运行的服务地址和端口。同时确保后端CORS跨域配置正确或者已通过代理解决。5.2 业务逻辑相关坑点购物车数据丢失如果用户清除了浏览器本地存储或者更换设备未登录状态下的购物车会丢失。这是预期行为。更好的体验是在用户登录时将本地购物车与服务器端Redis购物车合并。订单超卖如前所述基础的下单逻辑在高并发下可能超卖。解决方案包括使用Redis分布式锁确保扣库存和创建订单的原子性或者使用消息队列将下单请求排队异步处理并在扣库存时使用更严格的乐观锁如版本号。Session失效用户登录后过一段时间操作提示未登录。检查Redis中Session的过期时间默认30分钟以及前端是否在长时间无操作后没有及时刷新Token或重新登录。5.3 性能与扩展优化建议接口性能使用Spring Boot Actuator或阿里云的Arthas等工具监控接口耗时。对于复杂的商品列表查询考虑引入Elasticsearch进行搜索。对于热点数据如首页商品推荐一定要用Redis缓存。静态资源商品图片等静态资源不要直接存到后端服务器或数据库。应该使用对象存储服务如阿里云OSS、腾讯云COS后端只存储URL地址。这能极大减轻服务器压力并利用CDN加速。前端优化Vue项目打包后检查dist目录下的文件大小。过大的vendor.js第三方依赖可以考虑拆分或使用异步组件懒加载。对于图片进行压缩。安全加固SQL注入本项目使用MyBatis-Plus默认使用预编译语句基本能防止。但要避免在代码中拼接SQL字符串。XSS攻击前端展示用户输入如商品评论时使用v-html要非常谨慎最好对内容进行转义或过滤。后端在存储前也可以做一层过滤。CSRF攻击如果使用SessionCookie模式需要注意CSRF防护。Spring Security默认提供了CSRF保护但如果是纯APIToken模式通常可以禁用。敏感信息配置文件中的数据库密码、Redis密码等不应明文写入代码。应该使用环境变量或配置中心。这个“网上商城003”项目作为一个学习样本其价值在于提供了一个完整的、可运行的上下文让你能亲手把各个环节打通。在理解了这些基础之后你可以尝试引入更高级的技术比如用Spring Cloud Alibaba做微服务改造用RabbitMQ处理订单异步消息用ELK收集日志用Prometheus监控系统性能。每一步的扩展都是对你技术栈的一次深化。本文还有配套的精品资源点击获取
SpringBoot+Vue+Redis全栈商城项目实战：从架构到部署完整解析
简介本资源是一套已完整调试通过的SpringBootVueRedis前后端分离网上商城系统专为计算机类专业本科毕业设计、课程设计及Java全栈入门实践打造覆盖电商核心模块如商品管理、购物车、订单处理与用户权限控制。项目采用主流技术栈SpringBoot构建高可用后端服务Vue实现响应式前端界面Redis承担缓存加速与会话管理显著提升并发性能与开发效率。压缩包共2034个文件含1358个Markdown文档含部署说明、接口规范、设计思路、562个JavaScript源码文件Vue组件与API调用逻辑、69个JSON配置与数据文件整体117.18MB目录结构清晰含Windows下Redis部署指南等实用附录。已有124人学习下载配套SQL脚本、README详解及模块化代码组织便于快速理解架构分层、前后端交互流程与缓存集成方案助力开发者高效复现、二次开发与答辩展示。1. 项目背景与核心价值最近在整理硬盘时翻出了一个几年前做的老项目——“网上商城003”。这是一个典型的SpringBoot Vue Redis的前后端分离项目当时是为了学习新技术栈和应对面试而搭建的。虽然现在看代码有些稚嫩但麻雀虽小五脏俱全从用户登录、商品浏览、购物车、订单生成到简单的后台管理该有的流程基本都走通了。项目源码和SQL文件都还在我重新梳理了一遍把其中一些当时踩过的坑、以及现在看来可以优化的点都整理了出来。对于想入门全栈开发或者正在寻找一个完整项目来练手、丰富简历的朋友来说这个项目提供了一个非常清晰的、可运行的“骨架”。它不追求大而全的复杂业务而是聚焦于如何将SpringBoot、Vue、Redis这几个核心组件串联起来实现一个可工作的最小闭环。通过这个项目你能直观地理解前后端分离架构下数据是如何通过API流动的状态管理如用户登录态、购物车是如何借助Redis实现的以及一个基础的CRUD功能从前端表单到后端数据库的完整链路。2. 技术栈选型与项目结构解析这个项目选用了当时以及现在依然非常主流且经典的技术组合SpringBoot 2.x 作为后端框架Vue 2.x 作为前端框架Redis 作为缓存和会话存储。这个组合的优势在于生态成熟、学习资料丰富、社区活跃能让你把精力更多地放在业务逻辑和架构理解上而不是解决冷门框架的兼容性问题。2.1 后端SpringBoot结构剖析后端采用标准的Maven多模块结构这虽然不是必须的但对于理清依赖和职责分离很有帮助。核心模块大概是这样划分的mall-common: 存放通用工具类、常量定义、统一返回结果封装如Result类、全局异常处理器等。这是项目的基石确保代码风格和异常处理的一致性。mall-model: 实体类Entity和数据库映射对象。这里定义了User、Product、Order、CartItem等核心业务模型。我使用了Lombok来减少Getter/Setter的样板代码让实体类看起来更清爽。mall-mapper: 数据访问层这里集成了MyBatis-Plus。MyBatis-Plus的通用Mapper和Service封装让基础的CRUD操作几乎不用写SQL极大地提升了开发效率。例如对于用户表的查询只需要继承BaseMapperUser就能直接使用selectById、selectList等方法。mall-service: 业务逻辑层。这里包含了具体的业务实现。一个重要的设计是服务层的方法需要处理事务。例如创建订单createOrder方法通常会加上Transactional注解确保扣减库存、生成订单、清空购物车这几个操作在一个事务内完成要么全部成功要么全部回滚。mall-controller: 控制层提供RESTful API。这里的每个方法都对应前端的一个请求。我遵循了简单的规范使用RestController注解URL路径以/api开头方法上使用GetMapping、PostMapping等注解。返回的数据都包装在Result对象里包含状态码、消息和实际数据体。项目的配置文件application.yml是另一个重点。除了配置数据库连接、MyBatis-Plus外特别需要注意Redis的配置。你需要指定Redis服务器的地址、端口、密码如果有、以及使用哪个数据库默认是0。此外为了将HttpSession存储到Redis中实现分布式会话还需要配置spring.session.store-typeredis。这样当用户登录后其会话信息就不再局限于单个应用服务器即使有多台后端实例用户的登录状态也能保持。2.2 前端Vue项目架构前端是基于Vue CLI创建的标准项目。结构清晰src/api/: 这里集中管理所有对后端API的调用。每个业务模块一个JS文件比如user.js、product.js、order.js。使用axios库来发起HTTP请求并在这里统一设置了请求拦截器用于在请求头中添加Token和响应拦截器用于统一处理错误比如Token过期跳转到登录页。src/router/: Vue Router的配置。实现了路由守卫beforeEach在跳转到需要登录的页面如/cart,/order前会检查本地是否有Token没有则重定向到登录页。src/store/: Vuex状态管理。虽然这个项目规模不大但使用Vuex来集中管理用户信息、购物车数据等全局状态是非常合适的。例如用户登录成功后会将用户信息存入Vuex的state中并在各个组件中通过mapState辅助函数来获取。src/views/: 页面组件。如Home.vue首页、Login.vue登录、ProductList.vue商品列表、Cart.vue购物车、Order.vue订单页等。src/components/: 可复用的展示型组件。如商品卡片ProductCard.vue、页头导航NavBar.vue等。前端项目的vue.config.js里配置了代理解决开发环境下的跨域问题。将/api开头的请求代理到后端SpringBoot服务例如http://localhost:8080。这样前端在开发时调用/api/user/login实际上请求会被转发到后端的http://localhost:8080/api/user/login。2.3 Redis在项目中的角色Redis在这个项目中扮演了两个关键角色分布式会话存储如上所述通过Spring Session将HttpSession存到Redis。用户登录后会生成一个唯一的Session ID通常放在Cookie或前端LocalStorage的Token里后续请求携带这个ID后端就能从Redis中取出对应的用户会话信息实现状态保持。购物车缓存这是Redis非常经典的应用场景。用户未登录时购物车数据可以暂存于浏览器本地存储LocalStorage。但用户登录后为了在多设备间同步需要将购物车数据存储到服务器端。使用Redis的Hash数据结构非常合适Key可以是cart:userIdField是商品IDValue是商品数量等信息。这样对购物车的增删改查操作都非常高效。相较于直接存入数据库能极大减轻数据库压力提升响应速度。3. 核心业务流程与代码实现拆解让我们深入到几个核心业务功能看看前后端是如何协作的。3.1 用户登录与鉴权流程这是所有业务的起点。流程如下前端Login.vue用户填写用户名密码点击登录。前端调用src/api/user.js中的login方法该方法使用axios向/api/user/login发送POST请求携带用户名和密码。后端UserController.login接收参数调用UserService验证用户名和密码。验证通过后生成一个Token本项目使用JWT但早期版本可能用的是Session ID。为了安全密码比对应使用BCryptPasswordEncoder进行加密后比较而不是明文对比。将用户信息剔除了密码存入HttpSession由于配置了Spring Session实际存入Redis。将生成的Token或Session ID返回给前端。前端接收与存储前端收到登录成功的响应后将返回的Token存储到LocalStorage或Vuex中并更新Vuex中的用户状态为“已登录”。同时axios的请求拦截器会将该Token自动添加到后续所有请求的Header中通常是Authorization: Bearer token。后续请求鉴权后端可以配置一个拦截器或使用Spring Security。对于需要登录的API如/api/order/**拦截器会从请求Header中取出Token进行验证JWT验签或从Redis查询Session验证通过则放行否则返回401未授权错误。注意在早期的项目代码中可能没有使用JWT而是完全依赖Spring Session Redis。此时前端存储和传递的是JSESSIONID这个Cookie。两种方式各有优劣JWT是无状态的更适合纯API服务Session方式更传统与Spring Security集成更简单。你需要根据项目代码实际判断。3.2 商品浏览与加入购物车商品列表ProductList.vue页面加载时调用getProductListAPI。后端ProductController接收分页参数查询数据库返回商品列表。这里可以考虑引入Redis缓存将热门商品列表或商品详情缓存起来设置一个合理的过期时间能显著提升查询性能。加入购物车前端点击“加入购物车”按钮调用addToCartAPI传递商品ID和数量。后端CartController首先从请求的Token或Session中解析出当前用户ID。然后操作Redis。使用命令HSET cart:userId productId quantity。如果商品已存在则更新数量HINCRBY。这里有个细节在将商品加入购物车前必须校验商品是否存在以及库存是否充足。这通常需要查询一次数据库或缓存中的商品信息。虽然略有性能损耗但保证了业务的正确性避免用户将无效商品加入购物车。3.3 下单与库存扣减这是整个系统最需要关注一致性的地方。前端提交订单Order.vue用户从购物车页面进入确认商品和收货地址后点击“提交订单”。前端调用createOrderAPI通常只需传递选中的购物车商品ID列表和地址ID。后端订单创建OrderService.createOrder开启事务方法标注Transactional(rollbackFor Exception.class)。校验与锁定遍历商品列表查询商品详情和库存。这里直接使用数据库的select ... for update行锁是一种方式但在高并发下可能成为瓶颈。更常见的做法是使用Redis分布式锁或乐观锁。本项目早期版本可能没有做精细控制存在超卖风险。扣减库存执行update product set stock stock - quantity where id ? and stock quantity。这个SQL语句本身利用了数据库的原子性和行锁是一种乐观锁的实现通过stock quantity条件。生成订单向订单表order插入主记录向订单项表order_item插入商品明细。订单号可以使用“时间戳随机数”或“业务前缀分布式ID生成器”来确保唯一。清理购物车从Redis中删除已下单的商品项。事务结束如果以上步骤任何一步出现异常事务将回滚库存恢复订单不会生成。踩坑记录在最初的版本中我曾在Controller层调用多个Service方法来分别扣库存、创建订单但没有放在一个事务里。结果出现过库存扣了但订单没生成成功的“幽灵”数据。后来才意识到必须将整个下单流程包装在一个数据库事务中。此外对于超高并发的秒杀场景仅靠数据库事务和行锁是不够的需要引入Redis预减库存、消息队列异步下单等更复杂的方案但这超出了这个基础项目的范围。4. 项目部署与关键配置要让这个项目跑起来环境准备和配置是关键。4.1 后端部署要点数据库初始化运行项目SQL文件通常命名为mall.sql创建数据库、表和初始化数据如管理员账号、测试商品。Redis启动确保本地或远程Redis服务已启动。如果是Linux常用命令是systemctl start redis如果是Windows可以下载Redis Desktop Manager或者运行redis-server.exe。修改配置文件打开src/main/resources/application.yml修改以下关键配置spring: datasource: url: jdbc:mysql://你的数据库IP:3306/mall_db?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghai username: 你的用户名 password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver redis: host: 你的Redis IP # 本地是127.0.0.1 port: 6379 password: # 如果有密码则填写 database: 0 session: store-type: redis # 启用Redis存储Session打包与运行在项目根目录下执行Maven命令mvn clean package会在target目录下生成一个jar文件。然后使用java -jar your-project.jar即可启动。也可以使用nohup命令在后台运行。4.2 前端部署要点安装依赖进入前端项目目录通常是一个包含package.json的文件夹运行npm install或yarn install安装所有依赖包。配置API地址开发环境代理在vue.config.js里配置好了。但生产环境需要打包。你需要修改前端调用API的基地址。通常有两种做法在src/api/request.js或axios的创建文件中根据process.env.NODE_ENV判断环境设置不同的baseURL。更灵活的做法是将API基地址设置为相对路径/api然后在部署时通过Nginx等Web服务器将/api的请求反向代理到后端服务。这样前端代码就与环境无关了。打包运行npm run build会在dist目录下生成静态文件HTML, JS, CSS。部署将dist目录下的所有文件上传到你的Web服务器如Nginx, Apache的静态资源目录。并配置Web服务器将/api路径的请求代理到后端SpringBoot应用的地址。4.3 使用Docker Compose一键部署进阶对于学习而言手动部署每一步都有价值。但对于快速演示或希望环境一致可以使用Docker Compose。你需要编写一个docker-compose.yml文件定义三个服务MySQL、Redis、SpringBoot应用。前端静态文件依然可以通过Nginx服务来托管。这样只需要一条docker-compose up -d命令就能拉起整个项目所需的所有服务非常方便。5. 常见问题排查与优化建议在运行和扩展这个项目时你可能会遇到以下问题5.1 启动报错与连接问题数据库连接失败检查application.yml中的数据库URL、用户名、密码是否正确。确认MySQL服务是否已启动且允许远程连接如果IP不是localhost。Redis连接失败同样检查配置。如果Redis有密码必须在配置文件中填写。如果是云服务器检查防火墙是否开放了6379端口。端口冲突SpringBoot默认端口是8080如果被占用可以在application.yml中修改server.port。前端代理失败开发时前端页面无法调用API。检查vue.config.js中的proxy配置目标地址是否为后端正在运行的服务地址和端口。同时确保后端CORS跨域配置正确或者已通过代理解决。5.2 业务逻辑相关坑点购物车数据丢失如果用户清除了浏览器本地存储或者更换设备未登录状态下的购物车会丢失。这是预期行为。更好的体验是在用户登录时将本地购物车与服务器端Redis购物车合并。订单超卖如前所述基础的下单逻辑在高并发下可能超卖。解决方案包括使用Redis分布式锁确保扣库存和创建订单的原子性或者使用消息队列将下单请求排队异步处理并在扣库存时使用更严格的乐观锁如版本号。Session失效用户登录后过一段时间操作提示未登录。检查Redis中Session的过期时间默认30分钟以及前端是否在长时间无操作后没有及时刷新Token或重新登录。5.3 性能与扩展优化建议接口性能使用Spring Boot Actuator或阿里云的Arthas等工具监控接口耗时。对于复杂的商品列表查询考虑引入Elasticsearch进行搜索。对于热点数据如首页商品推荐一定要用Redis缓存。静态资源商品图片等静态资源不要直接存到后端服务器或数据库。应该使用对象存储服务如阿里云OSS、腾讯云COS后端只存储URL地址。这能极大减轻服务器压力并利用CDN加速。前端优化Vue项目打包后检查dist目录下的文件大小。过大的vendor.js第三方依赖可以考虑拆分或使用异步组件懒加载。对于图片进行压缩。安全加固SQL注入本项目使用MyBatis-Plus默认使用预编译语句基本能防止。但要避免在代码中拼接SQL字符串。XSS攻击前端展示用户输入如商品评论时使用v-html要非常谨慎最好对内容进行转义或过滤。后端在存储前也可以做一层过滤。CSRF攻击如果使用SessionCookie模式需要注意CSRF防护。Spring Security默认提供了CSRF保护但如果是纯APIToken模式通常可以禁用。敏感信息配置文件中的数据库密码、Redis密码等不应明文写入代码。应该使用环境变量或配置中心。这个“网上商城003”项目作为一个学习样本其价值在于提供了一个完整的、可运行的上下文让你能亲手把各个环节打通。在理解了这些基础之后你可以尝试引入更高级的技术比如用Spring Cloud Alibaba做微服务改造用RabbitMQ处理订单异步消息用ELK收集日志用Prometheus监控系统性能。每一步的扩展都是对你技术栈的一次深化。本文还有配套的精品资源点击获取
