简介这套基于Spring Boot与Vue.js的家具网站源码面向Java全栈学习者和毕业设计学生围绕线上家具选购与店铺后台管理场景提供了完整的前后端分离实现方案覆盖会员浏览商品、在线选购以及管理员上架、下架、订单统计等核心流程。压缩包共802个文件体积20.05MB主要包含122个Java源文件、46个Vue组件、153个JavaScript脚本、41个HTML页面、44个CSS样式、162个SVG图标及MySQL数据库脚本并有doc毕业论文文档、mvnw与bat构建运行脚本、bak环境备份文件类型较全可支撑开发、部署与文档撰写。压缩包内目录按照前端、后端、数据库和文档分层组织便于快速定位相关代码与配置文件。目前已有105人学习下载适合作为毕业设计、课程设计或全栈项目练手的参考资料。除可直接运行的源码外还附带论文文档、数据建表脚本与Maven配置能帮助使用者快速搭建SpringBoot与Vue开发环境理清前后端数据交互和权限管理思路显著缩短二次开发与论文撰写时间。1. 家具网站源码Spring Boot与Vue怎么配合一个完整的电商后台这套源码不是拿几张静态页面凑数的演示工程它同时包含会员端和后台管理端用户在前台浏览家具、加购、下单管理员在后台维护家具信息并处理订单。后端用Spring Boot暴露REST接口前端用Vue做页面渲染数据落到MySQL里整条链路对毕业设计或小型企业项目来说都非常完整。对正在选课题的Java学生来说它展示的Spring Boot四层架构和Vue路由用法可以直接复用对已经工作的开发者也能从项目里的.bak备份文件和三个批处理脚本中看出原作者的工程习惯。下面我按后端实现、前端组件、脚本运行与排错三个层次拆开讲。2. 技术选型与项目结构先把Spring Boot和Vue的关系理清2.1 为什么不用JSP单体架构这个家具网站需要承载两类角色会员用户和管理员。会员端要浏览商品、维护购物车、生成订单管理员端要维护家具上下架、查看订单状态。如果沿用JSP Servlet所有页面都从服务端渲染前端和后端Java代码挤在一起每调一次样式都要重启应用开发链路很长。Spring Boot在后台提供内嵌Tomcat、自动配置和基于注解的路由让Java后端只负责处理请求和返回JSON。Vue在前端负责路由、组件和状态管理开发时用webpack-dev-server热更新后端只关心接口数据。这种前后端分离的好处是业务接口能被PC网页、小程序或多个客户端复用前端专注交互体验后端专注事务和权限。配合MySQL存储商品、订单、用户数据这个项目的数据关系模型也足够练手。2.2 源码目录里那些.bak文件是干什么的拿到的源码包里有几个以.bak结尾的文件比如index.html.bak、update-password.vue.bak、IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak、IndexHeader.vue.bak。这类文件是原作者修改前的备份Vue CLI在编译时不会把.bak文件当作组件处理直接放包里也没问题。使用时要先改名为正规的新文件后缀再放到对应目录否则前端页面会找不到这些组件。我按常见Spring Boot Vue项目结构把这些文件和目录归位路径或文件作用src/main/java后端Java代码按Controller、Service、Mapper、Entity四层分包src/main/resources配置文件application.yml以及MyBatis的Mapper XMLsrc/main/resources/static前端打包后的静态资源目录index.html.bak原首页文件备份恢复时去掉.bak后缀使用update-password.vue.bak会员修改密码页面组件备份IndexAsideStatic.vue.bak后台侧边栏菜单的静态组件备份BreadCrumbs.vue.bak后台内容区域的面包屑导航组件备份IndexHeader.vue.bak后台顶部标题栏组件备份1-install.bat一键安装依赖脚本2-run.bat启动项目脚本3-build.bat打包构建脚本mvnw.cmdMaven Wrapper无本地Maven也能执行Maven命令这里最容易踩坑的是.bak文件。之前有人把update-password.vue.bak直接放在src/views目录下结果运行时提示组件找不到因为文件后缀不是.vueVue的解析器不会识别。解决方法是先复制一份改名再在路由里引用。2.3 环境准备JDK、Maven、Node都要到位开发环境是SpringBoot框架配合MySQL数据库前端VUE技术因此至少准备三样JDK、Maven、Node.js。打开终端先确认java -version mvn -v node -v npm -vJDK建议1.8以上Maven 3.6以上Node 12以上。前端依赖安装时如果很慢可以给npm设置国内镜像npm config set registry https://registry.npmmirror.com1-install.bat通常会依次执行npm install和Maven依赖安装Script本身第5章会拆开看。注意不要用管理员权限运行bat脚本否则Maven和npm缓存目录权限错乱会带来一些难以排查的报错。2.4 数据库表设计家具、用户、订单三张核心表后端代码不是凭空跑起来的数据库表结构决定了Mapper层怎么写。这个项目最常见的表设计是数据表核心字段说明furnitureid, name, category, price, image, stock, status家具商品表status控制上架/下架userid, username, password, role用户表role区分会员和管理员ordersid, user_id, total_amount, create_time, status订单主表记录一笔订单的总金额和状态order_detailid, order_id, furniture_id, num, price订单明细表记录每件家具的购买数量和成交单价下单时先操作orders和order_detail同时扣减furniture表的stock。我在做Spring Boot四层架构时习惯把订单和库存扣减放在一个事务里避免出现“订单生成了但库存没减”的数据不一致问题。MySQL引擎用InnoDB通过外键逻辑关联而不是物理外键否则删除家具时会触发外键约束报错。到这里技术栈和项目结构已经明确。接下来进入后端代码的骨架。3. 后端实现Spring Boot四层架构、MyBatis与接口安全3.1 pom.xml依赖与application.yml配置Spring Boot项目最核心的是依赖管理。这个家具网站用Maven构建pom.xml中至少要引入Web、MyBatis和MySQL驱动dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.0/version /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency这里把MyBatis集成包单独列出来是因为Spring Boot官方没有提供MyBatis的自动配置需要mybatis-spring-boot-starter专门引入。版本号在实际使用时以Maven仓库里能拉到的稳定版为准不建议直接复制某个版本号就完事最好确认能和Spring Boot版本兼容。对应配置文件application.ymlserver: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/furniture?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: root mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.furniture.entity configuration: map-underscore-to-camel-case: true参数说明characterEncodingutf8保证中文不乱码serverTimezone要设置成Asia/Shanghai否则MySQL 8.x的高版本驱动会报时区错误。map-underscore-to-camel-case开启后数据库字段create_time会自动映射到Java属性createTime写Mapper时少起很多别名。3.2 实体类、Mapper层与Service层怎么分层Spring Boot四层架构通常指Controller、Service、Mapper、Entity每一层职责单一。以家具商品Furniture为例实体类这样写public class Furniture { private Long id; private String name; private String category; private BigDecimal price; private String image; private Integer stock; private Integer status; // getter/setter 省略 }Mapper接口负责数据库访问Mapper public interface FurnitureMapper { ListFurniture findList(Param(category) String category); Furniture findById(Param(id) Long id); Integer reduceStock(Param(id) Long id, Param(num) Integer num); }对应的FurnitureMapper.xml里写SQL时注意使用#{}而不是${}update idreduceStock UPDATE furniture SET stock stock - #{num} WHERE id #{id} AND stock #{num} /updatestock #{num}条件能防止超卖库存不够时更新行数为0Service层判断这个返回值就知道下单失败。很多新手只写SET stock stock - #{num}并发高时会把库存扣成负数。Service层把Mapper调用组合成业务动作并加上事务控制Service public class OrderService { Resource private FurnitureMapper furnitureMapper; Transactional public boolean createOrder(Long furnitureId, Integer num) { int rows furnitureMapper.reduceStock(furnitureId, num); if (rows 0) { throw new RuntimeException(库存不足); } // 插入订单记录... return true; } }注意Transactional默认只对运行时异常回滚自定义业务异常最好直接抛出不要用try-catch包住整个方法后吞掉异常否则事务不会回滚库存照样扣减。3.3 Controller接口设计与登录权限验证Controller层不做业务计算只接收参数并调用ServiceRestController RequestMapping(/api/furniture) public class FurnitureController { Resource private FurnitureService furnitureService; GetMapping(/list) public Result list(RequestParam(required false) String category) { return Result.success(furnitureService.findList(category)); } PostMapping(/buy) public Result buy(RequestParam Long furnitureId, RequestParam Integer num, RequestParam Long userId) { return Result.success(furnitureService.createOrder(furnitureId, num, userId)); } }Result是统一返回体把code、message、data包好前端axios拦截器按code判断成功或失败。购买接口这里我特意用了userId参数演示真实项目里应该从登录状态中获取不要信任前端传来的userId否则用户可以随意冒充他人下单。登录权限验证常见做法是写一个HandlerInterceptor拦截非公开接口public class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (request.getSession().getAttribute(userId) null) { response.setStatus(401); return false; } return true; } }这个拦截器对session会话有效前后端分离下更多是用Token校验。项目源码里的update-password页面需要登录后才能访问所以修改密码接口一定要校验当前登录用户身份避免只凭前端传的userId就执行改密操作。3.4 销售统计查询与防SQL注入后台统计订单时常用SQL按日期聚合并计算销售额SELECT DATE_FORMAT(create_time, %Y-%m-%d) AS order_date, COUNT(*) AS order_count, SUM(total_amount) AS sales_amount FROM orders WHERE create_time #{beginTime} GROUP BY DATE_FORMAT(create_time, %Y-%m-%d) ORDER BY order_date DESC;在MyBatis的Mapper XML中#{beginTime}会被预编译成占位符不会发生SQL注入。如果用${beginTime}直接拼接用户传入2024-01-01 OR 11就会破坏查询条件。判断一个项目是否靠谱可以先看Mapper XML里有没有大量${}这是最直接的安全审计点。统计结果返回时用Map接收即可也可以建一个OrderStatDTO。日期聚合放在数据库做比在Java内存里循环汇总要高效也能减轻接口响应时间。这一章把后端骨架拆完了。前端Vue部分要对接的正是这些JSON接口接下来看Vue侧怎么处理路由和组件。4. 前端Vue路由参数、Axios封装与后台组件实战4.1 Vue项目结构与路由参数处理前端源码通常是一个独立的Vue CLI工程目录里包含src/views存放页面组件src/router写路由配置。这个家具网站的用户端和管理端共用一套路由但管理员页面需要权限控制。先看路由配置import Vue from vue import VueRouter from vue-router Vue.use(VueRouter) const routes [ { path: /, component: () import(/views/Home.vue) }, { path: /product/:id, name: product, component: () import(/views/ProductDetail.vue) }, { path: /cart, component: () import(/views/Cart.vue) }, { path: /admin, component: () import(/views/admin/AdminLayout.vue), meta: { requiresAuth: true } } ] const router new VueRouter({ mode: history, routes }) router.beforeEach((to, from, next) { if (to.meta.requiresAuth !localStorage.getItem(token)) { next(/login) } else { next() } })/product/:id是动态路由参数页面里用this.$route.params.id获取商品ID。如果跳转时用this.$router.push({ path: /product/ id })刷新页面参数不会丢。不要再使用this.$route.query.id那是queryString方式和动态路由混用会拿到undefined。Vue项目实战中经常因为路由参数没传对导致商品详情页空白最常见的是在点击事件里漏了this.$router.push或者把name和path混用。路由表里的name字段要唯一跳转时用{ name: product, params: { id } }更稳定。4.2 Axios封装和请求拦截后端接口都是/api开头前端需要在开发环境配置代理避免跨域。vue.config.js里这样写module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }Axios封装时统一处理token和错误码import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) request.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { router.push(/login) } return Promise.reject(error) } ) export default request这段代码把请求地址统一带上前缀后端Controller不需要在每个接口前写版本号。401时自动跳转登录页比在页面里逐个判断状态码省事。注意第一个回调返回response.data后续业务代码拿到的就直接是后端Result对象少包一层。开发时遇到跨域先看代理配置有没有生效。改了vue.config.js要重启npm run dev否则代理不会自动加载。另外还要确认后端接口确实在走/api如果后端Controller没有/api前缀代理target会直接把请求转发给http://localhost:8080/api/...导致404。4.3 首页与购物车模块实现首页列表请求调用request.get(/furniture/list)数据渲染到卡片。如果要在本地调试需要先启动后端否则页面会一直显示加载失败。Vue中列表渲染时给每个元素加唯一的key避免切换分类时组件复用导致图片闪烁template div classhome div classfurniture-card v-foritem in furnitureList :keyitem.id img :srcitem.image :altitem.name h3{{ item.name }}/h3 p classprice{{ item.price }}/p el-button clickaddToCart(item) typeprimary加入购物车/el-button /div /div /template购物车模块常见做法是使用Vuex把选中的家具存在全局状态。加购逻辑如下addToCart(item) { this.$store.commit(cart/add, { id: item.id, name: item.name, price: item.price, num: 1 }) }Vuex的cart模块用Map按商品ID聚合数量提交订单时把购物车数据带到后端生成订单。如果不想引入Vuex也可以用localStorage但刷新页面后要再处理一次商品信息多一次接口查询。这里建议用Vuex同步内存和localStorage既保证交互响应及时又能在刷新后恢复购物车。前端样式用scoped隔离页面里写style scoped .home { max-width: 1200px; margin: 0 auto; } /stylescoped属性会为当前组件生成唯一的data属性选择器避免样式污染后台管理页面。装修家具网站时分类筛选按钮和商品卡片都要用flex布局图片要固定高度否则不同尺寸的家具图会把卡片撑出参差不齐的边距。4.4 后台布局IndexAsideStatic、BreadCrumbs、IndexHeader后台管理端由三个基础组件组成IndexHeader顶部栏、IndexAsideStatic侧边栏、BreadCrumbs面包屑。源码包里三个文件都是.bak备份恢复时先复制成.vue再导入到AdminLayout中。侧边栏菜单用Element UI实现el-menu :default-active$route.path router el-menu-item index/admin/furniture家具管理/el-menu-item el-menu-item index/admin/order订单管理/el-menu-item el-menu-item index/admin/statistics销售统计/el-menu-item /el-menu:default-active$route.path让菜单高亮和当前路由绑定router属性开启菜单跳转。面包屑组件需要监听路由变化watch: { $route.matched(value) { this.breadcrumbs value.map((item, index) { return { title: item.meta.title, index } }) } }这里用$route.matched能拿到嵌套路由全部匹配记录避免自己拼字符串。后台页面常见的面试题是问“Vue中如何实现权限控制”答案往往分两部分前端通过路由守卫控制页面跳转后端通过拦截器校验接口权限两者缺一不可。4.5 Vue打包后布局异常的排查路径很多人在开发时一切正常npm run build后部署到服务器发现页面白屏或样式错乱。原因通常是两个。第一个是路由mode为history刷新子路径时后端没有处理返回404。第二个是静态资源路径写成绝对路径/js/chunk.js部署到子目录应用下就找不到。我的处理办法如果不需要美观URL把mode: history改成mode: hash刷新问题立刻消失。需要历史模式时后端Spring Boot要在资源处理上做一个forward到index.html。对于资源路径vue.config.js里设置publicPath: ./让打包后的CSS和JS使用相对路径。到这里前后端的功能代码都清楚了。剩下来的重点是如何使用源码里的批处理脚本把项目跑起来以及上线时的安全加固。5. 批处理脚本、静态资源映射与Actuator安全加固5.1 拆解三个bat脚本源码包里的1-install.bat、2-run.bat、3-build.bat是按顺序使用的。1-install.bat一般会执行npm install并调用mvnw.cmd安装后端依赖cd frontend call npm install cd .. call mvnw.cmd clean install2-run.bat一般启动后端call mvnw.cmd spring-boot:run3-build.bat负责前端打包和后端打包cd frontend call npm run build cd .. call mvnw.cmd clean packagemvnw.cmd是Maven Wrapper它会把指定版本的Maven下载到本地即使机器上没有配Maven环境变量也能运行。如果之前执行过mvn install本地仓库已经有依赖启动会快很多。三个脚本执行顺序不能乱先install装依赖再run启动调试最后build打包上线。5.2 把Vue打包结果交给Spring Boot托管前端打包后会生成dist目录需要把dist下的文件复制到src/main/resources/static里。可以手动复制也可以在3-build.bat中加一条复制命令xcopy dist\* ..\src\main\resources\static\ /e /y然后后端打包时这些静态文件会进入jar包浏览器访问http://localhost:8080/index.html就能看到前端页面。如果发现Vue路由在history模式下刷新报404就是在Spring Boot里缺少对未知路径的转发需要写一个Controller把非接口请求forward到index.html或者干脆使用hash模式。这个坑在Spring Boot Vue项目里非常典型建议部署前先验证一次刷新行为。5.3 Spring Boot Actuator未授权访问的快速修复如果pom.xml里引入了spring-boot-starter-actuator并且没做权限控制默认暴露health、info等端点还好对付但有人为了调试开启了所有端点把env、beans、heapdump直接暴露到了公网。检查方法curl http://localhost:8080/actuator/env如果返回一大段环境变量说明端点已经开放。修复时在application.yml中只保留必要的健康检查端点management: endpoints: web: exposure: include: health,info或者对/actuator路径增加Spring Security配置。很多毕业设计源码里都有actuator依赖上线前一定要做这一步检查防止数据库账号密码和服务器配置被读取。修改完配置后重启项目再次执行curl http://localhost:8080/actuator/env如果返回404或401说明修复生效。本文还有配套的精品资源点击获取 Spring Boot+Vue家具电商源码解析：从架构到部署实战
简介这套基于Spring Boot与Vue.js的家具网站源码面向Java全栈学习者和毕业设计学生围绕线上家具选购与店铺后台管理场景提供了完整的前后端分离实现方案覆盖会员浏览商品、在线选购以及管理员上架、下架、订单统计等核心流程。压缩包共802个文件体积20.05MB主要包含122个Java源文件、46个Vue组件、153个JavaScript脚本、41个HTML页面、44个CSS样式、162个SVG图标及MySQL数据库脚本并有doc毕业论文文档、mvnw与bat构建运行脚本、bak环境备份文件类型较全可支撑开发、部署与文档撰写。压缩包内目录按照前端、后端、数据库和文档分层组织便于快速定位相关代码与配置文件。目前已有105人学习下载适合作为毕业设计、课程设计或全栈项目练手的参考资料。除可直接运行的源码外还附带论文文档、数据建表脚本与Maven配置能帮助使用者快速搭建SpringBoot与Vue开发环境理清前后端数据交互和权限管理思路显著缩短二次开发与论文撰写时间。1. 家具网站源码Spring Boot与Vue怎么配合一个完整的电商后台这套源码不是拿几张静态页面凑数的演示工程它同时包含会员端和后台管理端用户在前台浏览家具、加购、下单管理员在后台维护家具信息并处理订单。后端用Spring Boot暴露REST接口前端用Vue做页面渲染数据落到MySQL里整条链路对毕业设计或小型企业项目来说都非常完整。对正在选课题的Java学生来说它展示的Spring Boot四层架构和Vue路由用法可以直接复用对已经工作的开发者也能从项目里的.bak备份文件和三个批处理脚本中看出原作者的工程习惯。下面我按后端实现、前端组件、脚本运行与排错三个层次拆开讲。2. 技术选型与项目结构先把Spring Boot和Vue的关系理清2.1 为什么不用JSP单体架构这个家具网站需要承载两类角色会员用户和管理员。会员端要浏览商品、维护购物车、生成订单管理员端要维护家具上下架、查看订单状态。如果沿用JSP Servlet所有页面都从服务端渲染前端和后端Java代码挤在一起每调一次样式都要重启应用开发链路很长。Spring Boot在后台提供内嵌Tomcat、自动配置和基于注解的路由让Java后端只负责处理请求和返回JSON。Vue在前端负责路由、组件和状态管理开发时用webpack-dev-server热更新后端只关心接口数据。这种前后端分离的好处是业务接口能被PC网页、小程序或多个客户端复用前端专注交互体验后端专注事务和权限。配合MySQL存储商品、订单、用户数据这个项目的数据关系模型也足够练手。2.2 源码目录里那些.bak文件是干什么的拿到的源码包里有几个以.bak结尾的文件比如index.html.bak、update-password.vue.bak、IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak、IndexHeader.vue.bak。这类文件是原作者修改前的备份Vue CLI在编译时不会把.bak文件当作组件处理直接放包里也没问题。使用时要先改名为正规的新文件后缀再放到对应目录否则前端页面会找不到这些组件。我按常见Spring Boot Vue项目结构把这些文件和目录归位路径或文件作用src/main/java后端Java代码按Controller、Service、Mapper、Entity四层分包src/main/resources配置文件application.yml以及MyBatis的Mapper XMLsrc/main/resources/static前端打包后的静态资源目录index.html.bak原首页文件备份恢复时去掉.bak后缀使用update-password.vue.bak会员修改密码页面组件备份IndexAsideStatic.vue.bak后台侧边栏菜单的静态组件备份BreadCrumbs.vue.bak后台内容区域的面包屑导航组件备份IndexHeader.vue.bak后台顶部标题栏组件备份1-install.bat一键安装依赖脚本2-run.bat启动项目脚本3-build.bat打包构建脚本mvnw.cmdMaven Wrapper无本地Maven也能执行Maven命令这里最容易踩坑的是.bak文件。之前有人把update-password.vue.bak直接放在src/views目录下结果运行时提示组件找不到因为文件后缀不是.vueVue的解析器不会识别。解决方法是先复制一份改名再在路由里引用。2.3 环境准备JDK、Maven、Node都要到位开发环境是SpringBoot框架配合MySQL数据库前端VUE技术因此至少准备三样JDK、Maven、Node.js。打开终端先确认java -version mvn -v node -v npm -vJDK建议1.8以上Maven 3.6以上Node 12以上。前端依赖安装时如果很慢可以给npm设置国内镜像npm config set registry https://registry.npmmirror.com1-install.bat通常会依次执行npm install和Maven依赖安装Script本身第5章会拆开看。注意不要用管理员权限运行bat脚本否则Maven和npm缓存目录权限错乱会带来一些难以排查的报错。2.4 数据库表设计家具、用户、订单三张核心表后端代码不是凭空跑起来的数据库表结构决定了Mapper层怎么写。这个项目最常见的表设计是数据表核心字段说明furnitureid, name, category, price, image, stock, status家具商品表status控制上架/下架userid, username, password, role用户表role区分会员和管理员ordersid, user_id, total_amount, create_time, status订单主表记录一笔订单的总金额和状态order_detailid, order_id, furniture_id, num, price订单明细表记录每件家具的购买数量和成交单价下单时先操作orders和order_detail同时扣减furniture表的stock。我在做Spring Boot四层架构时习惯把订单和库存扣减放在一个事务里避免出现“订单生成了但库存没减”的数据不一致问题。MySQL引擎用InnoDB通过外键逻辑关联而不是物理外键否则删除家具时会触发外键约束报错。到这里技术栈和项目结构已经明确。接下来进入后端代码的骨架。3. 后端实现Spring Boot四层架构、MyBatis与接口安全3.1 pom.xml依赖与application.yml配置Spring Boot项目最核心的是依赖管理。这个家具网站用Maven构建pom.xml中至少要引入Web、MyBatis和MySQL驱动dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.0/version /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency这里把MyBatis集成包单独列出来是因为Spring Boot官方没有提供MyBatis的自动配置需要mybatis-spring-boot-starter专门引入。版本号在实际使用时以Maven仓库里能拉到的稳定版为准不建议直接复制某个版本号就完事最好确认能和Spring Boot版本兼容。对应配置文件application.ymlserver: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/furniture?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: root mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.furniture.entity configuration: map-underscore-to-camel-case: true参数说明characterEncodingutf8保证中文不乱码serverTimezone要设置成Asia/Shanghai否则MySQL 8.x的高版本驱动会报时区错误。map-underscore-to-camel-case开启后数据库字段create_time会自动映射到Java属性createTime写Mapper时少起很多别名。3.2 实体类、Mapper层与Service层怎么分层Spring Boot四层架构通常指Controller、Service、Mapper、Entity每一层职责单一。以家具商品Furniture为例实体类这样写public class Furniture { private Long id; private String name; private String category; private BigDecimal price; private String image; private Integer stock; private Integer status; // getter/setter 省略 }Mapper接口负责数据库访问Mapper public interface FurnitureMapper { ListFurniture findList(Param(category) String category); Furniture findById(Param(id) Long id); Integer reduceStock(Param(id) Long id, Param(num) Integer num); }对应的FurnitureMapper.xml里写SQL时注意使用#{}而不是${}update idreduceStock UPDATE furniture SET stock stock - #{num} WHERE id #{id} AND stock #{num} /updatestock #{num}条件能防止超卖库存不够时更新行数为0Service层判断这个返回值就知道下单失败。很多新手只写SET stock stock - #{num}并发高时会把库存扣成负数。Service层把Mapper调用组合成业务动作并加上事务控制Service public class OrderService { Resource private FurnitureMapper furnitureMapper; Transactional public boolean createOrder(Long furnitureId, Integer num) { int rows furnitureMapper.reduceStock(furnitureId, num); if (rows 0) { throw new RuntimeException(库存不足); } // 插入订单记录... return true; } }注意Transactional默认只对运行时异常回滚自定义业务异常最好直接抛出不要用try-catch包住整个方法后吞掉异常否则事务不会回滚库存照样扣减。3.3 Controller接口设计与登录权限验证Controller层不做业务计算只接收参数并调用ServiceRestController RequestMapping(/api/furniture) public class FurnitureController { Resource private FurnitureService furnitureService; GetMapping(/list) public Result list(RequestParam(required false) String category) { return Result.success(furnitureService.findList(category)); } PostMapping(/buy) public Result buy(RequestParam Long furnitureId, RequestParam Integer num, RequestParam Long userId) { return Result.success(furnitureService.createOrder(furnitureId, num, userId)); } }Result是统一返回体把code、message、data包好前端axios拦截器按code判断成功或失败。购买接口这里我特意用了userId参数演示真实项目里应该从登录状态中获取不要信任前端传来的userId否则用户可以随意冒充他人下单。登录权限验证常见做法是写一个HandlerInterceptor拦截非公开接口public class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (request.getSession().getAttribute(userId) null) { response.setStatus(401); return false; } return true; } }这个拦截器对session会话有效前后端分离下更多是用Token校验。项目源码里的update-password页面需要登录后才能访问所以修改密码接口一定要校验当前登录用户身份避免只凭前端传的userId就执行改密操作。3.4 销售统计查询与防SQL注入后台统计订单时常用SQL按日期聚合并计算销售额SELECT DATE_FORMAT(create_time, %Y-%m-%d) AS order_date, COUNT(*) AS order_count, SUM(total_amount) AS sales_amount FROM orders WHERE create_time #{beginTime} GROUP BY DATE_FORMAT(create_time, %Y-%m-%d) ORDER BY order_date DESC;在MyBatis的Mapper XML中#{beginTime}会被预编译成占位符不会发生SQL注入。如果用${beginTime}直接拼接用户传入2024-01-01 OR 11就会破坏查询条件。判断一个项目是否靠谱可以先看Mapper XML里有没有大量${}这是最直接的安全审计点。统计结果返回时用Map接收即可也可以建一个OrderStatDTO。日期聚合放在数据库做比在Java内存里循环汇总要高效也能减轻接口响应时间。这一章把后端骨架拆完了。前端Vue部分要对接的正是这些JSON接口接下来看Vue侧怎么处理路由和组件。4. 前端Vue路由参数、Axios封装与后台组件实战4.1 Vue项目结构与路由参数处理前端源码通常是一个独立的Vue CLI工程目录里包含src/views存放页面组件src/router写路由配置。这个家具网站的用户端和管理端共用一套路由但管理员页面需要权限控制。先看路由配置import Vue from vue import VueRouter from vue-router Vue.use(VueRouter) const routes [ { path: /, component: () import(/views/Home.vue) }, { path: /product/:id, name: product, component: () import(/views/ProductDetail.vue) }, { path: /cart, component: () import(/views/Cart.vue) }, { path: /admin, component: () import(/views/admin/AdminLayout.vue), meta: { requiresAuth: true } } ] const router new VueRouter({ mode: history, routes }) router.beforeEach((to, from, next) { if (to.meta.requiresAuth !localStorage.getItem(token)) { next(/login) } else { next() } })/product/:id是动态路由参数页面里用this.$route.params.id获取商品ID。如果跳转时用this.$router.push({ path: /product/ id })刷新页面参数不会丢。不要再使用this.$route.query.id那是queryString方式和动态路由混用会拿到undefined。Vue项目实战中经常因为路由参数没传对导致商品详情页空白最常见的是在点击事件里漏了this.$router.push或者把name和path混用。路由表里的name字段要唯一跳转时用{ name: product, params: { id } }更稳定。4.2 Axios封装和请求拦截后端接口都是/api开头前端需要在开发环境配置代理避免跨域。vue.config.js里这样写module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }Axios封装时统一处理token和错误码import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) request.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { router.push(/login) } return Promise.reject(error) } ) export default request这段代码把请求地址统一带上前缀后端Controller不需要在每个接口前写版本号。401时自动跳转登录页比在页面里逐个判断状态码省事。注意第一个回调返回response.data后续业务代码拿到的就直接是后端Result对象少包一层。开发时遇到跨域先看代理配置有没有生效。改了vue.config.js要重启npm run dev否则代理不会自动加载。另外还要确认后端接口确实在走/api如果后端Controller没有/api前缀代理target会直接把请求转发给http://localhost:8080/api/...导致404。4.3 首页与购物车模块实现首页列表请求调用request.get(/furniture/list)数据渲染到卡片。如果要在本地调试需要先启动后端否则页面会一直显示加载失败。Vue中列表渲染时给每个元素加唯一的key避免切换分类时组件复用导致图片闪烁template div classhome div classfurniture-card v-foritem in furnitureList :keyitem.id img :srcitem.image :altitem.name h3{{ item.name }}/h3 p classprice{{ item.price }}/p el-button clickaddToCart(item) typeprimary加入购物车/el-button /div /div /template购物车模块常见做法是使用Vuex把选中的家具存在全局状态。加购逻辑如下addToCart(item) { this.$store.commit(cart/add, { id: item.id, name: item.name, price: item.price, num: 1 }) }Vuex的cart模块用Map按商品ID聚合数量提交订单时把购物车数据带到后端生成订单。如果不想引入Vuex也可以用localStorage但刷新页面后要再处理一次商品信息多一次接口查询。这里建议用Vuex同步内存和localStorage既保证交互响应及时又能在刷新后恢复购物车。前端样式用scoped隔离页面里写style scoped .home { max-width: 1200px; margin: 0 auto; } /stylescoped属性会为当前组件生成唯一的data属性选择器避免样式污染后台管理页面。装修家具网站时分类筛选按钮和商品卡片都要用flex布局图片要固定高度否则不同尺寸的家具图会把卡片撑出参差不齐的边距。4.4 后台布局IndexAsideStatic、BreadCrumbs、IndexHeader后台管理端由三个基础组件组成IndexHeader顶部栏、IndexAsideStatic侧边栏、BreadCrumbs面包屑。源码包里三个文件都是.bak备份恢复时先复制成.vue再导入到AdminLayout中。侧边栏菜单用Element UI实现el-menu :default-active$route.path router el-menu-item index/admin/furniture家具管理/el-menu-item el-menu-item index/admin/order订单管理/el-menu-item el-menu-item index/admin/statistics销售统计/el-menu-item /el-menu:default-active$route.path让菜单高亮和当前路由绑定router属性开启菜单跳转。面包屑组件需要监听路由变化watch: { $route.matched(value) { this.breadcrumbs value.map((item, index) { return { title: item.meta.title, index } }) } }这里用$route.matched能拿到嵌套路由全部匹配记录避免自己拼字符串。后台页面常见的面试题是问“Vue中如何实现权限控制”答案往往分两部分前端通过路由守卫控制页面跳转后端通过拦截器校验接口权限两者缺一不可。4.5 Vue打包后布局异常的排查路径很多人在开发时一切正常npm run build后部署到服务器发现页面白屏或样式错乱。原因通常是两个。第一个是路由mode为history刷新子路径时后端没有处理返回404。第二个是静态资源路径写成绝对路径/js/chunk.js部署到子目录应用下就找不到。我的处理办法如果不需要美观URL把mode: history改成mode: hash刷新问题立刻消失。需要历史模式时后端Spring Boot要在资源处理上做一个forward到index.html。对于资源路径vue.config.js里设置publicPath: ./让打包后的CSS和JS使用相对路径。到这里前后端的功能代码都清楚了。剩下来的重点是如何使用源码里的批处理脚本把项目跑起来以及上线时的安全加固。5. 批处理脚本、静态资源映射与Actuator安全加固5.1 拆解三个bat脚本源码包里的1-install.bat、2-run.bat、3-build.bat是按顺序使用的。1-install.bat一般会执行npm install并调用mvnw.cmd安装后端依赖cd frontend call npm install cd .. call mvnw.cmd clean install2-run.bat一般启动后端call mvnw.cmd spring-boot:run3-build.bat负责前端打包和后端打包cd frontend call npm run build cd .. call mvnw.cmd clean packagemvnw.cmd是Maven Wrapper它会把指定版本的Maven下载到本地即使机器上没有配Maven环境变量也能运行。如果之前执行过mvn install本地仓库已经有依赖启动会快很多。三个脚本执行顺序不能乱先install装依赖再run启动调试最后build打包上线。5.2 把Vue打包结果交给Spring Boot托管前端打包后会生成dist目录需要把dist下的文件复制到src/main/resources/static里。可以手动复制也可以在3-build.bat中加一条复制命令xcopy dist\* ..\src\main\resources\static\ /e /y然后后端打包时这些静态文件会进入jar包浏览器访问http://localhost:8080/index.html就能看到前端页面。如果发现Vue路由在history模式下刷新报404就是在Spring Boot里缺少对未知路径的转发需要写一个Controller把非接口请求forward到index.html或者干脆使用hash模式。这个坑在Spring Boot Vue项目里非常典型建议部署前先验证一次刷新行为。5.3 Spring Boot Actuator未授权访问的快速修复如果pom.xml里引入了spring-boot-starter-actuator并且没做权限控制默认暴露health、info等端点还好对付但有人为了调试开启了所有端点把env、beans、heapdump直接暴露到了公网。检查方法curl http://localhost:8080/actuator/env如果返回一大段环境变量说明端点已经开放。修复时在application.yml中只保留必要的健康检查端点management: endpoints: web: exposure: include: health,info或者对/actuator路径增加Spring Security配置。很多毕业设计源码里都有actuator依赖上线前一定要做这一步检查防止数据库账号密码和服务器配置被读取。修改完配置后重启项目再次执行curl http://localhost:8080/actuator/env如果返回404或401说明修复生效。本文还有配套的精品资源点击获取