1. 需求梳理与架构设计1.1 资产管理系统到底要管什么说个场景某公司内部有几百台笔记本、显示器、办公桌椅、服务器还有一堆外设之前一直靠 Excel 台账管。看起来每件资产都有记录实际上账实经常对不上——新入职的人领走一台电脑没登记、部门调整搬走一箱设备没人更新、路由器坏了修过几次也没记录。每次盘点都要拿着打印出来表格一间间屋子核对遇到账实不符就开始互相推诿。这个项目就是用来解决这个问题的。它是一套典型的公司内部资产管理系统核心就五件事资产台账每一件资产录入系统记录名称、编号、分类、金额、购入日期、所属部门、保管人、状态资产流转资产的借用、归还、领用、调拨有记录可查谁经手的、什么时候发生的一清二楚资产维护维修记录、保养计划、报废登记资产全生命周期有迹可循统计报表按分类、部门、状态统计资产数量和金额给管理者一张直观的仪表盘权限控制普通员工只能查看和申请借用资产管理员可以新增、编辑、调拨系统管理员管理用户和角色如果你正准备做类似的内部系统或者你是刚学完 SpringBoot 和 Vue 想找一个完整的练手项目这套东西的参考价值都很高。它没有复杂的分布式中间件也没有花哨的前端动画但企业级 Web 开发最常见的套路——登录鉴权、CRUD、动态查询、跨域联调、打包部署——全都有非常适合拿来理解前后端分离项目的完整链路。1.2 为什么选择前后端分离架构早期给内部用的小系统很多人喜欢用 JSP 或者模板引擎一个应用搞定前后端部署简单。但我做这类系统现在一律前后端分离原因有几个第一前端和后端的工作可以真正并行。后端约定好接口文档专心写 Controller 和 SQL前端对着 Mock 数据开发页面两边互不阻塞。等到联调阶段再对接真实接口效率比串行开发高很多。第二职责边界清晰。后端只负责提供 RESTful API不关心页面长什么样前端只负责渲染和交互不关心 SQL 怎么写。出了问题看日志就能快速定位是接口返回错了还是页面渲染错了甩锅概率直线下降。第三部署和扩容灵活。后端起多个实例做负载均衡前端静态文件扔到 CDN 或者 Nginx 上互不影响。代价就是一开始要处理跨域问题、要设计一套接口规范、部署时多一份 Nginx 配置。不过这些成本是一次性的后面迭代起来非常舒服。1.3 技术选型与版本组合这个项目用的是目前企业内部系统非常主流的组合模块技术选型版本建议后端框架SpringBoot2.7.xORM框架MyBatis3.5.x数据库MySQL5.7 或 8.0前端框架Vue2.6.xUI组件库Element UI2.15.x构建工具Maven / npmMaven 3.6 / Node 14部署方式Nginx Jar包Nginx 1.20 / JDK 1.8SpringBoot 选了 2.7.x 而不是 3.x主要是考虑到 MyBatis 生态的兼容性和大量现存资料都是基于 2.x 的。JDK 用 1.8企业内部系统最稳的选择没有之一。Vue 2 加 Element UI 是经典组合组件成熟、文档全开发速度快。这个版本组合可能谈不上“最新”但一定是最“稳”的——团队协作时遇到问题搜索一下全是现成答案这比追新版本踩坑然后自己解决要划算得多。2. 数据库设计与后端接口规划2.1 五张核心表怎么设计开始写代码之前先把数据库表设计好。这个项目的数据模型不算复杂但字段设计上有些细节值得说道说道。用户表 sys_user字段名类型说明idbigint主键自增usernamevarchar(50)登录名唯一索引passwordvarchar(100)加盐加密后的密码real_namevarchar(50)真实姓名role_idint角色1系统管理员 2资产管理员 3普通员工dept_idbigint所属部门statustinyint1启用 0禁用create_timedatetime创建时间密码不要存明文项目里用的加盐 MD5 或者 BCrypt 都行实际生产我更推荐 BCrypt加盐随机、碰撞难度高。资产分类表 asset_category字段名类型说明idbigint主键category_namevarchar(50)分类名称电脑、显示器、网络设备...category_codevarchar(20)分类编码用于生成资产编号前缀parent_idbigint父分类ID支持两级分类remarkvarchar(255)备注资产信息表 asset_info字段名类型说明idbigint主键asset_codevarchar(50)资产编号如 PC-0001asset_namevarchar(100)资产名称category_idbigint所属分类dept_idbigint使用部门keeper_idbigint保管人用户IDstatustinyint1在库 2使用中 3维修中 4已报废 5已领出pricedecimal(10,2)资产原值purchase_datedate购入日期suppliervarchar(100)供应商remarkvarchar(255)备注del_flagtinyint逻辑删除标记1正常 0已删资产编号的生成规则是“分类编码 序号”比如 PC-0001、NET-0012这样看编号就知道是什么类型的资产。借用记录表 asset_borrow_record字段名类型说明idbigint主键asset_idbigint资产IDborrow_user_idbigint借用人borrow_timedatetime借用时间expected_return_timedatetime预计归还时间actual_return_timedatetime实际归还时间statustinyint1借用中 2已归还 3已逾期remarkvarchar(255)借用说明还有一个维修记录表 asset_repair_record记录哪些资产修过、什么问题、费用多少、维修商是谁、修好没有。这些都是实际项目里摸着需求梳理出来的按这个建表查询和统计的时候会发现非常顺手。表设计最忌讳的就是前期偷懒少字段后期上线发现要统计供应商采购金额结果发现表里根本没存供应商。2.2 后端分层结构与接口规划后端采用经典的三层结构Controller 负责接收请求和返回结果Service 负责业务逻辑Mapper 负责和数据库打交道。分包结构如下com.asset ├── controller │ ├── AuthController.java │ ├── AssetController.java │ ├── AssetBorrowController.java │ └── StatisticsController.java ├── service │ ├── AssetService.java │ ├── AssetServiceImpl.java │ └── UserService.java ├── mapper │ ├── AssetMapper.java │ └── AssetMapper.xml ├── entity │ ├── Asset.java │ ├── User.java │ └── ... ├── common │ ├── Result.java │ ├── ResultCode.java │ └── GlobalExceptionHandler.java └── config └── WebConfig.java接口设计遵循 RESTful 风格核心接口如下方法路径说明POST/api/auth/login登录返回 TokenGET/api/asset/list资产分页列表支持多条件搜索GET/api/asset/detail/{id}资产详情POST/api/asset/add新增资产PUT/api/asset/update编辑资产DELETE/api/asset/delete/{id}删除资产POST/api/asset/borrow申请借用POST/api/asset/return归还资产GET/api/statistics/overview获取资产统计总览统一返回结构 Result 是一个必须具备的设计不然前端解析数据会想骂人public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT fail(Integer code, String message) { ResultT result new Result(); result.setCode(code); result.setMessage(message); return result; } }统一的返回结构配合全局异常处理器MyBatis 抛异常、业务逻辑抛异常、参数校验失败前端拿到的都是统一的 JSON 结构解析逻辑只需要写一次。2.3 代码实操资产新增接口的完整链路拿“新增资产”这个核心功能来拆解。前端提交一个资产表单后端大致做了这么几件事校验参数、校验分类存在、校验资产编号不重复、插入数据库。Controller 层很薄RestController RequestMapping(/api/asset) public class AssetController { Autowired private AssetService assetService; PostMapping(/add) public ResultVoid add(RequestBody Asset asset) { assetService.addAsset(asset); return Result.success(null); } }Service 层做业务校验和事务控制Service public class AssetServiceImpl implements AssetService { Autowired private AssetMapper assetMapper; Override Transactional(rollbackFor Exception.class) public void addAsset(Asset asset) { // 1. 资产编号唯一性校验 int count assetMapper.countByCode(asset.getAssetCode()); if (count 0) { throw new BizException(资产编号已存在); } // 2. 分类校验 if (assetMapper.countCategoryById(asset.getCategoryId()) 0) { throw new BizException(资产分类不存在); } // 3. 默认状态在库 asset.setStatus(1); asset.setDelFlag(1); asset.setCreateTime(new Date()); assetMapper.insert(asset); } }Transactional 一定要加上。虽然新增单表看起来不需要事务但这类系统后期加操作日志、加审批流一个方法里会涉及多张表写入事务是前置保障。Mapper 层用 XML 写动态 SQL这是 MyBatis 最实用的能力insert idinsert parameterTypeAsset useGeneratedKeystrue keyPropertyid INSERT INTO asset_info ( asset_code, asset_name, category_id, dept_id, keeper_id, status, price, purchase_date, supplier, remark, del_flag, create_time ) VALUES ( #{assetCode}, #{assetName}, #{categoryId}, #{deptId}, #{keeperId}, #{status}, #{price}, #{purchaseDate}, #{supplier}, #{remark}, #{delFlag}, #{createTime} ) /insert仔细观察这段代码有两点实践心得第一删除一律用逻辑删除del_flag而不是物理 DELETE这样不会误删造成数据永久丢失第二金额字段price用 decimal(10,2)在前端展示时直接后端转成元不要用 float 或 double否则浮点精度问题会让你抓狂。3. 前端工程搭建与页面实现3.1 Vue 工程初始化与目录规范前端我用 Vue CLI 创建工程同样先规划目录结构src ├── api │ ├── request.js // axios 封装 │ ├── auth.js // 登录相关接口 │ ├── asset.js // 资产相关接口 │ └── statistics.js // 统计相关接口 ├── views │ ├── Login.vue // 登录页 │ ├── Dashboard.vue // 统计仪表盘 │ ├── AssetList.vue // 资产列表 │ ├── AssetEdit.vue // 资产新增/编辑 │ └── BorrowList.vue // 借用管理 ├── router │ └── index.js // 路由配置 守卫 ├── store │ └── index.js // Pinia/Vuex 状态 └── components └── AssetTable.vue // 复用表格组件axios 封装是前端工程质量的关键点统一处理 Token 注入、响应码判断、错误弹窗避免每个页面写一堆重复代码import axios from axios import { Message } from element-ui import router from ../router const request axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截携带 Token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) // 响应拦截统一处理错误码 request.interceptors.response.use( response { const res response.data if (res.code 401) { localStorage.removeItem(token) router.push(/login) return Promise.reject(new Error(未登录或登录已过期)) } if (res.code ! 200) { Message.error(res.message) return Promise.reject(new Error(res.message)) } return res.data }, error { Message.error(网络请求异常请检查服务是否启动) return Promise.reject(error) } )开发环境通过 Vue CLI 的 devServer 配置代理到后端生产环境通过 Nginx 转发前端代码里写的都是相对路径 /api不管开发还是生产都能对上。3.2 核心页面设计思路登录页逻辑比较固定表单校验 → 调用登录接口 → 存储 Token → 跳转首页。值得注意的一个细节是 Token 过期时间判断。后端给 Token 设置 8 小时过期前端在响应拦截器里收到 401 后要清理本地缓存并跳回登录页不然用户会卡在一个白屏页一脸懵。资产列表页是这个系统的门面功能也最全。我的实现方案是顶部几个筛选条件资产名称、资产编号、分类、状态中间是数据表格底部是分页。表格操作列放“编辑、借用、维修、删除”四个按钮根据当前状态动态控制按钮可用性。Element UI 表格自带分页组件配合后端的 PageHelper 插件交互非常顺。前端每次切换页码或者筛选条件重新调用一次列表接口把 pageNum 和 pageSize 传给后端。这里有个排序的细节如果数据量超过几千条不建议前端排序应该把排序字段传给后端由 SQL 层的 ORDER BY 处理否则前端把当前页数据排个序也只是“局部有序”结果很误导人。3.3 前后端联调的三个高频坑这个项目前后端联调阶段最容易出问题的三个点提前给你打预防针第一个坑是时间格式不一致。Java 后端 LocalDateTime 序列化出来可能是带字母 T 的格式比如 2024-01-15T10:30:00前端 Element UI 的日期组件默认用的是空格分隔的格式直接显示会很难看而且回显到日期选择器里还会校验失败。解决方式后端在 application.yml 里统一配置spring: jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8所有查询出来的时间字段都是统一格式前端不用做任何转换。第二个坑是金额单位。数据库存的是分还是元这个项目里的 price 直接用元前端用数字输入框操作就行。如果你遇到用分的项目前端展示一定要除以 100提交时要乘以 100这种单位换算最好封装在 api 层页面里不要写裸的乘除不然改着改着就漏了几个地方。第三个坑是跨域问题。开发环境通过 proxy 转发基本没问题但部署后如果前端和后端不在同一台服务器Nginx 配置没写好浏览器直接报跨域错误。跨域不是前端能独立解决的前后端都要配合后端开启全局 CORS 配置前端用 Nginx 做反向代理通过代理同源访问既解决了跨域又隐藏了后端真实地址。4. 部署上线实操从开发机到服务器4.1 数据库初始化与账号配置第一步是把设计好的 SQL 脚本导入生产环境的 MySQL。我在项目里专门建了一个sql目录里面放init.sql建库建表和data.sql初始数据这样新环境初始化非常省事。连接数据库执行mysql -u root -p source /opt/asset/sql/init.sql; source /opt/asset/sql/data.sql;注意生产环境别直接用 root 账号连应用。我一般会创建一个专门的应用账号比如asset_app只授予业务库的权限CREATE USER asset_app% IDENTIFIED BY 这里写强密码; GRANT SELECT, INSERT, UPDATE, DELETE ON asset_db.* TO asset_app%; FLUSH PRIVILEGES;权限最小化万一应用侧被脱库也不至于影响其他数据库。别问我为什么强调这个见过太多开发环境拿 root 连库、然后所有系统公用一个 root 密码的案例了。4.2 后端打包与启动后端打成可执行 Jar 包这是 SpringBoot 项目最理想的部署形态。打包前先检查 application-prod.yml 的配置数据源指向生产库密码不写在配置里用环境变量注入spring: datasource: url: jdbc:mysql://${DB_HOST}:3306/asset_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: ${DB_USER} password: ${DB_PASSWORD}打包命令很简单mvn clean package -DskipTests打完包确认 target 目录下有 jar 文件传到服务器后启动nohup java -jar asset-system.jar --spring.profiles.activeprod \ --DB_HOST127.0.0.1 --DB_USERasset_app --DB_PASSWORDxxxx \ /app/asset/logs/asset.log 21 nohup 加 让它后台运行日志重定向到固定文件。检查是否启动成功tail -100 /app/asset/logs/asset.log | grep Started curl http://127.0.0.1:8080/api/asset/list第一次启动大概率会遇到端口占用或者配置问题正常的看日志一改就好。这段日志排查能力比写代码本身还重要后面单独说。4.3 前端构建与 Nginx 配置前端构建前先检查.env.production配置文件里面的接口地址要跟 Nginx 的转发规则对上VUE_APP_BASE_URL /api然后构建npm install npm run build构建产物在 dist 目录把它传到服务器的/app/asset/static目录下。接下来是部署的关键Nginx 需要同时承担“静态文件服务”和“反向代理”两个角色配置如下server { listen 80; server_name asset.example.com; # 前端静态文件 root /app/asset/static; index index.html; # 处理 Vue Router 的 History 模式 location / { try_files $uri $uri/ /index.html; } # 后端接口反向代理 location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }这个配置里有两个细节非常关键。第一个是try_files $uri $uri/ /index.html。Vue Router 用的 BrowserRouterHistory 模式在刷新非首页路径时比如直接访问/asset/listNginx 找不到这个物理路径就会 404。加了 try_files 后找不到对应文件就回退到 index.html由前端路由接管页面就能正常渲染。如果用了 Hash 模式地址带 #就没有这个问题但 History 模式更干净所以我保留了这个配置。第二个是proxy_pass http://127.0.0.1:8080;这里后面没有带路径。因为前端请求的是/api/asset/list我要原样转发到后端的/api/asset/list所以 proxy_pass 不能加斜杠或者额外路径。如果你写成http://127.0.0.1:8080/api/那么 Nginx 转发时会把原来的/api前缀去掉后端就接不到带/api的路径必然 404。这个坑我踩过不止一次配置后一定要用 curl 验证一条真实接口。配置改完执行nginx -t检查语法然后nginx -s reload生效。5. 常见问题与排查实录5.1 开发期的典型问题问题1MyBatis 接口报 Invalid bound statement (not found)这个报错频率极高原因基本是 Mapper 接口和 XML 文件的 namespace 不对应或者 XML 文件没有放在 Mapper 接口同包目录下。排查思路很直接打开编译后的 target/classes 目录看有没有对应的 XML 文件。没有的话检查 pom.xml 里是否配置了 resources 包含 *.xmlbuild resources resource directorysrc/main/java/directory includes include**/*.xml/include /includes /resource /resources /build问题2前端请求接口报 404后端一模一样的接口用 Postman 调通这个基本是 devServer proxy 配错了或者前端请求的路径和后端实际路径不一致。打开浏览器 F12看 Network 里实际请求的 URL 是什么对比代理规则一改就好。还有一种情况是 SpringBoot 的 context-path 设置了 /api但 proxy 里又加了一层 /api导致变成 /api/api。问题3MySQL 8.0 连接报错 Public Key Retrieval is not allowed for user如果你本地用的是 MySQL 8.0应用连接时报这个错需要在 JDBC URL 后面加allowPublicKeyRetrievaltrue。这个参数只在客户端连接时报这个错时加正常不需要。5.2 部署期的排查思路任务1后端 jar 包启动失败第一步先看日志尾部找关键字ERROR和Exception。最常见的几个原因端口被占用报Port 8080 was already in use执行netstat -tlnp | grep 8080找到占用进程处理掉配置项缺失启动时用--DB_PASSWORDxxx传参如果环境变量没配对数据源初始化会报账号密码错误内存不足小服务器上跑 MySQL 又跑 Java 应用JVM 默认堆内存可能把内存吃完。启动命令加参数限制下java -Xms256m -Xmx512m -jar asset-system.jar任务2Nginx 报 502 Bad Gateway502 代表 Nginx 连不上后端服务。在服务器上先直接请求后端接口确认后端活着然后检查 Nginx 的 proxy_pass 里的 IP 和端口是否对应后端真正监听的端口。有一个容易忽视的点后端如果只监听了127.0.0.1:8080而 Nginx 和 Java 不在同一台机器那必然 502。部署时要么后端监听0.0.0.0配合防火墙控制要么 Nginx 就用本机回环地址转发。任务3前端页面白屏控制台报各种错先确认静态文件本身是否加载成功看 Network 里 index.html 返回的是不是 200。如果 index.html 页面加载了但 JS 报错很可能是打包时 base 路径配置问题。Vue CLI 默认 base 是/如果 Nginx 部署在子路径下需要改publicPath。5.3 安全与规范注意这几条是我反复踩坑后总结的经验写在这里做一个收尾提醒SQL 注入防范。MyBatis 的#{}是预编译参数占位符安全${}是字符串拼接有注入风险。项目里排序字段这种需要动态拼 SQL 的场景一定要写白名单校验只允许传入已定义的字段列表前端传什么就用什么是极其危险的习惯。敏感信息脱敏。密码不能明文存储、Token 不能存 localStorage 这种话说了无数次但依然有人图省事直接摆。登录接口返回的 Token 存在 localStorage 里有 XSS 风险更稳妥的做法是 HttpOnly Cookie但这个方案需要前后端一起配合。个人项目图简单可以用 localStorage上生产的系统建议认真评估一下。数据备份。资产系统的数据量不大但丢了很麻烦。我习惯在服务器上配置一个每天凌晨的 mysqldump 定时任务0 2 * * * mysqldump -u asset_app -p密码 asset_db /backup/asset_$(date \%Y\%m\%d).sql保留最近 30 天的备份然后定期同步到异地。这套系统做完之后后续还可以扩展资产二维码标签、扫码盘点、审批流对接企业微信这些功能。底子打好了往上加功能都不算难事。如果你正在做类似的系统建议把上面说的这些细节都过一遍尤其是数据库设计和部署那部分能少走很多弯路。