ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

SpringBoot+Vue建筑材料管理系统设计与实现:从数据库到部署全流程详解

SpringBoot+Vue建筑材料管理系统设计与实现:从数据库到部署全流程详解 直接掏心窝子讲这两年带了不少做毕业设计的学弟学妹凡是选了管理系统这类题目的十有八九最后都落在SpringBoot加Vue这套组合上。建筑材料管理系统这个题目初看平平无奇其实非常典型该踩的坑一个不少该用到的技术点也一个不缺——前后端分离、权限控制、多表关联、库存联动、报表统计全都能在这个题目里找到合适的落点。无论你手里现在是有完整源码直接要改还是准备从零开始搭一个这篇文章都值得你花十分钟看完。我会把整个系统的设计思路、数据库怎么建、后端怎么写、前端怎么对接、毕业文档怎么组织以及我实际调试过程中的各种坑一次性都说清楚。1. 项目整体设计为什么选这套技术栈功能到底怎么切1.1 技术选型的底层逻辑先说为什么市场上绝大多数毕业设计都选SpringBoot加Vue。这不是偶然而是被就业市场和答辩老师共同逼出来的最优解。SpringBoot的核心价值在于它帮你把Spring MVC、Tomcat、Jackson这些基础组件全部内聚好了你不需要再去写繁琐的XML配置一个spring-boot-starter-web依赖丢进去一个SpringBootApplication注解标上项目就能跑起来。对做毕业设计的学生来说这意味着你可以在两三天内把后端骨架搭完把精力集中在业务逻辑而不是环境配置上。Vue这边同理它的响应式数据绑定和组件化开发让前端的表单校验、列表渲染、弹窗交互都变得非常直觉化。你用v-model绑定输入框用axios发请求用element-ui的表格组件直接渲染数据二十多岁没写过几年代码的同学也能在短时间内做出一个能看的界面。但选这套组合还有另一层考虑答辩的时候老师几乎一定会问“为什么选这个技术栈”。SpringBoot加Vue的答案很好说——SpringBoot简化了后端开发流程Vue实现了前后端分离两者结合能降低维护成本、提升开发效率。这套话术老师听得多也认可不会在技术选型上继续追问太多。建筑材料管理系统的业务场景其实非常适合这套技术栈。材料种类多、批次多、供应商多天然就是增删改查的集中营。你做一个“材料信息管理”模块做“供应商管理”模块做“入库单管理”模块做“出库单管理”模块再把“库存预警”和“统计报表”加进去整个系统的功能面就撑起来了。1.2 功能模块怎么划分才合理功能模块的划分直接决定你后面的代码量和数据库设计一定要在动手之前想清楚。我建议按这样的模块切分系统登录与用户管理登录、退出、用户信息的增删改查顺便加上密码加密存储材料信息管理材料的名称、规格型号、单位、分类、单价等基础信息的维护供应商管理供应商名称、联系人、联系电话、地址等信息的维护材料入库管理入库单的创建、审核入库后自动增加对应材料的库存数量材料出库管理出库单的创建、审核出库后自动扣减库存数量库存管理查询当前各种材料的库存数量、库存预警值低于预警值自动标红统计报表按材料分类统计入库出库数量用图表展示这套模块划分的妙处在于每个模块都是独立的增删改查你可以单独开发单独测试模块之间又存在清晰的业务关联比如入库单会影响库存表这为你的论文中“业务流程图”“数据流图”提供了很好的素材。你注意“入库单管理”和“出库单管理”一定要设计成主表和从表的结构——主表记录这张单子的单号、操作时间、经办人从表记录这张单子具体包含哪些材料、每种材料多少数量。这种设计在论文里可以大写特写“一对多关系建模”在答辩时可以解释“为什么要拆两张表而不是直接存一个字段”这些都是加分项。2. 数据库设计的核心细节表怎么建、字段怎么定、库存怎么联动2.1 核心表单与字段全解数据库是管理系统类毕业设计的命脉也是答辩老师最喜欢盯着看的部分。建筑材料管理系统的核心表我建议至少包含以下七张用户表sys_user主键id、用户名、密码BCrypt加密、真实姓名、角色、创建时间。角色字段建议用字符串类型直接区分“管理员”和“普通员工”不要搞太复杂的RBAC模型毕业设计阶段用不到。材料分类表material_category主键id、分类名称、备注。这一张表用来对材料进行分类管理简单实用。材料信息表material_info主键id、材料名称、规格型号、单位、单价、分类id外键关联material_category、库存数量、库存预警值、备注。注意这里有一个冗余字段“库存数量”这个字段是从出入库记录里统计出来的但为了方便查询会直接存放在这张表里这在论文里可以解释为“以空间换时间的设计”。供应商表supplier主键id、供应商名称、联系人、联系电话、地址、备注。入库主表stock_in_main主键id、入库单号、供应商id、入库日期、经办人、备注。入库单号建议用时间戳加随机数生成比如“IN202501151430001”。入库明细表stock_in_detail主键id、入库主表id外键、材料id、入库数量、单价。这张表里的单价要单独存因为材料单价可能会调整你不能去改历史入库记录里的价格。出库主表stock_out_main和出库明细表stock_out_detail结构和入库表对应字段基本一致出库单号用“OUT”开头。2.2 关键设计决策背后的原因先说为什么“入库”和“出库”要拆主表和明细表。假设你入库单里包含三种材料你当然可以设计成一张表三个字段分别存材料名称、数量、单价但如果一张单子有二十种材料呢字段就爆炸了。更重要的是主表明细表拆开之后你可以通过外键关联非常清晰地知道“这张单子包含哪些材料”查询和统计都方便。这是一个非常经典的一对多模型论文里的ER图画起来也好看。再说“库存数量”为什么要冗余存储而不是每次临时计算。理论上库存数量等于总入库量减去总出库量你可以通过SUM函数算出来。但如果你每次都去关联两张明细表做聚合运算查询速度会越来越慢而且当一个材料有几千条出入库明细时这个查询会卡到你怀疑人生。把库存数量冗余在material_info表里每次出入库操作完成后同步更新这个字段查询列表页的时候一个简单的select就能把库存带出来这就是典型的“空间换时间”。这个设计在答辩时有个必考题“如果两张明细表的数据被篡改或者删除库存对不上怎么办”你可以回答通过事务机制保证数据一致性同时增加对账逻辑定期用SUM函数计算并与冗余字段比对发现不一致时报警。这个回答会显得你有全局思维。数据库的字符集最好统一设置为utf8mb4排序规则用utf8mb4_general_ci。字段类型方面金额字段一定用decimal而不是float或double因为float在二进制存储上会有精度丢失材料单价乘以数量后的总价会莫名其妙多出0.0000001元。数量字段根据你的材料类型决定水泥你按吨存用decimal(10,2)就够了。2.3 建表SQL与索引优化思路我直接把你建表SQL的核心部分给出来你可以在自己的项目里照着改。CREATE TABLE material_info ( id int(11) NOT NULL AUTO_INCREMENT, material_name varchar(100) NOT NULL COMMENT 材料名称, specification varchar(100) DEFAULT NULL COMMENT 规格型号, unit varchar(20) DEFAULT NULL COMMENT 计量单位, price decimal(10,2) DEFAULT NULL COMMENT 单价, category_id int(11) DEFAULT NULL COMMENT 分类ID, stock_quantity decimal(10,2) DEFAULT 0.00 COMMENT 当前库存, warning_value decimal(10,2) DEFAULT 0.00 COMMENT 预警值, remark varchar(255) DEFAULT NULL COMMENT 备注, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_category_id (category_id), KEY idx_material_name (material_name) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT材料信息表;索引方面你不需要建太多主键索引是必须的然后给外键字段建索引比如category_id、material_id、supplier_id这些。因为这张明细表会频繁通过material_id去查询没有索引的话数据量一上来全表扫描会让你卡成PPT。至于材料名称如果你要做模糊搜索可以加一个普通索引但不要指望模糊搜索能用上索引大幅加速只要数据量在几千条以内全表扫描也能接受。3. 后端实现的核心环节从工程搭建到接口联调3.1 后端工程结构与启动配置后端工程结构我建议严格遵循Controller、Service、Mapper三层这不仅是业界惯例更是论文里的“分层架构设计”章节的核心论据。你的包名建议这样组织com.example.material ├── controller (Controller层接收前端请求) ├── service (Service层编写业务逻辑) │ └── impl ├── mapper (Mapper层操作数据库) ├── entity (实体类) ├── dto (数据传输对象) ├── vo (视图对象) ├── config (配置类如跨域、拦截器) └── common (通用类如返回结果封装、工具类)Controller层只负责接收参数、调用Service、返回结果不写任何业务逻辑。Service层负责业务处理比如入库操作要同时完成“插入入库主表、插入入库明细表、更新材料库存”三个动作这三个操作必须放在同一个事务里用Transactional注解标注任何一个失败都得回滚。Mapper层用MyBatis-Plus你的单表增删改查完全不需要写SQL直接调用BaseMapper提供的insert、selectPage、updateById方法就行。启动类的写法非常固定如下SpringBootApplication MapperScan(com.example.material.mapper) public class MaterialApplication { public static void main(String[] args) { SpringApplication.run(MaterialApplication.class, args); } }application.yml里要配置数据源、端口、MyBatis-Plus的相关参数。给你一个我实际用过的配置模板server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/material_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你自己数据库的密码 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0第一个坑提醒你数据库连接url里务必加上serverTimezoneAsia/Shanghai否则会出现时区报错。第二个坑MyBatis-Plus的map-underscore-to-camel-case要打开这样数据库字段create_time才能自动映射到实体类的createTime属性不然查出来的对象时间字段全是null。3.2 登录鉴权与拦截器处理登录模块是每个答辩老师必问的内容。建筑材料管理系统的登录功能不建议搞太复杂用JWTJSON Web Token方案就非常合适。我给你梳理一下流程。用户登录接口PostMapping(/login) public Result login(RequestBody LoginDTO loginDTO) { // 根据用户名查询用户 User user userService.getUserByUsername(loginDTO.getUsername()); // 判断用户是否存在 if (user null) { return Result.error(用户名不存在); } // 校验密码PasswordEncoder是Spring Security自带的一个组件 if (!passwordEncoder.matches(loginDTO.getPassword(), user.getPassword())) { return Result.error(密码错误); } // 生成JWT有效期设置24小时 String token JwtUtil.createToken(user.getId(), user.getUsername()); // 返回给前端 return Result.success(token); }筛选拦截器public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(Authorization); if (token null || !token.startsWith(Bearer )) { // 返回401状态码前端会跳转到登录页 response.setStatus(401); return false; } // 解析token如果异常直接拦截 try { Claims claims JwtUtil.parseToken(token.substring(7)); // 可以向后续请求传递用户信息 request.setAttribute(userId, claims.get(userId)); } catch (Exception e) { response.setStatus(401); return false; } return true; } }注意你需要在WebConfig配置类里把拦截器注册进去并且对放行的路径做出名单管理。比如登录接口/api/login肯定要放行其他接口统一拦截。前端配合的做法是在axios请求拦截器里给每个请求加上Authorization: Bearer xxx请求头在响应拦截器里检测到401状态码就清空本地存储的token并跳转到登录页。这套方案实现简单、逻辑清楚答辩时你从token生成、传递、校验三个环节分别讲解老师会觉得你很扎实。3.3 核心接口设计材料入库出库与库存联动材料入库这个接口是整个系统中业务逻辑最复杂的部分写好了它你基本就建立信心了。我给你画一下它的完整执行轨迹前端提交入库单数据数据形态大致如下{ supplierId: 1, remark: 本月第一次采购, items: [ { materialId: 1, quantity: 100, price: 12.5 }, { materialId: 2, quantity: 200, price: 8.8 } ] }Service层处理逻辑Transactional public void stockIn(StockInDTO dto) { // 1. 生成入库单号格式如 IN 时间戳 随机数 String orderNo IN System.currentTimeMillis() RandomUtil.randomNumbers(4); // 2. 插入入库主表 StockInMain main new StockInMain(); main.setOrderNo(orderNo); main.setSupplierId(dto.getSupplierId()); main.setStockInDate(new Date()); main.setRemark(dto.getRemark()); stockInMainMapper.insert(main); // 3. 遍历明细插入入库明细表并同时更新材料库存 for (StockInItem item : dto.getItems()) { StockInDetail detail new StockInDetail(); detail.setMainId(main.getId()); detail.setMaterialId(item.getMaterialId()); detail.setQuantity(item.getQuantity()); detail.setPrice(item.getPrice()); stockInDetailMapper.insert(detail); // 更新库存 materialInfoMapper.increaseStock(item.getMaterialId(), item.getQuantity()); } }这段代码的精髓在Transactional如果循环到第三种材料时库存更新失败前面插入的主表和前两条明细会全部回滚数据库不会出现“半截单子”。你注意看这里用的是增加库存的方法我推荐在Mapper里写这样一个自定义SQLUPDATE material_info SET stock_quantity stock_quantity #{quantity} WHERE id #{materialId}直接用SQL操作原子增减避免了先查询、再计算、再更新的三个步骤之间的并发问题。出库的逻辑完全类似只是把加号换成减号并且要额外检查库存是否充足。出库前先查一下当前库存如果库存不足直接抛异常提示“库存不足”这个判断必须放在事务内部否则会出现并发超卖的情况。统计报表接口也比较简单。按月份统计入库数量SQL大概是这样SELECT DATE_FORMAT(stock_in_date, %Y-%m) AS month, SUM(quantity) AS total_quantity FROM stock_in_detail d JOIN stock_in_main m ON d.main_id m.id WHERE m.stock_in_date #{startTime} AND m.stock_in_date #{endTime} GROUP BY month查询结果可以直接返回给前端用ECharts画柱状图或者折线图。4. 前端实现Vue页面怎么搭、组件怎么用、请求怎么发4.1 前端工程搭建与关键配置前端我建议直接用Vue CLI或Vite来初始化项目。Vite现在启动速度快很多如果你用的是Vue 3选Vite体验会非常好。如果你是JAVA课程里学的是Vue 2的语法那你就用Vue CLI创建Vue 2项目配上Element UI组件库上手最快。这里有一个非常常见的毕业设计现场问题npm install安装速度慢到想摔电脑。解决办法是在项目根目录新建一个.npmrc文件写入以下内容registryhttps://registry.npmmirror.com这是国内镜像源速度能快上十倍。如果你是校园网环境下开发这个操作几乎是必须的否则等一个晚上也可能装不完。前端的目录结构我推荐这样建src ├── api (存放所有请求接口的调用方法) ├── assets (静态资源) ├── components (通用组件) ├── router (路由配置) ├── store (状态管理可选) ├── views (页面级组件) ├── utils (工具类axios封装) ├── App.vue └── main.js关于axios封装一定要抽出公共请求入口。这里有一个跨域问题的关键点如果你在vite.config.js里配置了代理那么开发环境的请求路径要写成相对路径由代理转发到后端如果你懒得配代理也可以在后端用CrossOrigin注解处理跨域但配代理更专业、更像真实项目里的做法。Vite的代理配置长这样server: { host: localhost, port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }这样前端请求/api/stock/list就会被转发到http://localhost:8080/api/stock/list既解决了跨域又不暴露后端真实地址。4.2 页面设计与组件选型材料管理系统的页面结构我非常建议用典型的“左侧菜单栏 右侧内容区”布局。Element UI的el-container组件可以直接实现这个布局左侧放el-menu菜单右侧放el-main内容区内容区里通过路由切换展示对应的业务页面。页面的核心组件是表格和数据弹窗。列表页用el-table绑定数据每一行后面放“编辑”和“删除”按钮新增和编辑功能统一用el-dialog弹窗里面放el-form表单。材料列表页的核心代码逻辑大致如下template div el-form inline el-form-item label材料名称 el-input v-modelqueryParams.materialName placeholder请输入材料名称/el-input /el-form-item el-form-item el-button typeprimary clickhandleQuery查询/el-button el-button typesuccess clickhandleAdd新增/el-button /el-form-item /el-form el-table :datatableData border stripe el-table-column propmaterialName label材料名称/el-table-column el-table-column propspecification label规格型号/el-table-column el-table-column propprice label单价/el-table-column el-table-column propstockQuantity label库存数量/el-table-column el-table-column label操作 width200 template slot-scopescope el-button typeprimary sizesmall clickhandleEdit(scope.row)编辑/el-button el-button typedanger sizesmall clickhandleDelete(scope.row)删除/el-button /template /el-table-column /el-table el-pagination :current-pagequeryParams.current :page-sizequeryParams.size :totaltotal current-changehandlePageChange/el-pagination /div /template这里要注意表格的:data来自一个tableData数组通过调用api方法获取后端返回值后赋值。分页组件要处理好current-change事件切换页码时重新加载数据。库存预警页面的实现更有意思核心逻辑是当前端从后端拿到材料列表后前端做一次过滤把库存数量低于预警值的材料筛出来并且在表格中用红色高亮显示。代码大致是这样computed: { warningList() { return this.tableData.filter(item Number(item.stockQuantity) Number(item.warningValue) ) } }在el-table的行样式上可以绑定一个函数让预警的行标红。这个功能虽然简单但在答辩演示时效果非常好——你现场把某种材料的库存调低点击刷新表格立刻变红老师一眼就能看到系统的作用。4.3 前后端联调的接口对接经验前后端联调阶段我强烈建议你先在后端用Postman把所有接口都测通了再开始对接前端页面。这样出问题时你能快速定位是后端接口的问题还是前端传参的问题。联调时最常见的错误是字段名对不上。比如数据库字段是stock_quantity后端的实体属性是stockQuantity前端代码里用了stock_quantity结果页面始终显示不出库存数量。排查这类问题的方法是打开浏览器的控制台Network面板看接口实际返回的JSON字段长什么样再对照前端代码里的取值属性名一目了然。还有一个高频坑是时间字段的传输。后端返回的Date类型默认序列化成一串很长的数字时间戳前端拿到之后需要格式化才能显示成2025-01-15。你可以在后端给时间字段加上JsonFormat(pattern yyyy-MM-dd HH:mm:ss, timezone GMT8)注解或者在前端写过滤器做格式化。推荐在后端处理因为前端每个页面都要显示时间统一处理省事得多。5. 毕业设计文档撰写与答辩的核心策略5.1 论文的章节结构与写作要点如果你手里的交付物包含“文档”那你一定逃不掉写毕业设计论文或者开发文档。这个文档的章节结构是有约定俗成模板的你按下面的骨架填充就不会跑偏。第一章绪论写研究背景和意义。这里可以写“建筑行业信息化管理需求日益增长传统人工记录材料出入库信息的方式存在效率低、易出错、统计困难等问题因此开发一套建筑材料管理系统具有实际应用价值”。再写国内外研究现状和主要工作。第二章需求分析写系统的功能需求和非功能需求。功能需求用用例图辅助说明角色就设两个——管理员和普通员工。第三章总体设计写系统架构图、功能模块图、技术选型、数据库设计。数据库设计这里放ER图和建表SQL。第四章详细设计与实现逐模块写实现过程。从类设计到核心代码每个模块配一个页面截图。这一章是字数主力你必须把登录、材料管理、库存管理、出入库管理、统计报表六个模块全部覆盖每个模块写清流程和核心方法。第五章系统测试写测试用例表和测试结论。用黑盒测试方法列出功能测试用例说明预期结果和实际结果一致。这里有一个毕业论文的隐藏要求如果你的学校查重要求比较严格那么核心代码部分最好改成流程图或者直接用文字描述流程不要大段大段贴代码否则重复率会非常感人。数据库建表SQL也不要全贴只贴核心表并配上字段说明表。5.2 答辩必问问题与标准回答答辩老师对管理系统类题目的提问模式其实非常固定提前把答案准备充分现场就不会慌。第一个必问系统采用了什么架构答案要讲到前后端分离、SpringBoot负责后端接口、Vue负责页面渲染、两者通过JSON进行数据交互。你可以多提一句“这种架构提高了开发效率降低了前后端耦合度”这个回答是标准加分项。第二个必问数据库中的库存数据是怎么保证准确的你要把前面说的主表明细表事务设计讲清楚——每次入库出库操作都在同一个事务中执行要么全部成功要么全部回滚同时更新库存冗余字段。再补充一句“系统还支持定期对账用SQL统计出入库总量和库存字段进行比对”。这句话能体现你在设计时考虑到了数据一致性。第三个必问系统的安全性体现在哪里你可以讲密码通过BCrypt加密存储登录采用JWT鉴权未登录用户无法访问受保护接口前端通过路由守卫控制页面访问权限。这三个点分别对应后端安全、接口安全、前端安全一石三鸟。第四个必问未来可以怎么优化这个问题考察你的延伸思考能力。你可以说三个方向一是引入Redis缓存热点数据减轻数据库压力二是使用消息队列处理出入库通知提升系统吞吐量三是增加多维度数据可视化分析帮助管理者优化采购决策。每一条都点到即止不要展开太多说多了容易露怯。6. 常见问题与调试实录我亲自踩过的坑6.1 环境配置阶段的经典事故环境问题是最劝退毕业生的我筛选出几个高频事故集中在第一次运行项目时的注意事项。数据库连接失败是非常典型的。现象是启动SpringBoot时控制台疯狂报错类似Access denied for user rootlocalhost。排查思路非常简单先检查MySQL服务有没有启动任务管理器里找mysqld.exe进程接着检查application.yml里的用户名密码是否和本机一致。绝大多数时候不是你密码错了而是你的MySQL密码就是空的或者密码变了但你yml里没更新。端口占用也很常见。SpringBoot启动时提示Port 8080 was already in use。解决办法要么换端口把server.port改成8081要么找到占用进程并结束它。命令行执行netstat -ano | findstr 8080 taskkill /pid 对应PID /fMaven依赖下载失败也困扰了无数人。现象是pom.xml里引入了spring-boot-starter-web但是mvn编译时提示找不到类或者Jar包下载报错。根本原因是默认的Maven中央仓库地址在国内访问极不稳定。解决办法是在Maven的settings.xml文件里配置阿里云镜像mirror idaliyunmaven/id mirrorOfcentral/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirror配好之后把本地仓库里失败的存档清掉重新执行mvn clean install就可以解决。6.2 开发阶段几个防不胜防的BugMyBatis-Plus的分页失效问题可能让你怀疑人生。你以为加了PageHelper或者Page类就能分页结果发现查出来的数据列表是全量的。原因是你可能没有配置分页插件。在MyBatis-Plus中分页需要显式注入一个插件Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; }没有这个配置类selectPage方法虽然不会报错但会直接把全表数据都查出来你前端表格能显示数据翻页却没任何效果。这个问题特别隐蔽答辩前不仔细测试根本发现不了。还有一个特别气人的是前端联调时的缓存问题。你改了前端代码以为刷新浏览器就能看到新效果结果页面还是旧的。多半是浏览器缓存了静态文件。解决办法是强制刷新CtrlF5或者在Vite配置里禁用缓存。如果是部署到服务器上出现这个问题还可以考虑给打包后的JS文件名加hash值。后端修改了接口、前端请求之后得到的数据仍然不变这个通常是后端代码没有重新启动。SpringBoot默认不会热部署你得手动重启或者配置DevTools热部署插件。DevTools配置很简单pom里加这个依赖dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId optionaltrue/optional /dependency加了之后修改Java代码并保存项目会自动重启调试效率能提升一大截。6.3 部署阶段的注意事项有的学校毕业答辩要求本地演示有的要求部署到服务器。如果你需要打包部署我建议直接用Maven打包成可执行Jar包mvn clean package完成之后target目录下会生成一个.jar文件你可以用这个命令启动后端java -jar material-system.jar前端打包则执行npm run build它会生成一个dist目录里面是静态文件。如果你想在服务器上同时部署前后端推荐用Nginx。前端dist目录放到Nginx的html目录下后端Jar包用java -jar启动再把Nginx的反向代理配置一下让请求/api路径时转发到后端8080端口。这样整个系统就能通过一个域名或IP访问非常专业。Nginx的配置如下server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }这里try_files的作用是解决前端路由的刷新404问题——如果你的页面是/stock/list这种路由直接刷新浏览器时Nginx会找不到对应的静态文件加上这句配置请求都会兜底到index.html由Vue Router接管路由分配。从技术栈选型到数据库设计从后端事务处理到前端页面联调从论文结构到答辩话术再到部署方案这套建筑材料管理系统能涉及到的知识点我基本全部覆盖了。做毕业设计这几年我自己的体会是不要把毕业设计当成任务交差而是当成一个小型项目去认真完成。这个过程中你学会的排查Bug的思路、前后端协作的模式、文档撰写的逻辑到了工作岗位上都是每天要用的基本功。最后再送你一个小建议——做完一个模块就及时提交一次代码养成用Git做版本管理的习惯你一定会感谢自己这个决定。
返回列表