简介这份在线图书商城系统项目为计算机专业毕业设计和课程设计提供了一套可直接运行学习的完整方案也适合希望掌握全栈开发流程的入门者。压缩包约66.44MB内部包含以Java与Vue技术栈为主的前后端源码、数据库初始化脚本、配套毕业论文以及开题报告等类型的文件并附有部署调试说明基本覆盖项目从零搭建到运行的全过程当前已有399人浏览学习具有较高的参考热度。后端采用Spring Boot框架借助Spring Data JPA完成用户、图书、订单等数据表的增删改查通过Spring Security保障登录与权限安全前端使用Vue.js构建单页应用用Vuex管理共享状态用Vue Router切换页面整体架构清晰适合作为毕业设计模板。随附的说明文档对注册登录、图书检索、购物车管理、订单结算等核心模块进行了逐步解析数据库脚本则能帮助读者快速建表并填充基础数据缩短环境准备时间。对照论文和开题报告还能进一步理解课题背景、需求分析与总体设计思路便于答辩展示或二次扩展。1. 在线图书商城系统毕业设计最不会翻车的赛道毕业设计选题季总有学生拿着“基于SpringbootVue的在线图书商城系统”这个题目四处找方案。这个方向稳就稳在业务模型足够典型用户注册登录、图书分类展示、检索、购物车、订单、后台管理几乎覆盖Java后端与Vue前端的高频考点规模又比一般电商平台小刚好适配一个毕设周期的体量。你需要的不只是一段能运行的代码而是SQL脚本、前后端源码、开题报告、论文这些交付物彼此对得上、答辩时老师问不倒的一整套工程。这篇笔记按我搭过的类似项目的顺序把骨架、业务代码、部署参数、常见翻车点和交付材料怎么串成一条线逐一讲透。2. 前后端分离的骨架目录结构、环境选型与依赖清单2.1 为什么是Springboot Vue而不是其他组合图书商城这种带管理后台和C端商城的项目最自然的形态就是前后端分离。Spring Boot负责REST接口和事务Vue负责页面交互两者通过JSON通信。相比JSP写到底的老方案这种组合的好处是职责清楚后端不用关心页面渲染前端不用关心数据库事务。对毕业设计而言前后端分离还能在论文里多写一章系统架构答辩时能讲的东西也多一个维度。2.2 目录结构划分从后端到前端再到论文材料拿到源码和脚本时先看目录里是不是按标准Maven和Vue结构组织的。后端通常分四个层controller接收请求、service处理业务逻辑、mapper操作数据库、entity存放实体类。前端则为Vue标准工程结构页面组件放在src/views下网络请求放在src/api下路由配置在src/router下。其余交付材料建议各自独立成文件夹。目录内容责任backendSpring Boot后端源码接口、事务、权限、文件上传frontendVue前端源码页面、路由、状态管理、打包产物databasesql脚本与初始化数据建库建表、测试数据、存储过程docs论文与开题报告需求分析、数据库设计、接口说明2.3 环境依赖清单版本不匹配是第一个隐形的坑常见搭配是Spring Boot 2.7.x配JDK 1.8或者Spring Boot 3.x配JDK 17。两者在接口写法上没有本质差异但若源码用的2.x而你电脑装了JDK 17容易遇到兼容性问题。前端Vue部分是2.x还是3.x决定了依赖安装命令Vue 3需要Node 18以上Vue 2配Node 16更稳。数据库建议MySQL 8.0因为大量在线项目的SQL脚本是按8.0的语法写的用5.7执行容易报语法错误。2.4 数据库初始化脚本的分工治理一份好的SQL脚本通常包含建库语句、建表语句、初始数据和可选存储过程。有些项目把建库和建表放在同一个文件里这也常见。但要注意字符集统一写成utf8mb4不然插入中文时会报“Incorrect string value”错误。建表顺序也有玄学先建父表再建子表因为带外键的表依赖引用表已存在。若有存储过程或触发器应放在最后执行。3. 核心功能逐个落代码用户、图书、购物车与订单的实现3.1 用户模块JWT登录与密码加密用户模块里最容易出彩的设计是使用JWT做无状态登录。用户输入账号密码后后端校验数据库中的记录生成token返回给前端。前端把token存到localStorage之后每个请求在请求头带上Authorization字段后端通过拦截器验证。密码不允许明文存储至少用BCrypt加密。PostMapping(/login) public Result login(RequestBody LoginDTO loginDTO) { User user userService.findByUsername(loginDTO.getUsername()); if (user null || !BCrypt.checkpw(loginDTO.getPassword(), user.getPassword())) { return Result.error(用户名或密码错误); } String token JwtUtil.generateToken(user.getId(), user.getRole()); return Result.success(token); }生成JWT时一般会附带用户ID、角色和过期时间。图书商城的角色通常有admin和user两种管理员登录后能看到后台管理入口普通用户只能看到商城界面。前端拿到token后可以解析其中的角色值用于控制菜单显隐。3.2 图书分类与检索MyBatis动态SQL图书模块的痛点在于分类层级和搜索条件组合。一级分类可能是小说、科技、教材二级分类再细分。检索时用户可能同时传入关键字、分类ID、价格区间这时用MyBatis的动态SQL比固定SQL更易维护。动态SQL拼接有两种方式一是注解中用script标签二是XML中写if标签。主流做法还是XML改起来不用重编译。select idsearchBooks resultTypeBookVO SELECT * FROM book WHERE status 1 if testkeyword ! null and keyword ! AND (title LIKE CONCAT(%, #{keyword}, %) OR author LIKE CONCAT(%, #{keyword}, %)) /if if testcategoryId ! null AND category_id #{categoryId} /if if testminPrice ! null AND price gt; #{minPrice} /if if testmaxPrice ! null AND price lt; #{maxPrice} /if ORDER BY sales_count DESC /select这段SQL里status字段做逻辑删除下架图书不会出现在商城列表里。价格区间用了大于和小于的转义写法是因为XML中无法直接写大于号。排序用销量字段倒序这是商城系统常见的“按热度排序”策略。3.3 购物车与订单事务边界的控制购物车表和订单表的主外键关系比较直接购物车项指向用户ID和图书ID订单项指向订单ID和图书ID。下单过程涉及多张表的更新生成订单主表记录、插入订单明细、清空购物车、扣减库存。只要其中任意一步失败整个操作都必须回滚否则会出现“钱付了库存没减”的数据不一致。Transactional(rollbackFor Exception.class) public Order createOrder(Long userId) { // 1. 查出用户购物车中已勾选的项目列表 ListCartItem cartItems cartMapper.findCheckedItems(userId); // 2. 生成订单主记录 Order order new Order(); order.setUserId(userId); order.setOrderNo(orderNoGenerator.generate()); orderMapper.insert(order); // 3. 逐条插入订单明细并扣减库存 for (CartItem item : cartItems) { OrderItem orderItem new OrderItem(); orderItem.setOrderId(order.getId()); orderItem.setBookId(item.getBookId()); orderItem.setPrice(item.getPrice()); orderItem.setQuantity(item.getQuantity()); orderItemMapper.insert(orderItem); int rows bookMapper.deductStock(item.getBookId(), item.getQuantity()); if (rows 0) { throw new RuntimeException(库存不足 bookMapper.selectById(item.getBookId()).getTitle()); } } // 4. 清空用户的购物车 cartMapper.deleteCheckedItems(userId); return order; }Transactional注解是后端毕设里最容易拿分的设计点。写论文时可以把这段逻辑画成时序图讲清楚“先检查库存再扣减”和“异常时全部回滚”的取舍。实际踩坑中若没有事务注解用户连续点击两次“提交订单”会生成两笔相同订单。3.4 后台管理界面Vue动态路由与权限菜单后台管理界面用Vue Router做权限控制。前端根据用户角色过滤路由表管理员可见“图书管理、订单管理、用户管理”模块普通用户只显示“我的订单、个人信息”。这份路由配置写在静态数组中登录后从后端接口拉取用户角色再过滤出可访问路由用addRoute注册到当前Router实例。const adminRoutes [ { path: /admin/books, name: BookManage, component: () import(/views/admin/BookManage.vue), meta: { title: 图书管理 } }, { path: /admin/orders, name: OrderManage, component: () import(/views/admin/OrderManage.vue), meta: { title: 订单管理 } } ]; const userRoutes [ { path: /user/orders, name: MyOrders, component: () import(/views/user/MyOrders.vue), meta: { title: 我的订单 } } ]; function buildRoutes(role) { return role ADMIN ? [...adminRoutes, ...userRoutes] : userRoutes; }写完这个路由文件后记得在导航守卫里加一层校验路由的meta.requiresAuth为true时检查localStorage是否有token否则跳转到登录页。没有这层判断用户直接在浏览器地址栏输入管理后台路径就能绕过界面这种事在毕设答辩现场被老师操作出来是最影响印象分的。4. 用SQL脚本与部署配置跑通整套系统必改参数和打包步骤4.1 执行SQL脚本的正确命令与常见误区拿到sql脚本后大部分人会打开Navicat或DataGrip直接运行但用命令行执行反而更接近源码作者的环境状态。Windows和Linux的MySQL命令行都支持下面这种写法。注意顺序是先建库再切库最后执行脚本内容。mysql -u root -p -e CREATE DATABASE IF NOT EXISTS bookstore DEFAULT CHARACTER SET utf8mb4; mysql -u root -p bookstore bookstore.sql执行完用SHOW TABLES验证一下若是零张表说明脚本里可能带了USE语句却没有切换到目标库。还有一类问题脚本里的表名和JPA或MyBatis映射的实体类名大小写不一致Linux下MySQL对表名大小写敏感Windows不敏感这会导致部署到服务器后接口报找不到表。经验做法是脚本内全部使用小写表名。4.2 application.yml端口、数据库连接与上传路径Spring Boot的配置集中在application.yml文件。拿到的源码若默认端口是8080而本机已有服务占用需要修改server.port。另外最常见的改动项是数据库账号密码很多项目包默认填的是root/123456实际环境中应该改成自己的密码。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/bookstore?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver file: upload-dir: D:/upload/ mybatis: mapper-locations: classpath:mapping/*.xml configuration: map-underscore-to-camel-case: true配置里有两处值得说明。第一是serverTimezoneAsia/Shanghai若不指定时区MySQL 8.0连接时会报时间类型转换错误。第二是file.upload-dir为自定义上传目录前端封面上传的图片会落到这里静态资源映射接口把目录映射到URL路径。map-underscore-to-camel-case设置为true后数据库字段的user_name能自动映射到Java属性userName这是MyBatis的常用配置。4.3 Vue前端接口代理与打包配置前端开发环境下访问后端接口需要通过代理解决跨域。Vue CLI项目的配置在vue.config.jsVite项目在vite.config.js。这个代理的意义在于开发时请求地址写相对路径/api实际会被转发到localhost:8080前后端就能联调。但在生产部署阶段需把这个代理关掉改为让后端自己托管前端页面。const { defineConfig } require(vue/cli-service); module.exports defineConfig({ devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } });这里的pathRewrite是重点把/api前缀去掉再转发到后端。若后端Controller的RequestMapping也带/api前缀那就不要执行pathRewrite。前后端联调时报404八成就是这里多改写或少改写了前缀。4.4 springboot打包与把Vue打包产物合进后端常见的做法是把Vue的dist目录复制到Spring Boot的src/main/resources/static下重新打包后端为一个可执行JAR。这样部署时只需一个Java进程端口也只有一个答辩时演示起来最省心。最终产物是一个JAR包加上一份数据库脚本。# 前端构建 npm install npm run build # 将构建产物复制到后端静态目录Windows用 copyLinux用 cp cp -r dist/* ../backend/src/main/resources/static/ # 后端打包 cd ../backend mvn clean package -DskipTests java -jar target/bookstore-0.0.1-SNAPSHOT.jar需要注意的是Spring Boot默认首页是index.html但Vue打包后的静态资源路径若配置了publicPath相对路径才能正常加载。若部署在根路径publicPath保持默认即可若部署在子目录还需把router的base路径一并修改。前后端一起打包后访问localhost:8080直接看到商城首页接口无需再配跨域。5. 常见问题排查从数据库连接到前端展示的六类翻车现场5.1 现象数据库连接失败启动时报Access denied启动Spring Boot时控制台出现“Access denied for user rootlocalhost”。原因通常是application.yml里的密码与本地MySQL实际密码不一致。解决先执行“mysql -u root -p”手动登录看能否进入MySQL再逐字核对配置文件里的username和password。还有一种情况是使用MySQL 8.0以上版本驱动类名写了“com.mysql.jdbc.Driver”这是旧版写法应改为“com.mysql.cj.jdbc.Driver”。5.2 现象前端请求接口一直500但Swagger测试正常Vue页面调用接口失败而用Postman直接请求后端接口返回200。原因大概率是后端CORS跨域没有放开。前后端分离架构下浏览器的同源策略拦截了响应数据。解决在后端写一个全局CORS过滤器或者在Controller上加CrossOrigin注解。最保险的做法是全局配置类实现WebMvcConfigurer统一允许所有来源和请求方法。Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }这段配置写在任意一个配置类中即可。若前端把打包产物合入后端同端口托管则无需设置因为同源请求不会触发跨域拦截。5.3 现象端口被占用后端启动报“Port 8080 was already in use”Windows下执行“netstat -ano | findstr 8080”找到占用进程的PID然后“taskkill /F /PID 数字”强制结束。Linux下的对应操作是“lsof -i:8080”和“kill -9 PID”。秋招季很多同学电脑上开着各种中间件用8080端口的最多。不想每次杀进程就顺手把端口改成8081或9090但记得前端代理配置里的target也要同步改。5.4 现象Vue编译报错找不到tsconfig新拉下来的前端项目执行npm install后启动时提示“Failed to load tsconfig vue/tsconfig/tsconfig.web.json”。原因是package.json中依赖了vue/tsconfig但本地的tsconfig.json配置项里仍引用了它而node_modules中该包未正确安装。解决重新执行npm install若仍无效检查npm版本和Node版本是否满足依赖要求。Vue 3项目使用旧版npm会发生依赖解析错乱升级npm到最新版或换yarn安装。5.5 现象登录后页面刷新就回到登录页登录成功跳转商城首页按F5刷新后又跳到登录页。原因刷新时前端状态丢失但token明明存在localStorage里。多数情况下是路由守卫的检查逻辑在刷新时拿不到用户信息。解决在守卫中判断localStorage.getItem(token)存在时直接放行再把用户信息写进Vuex或Pinia。这里有个先后顺序的坑必须先读本地token再判断状态不能先访问store。5.6 现象数据库中文乱码表中数据的中文全部显示成问号或乱码。原因建表时字符集没指定utf8mb4或连接URL缺少characterEncoding参数。解决修改数据库连接URL加上characterEncodingutf8并把表字符集转为utf8mb4。SQL脚本中最好在建表语句里写明“DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_general_ci”这样换环境执行也不容易乱码。6. 把源码、SQL、论文、开题报告串成一条线答辩前一天要做的三件事第一件事是让论文里的ER图与数据库脚本完全一致。许多人的论文是后补的数据库表可能有十几张但论文里只画了七八张老师一问“订单表有哪些字段”对不上就露馅。建议把ER图重新生成一遍字段类型和长度按脚本里的建表语句标注清楚。第二件事是准备好演示环境。答辩现场最稳的是本地运行提前把数据库服务启动、后端运行、前端打包运行在同一端口演示时不切换窗口、不打命令。若答辩环境没网络还需把依赖包Maven仓库和node_modules提前准备好现场不要执行在线安装。第三件事是准备几个会被追问的接口日志。下单时故意操作库存不足展示后端返回的错误信息和事务回滚结果。演示这个场景比背出事务原理更有说服力因为它说明事务不只是写在代码注释里而是真的在工作中起作用。我自己的教训是第一次做这类商城项目时把SQL脚本放在最后写结果表名和实体类字段对不上光改映射就花了两天。后来调整为先定好数据库脚本再写后端代码最后配前端页面的顺序反而省下了反复返工的时间。这个项目的核心价值不在于代码规模有多大而在于每个交付物之间能不能互相印证希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/7 3:09:45 · 阅读 1.2k SpringBoot+Vue在线图书商城系统：从环境搭建到部署全流程
简介这份在线图书商城系统项目为计算机专业毕业设计和课程设计提供了一套可直接运行学习的完整方案也适合希望掌握全栈开发流程的入门者。压缩包约66.44MB内部包含以Java与Vue技术栈为主的前后端源码、数据库初始化脚本、配套毕业论文以及开题报告等类型的文件并附有部署调试说明基本覆盖项目从零搭建到运行的全过程当前已有399人浏览学习具有较高的参考热度。后端采用Spring Boot框架借助Spring Data JPA完成用户、图书、订单等数据表的增删改查通过Spring Security保障登录与权限安全前端使用Vue.js构建单页应用用Vuex管理共享状态用Vue Router切换页面整体架构清晰适合作为毕业设计模板。随附的说明文档对注册登录、图书检索、购物车管理、订单结算等核心模块进行了逐步解析数据库脚本则能帮助读者快速建表并填充基础数据缩短环境准备时间。对照论文和开题报告还能进一步理解课题背景、需求分析与总体设计思路便于答辩展示或二次扩展。1. 在线图书商城系统毕业设计最不会翻车的赛道毕业设计选题季总有学生拿着“基于SpringbootVue的在线图书商城系统”这个题目四处找方案。这个方向稳就稳在业务模型足够典型用户注册登录、图书分类展示、检索、购物车、订单、后台管理几乎覆盖Java后端与Vue前端的高频考点规模又比一般电商平台小刚好适配一个毕设周期的体量。你需要的不只是一段能运行的代码而是SQL脚本、前后端源码、开题报告、论文这些交付物彼此对得上、答辩时老师问不倒的一整套工程。这篇笔记按我搭过的类似项目的顺序把骨架、业务代码、部署参数、常见翻车点和交付材料怎么串成一条线逐一讲透。2. 前后端分离的骨架目录结构、环境选型与依赖清单2.1 为什么是Springboot Vue而不是其他组合图书商城这种带管理后台和C端商城的项目最自然的形态就是前后端分离。Spring Boot负责REST接口和事务Vue负责页面交互两者通过JSON通信。相比JSP写到底的老方案这种组合的好处是职责清楚后端不用关心页面渲染前端不用关心数据库事务。对毕业设计而言前后端分离还能在论文里多写一章系统架构答辩时能讲的东西也多一个维度。2.2 目录结构划分从后端到前端再到论文材料拿到源码和脚本时先看目录里是不是按标准Maven和Vue结构组织的。后端通常分四个层controller接收请求、service处理业务逻辑、mapper操作数据库、entity存放实体类。前端则为Vue标准工程结构页面组件放在src/views下网络请求放在src/api下路由配置在src/router下。其余交付材料建议各自独立成文件夹。目录内容责任backendSpring Boot后端源码接口、事务、权限、文件上传frontendVue前端源码页面、路由、状态管理、打包产物databasesql脚本与初始化数据建库建表、测试数据、存储过程docs论文与开题报告需求分析、数据库设计、接口说明2.3 环境依赖清单版本不匹配是第一个隐形的坑常见搭配是Spring Boot 2.7.x配JDK 1.8或者Spring Boot 3.x配JDK 17。两者在接口写法上没有本质差异但若源码用的2.x而你电脑装了JDK 17容易遇到兼容性问题。前端Vue部分是2.x还是3.x决定了依赖安装命令Vue 3需要Node 18以上Vue 2配Node 16更稳。数据库建议MySQL 8.0因为大量在线项目的SQL脚本是按8.0的语法写的用5.7执行容易报语法错误。2.4 数据库初始化脚本的分工治理一份好的SQL脚本通常包含建库语句、建表语句、初始数据和可选存储过程。有些项目把建库和建表放在同一个文件里这也常见。但要注意字符集统一写成utf8mb4不然插入中文时会报“Incorrect string value”错误。建表顺序也有玄学先建父表再建子表因为带外键的表依赖引用表已存在。若有存储过程或触发器应放在最后执行。3. 核心功能逐个落代码用户、图书、购物车与订单的实现3.1 用户模块JWT登录与密码加密用户模块里最容易出彩的设计是使用JWT做无状态登录。用户输入账号密码后后端校验数据库中的记录生成token返回给前端。前端把token存到localStorage之后每个请求在请求头带上Authorization字段后端通过拦截器验证。密码不允许明文存储至少用BCrypt加密。PostMapping(/login) public Result login(RequestBody LoginDTO loginDTO) { User user userService.findByUsername(loginDTO.getUsername()); if (user null || !BCrypt.checkpw(loginDTO.getPassword(), user.getPassword())) { return Result.error(用户名或密码错误); } String token JwtUtil.generateToken(user.getId(), user.getRole()); return Result.success(token); }生成JWT时一般会附带用户ID、角色和过期时间。图书商城的角色通常有admin和user两种管理员登录后能看到后台管理入口普通用户只能看到商城界面。前端拿到token后可以解析其中的角色值用于控制菜单显隐。3.2 图书分类与检索MyBatis动态SQL图书模块的痛点在于分类层级和搜索条件组合。一级分类可能是小说、科技、教材二级分类再细分。检索时用户可能同时传入关键字、分类ID、价格区间这时用MyBatis的动态SQL比固定SQL更易维护。动态SQL拼接有两种方式一是注解中用script标签二是XML中写if标签。主流做法还是XML改起来不用重编译。select idsearchBooks resultTypeBookVO SELECT * FROM book WHERE status 1 if testkeyword ! null and keyword ! AND (title LIKE CONCAT(%, #{keyword}, %) OR author LIKE CONCAT(%, #{keyword}, %)) /if if testcategoryId ! null AND category_id #{categoryId} /if if testminPrice ! null AND price gt; #{minPrice} /if if testmaxPrice ! null AND price lt; #{maxPrice} /if ORDER BY sales_count DESC /select这段SQL里status字段做逻辑删除下架图书不会出现在商城列表里。价格区间用了大于和小于的转义写法是因为XML中无法直接写大于号。排序用销量字段倒序这是商城系统常见的“按热度排序”策略。3.3 购物车与订单事务边界的控制购物车表和订单表的主外键关系比较直接购物车项指向用户ID和图书ID订单项指向订单ID和图书ID。下单过程涉及多张表的更新生成订单主表记录、插入订单明细、清空购物车、扣减库存。只要其中任意一步失败整个操作都必须回滚否则会出现“钱付了库存没减”的数据不一致。Transactional(rollbackFor Exception.class) public Order createOrder(Long userId) { // 1. 查出用户购物车中已勾选的项目列表 ListCartItem cartItems cartMapper.findCheckedItems(userId); // 2. 生成订单主记录 Order order new Order(); order.setUserId(userId); order.setOrderNo(orderNoGenerator.generate()); orderMapper.insert(order); // 3. 逐条插入订单明细并扣减库存 for (CartItem item : cartItems) { OrderItem orderItem new OrderItem(); orderItem.setOrderId(order.getId()); orderItem.setBookId(item.getBookId()); orderItem.setPrice(item.getPrice()); orderItem.setQuantity(item.getQuantity()); orderItemMapper.insert(orderItem); int rows bookMapper.deductStock(item.getBookId(), item.getQuantity()); if (rows 0) { throw new RuntimeException(库存不足 bookMapper.selectById(item.getBookId()).getTitle()); } } // 4. 清空用户的购物车 cartMapper.deleteCheckedItems(userId); return order; }Transactional注解是后端毕设里最容易拿分的设计点。写论文时可以把这段逻辑画成时序图讲清楚“先检查库存再扣减”和“异常时全部回滚”的取舍。实际踩坑中若没有事务注解用户连续点击两次“提交订单”会生成两笔相同订单。3.4 后台管理界面Vue动态路由与权限菜单后台管理界面用Vue Router做权限控制。前端根据用户角色过滤路由表管理员可见“图书管理、订单管理、用户管理”模块普通用户只显示“我的订单、个人信息”。这份路由配置写在静态数组中登录后从后端接口拉取用户角色再过滤出可访问路由用addRoute注册到当前Router实例。const adminRoutes [ { path: /admin/books, name: BookManage, component: () import(/views/admin/BookManage.vue), meta: { title: 图书管理 } }, { path: /admin/orders, name: OrderManage, component: () import(/views/admin/OrderManage.vue), meta: { title: 订单管理 } } ]; const userRoutes [ { path: /user/orders, name: MyOrders, component: () import(/views/user/MyOrders.vue), meta: { title: 我的订单 } } ]; function buildRoutes(role) { return role ADMIN ? [...adminRoutes, ...userRoutes] : userRoutes; }写完这个路由文件后记得在导航守卫里加一层校验路由的meta.requiresAuth为true时检查localStorage是否有token否则跳转到登录页。没有这层判断用户直接在浏览器地址栏输入管理后台路径就能绕过界面这种事在毕设答辩现场被老师操作出来是最影响印象分的。4. 用SQL脚本与部署配置跑通整套系统必改参数和打包步骤4.1 执行SQL脚本的正确命令与常见误区拿到sql脚本后大部分人会打开Navicat或DataGrip直接运行但用命令行执行反而更接近源码作者的环境状态。Windows和Linux的MySQL命令行都支持下面这种写法。注意顺序是先建库再切库最后执行脚本内容。mysql -u root -p -e CREATE DATABASE IF NOT EXISTS bookstore DEFAULT CHARACTER SET utf8mb4; mysql -u root -p bookstore bookstore.sql执行完用SHOW TABLES验证一下若是零张表说明脚本里可能带了USE语句却没有切换到目标库。还有一类问题脚本里的表名和JPA或MyBatis映射的实体类名大小写不一致Linux下MySQL对表名大小写敏感Windows不敏感这会导致部署到服务器后接口报找不到表。经验做法是脚本内全部使用小写表名。4.2 application.yml端口、数据库连接与上传路径Spring Boot的配置集中在application.yml文件。拿到的源码若默认端口是8080而本机已有服务占用需要修改server.port。另外最常见的改动项是数据库账号密码很多项目包默认填的是root/123456实际环境中应该改成自己的密码。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/bookstore?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver file: upload-dir: D:/upload/ mybatis: mapper-locations: classpath:mapping/*.xml configuration: map-underscore-to-camel-case: true配置里有两处值得说明。第一是serverTimezoneAsia/Shanghai若不指定时区MySQL 8.0连接时会报时间类型转换错误。第二是file.upload-dir为自定义上传目录前端封面上传的图片会落到这里静态资源映射接口把目录映射到URL路径。map-underscore-to-camel-case设置为true后数据库字段的user_name能自动映射到Java属性userName这是MyBatis的常用配置。4.3 Vue前端接口代理与打包配置前端开发环境下访问后端接口需要通过代理解决跨域。Vue CLI项目的配置在vue.config.jsVite项目在vite.config.js。这个代理的意义在于开发时请求地址写相对路径/api实际会被转发到localhost:8080前后端就能联调。但在生产部署阶段需把这个代理关掉改为让后端自己托管前端页面。const { defineConfig } require(vue/cli-service); module.exports defineConfig({ devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } });这里的pathRewrite是重点把/api前缀去掉再转发到后端。若后端Controller的RequestMapping也带/api前缀那就不要执行pathRewrite。前后端联调时报404八成就是这里多改写或少改写了前缀。4.4 springboot打包与把Vue打包产物合进后端常见的做法是把Vue的dist目录复制到Spring Boot的src/main/resources/static下重新打包后端为一个可执行JAR。这样部署时只需一个Java进程端口也只有一个答辩时演示起来最省心。最终产物是一个JAR包加上一份数据库脚本。# 前端构建 npm install npm run build # 将构建产物复制到后端静态目录Windows用 copyLinux用 cp cp -r dist/* ../backend/src/main/resources/static/ # 后端打包 cd ../backend mvn clean package -DskipTests java -jar target/bookstore-0.0.1-SNAPSHOT.jar需要注意的是Spring Boot默认首页是index.html但Vue打包后的静态资源路径若配置了publicPath相对路径才能正常加载。若部署在根路径publicPath保持默认即可若部署在子目录还需把router的base路径一并修改。前后端一起打包后访问localhost:8080直接看到商城首页接口无需再配跨域。5. 常见问题排查从数据库连接到前端展示的六类翻车现场5.1 现象数据库连接失败启动时报Access denied启动Spring Boot时控制台出现“Access denied for user rootlocalhost”。原因通常是application.yml里的密码与本地MySQL实际密码不一致。解决先执行“mysql -u root -p”手动登录看能否进入MySQL再逐字核对配置文件里的username和password。还有一种情况是使用MySQL 8.0以上版本驱动类名写了“com.mysql.jdbc.Driver”这是旧版写法应改为“com.mysql.cj.jdbc.Driver”。5.2 现象前端请求接口一直500但Swagger测试正常Vue页面调用接口失败而用Postman直接请求后端接口返回200。原因大概率是后端CORS跨域没有放开。前后端分离架构下浏览器的同源策略拦截了响应数据。解决在后端写一个全局CORS过滤器或者在Controller上加CrossOrigin注解。最保险的做法是全局配置类实现WebMvcConfigurer统一允许所有来源和请求方法。Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }这段配置写在任意一个配置类中即可。若前端把打包产物合入后端同端口托管则无需设置因为同源请求不会触发跨域拦截。5.3 现象端口被占用后端启动报“Port 8080 was already in use”Windows下执行“netstat -ano | findstr 8080”找到占用进程的PID然后“taskkill /F /PID 数字”强制结束。Linux下的对应操作是“lsof -i:8080”和“kill -9 PID”。秋招季很多同学电脑上开着各种中间件用8080端口的最多。不想每次杀进程就顺手把端口改成8081或9090但记得前端代理配置里的target也要同步改。5.4 现象Vue编译报错找不到tsconfig新拉下来的前端项目执行npm install后启动时提示“Failed to load tsconfig vue/tsconfig/tsconfig.web.json”。原因是package.json中依赖了vue/tsconfig但本地的tsconfig.json配置项里仍引用了它而node_modules中该包未正确安装。解决重新执行npm install若仍无效检查npm版本和Node版本是否满足依赖要求。Vue 3项目使用旧版npm会发生依赖解析错乱升级npm到最新版或换yarn安装。5.5 现象登录后页面刷新就回到登录页登录成功跳转商城首页按F5刷新后又跳到登录页。原因刷新时前端状态丢失但token明明存在localStorage里。多数情况下是路由守卫的检查逻辑在刷新时拿不到用户信息。解决在守卫中判断localStorage.getItem(token)存在时直接放行再把用户信息写进Vuex或Pinia。这里有个先后顺序的坑必须先读本地token再判断状态不能先访问store。5.6 现象数据库中文乱码表中数据的中文全部显示成问号或乱码。原因建表时字符集没指定utf8mb4或连接URL缺少characterEncoding参数。解决修改数据库连接URL加上characterEncodingutf8并把表字符集转为utf8mb4。SQL脚本中最好在建表语句里写明“DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_general_ci”这样换环境执行也不容易乱码。6. 把源码、SQL、论文、开题报告串成一条线答辩前一天要做的三件事第一件事是让论文里的ER图与数据库脚本完全一致。许多人的论文是后补的数据库表可能有十几张但论文里只画了七八张老师一问“订单表有哪些字段”对不上就露馅。建议把ER图重新生成一遍字段类型和长度按脚本里的建表语句标注清楚。第二件事是准备好演示环境。答辩现场最稳的是本地运行提前把数据库服务启动、后端运行、前端打包运行在同一端口演示时不切换窗口、不打命令。若答辩环境没网络还需把依赖包Maven仓库和node_modules提前准备好现场不要执行在线安装。第三件事是准备几个会被追问的接口日志。下单时故意操作库存不足展示后端返回的错误信息和事务回滚结果。演示这个场景比背出事务原理更有说服力因为它说明事务不只是写在代码注释里而是真的在工作中起作用。我自己的教训是第一次做这类商城项目时把SQL脚本放在最后写结果表名和实体类字段对不上光改映射就花了两天。后来调整为先定好数据库脚本再写后端代码最后配前端页面的顺序反而省下了反复返工的时间。这个项目的核心价值不在于代码规模有多大而在于每个交付物之间能不能互相印证希望帮到你。本文还有配套的精品资源点击获取