这类项目最值得先看的不是功能列表而是能不能在普通开发环境下快速跑起来以及代码结构是否清晰到能让一个刚学完Java Web和Vue基础的学生在一小时内理解并部署成功。这个“超市管理系统”的标题结合SpringBoot和Vue2核心解决的就是一个典型的“课程设计/毕业设计”场景你需要一个功能完整、技术栈主流、有前后端分离架构、并且带数据库和文档的完整项目来交差或学习。它真正的价值在于提供了一个“可运行”的模板。你不用从零开始设计数据库、写接口、配路由而是直接拿到一个已经打通了前后端、实现了增删改查的现成项目。对于期末大作业、课设或者毕设初期这能帮你快速搭建起项目骨架把精力从“如何让项目跑起来”转移到“如何理解代码并修改成自己的业务”上。下面我会按照一个真实的、从零开始的部署和代码阅读流程带你走一遍。重点不是复现每一步命令而是告诉你每个环节最容易卡住的地方在哪以及如何判断自己是否走对了。1. 先确认你的环境别在第一步就卡住在下载任何源码之前先花五分钟检查你的本地环境。很多“跑不起来”的问题根源都在环境不匹配。1.1 后端环境Java和Maven是基础后端基于SpringBoot所以Java和Maven是必须的。我建议你先在命令行里确认版本java -version # 确认版本建议使用JDK 8或11这是SpringBoot 2.x最兼容的版本。如果显示17或21可能需要调整项目配置。 mvn -v # 确认Maven已安装且版本在3.6以上。关键点如果项目是用SpringBoot 2.7.x或更早版本构建的而你本地只有JDK 17大概率会在编译时遇到问题。更稳妥的做法是直接使用项目源码里自带的pom.xml文件用IDE如IntelliJ IDEA打开让IDE自动识别并下载对应的JDK版本。这是避免环境冲突最省事的方法。1.2 前端环境Node.js和npm版本要匹配前端是Vue2需要Node.js环境。同样先检查node -v # Vue2对Node版本要求相对宽松但建议使用12.x - 16.x之间的稳定版本。避免使用最新的Node 20可能遇到一些旧包兼容性问题。 npm -v # 能正常显示版本号即可。常见坑点如果你之前做过Vue3项目全局可能安装了vue-cli5.x对应Vue3。而Vue2项目通常使用vue-cli4.x。直接运行npm install可能会报错。处理方法是进入项目前端目录后先看是否有package-lock.json或yarn.lock优先使用npm ci如果存在package-lock.json安装依赖它能保证依赖版本与锁文件一致。1.3 数据库环境MySQL的准备项目大概率使用MySQL。你需要本地安装MySQL5.7或8.0版本均可。启动MySQL服务。创建一个新的数据库例如supermarket_db。记住数据库的连接信息主机(localhost)、端口(3306)、数据库名、用户名、密码。重要步骤拿到源码后第一时间不是运行而是去找后端的配置文件通常是src/main/resources/application.yml或application.properties。你需要把里面的数据库连接配置改成你本地刚创建的信息。这是前后端能否连上数据库的关键。# 示例application.yml 中的配置片段 spring: datasource: url: jdbc:mysql://localhost:3306/supermarket_db?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver2. 项目导入与启动遵循“先后端再前端”的顺序不要前后端同时启动。按照固定顺序能更清晰地看到日志定位问题。2.1 后端SpringBoot项目导入与启动使用IDE导入强烈建议使用IntelliJ IDEA。选择“Open”或“Import Project”找到项目根目录包含pom.xml的文件夹。IDEA会自动识别为Maven项目并开始下载依赖。等待依赖下载第一次导入时Maven会下载所有jar包。观察IDEA右下角的进度条确保网络通畅。这一步可能会耗时几分钟。配置数据库如前所述修改application.yml中的数据库连接信息。执行SQL脚本在项目资源文件夹src/main/resources或项目文档中找到数据库SQL脚本如schema.sql或supermarket.sql。在你的MySQL客户端如Navicat、MySQL Workbench或命令行中连接到刚创建的数据库然后执行这个SQL文件。这会创建所有需要的表结构和初始数据。启动后端应用找到主启动类通常命名为XxxApplication.java例如SupermarketApplication.java右键点击Run。观察控制台日志。成功标志看到类似“Started Application in X.XXX seconds (JVM running for X.XXX)”的日志并且没有红色错误信息。关键日志注意Tomcat启动端口默认8080以及是否有“DataSource initialized”之类的数据库连接成功信息。2.2 前端Vue2项目启动定位前端目录在项目根目录下找到一个类似frontend、vue-frontend或web的文件夹。这就是Vue2前端源码。安装依赖在终端中进入该前端目录运行npm install或cnpm install如果你使用了淘宝镜像。注意如果网络不好导致安装缓慢或失败可以尝试修改npm源npm config set registry https://registry.npmmirror.com配置后端接口地址前端需要知道后端API的地址。找到前端项目中的配置文件通常是src/utils/request.js或vue.config.js或者根目录下的.env.development文件。将里面指向后端服务的地址例如baseURL改为http://localhost:8080与后端启动端口一致。// 例如在 vue.config.js 中配置代理 module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, // 你的后端地址 changeOrigin: true, pathRewrite: { ^/api: } } } } }启动前端开发服务器在前端目录下运行npm run serve。成功标志终端会显示“App running at: - Local: http://localhost:8081”。记住这个前端访问地址通常是8080以外的端口如8081。访问系统打开浏览器访问上一步得到的前端地址如http://localhost:8081。你应该能看到登录界面。3. 核心功能与代码走读理解比复制更重要项目跑起来只是第一步。作为学习或交作业你必须理解代码是如何组织的。这个“超市管理系统”通常包含以下几个核心模块你可以按这个顺序去源码里找对应的部分3.1 用户登录与权限控制前端找到src/views/login.vue组件。看它如何收集用户名密码调用哪个API通常在src/api/user.js里如何处理登录成功后的跳转和Token存储localStorage或Vuex。后端找到控制器UserController.java或AuthController.java看登录接口/login如何接收参数、调用Service验证、生成Token如果用了JWT并返回。同时找到安全配置类可能叫SecurityConfig.java看它如何配置哪些接口需要认证哪些可以匿名访问。验证方式尝试用SQL脚本里提供的默认账号如admin/123456登录。登录后观察浏览器开发者工具F12的“网络(Network)”标签查看登录请求和返回的Token。3.2 商品信息管理增删改查这是最核心的CRUD操作是理解前后端交互的绝佳范例。页面与路由在前端找到商品管理页面如src/views/goods/list.vue。看它如何通过created()或mounted()生命周期钩子在页面加载时调用接口获取数据。API层找到对应的API文件如src/api/goods.js。里面定义了getGoodsList,addGoods,updateGoods,deleteGoods等方法使用axios发起HTTP请求。后端控制器找到GoodsController.java。你会看到类似GetMapping(“/list”),PostMapping,PutMapping(“/{id}”),DeleteMapping(“/{id}”)的注解。这就是RESTful风格的接口定义。服务与持久层控制器会调用GoodsService.java而Service内部会调用GoodsMapper.javaMyBatis Plus的Mapper接口来操作数据库。顺着这个调用链你就能理解数据从浏览器到数据库的完整流动路径。实体与数据库表找到Goods.java实体类它的字段如id,name,price,stock通常与数据库goods表一一对应。动手练习不要只满足于看。尝试在商品列表页点击“新增”在表单里填一些数据提交。然后观察浏览器网络请求、后端控制台日志最后去数据库里查看是否真的新增了一条记录。这个闭环体验能极大加深理解。3.3 订单与销售管理这个模块涉及关联查询比单表CRUD复杂一点。前端查看订单列表页面注意它可能同时需要展示订单基本信息订单号、时间、总金额和关联的用户信息。看前端是如何一次请求获取这些关联数据的。后端查看OrderController和OrderService。重点看Service层的方法它可能会调用OrderMapper并编写联表查询的SQL在XML文件或使用MyBatis Plus的TableField注解关联。例如一个订单查询需要关联用户表和订单明细表。数据库查看orders,order_item表的结构理解它们是如何通过外键关联的order_id。3.4 数据统计与报表很多管理系统会有简单的数据可视化比如用ECharts展示销售趋势。前端找到报表页面看它如何引入EChartsnpm install echarts –save并在mounted中初始化图表、调用数据接口。后端对应的接口如/api/statistics/salesTrend会编写相对复杂的SQL语句使用GROUP BY、SUM、COUNT等聚合函数按天、周、月统计销售数据并返回给前端一个结构化的JSON。4. 项目定制与扩展把它变成“你的”作业直接交源码是下策。理解后进行一些定制化修改才能体现你的工作量。4.1 修改基础信息这是最简单的修改但很有效系统名称修改前端index.html的标题以及登录页、导航栏的系统名称。Logo替换public或src/assets目录下的logo图片。配色与主题修改前端CSS变量或UI框架如Element UI的主题色。可以在src/styles或vue.config.js中配置。4.2 增加或修改业务功能这是加分项需要你理解现有代码结构后进行模仿。增加一个“供应商管理”模块数据库在MySQL中设计supplier表id, name, contact, phone, address等。后端创建Supplier.java实体类。创建SupplierMapper.java接口继承MyBatis-Plus的BaseMapper。创建SupplierService.java接口及其实现类SupplierServiceImpl.java。创建SupplierController.java仿照商品控制器编写增删改查接口。前端在src/api/下创建supplier.js定义接口调用函数。在src/views/下创建supplier目录里面新建list.vue列表页、form.vue表单页。在路由文件src/router/index.js中添加新路由。在菜单配置文件可能在src/layout/components/Sidebar或单独的menu.js中添加新菜单项。为商品增加“分类”功能在goods表中增加category_id字段。新建category表。修改商品的新增、编辑页面增加分类下拉选择框数据从分类接口获取。修改商品列表查询支持按分类筛选。4.3 编写项目文档一份清晰的项目文档是课设/毕设的必备品。你可以基于源码中的README或单独创建文档包含项目简介系统目标、用户角色。技术栈SpringBoot, Vue2, Element UI, MyBatis-Plus, MySQL等。系统功能模块图用Visio或ProcessOn画。数据库ER图可以用Navicat的逆向功能生成。核心接口说明列出几个主要接口的URL、方法、请求参数、响应示例。部署说明就是你刚才经历的环境准备和启动步骤。总结与展望写一下你的学习收获和觉得可以继续优化的地方。5. 部署上线与常见问题排查如果你需要将项目部署到服务器进行演示或者在本机遇到了问题可以按以下思路排查。5.1 前端打包与后端打包前端打包在前端目录运行npm run build。这会生成一个dist文件夹里面是静态资源HTML, JS, CSS。后端打包在后端根目录运行mvn clean package。成功后会在target目录下生成一个xxx.jar文件。生产环境配置你需要创建一个application-prod.yml文件配置生产环境的数据库地址、Redis地址如果用的话、以及文件上传路径等。在启动Jar包时通过–spring.profiles.activeprod指定使用生产配置。5.2 部署方式传统部署将前端dist文件夹里的内容放到Nginx或Apache的静态资源目录下。配置Nginx反向代理将/api开头的请求转发到后端Jar包运行的地址如http://localhost:8080。在服务器上使用java -jar your-application.jar –spring.profiles.activeprod启动后端。前后端分离部署前端依然用Nginx托管。后端Jar包可以注册为系统服务使用systemd或者用Docker容器化部署实现进程守护和自动重启。5.3 常见问题与排查清单问题1前端启动失败npm install报错。排查检查Node.js版本是否过高建议降级到16.x。清除npm缓存npm cache clean –force。删除node_modules文件夹和package-lock.json重新npm install。或者尝试使用yarn安装。问题2后端启动失败报数据库连接错误。排查检查application.yml中的数据库IP、端口、库名、用户名、密码是否正确。检查MySQL服务是否已启动sudo systemctl status mysql。检查MySQL是否允许远程连接如果IP不是localhost。可能需要授权GRANT ALL PRIVILEGES ON *.* TO ‘root’’%’ WITH GRANT OPTION; FLUSH PRIVILEGES;检查数据库驱动版本是否匹配。MySQL 8.0 需要com.mysql.cj.jdbc.Driver和对应的连接参数serverTimezone。问题3前端访问后页面空白或JS/CSS加载失败。排查打开浏览器开发者工具看“控制台(Console)”和“网络(Network)”标签。如果是404检查前端资源路径是否正确如果是接口请求失败跨域或404检查前端配置的代理地址是否正确以及后端服务是否真的在运行。问题4登录成功但跳转后菜单不显示或接口401/403。排查这通常是权限问题。检查登录成功后后端返回的Token前端是否正确存储了在localStorage里查看。后续的请求是否在请求头Header中正确携带了Token通常是Authorization: Bearer token。后端的安全配置是否放行了必要的静态资源和登录接口。问题5修改代码后重启后端前端没变化。排查前端修改后需要重新npm run build并刷新浏览器或重启开发服务器。后端修改后如果是静态资源或模板可能需要清理浏览器缓存。如果是热部署可以检查是否引入了spring-boot-devtools依赖并开启了IDE的自动编译。这个项目作为一个学习模板最大的意义在于提供了一个完整且典型的MVC后端和MVVM前端代码范例。我建议你不要止步于“跑起来”而是花时间沿着“前端请求 - 后端控制器 - 服务层 - 数据层 - 数据库 - 返回数据 - 前端渲染”这条主线把几个核心流程的代码逐行读一遍。遇到不懂的注解如RestController,Autowired,GetMapping或语法如Vue的v-model,v-for立刻去查官方文档或教程。这样一小时后你收获的不仅是一个能交差的项目更是一张清晰的技术地图。
SpringBoot+Vue2超市管理系统：从零部署到代码理解的完整指南
发布时间：2026/7/21 22:21:59
这类项目最值得先看的不是功能列表而是能不能在普通开发环境下快速跑起来以及代码结构是否清晰到能让一个刚学完Java Web和Vue基础的学生在一小时内理解并部署成功。这个“超市管理系统”的标题结合SpringBoot和Vue2核心解决的就是一个典型的“课程设计/毕业设计”场景你需要一个功能完整、技术栈主流、有前后端分离架构、并且带数据库和文档的完整项目来交差或学习。它真正的价值在于提供了一个“可运行”的模板。你不用从零开始设计数据库、写接口、配路由而是直接拿到一个已经打通了前后端、实现了增删改查的现成项目。对于期末大作业、课设或者毕设初期这能帮你快速搭建起项目骨架把精力从“如何让项目跑起来”转移到“如何理解代码并修改成自己的业务”上。下面我会按照一个真实的、从零开始的部署和代码阅读流程带你走一遍。重点不是复现每一步命令而是告诉你每个环节最容易卡住的地方在哪以及如何判断自己是否走对了。1. 先确认你的环境别在第一步就卡住在下载任何源码之前先花五分钟检查你的本地环境。很多“跑不起来”的问题根源都在环境不匹配。1.1 后端环境Java和Maven是基础后端基于SpringBoot所以Java和Maven是必须的。我建议你先在命令行里确认版本java -version # 确认版本建议使用JDK 8或11这是SpringBoot 2.x最兼容的版本。如果显示17或21可能需要调整项目配置。 mvn -v # 确认Maven已安装且版本在3.6以上。关键点如果项目是用SpringBoot 2.7.x或更早版本构建的而你本地只有JDK 17大概率会在编译时遇到问题。更稳妥的做法是直接使用项目源码里自带的pom.xml文件用IDE如IntelliJ IDEA打开让IDE自动识别并下载对应的JDK版本。这是避免环境冲突最省事的方法。1.2 前端环境Node.js和npm版本要匹配前端是Vue2需要Node.js环境。同样先检查node -v # Vue2对Node版本要求相对宽松但建议使用12.x - 16.x之间的稳定版本。避免使用最新的Node 20可能遇到一些旧包兼容性问题。 npm -v # 能正常显示版本号即可。常见坑点如果你之前做过Vue3项目全局可能安装了vue-cli5.x对应Vue3。而Vue2项目通常使用vue-cli4.x。直接运行npm install可能会报错。处理方法是进入项目前端目录后先看是否有package-lock.json或yarn.lock优先使用npm ci如果存在package-lock.json安装依赖它能保证依赖版本与锁文件一致。1.3 数据库环境MySQL的准备项目大概率使用MySQL。你需要本地安装MySQL5.7或8.0版本均可。启动MySQL服务。创建一个新的数据库例如supermarket_db。记住数据库的连接信息主机(localhost)、端口(3306)、数据库名、用户名、密码。重要步骤拿到源码后第一时间不是运行而是去找后端的配置文件通常是src/main/resources/application.yml或application.properties。你需要把里面的数据库连接配置改成你本地刚创建的信息。这是前后端能否连上数据库的关键。# 示例application.yml 中的配置片段 spring: datasource: url: jdbc:mysql://localhost:3306/supermarket_db?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver2. 项目导入与启动遵循“先后端再前端”的顺序不要前后端同时启动。按照固定顺序能更清晰地看到日志定位问题。2.1 后端SpringBoot项目导入与启动使用IDE导入强烈建议使用IntelliJ IDEA。选择“Open”或“Import Project”找到项目根目录包含pom.xml的文件夹。IDEA会自动识别为Maven项目并开始下载依赖。等待依赖下载第一次导入时Maven会下载所有jar包。观察IDEA右下角的进度条确保网络通畅。这一步可能会耗时几分钟。配置数据库如前所述修改application.yml中的数据库连接信息。执行SQL脚本在项目资源文件夹src/main/resources或项目文档中找到数据库SQL脚本如schema.sql或supermarket.sql。在你的MySQL客户端如Navicat、MySQL Workbench或命令行中连接到刚创建的数据库然后执行这个SQL文件。这会创建所有需要的表结构和初始数据。启动后端应用找到主启动类通常命名为XxxApplication.java例如SupermarketApplication.java右键点击Run。观察控制台日志。成功标志看到类似“Started Application in X.XXX seconds (JVM running for X.XXX)”的日志并且没有红色错误信息。关键日志注意Tomcat启动端口默认8080以及是否有“DataSource initialized”之类的数据库连接成功信息。2.2 前端Vue2项目启动定位前端目录在项目根目录下找到一个类似frontend、vue-frontend或web的文件夹。这就是Vue2前端源码。安装依赖在终端中进入该前端目录运行npm install或cnpm install如果你使用了淘宝镜像。注意如果网络不好导致安装缓慢或失败可以尝试修改npm源npm config set registry https://registry.npmmirror.com配置后端接口地址前端需要知道后端API的地址。找到前端项目中的配置文件通常是src/utils/request.js或vue.config.js或者根目录下的.env.development文件。将里面指向后端服务的地址例如baseURL改为http://localhost:8080与后端启动端口一致。// 例如在 vue.config.js 中配置代理 module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, // 你的后端地址 changeOrigin: true, pathRewrite: { ^/api: } } } } }启动前端开发服务器在前端目录下运行npm run serve。成功标志终端会显示“App running at: - Local: http://localhost:8081”。记住这个前端访问地址通常是8080以外的端口如8081。访问系统打开浏览器访问上一步得到的前端地址如http://localhost:8081。你应该能看到登录界面。3. 核心功能与代码走读理解比复制更重要项目跑起来只是第一步。作为学习或交作业你必须理解代码是如何组织的。这个“超市管理系统”通常包含以下几个核心模块你可以按这个顺序去源码里找对应的部分3.1 用户登录与权限控制前端找到src/views/login.vue组件。看它如何收集用户名密码调用哪个API通常在src/api/user.js里如何处理登录成功后的跳转和Token存储localStorage或Vuex。后端找到控制器UserController.java或AuthController.java看登录接口/login如何接收参数、调用Service验证、生成Token如果用了JWT并返回。同时找到安全配置类可能叫SecurityConfig.java看它如何配置哪些接口需要认证哪些可以匿名访问。验证方式尝试用SQL脚本里提供的默认账号如admin/123456登录。登录后观察浏览器开发者工具F12的“网络(Network)”标签查看登录请求和返回的Token。3.2 商品信息管理增删改查这是最核心的CRUD操作是理解前后端交互的绝佳范例。页面与路由在前端找到商品管理页面如src/views/goods/list.vue。看它如何通过created()或mounted()生命周期钩子在页面加载时调用接口获取数据。API层找到对应的API文件如src/api/goods.js。里面定义了getGoodsList,addGoods,updateGoods,deleteGoods等方法使用axios发起HTTP请求。后端控制器找到GoodsController.java。你会看到类似GetMapping(“/list”),PostMapping,PutMapping(“/{id}”),DeleteMapping(“/{id}”)的注解。这就是RESTful风格的接口定义。服务与持久层控制器会调用GoodsService.java而Service内部会调用GoodsMapper.javaMyBatis Plus的Mapper接口来操作数据库。顺着这个调用链你就能理解数据从浏览器到数据库的完整流动路径。实体与数据库表找到Goods.java实体类它的字段如id,name,price,stock通常与数据库goods表一一对应。动手练习不要只满足于看。尝试在商品列表页点击“新增”在表单里填一些数据提交。然后观察浏览器网络请求、后端控制台日志最后去数据库里查看是否真的新增了一条记录。这个闭环体验能极大加深理解。3.3 订单与销售管理这个模块涉及关联查询比单表CRUD复杂一点。前端查看订单列表页面注意它可能同时需要展示订单基本信息订单号、时间、总金额和关联的用户信息。看前端是如何一次请求获取这些关联数据的。后端查看OrderController和OrderService。重点看Service层的方法它可能会调用OrderMapper并编写联表查询的SQL在XML文件或使用MyBatis Plus的TableField注解关联。例如一个订单查询需要关联用户表和订单明细表。数据库查看orders,order_item表的结构理解它们是如何通过外键关联的order_id。3.4 数据统计与报表很多管理系统会有简单的数据可视化比如用ECharts展示销售趋势。前端找到报表页面看它如何引入EChartsnpm install echarts –save并在mounted中初始化图表、调用数据接口。后端对应的接口如/api/statistics/salesTrend会编写相对复杂的SQL语句使用GROUP BY、SUM、COUNT等聚合函数按天、周、月统计销售数据并返回给前端一个结构化的JSON。4. 项目定制与扩展把它变成“你的”作业直接交源码是下策。理解后进行一些定制化修改才能体现你的工作量。4.1 修改基础信息这是最简单的修改但很有效系统名称修改前端index.html的标题以及登录页、导航栏的系统名称。Logo替换public或src/assets目录下的logo图片。配色与主题修改前端CSS变量或UI框架如Element UI的主题色。可以在src/styles或vue.config.js中配置。4.2 增加或修改业务功能这是加分项需要你理解现有代码结构后进行模仿。增加一个“供应商管理”模块数据库在MySQL中设计supplier表id, name, contact, phone, address等。后端创建Supplier.java实体类。创建SupplierMapper.java接口继承MyBatis-Plus的BaseMapper。创建SupplierService.java接口及其实现类SupplierServiceImpl.java。创建SupplierController.java仿照商品控制器编写增删改查接口。前端在src/api/下创建supplier.js定义接口调用函数。在src/views/下创建supplier目录里面新建list.vue列表页、form.vue表单页。在路由文件src/router/index.js中添加新路由。在菜单配置文件可能在src/layout/components/Sidebar或单独的menu.js中添加新菜单项。为商品增加“分类”功能在goods表中增加category_id字段。新建category表。修改商品的新增、编辑页面增加分类下拉选择框数据从分类接口获取。修改商品列表查询支持按分类筛选。4.3 编写项目文档一份清晰的项目文档是课设/毕设的必备品。你可以基于源码中的README或单独创建文档包含项目简介系统目标、用户角色。技术栈SpringBoot, Vue2, Element UI, MyBatis-Plus, MySQL等。系统功能模块图用Visio或ProcessOn画。数据库ER图可以用Navicat的逆向功能生成。核心接口说明列出几个主要接口的URL、方法、请求参数、响应示例。部署说明就是你刚才经历的环境准备和启动步骤。总结与展望写一下你的学习收获和觉得可以继续优化的地方。5. 部署上线与常见问题排查如果你需要将项目部署到服务器进行演示或者在本机遇到了问题可以按以下思路排查。5.1 前端打包与后端打包前端打包在前端目录运行npm run build。这会生成一个dist文件夹里面是静态资源HTML, JS, CSS。后端打包在后端根目录运行mvn clean package。成功后会在target目录下生成一个xxx.jar文件。生产环境配置你需要创建一个application-prod.yml文件配置生产环境的数据库地址、Redis地址如果用的话、以及文件上传路径等。在启动Jar包时通过–spring.profiles.activeprod指定使用生产配置。5.2 部署方式传统部署将前端dist文件夹里的内容放到Nginx或Apache的静态资源目录下。配置Nginx反向代理将/api开头的请求转发到后端Jar包运行的地址如http://localhost:8080。在服务器上使用java -jar your-application.jar –spring.profiles.activeprod启动后端。前后端分离部署前端依然用Nginx托管。后端Jar包可以注册为系统服务使用systemd或者用Docker容器化部署实现进程守护和自动重启。5.3 常见问题与排查清单问题1前端启动失败npm install报错。排查检查Node.js版本是否过高建议降级到16.x。清除npm缓存npm cache clean –force。删除node_modules文件夹和package-lock.json重新npm install。或者尝试使用yarn安装。问题2后端启动失败报数据库连接错误。排查检查application.yml中的数据库IP、端口、库名、用户名、密码是否正确。检查MySQL服务是否已启动sudo systemctl status mysql。检查MySQL是否允许远程连接如果IP不是localhost。可能需要授权GRANT ALL PRIVILEGES ON *.* TO ‘root’’%’ WITH GRANT OPTION; FLUSH PRIVILEGES;检查数据库驱动版本是否匹配。MySQL 8.0 需要com.mysql.cj.jdbc.Driver和对应的连接参数serverTimezone。问题3前端访问后页面空白或JS/CSS加载失败。排查打开浏览器开发者工具看“控制台(Console)”和“网络(Network)”标签。如果是404检查前端资源路径是否正确如果是接口请求失败跨域或404检查前端配置的代理地址是否正确以及后端服务是否真的在运行。问题4登录成功但跳转后菜单不显示或接口401/403。排查这通常是权限问题。检查登录成功后后端返回的Token前端是否正确存储了在localStorage里查看。后续的请求是否在请求头Header中正确携带了Token通常是Authorization: Bearer token。后端的安全配置是否放行了必要的静态资源和登录接口。问题5修改代码后重启后端前端没变化。排查前端修改后需要重新npm run build并刷新浏览器或重启开发服务器。后端修改后如果是静态资源或模板可能需要清理浏览器缓存。如果是热部署可以检查是否引入了spring-boot-devtools依赖并开启了IDE的自动编译。这个项目作为一个学习模板最大的意义在于提供了一个完整且典型的MVC后端和MVVM前端代码范例。我建议你不要止步于“跑起来”而是花时间沿着“前端请求 - 后端控制器 - 服务层 - 数据层 - 数据库 - 返回数据 - 前端渲染”这条主线把几个核心流程的代码逐行读一遍。遇到不懂的注解如RestController,Autowired,GetMapping或语法如Vue的v-model,v-for立刻去查官方文档或教程。这样一小时后你收获的不仅是一个能交差的项目更是一张清晰的技术地图。
