SpringBoot+Vue前后端分离企业资产管理系统设计与实现

简介基于 Java 的 Spring Boot 框架与 Vue 技术构建的前后端分离企业资产管理系统是一个面向毕业设计或课堂项目的完整实践案例。系统采用 B/S 模式设计围绕资产“借出—归还—维修”链路展开包含用户管理、资产分类、资产信息管理、资产借出、资产归还和资产维修等核心功能采用 MySQL 数据库存储数据具备清晰的业务闭环和较好的扩展性。资源包共 367 个文件大小约 53.07MB内含 java 后端源码、vue 前端页面、sql 数据库脚本、doc 论文文档、mp4 演示视频以及 install/run/build 一键脚本、mvnw 封装器、XML/JSON 配置文件和 SVG/PNG 图标资源等能够覆盖从环境准备、代码阅读到项目部署的全过程论文部分涵盖可行性分析、系统设计、功能模块说明与数据库设计便于撰写毕业设计文档时参考。目前已有 60 人学习下载适合正在寻找可运行管理系统源码、需要完整设计文档与配套教程的 Java 学习者配合视频和启动脚本可明显降低上手门槛。1. 企业资产管理系统为什么适合用SpringBootVue前后端分离公司上千台设备资产管理员还在用Excel记录借出微信群里的维修申请经常找不到经手人。我拿到这套基于SpringBootVue前后端分离的企业资产管理系统时第一反应是把资产信息、借出、归还、维修拆成一条完整的数据链SpringBoot处理接口和事务Vue生成操作界面Mysql保存业务数据。管理员能跟踪每一台资产的状态普通用户也能发起借出和归还。它适合两类人一类是课程设计或毕业设计需要完整业务闭环的人另一类是团队内部想快速搭建资产台账再基于源码二次开发的人。这套项目开箱即用但开箱之前最好先看清它的数据库和状态机设计否则后面改到资产借还逻辑时会吃力。2. 数据库设计资产、借出、归还、维修四张核心表的关系2.1 从管理员功能反推数据表管理员功能里有个人中心、用户管理、资产分类管理、资产信息管理、资产借出管理、资产归还管理、资产维修管理。用户能借出和归还资产。从需求反推数据模型不能只做一张大表而要把主数据和业务数据分开。我拆完之后是五张核心表sys_user、asset_category、asset_info、asset_borrow、asset_repair。一次借出操作同时写asset_borrow和asset_info一次归还操作把asset_borrow状态置为已归还并把asset_info状态改回在库维修操作单独记录维修单因为维修原因、费用、维修人这些字段跟资产本身不耦合。如果把维修字段并进资产表每次维修都要更新资产行历史维修记录会被覆盖。这里的关键是资产当前状态放在asset_info里借出和归还是流水记录放在asset_borrow里两张表通过asset_id关联。asset_repair独立存维修历史方便管理员按维修单统计设备故障率。2.2 资产表与资产分类表字段设计先看资产信息表CREATE TABLE asset_info ( id bigint(20) NOT NULL AUTO_INCREMENT, asset_code varchar(64) NOT NULL COMMENT 资产编号, asset_name varchar(128) NOT NULL COMMENT 资产名称, category_id bigint(20) NOT NULL COMMENT 资产分类ID, status tinyint(4) NOT NULL DEFAULT 1 COMMENT 状态1在库 2已借出 3维修中 4报废, buy_time date DEFAULT NULL COMMENT 购买日期, price decimal(10,2) DEFAULT NULL COMMENT 采购价格, remark varchar(500) DEFAULT NULL COMMENT 备注, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_asset_code (asset_code) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;asset_code唯一约束非常重要。实际项目里资产编号是行政和财务都认的标识自增id只是内部主键。如果同一个编号能重复插入后面借出和归还时不知道更新哪一行报表数据也会翻倍。category_id关联asset_category表分类名称通过联查得到不冗余存储在资产表里否则改一次分类名就要批量更新所有资产记录。asset_category表结构反而简单id、parent_id、category_name、sort_order。parent_id允许为0表示一级分类。如果企业资产只有电脑、办公设备、家具几类不做多级嵌套连parent_id都可以省掉。但这个项目既然做了分类管理保留parent_id更灵活后期扩展二级分类不需要改表结构。2.3 借出归还维修的关联关系与状态流转借出记录表CREATE TABLE asset_borrow ( id bigint(20) NOT NULL AUTO_INCREMENT, asset_id bigint(20) NOT NULL COMMENT 资产ID, user_id bigint(20) NOT NULL COMMENT 经手用户ID, borrow_time datetime DEFAULT CURRENT_TIMESTAMP, expect_return_time datetime DEFAULT NULL, actual_return_time datetime DEFAULT NULL, status tinyint(4) NOT NULL DEFAULT 0 COMMENT 0借用中 1已归还, PRIMARY KEY (id), KEY idx_asset_id (asset_id), KEY idx_user_id (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;借出记录只关心谁在什么时间借了什么资产资产名称、价格等信息通过asset_id回表查询。actual_return_time只有status1时才有值属于业务时间字段不要用MySQL的ON UPDATE CURRENT_TIMESTAMP自动更新而是由Service层显式写入。状态流转可以整理成一张表当前状态操作目标状态数据操作1 在库借出2 已借出插入借出记录更新asset_info.status22 已借出归还1 在库更新借出记录status1更新asset_info.status12 已借出报修3 维修中插入维修单更新asset_info.status33 维修中维修完成1 在库更新维修单状态更新asset_info.status1这张表是判断后端逻辑是否完整的依据。如果数据库里出现asset_info.status2的记录数量和asset_borrow.status0的记录数量对不上说明某个借出事务没走完整多半是插入借出记录和更新资产状态没有放进同一个事务。查询逾期未还资产SQL逻辑是SELECT b.*, u.username, a.asset_name FROM asset_borrow b LEFT JOIN sys_user u ON b.user_id u.id LEFT JOIN asset_info a ON b.asset_id a.id WHERE b.status 0 AND b.expect_return_time NOW();这里关联用户表和资产表是为了在催还列表里同时显示谁借了什么。如果只想看超期天数用TIMESTAMPDIFF(DAY, expect_return_time, NOW())计算再按阈值过滤。3. 后端接口实现SpringBoot资产借出与归还的完整逻辑3.1 项目结构与Maven依赖源码包命名为springboot117分层结构很清晰controller、service、mapper、entity、config。Controller层只做参数接收和结果封装Service层写业务规则Mapper层做数据访问。这套分层对资产管理这种以CRUD为主的项目不是过度设计而是刚好够用。依赖上这套项目用Spring Boot加上MyBatis-Plus最典型因为可以明显减少重复SQL。如果你拿到的源码是原生MyBatis下面的代码换成Mapper接口也能对应上。dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.2/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependencyspring-boot-starter-web提供REST接口能力mybatis-plus-boot-starter负责ORM映射mysql-connector-java是数据库驱动。如果项目里使用lombok注意版本要跟JDK匹配JDK17以上用旧版lombok会在启动阶段直接报错。3.2 资产借出接口事务与状态校验Controller层先接收请求RestController RequestMapping(/api/asset) public class AssetController { Resource private AssetBorrowService borrowService; PostMapping(/borrow) public Result borrow(RequestBody BorrowDTO dto) { borrowService.borrow(dto); return Result.success(借出成功); } }RestController返回JSONRequestBody接收前端传来的JSON对象。Result是统一响应体封装code、message、data。前端判断res.code 200时表示处理成功。BorrowDTO里至少包含assetId、userId、expectReturnTime三个字段跟数据库表字段一一对应。Service层是业务核心Service public class AssetBorrowServiceImpl implements AssetBorrowService { Resource private AssetInfoMapper assetInfoMapper; Resource private AssetBorrowMapper assetBorrowMapper; Override Transactional(rollbackFor Exception.class) public void borrow(BorrowDTO dto) { AssetInfo asset assetInfoMapper.selectById(dto.getAssetId()); if (asset null || asset.getStatus() ! 1) { throw new RuntimeException(资产不存在或当前状态不可借出); } AssetBorrow borrow new AssetBorrow(); borrow.setAssetId(dto.getAssetId()); borrow.setUserId(dto.getUserId()); borrow.setBorrowTime(LocalDateTime.now()); borrow.setExpectReturnTime(dto.getExpectReturnTime()); borrow.setStatus(0); assetBorrowMapper.insert(borrow); AssetInfo update new AssetInfo(); update.setId(asset.getId()); update.setStatus(2); assetInfoMapper.updateById(update); } }先查资产判断status是否为1在库只有满足条件才插入借出记录再去更新资产状态。Transactional保证这两个数据库操作在同一个事务里任何一个失败都会整体回滚。如果去掉这个注解会出现借出记录已插入、资产状态却还是1的情况管理员在前台看到资产可借但数据库里已经有人借走了这种脏数据很难追查。严谨一点更新状态可以改成update asset_info set status 2 where id ? and status 1然后根据返回行数判断是否真正更新成功。这样即使两个管理员同时借出同一台设备数据库层面也只会有一条记录成功另一个请求受影响行数为0返回“资产已被人借走”的提示。MyBatis-Plus的updateById默认不带条件并发控制需要自己补。3.3 归还接口与维修状态切换归还接口与借出相反但要注意借出记录的归属校验Override Transactional(rollbackFor Exception.class) public void returnAsset(ReturnDTO dto) { AssetBorrow borrow assetBorrowMapper.selectById(dto.getBorrowId()); if (borrow null || borrow.getStatus() ! 0) { throw new RuntimeException(借出记录不存在或已经归还); } borrow.setStatus(1); borrow.setActualReturnTime(LocalDateTime.now()); assetBorrowMapper.updateById(borrow); AssetInfo update new AssetInfo(); update.setId(borrow.getAssetId()); update.setStatus(1); assetInfoMapper.updateById(update); }归还时先根据borrowId查借用记录必须校验status0否则重复提交会把资产状态错误地改回在库。系统里如果需要“一键归还未指定借出记录”接口参数就改成assetId然后在Service里查最近一条status0的借出记录两种策略需要统一不能混用。维修接口同样要校验状态我一般这样写public void startRepair(RepairDTO dto) { AssetInfo asset assetInfoMapper.selectById(dto.getAssetId()); if (asset null || (asset.getStatus() ! 1 asset.getStatus() ! 2)) { throw new RuntimeException(当前状态不能报修); } AssetRepair repair new AssetRepair(); repair.setAssetId(dto.getAssetId()); repair.setRepairReason(dto.getRepairReason()); repair.setStatus(0); assetRepairMapper.insert(repair); AssetInfo update new AssetInfo(); update.setId(asset.getId()); update.setStatus(3); assetInfoMapper.updateById(update); }允许在库和已借出两种状态报修但实际场景里已借出的资产最好先归还再报修否则借出记录一直挂在用户头上。前端把“归还”和“报修”拆成两个按钮后端保持接口独立维护时更清晰。核心接口清单接口路径请求方式功能/api/asset/listGET分页查询资产/api/asset/borrowPOST借出资产/api/asset/returnPOST归还资产/api/asset/repairPOST报修资产/api/asset/deleteDELETE删除资产信息写接口时还要考虑权限普通用户只能借出和归还新增、删除、维修确认是管理员操作。如果只在Controller里写方法不做权限拦截任何登录用户都能删资产业务就失控了。4. Vue前端与SpringBoot联调登录鉴权、资产列表与借出表单4.1 前端目录结构与代理配置前端源码里有IndexAsideStatic.vue、IndexHeader.vue这些命名明显是后台管理界面。左侧菜单、顶部导航、面包屑都拆成了独立组件update-password.vue是修改密码页。我拿到手会先看package.json判断是Vue2还是Vue3看到vue-router3和vuex3是Vue2看到vue-router4和pinia是Vue3。两者组件写法差距不大但路由和状态管理的API不同照着源码里的import路径改能少踩坑。前后端分离必须处理跨域。开发环境最简单的方式是配置vue.config.js的devServer.proxymodule.exports { devServer: { port: 9527, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }前端请求路径写成/api/asset/list代理把/api前缀对应的目标地址映射到http://localhost:8080最终请求后端http://localhost:8080/api/asset/list。changeOrigin: true让后端拿到的Host头是localhost:8080避免部分后端配置校验Host时报错。一个常见误区是前端代码里直接写完整的http://localhost:8080/api/...这种完整地址不会走代理跨域问题依旧存在。4.2 API请求封装与Token处理axios拦截器是统一处理Token的最佳位置前后端分离项目里几乎都是这套写法import axios from axios import { Message } from element-ui import router from /router const service axios.create({ baseURL: /api, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(admin_token) if (token) { config.headers[Authorization] Bearer token } return config }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { router.push(/login) } return Promise.reject(error) } ) export default service不要在页面里手动拿localStorage拦截器统一处理之后新增页面不用重复写鉴权逻辑。后端返回401时自动跳转登录页Token过期后用户重新登录即可。注意一个约定如果后端自定义响应体里返回code401但HTTP状态码是200那判断逻辑要放在第一个then里而不是拦截器第二个错误函数里。4.3 资产列表页与状态映射资产列表页是系统核心页面用Element UI的el-table渲染列表状态字段用el-tag展示template div classapp-container el-table :dataassetList v-loadingloading el-table-column propassetCode label资产编号 width160 / el-table-column propassetName label资产名称 / el-table-column label资产状态 width120 template slot-scope{ row } el-tag :typestatusMap[row.status].type {{ statusMap[row.status].text }} /el-tag /template /el-table-column el-table-column label操作 width200 template slot-scope{ row } el-button v-ifrow.status 1 typeprimary sizesmall clickopenBorrowDialog(row)借出/el-button el-button v-ifrow.status 2 typewarning sizesmall clickhandleReturn(row)归还/el-button /template /el-table-column /el-table /div /template对应的脚本script import { fetchAssetList, returnAsset } from /api/asset export default { name: AssetList, data() { return { loading: false, assetList: [], statusMap: { 1: { text: 在库, type: success }, 2: { text: 已借出, type: warning }, 3: { text: 维修中, type: danger }, 4: { text: 报废, type: info } } } }, created() { this.loadData() }, methods: { async loadData() { this.loading true try { const res await fetchAssetList({ page: 1, limit: 10 }) this.assetList res.data.records } finally { this.loading false } }, async handleReturn(row) { await returnAsset({ borrowId: row.borrowId }) this.$message.success(归还成功) this.loadData() } } } /script状态映射放在statusMap里页面只写一次避免在模板里堆v-if。借出按钮只在在库状态显示归还按钮只在已借出状态显示这是前端最直接的状态机控制。如果后端返回的字段名不是assetCode而是code模板和statusMap里的key都要跟着改前后端字段名一致性是联调过程中最常见的错误。借出表单提交时把选中的资产id和预计归还时间传给后端async submitBorrow() { const res await this.$http.post(/api/asset/borrow, { assetId: this.currentRow.id, userId: this.$store.state.userInfo.id, expectReturnTime: this.form.expectReturnTime }) if (res.code 200) { this.$message.success(借出成功) this.dialogVisible false this.loadData() } }这里把userId放进请求体是因为用户管理是本系统的一部分管理员可以代替用户在界面里发起借出。如果系统只允许本人操作userId应该从后端Token里解析前端传的字段不能直接信任。后端接口文档里最好注明哪些字段是用户传的、哪些字段是后端自己解析的。前端模块划分前端文件对应功能src/api/asset.js资产信息、借出、归还接口src/api/user.js用户登录、用户管理接口src/views/asset/index.vue资产列表和操作入口src/views/borrow/index.vue借出记录列表与归还操作5. 开箱即用项目启动顺序与高频报错排查5.1 按顺序启动避免环境问题源码包里三个bat文件已经点明流程1-install.bat装依赖2-run.bat启动后端3-build.bat构建前端。在本机跑通时按数据库、后端、前端三步走不要上来就执行run。# 第一步初始化数据库 mysql -uroot -p asset.sql # 第二步启动后端Windows环境用mvnw.cmd mvn spring-boot:run # 第三步启动前端 npm install npm run devasset.sql通过命令行或Navicat导入它会把建表语句和初始管理员账号一起执行完。直接用bat脚本时注意脚本里的路径在Windows默认是反斜杠Mac和Linux需要手动执行mvn和npm命令。5.2 验证业务闭环系统跑起来以后只登录看页面不够要按步骤验证数据库状态流转验证点操作预期结果管理员登录输入源码文档里的admin账号进入后台看到菜单新增资产分类资产分类管理里添加“电脑设备”列表出现新增分类新增资产使用新增分类创建资产资产列表出现记录借出资产点击借出并填写用户和归还时间资产状态变为已借出归还资产在借出记录点击归还资产状态变回在库资产报修在库资产点击报修并填原因状态变为维修中这一步做完说明数据库、后端、前端三个层的状态流转都是通的。如果某个环节状态没变优先看后端日志和数据库里对应行的status字段。状态没变通常不是前端按钮问题而是后端updateById没找到匹配行。5.3 高频报错排查最常遇到的是数据库连接失败问题集中在application.ymlspring: datasource: url: jdbc:mysql://localhost:3306/asset?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456启动时报Cannot create PoolableConnectionFactory时先查3306端口和密码不要一上来改IP。端口占用时可以先用netstat -ano | findstr :3306定位进程再决定改MySQL端口还是改application.yml两个都改容易让自己混乱。前端npm install失败多数原因是node-sass版本跟Node版本不匹配。现在常见方案是把node-sass替换成dart-sass安装命令npm uninstall node-sass npm install sass -D替换完成后重新npm run dev如果页面布局异常清掉浏览器缓存再重启前端。源码包里的.bak文件是修改前的备份改乱了就把.bak替换回.vue文件比重新解压源码快也能通过对比差异查清自己到底改了什么。本文还有配套的精品资源点击获取