这套企业内部网络管理系统的源码我拿到手之后完整跑了一遍前后端加起来不到半小时就启动成功了。对于手里正管着几十台设备、天天被IP冲突和交换机故障折磨的运维同学来说这套东西的价值在于它不只是一个能交差的课设或者面试项目而是真的把企业内网日常管理中最高频的几个场景——设备台账、IP地址分配、故障工单流转、巡检记录——都做成了能直接用的功能。技术栈是SpringBoot Vue MySQL属于目前中小型企业内部系统最主流、最好招人的组合加上源码本身没有复杂的分布式依赖一台普通电脑就能跑起来非常适合拿来改一改、部署到生产环境。1. 系统整体设计与技术选型1.1 这套系统到底解决了什么问题先说个现实场景。很多公司规模不大网络设备也就几十台上百台但管理起来往往是这样的交换机、路由器、防火墙的型号和IP躺在某个老同事的Excel表格里谁改过配置没人知道某个IP被谁占用了要挨个问网络出了故障全靠微信群吼一声处理没处理、结果怎么样没有记录可查。这套小型网络管理系统的设计目标就是把这些线下Excel和口头沟通的流程搬到线上做三个核心事情管设备、管IP、管工单。如果再往细了说它还包含用户登录和权限控制、公告发布、操作日志算是一个五脏俱全的轻量级业务系统。它的使用对象很明确——企业内部的网络管理员和运维人员管理员负责设备和IP分配普通员工可以提交网络故障工单检修完成后还能做巡检登记。这个定位决定了它的功能不会太重也不会引入消息队列、微服务这些复杂度一个SpringBoot单体后端加一个Vue前端配一台MySQL完全够用。对于想学习前后端分离项目怎么落地的人来说这套代码的结构也比较规整是个不错的参考样本。1.2 为什么是SpringBoot Vue MySQL这个组合先聊聊SpringBoot。企业内部管理系统最怕的不是性能不够而是开发效率低、维护成本高。SpringBoot把Tomcat内嵌进来了不用单独部署Web容器Starter机制让依赖管理变得很省心配置也集中在application.yml这一个文件里加上Spring全家桶自带的AOP、事务管理、Validation校验这些能力写业务代码基本就是Controller调Service、Service调Mapper逻辑非常直白。Vue这边我用的是Vue 3 Vite Element Plus这套组合。Vue的响应式机制让表单校验、列表筛选、弹窗交互这些前端高频操作写起来很顺手Element Plus提供了一套现成的表格、表单、菜单、对话框组件不需要自己费劲去调CSS页面出来就是能看能用的后台管理风格。Vite做开发服务器热更新速度比老一代Webpack快了一个量级日常开发体验顺畅很多。MySQL不多说了企业内网管理系统本质上是数据管理工具设备信息、IP占用记录、工单状态这些数据就是系统的核心资产。MySQL 8.0的窗口函数、JSON能力虽然这里没怎么用上但它的稳定性和易用性对于这种规模的项目来说是性价比最高的选择。1.3 整体架构如何组织这套系统是典型的前后端分离单体架构。前端项目通过Axios发HTTP请求访问后端接口后端SpringBoot处理业务逻辑通过MyBatis-Plus访问MySQL数据库。认证方式用的是JWT用户登录成功后拿到一个带签名的Token之后的请求都在请求头里带上这个Token后端网关层面的拦截器或者Spring Security配置来校验。前端、后端、数据库三个部分的逻辑边界是清晰分开的前端工程目录src/views下按业务模块划分页面src/api下按模块封装接口请求后端工程目录controller层负责接收参数和返回结果service层处理业务逻辑mapper层访问数据库entity层对应数据库表数据库脚本包含建库语句、建表语句和初始化数据三个部分可以在一台机器上全部跑起来前端用开发服务器端口默认5173后端用SpringBoot内嵌Tomcat端口默认8080两者通过代理解决开发环境的跨域问题。部署到生产时可以用Nginx托管前端打包产物并反向代理到后端接口这是后话。2. 后端核心实现与接口设计2.1 后端工程结构如何组织拿到源码后我第一件事是把后端工程的目录结构扫了一遍。基础的SpringBoot项目会包含几个关键配置文件和包层级这套代码的包结构比较标准com.example.network ├── config // 配置类比如跨域配置、MyBatis-Plus配置 ├── controller // 接口层 ├── service // 业务逻辑层 ├── mapper // MyBatis-Plus数据访问层 ├── entity // 数据库实体类 ├── common // 通用返回结果、异常处理、工具类 └── security // JWT认证相关打开pom.xml看了一眼依赖核心的就那几样spring-boot-starter-web、MyBatis-Plus、MySQL驱动、JWT库、Hutool工具包。没有多余的东西这个点很关键——很多网上流传的源码喜欢堆依赖看起来高大上一跑就报依赖冲突。这个项目依赖干净启动成功率自然高。关于JDK版本源码的pom.xml里用的是Spring Boot 2.7.x对应JDK 8或JDK 11都行。如果你电脑上装的是JDK 17甚至更高需要留意版本兼容。网上很多人部署SpringBoot项目失败十有七八是JDK版本和SpringBoot版本对不上。Spring Boot 2.7官方就是基于JDK 8/11设计的JDK 17跑起来偶尔会有模块访问限制的报错不是不能解决但没必要给自己找麻烦。2.2 JWT认证流程是怎么回事说个常见误区很多人以为加了Spring Security就必须写一堆过滤器配置、WebSecurityConfigurerAdapter继承类其实搞小型管理系统用最简单的方案就行。这套源码里做的是在Spring Security基础上配置了JWT的登录认证接口其余接口统一校验Token。具体流程是这样的用户提交用户名密码到 /api/auth/login 接口后端校验用户名密码是否正确正确则用JWT工具类生成一个包含用户ID、用户名、角色信息的Token串前端把Token存到localStorage里之后每次请求都通过请求头 Authorization: Bearer 带上后端配置一个Spring Security过滤器链拦截所有 /api/** 下除登录接口之外的请求解析Token如果Token无效或过期就返回401这个方案的好处是前后端完全分离不需要依赖Session共享或者Cookie后端重启也不影响前端已登录的状态。实际开发中小型管理系统用JWT是最主流的做法也方便以后扩展App端调用同一个接口。生成Token时有一个细节值得注意JWT的密钥和过期时间在application.yml里配置密钥不要太短不然容易被暴力猜解过期时间建议设成2到4小时。如果做的是内部系统不追求极致安全可以允许每个用户同时在多处登录Token里不用存登录设备信息做成单点登录也可以但没必要增加复杂度。2.3 核心模块接口都有哪些按照网络管理员的日常工作习惯这套系统的核心接口主要有四类第一类是设备管理。设备接口对应交换机、路由器、防火墙这些网络设备核心字段包括设备名称、设备类型、品牌型号、管理IP、所在位置、运行状态、备注信息。接口提供分页查询、条件筛选比如按类型筛选、按状态筛选、按关键词搜索、新增、编辑、删除、批量导入导出。第二类是IP地址管理。这个模块解决的是某个IP段里哪些地址被用了、被谁用了的问题。核心字段包括IP地址、子网掩码、网关、所属网段、分配状态空闲/已占用/预留、绑定设备、分配的部门或人员、备注。新增IP地址时后端会做唯一性校验同一个网段里不允许重复分配。第三类是工单管理。员工遇到网络故障可以提交工单填写故障描述和故障现象网络管理员接单后修改工单状态为处理中处理完了填写处理结果并改成已完成。工单模块是整个系统里状态流转最复杂的但它也很有代表性——所有企业管理系统几乎都有类似的审批流或流程流转场景。第四类是巡检记录和公告。巡检记录用于登记日常巡检的设备范围、巡检人、巡检时间和巡检结论公告管理则让管理员可以发布系统维护通知或网络变更通知所有登录用户都能看到。后端统一返回格式为 { code, message, data }code为200表示成功其他为失败。前端Axios拦截器读取这个统一结构非200时弹出错误提示前端代码不用在每个请求里做重复判断。3. 前端页面与交互逻辑拆解3.1 Vue3工程结构和环境要求打开前端工程的package.json发现用的是Vue 3.4.x搭配Vite 5.xUI组件库是Element Plus。Node.js版本要求最好是16.14以上或者18.x长期支持版本更稳妥。拿到源码后不要觉得怎么一堆报错就慌新手最容易翻车的点是Node版本和依赖版本对不上比如Vite 5在Node 14下面跑不动Element Plus也要Node 14以上。前端工程的结构分四块理解就清晰了src/api按模块封装的接口请求函数比如device.js里定义了getDeviceList、createDevice、updateDevice、deleteDevice等方法每个方法内部调Axios实例的get/postsrc/router路由配置文件定义了登录页、首页、设备管理页、IP管理页、工单管理页、公告页等路由src/views页面组件每个业务模块对应一个目录src/store状态管理用Pinia管理当前登录用户的信息、侧边栏折叠状态等全局数据路由有一个需要留意的点使用了动态路由的思路。路由表里虽然写了所有页面的路径但导航守卫会检查当前用户是否登录未登录一律重定向到登录页。管理员和普通员工的差异也不是靠前端隐藏菜单来硬控的而是配合后端接口权限一起做。也就是说前端访问某个页面只是第一步后端接口校验不通过同样拿不到数据。3.2 登录和权限控制是怎么实现的登录页和权限控制是这类系统的门面也是很多人第一次跑前后端联调时最容易出问题的地方。登录表单提交后会调用后端登录接口拿到返回的Token会在内存和localStorage里各存一份。在Vue这边Axios实例的请求拦截器会统一取Token塞进请求头不需要每个接口单独处理。响应拦截器收到HTTP 401时自动帮用户退出登录并清空状态、跳回登录页。路由守卫的逻辑也很直白第一步判断有没有Token。没有Token就走登录页。第二步有Token但刷新了页面需要拿到用户信息来重新渲染菜单和用户名称这个通过调用后端获取当前用户信息的接口实现接口返回完整用户对象包括角色。第三步如果后端返回的用户角色是普通员工某些页面比如巡检记录管理就看不到这个通过在路由meta里标记roles来实现。组件方面页面左侧的菜单用的是Element Plus的el-menu组件根据路由配置的meta.title和meta.icon属性动态渲染出来这样加一个新页面时只需要在路由表里加一行配置菜单会自动跟着出来不用维护两份文件。3.3 核心页面操作体验设备管理页是这套系统使用频次最高的页面。页面上方是搜索栏支持按设备类型下拉选择、按状态选择、按名称关键词模糊搜索点击搜索按钮重新请求列表接口。中间是el-table表格展示了设备的名称、类型、IP、位置、状态等信息状态列用el-tag标签展示在用是绿色下线是灰色故障是红色一眼就能看出设备情况。右侧是操作列用下拉菜单提供编辑、删除、分配IP等操作。表格底部分页用el-pagination页大小10条后端返回总数。工单管理的状态流转在这里体现得比较典型。工单列表页会按待处理/处理中/已完成三个tab做分类用户提交工单时填写故障位置、故障描述、紧急程度管理员在处理中tab下点击接单系统自动把工单状态改为处理中并记录处理人处理完成后点击完成填写处理结果。这里核心是一组状态字段设计得清晰以后随便扩展什么流程都顺手。表单这块Element Plus的el-form配合rules校验规则提交前的必填项和格式校验在浏览器端就完成了后端再做一次参数校验层层把关。数据交互层面所有接口请求都封装在src/api目录下页面组件里不直接写Axios请求这是这个前端工程最值得学习的地方代码复用性和可维护性好了很多。4. 数据库设计与初始化脚本4.1 核心表结构和关联关系看数据库脚本时我比较关注的是表之间是否有关联、是否有可以让新人直接练手的初始化数据。这套源码的数据库名是network_db一共6张核心业务表加1张用户表基本满足一个小型内网管理系统的数据需求。用户表 sys_user 包含用户ID、用户名、密码、昵称、角色、手机号、邮箱、状态、创建时间这些字段。密码字段存的是BCrypt加密后的密文不是明文。这个细节很多人忽略但说真的明文存密码的项目在真实企业环境里是要挨骂的。你可以在导入脚本后用源码里预设的初始化管理员账号登录密码是admin123这样的初始值第一次登录后建议马上修改。设备表 net_device 记录了设备的核心信息字段包括设备ID、设备名称、设备类型、品牌、型号、管理IP、MAC地址、所在位置、运行状态、备注、创建时间和更新时间。这个表的字段设计几乎就是一份企业网络台账的标准模板实际使用时可以根据自己公司的情况加一列采购日期或者维护到期日期都可以直接扩展。IP地址表 net_ip 是这个系统最有特色的表字段包括IP地址、网段、掩码、网关、状态、绑定的设备ID、使用部门、使用人、分配时间和备注。注意这里绑定设备ID是一个外键逻辑关联到设备表的但在脚本里没有写外键约束这个设计是有意为之——很多团队害怕物理外键容易造成锁表和插入顺序问题所以用逻辑外键程序里通过ID关联查询。工单表 net_ticket 字段包括工单号、提交人ID、故障位置、故障描述、紧急程度、状态、处理人ID、处理结果、提交时间、处理时间。工单状态用一个int字段管理0待处理1处理中2已完成3已驳回加上一个状态变更记录的字段用于审计。巡检记录表 net_inspection 和公告表 net_notice 结构相对简单更多的价值在于让这个系统看起来有血有肉而不是只有设备列表从使用场景上讲也确实是网络管理工作的一部分。4.2 初始化脚本如何使用源码里带了一个init.sql脚本文件用Navicat或命令行都可以执行。执行步骤如下打开MySQL客户端执行 CREATE DATABASE network_db DEFAULT CHARACTER SET utf8mb4;utf8mb4比utf8强在能存emoji和生僻字现在建库基本都用这个字符集然后 USE network_db;接着直接执行 mysql source init.sql; 或者用Navicat直接运行SQL文件脚本会创建表、写入初始数据。初始数据里预置了一个管理员账号、一个普通员工测试账号、若干台设备、几十条IP占用记录和几条工单数据。这个设计对刚接触项目的人来说很友好因为不需要自己造数据登录就能看到列表、分页、状态筛选的效果。一个小提示如果你在本地启动时发现某张表不存在或者查询报错先检查SQL脚本是否完整执行尤其是中途有没有报错放弃。MySQL 8.0执行旧脚本一般没问题但如果你用的是5.7注意脚本里是否用了8.0专属语法比如CHECK约束或者某些函数。这套脚本我在8.0上跑是没问题的5.7有没有兼容问题需要实测。5. 本地环境准备与完整启动流程5.1 本地环境安装与版本匹配把源码跑起来之前需要先把环境准备好。我列一个清单直接对照着安装环境组件推荐版本用途说明JDK1.8或11运行SpringBoot后端程序Maven3.6.x或3.8.x依赖管理和构建后端项目MySQL8.0数据存储脚本按8.x编写Node.js16.14或18.x运行Vue前端工程IDEA2022.1打开后端工程有社区版即可VSCode 或 WebStorm任意较新版本打开前端工程开发调试MySQL安装有两点经验第一下载官方安装包时选择MySQL Installer社区版一路Next安装即可自定义安装时记得选上MySQL Server和MySQL Workbench第二root用户的密码务必记好后面配置application.yml要用的就是它。如果你装的是8.0默认认证方式caching_sha2_password可能导致老版本驱动连接不上但源码用的MySQL Connector/J 8.x驱动没这个问题。Maven需要配置阿里云镜像否则下载SpringBoot依赖会慢到怀疑人生这个配置网上搜一下就有改一下settings.xml里的mirrors节点即可。5.2 后端SpringBoot项目的启动步骤前端项目打开后先等Maven把依赖下载完。IDEA右下角会显示正在导入依赖这个过程可能持续几分钟取决于网络。首次运行时在IDEA里找到主启动类类名一般是NetworkManagementApplication右键点击Run即可。启动过程中留意控制台日志看到类似 Tomcat started on port(s): 8080 和 Started NetworkManagementApplication 就说明启动成功了。启动前有一项关键配置要改打开src/main/resources/application.yml检查数据源配置server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/network_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver这里三个坑是高频翻车点。第一个password要填你自己MySQL的root密码不要照抄源码里的示例密码第二个url里serverTimezoneAsia/Shanghai这个参数不能省否则MySQL 8.0默认时区是UTC和你本机时间对不上日期字段会显示差8小时第三个localhost改成127.0.0.1有时能规避一些DNS解析带来的慢连接问题特别是Windows电脑。若IDEA开启带热部署的DevTools修改后端代码或配置文件后会自动重启没有这块配置的话还需要手动重启。控制台的BUILD SUCCESS字样是重要标识看到它后才说明后端处于可用状态此时浏览器打开http://localhost:8080/api/auth/info 这类接口是能出JSON的——如果出JSON的是你好请先登录这类提示说明Restful接口响应正常。# 如果命令行操作后端启动命令是 mvn spring-boot:run5.3 前端Vue项目的启动步骤打开前端工程之前需要先进入项目目录然后依次执行两条命令npm install npm run devnpm install会拉取package.json里声明的所有依赖包括Vue、Element Plus、Axios、Pinia、vue-router等。如果卡在安装了很久说明npm默认源变慢了把镜像切到国内镜像可以明显提速npm config set registry https://registry.npmmirror.com有个很常见的报错是安装后期出现 node-gyp 相关的错误这通常是因为你的Node版本和某些依赖的编译版本不对比如ESLint、Sass这些带二进制编译的包。普通情况下换到Node LTS版本删除node_modules整个目录重新install就能解决。启动成功后终端会打印本地访问地址一般是VITE v5.x ready in 500 ms ➜ Local: http://localhost:5173/Vite的默认端口是5173如果被占用会自动往5174递增注意看清终端提示别打开错端口。此时浏览器打开此地址输入管理员的用户名密码如果一切顺利就能看到左侧菜单、仪表盘统计这些内容了。5.4 请求拦截器和开发代理配置前端需要与后端联调开发环境下最重要的一件事是把前端请求代理到后端8080端口。这个配置在vite.config.js里server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }原理很直白前端发的 /api/xxx 请求Vite开发服务器会把它转发到 http://localhost:8080/api/xxx前端代码里不用写死后端地址切换环境时只改代理配置即可。但如果部署生产环境时Nginx也需要配一段类似的反向代理把 /api 请示转发到后端服务的8080端口这是一套通用的逻辑。排查时如果出现请求能到达后端但返回404一般是后端接口路径和前端请求路径不一致比如前端请求 /api/device/list后端Controller的RequestMapping前缀是 /api/devices 这样拼写不匹配就会导致这个结果。这个问题用浏览器开发者工具的Network面板很快能定位看请求URL与后端接受路径是否一致。6. 实际运行中常见问题与排查技巧6.1 我实际踩过的启动坑清单把项目完整跑通的过程中我遇到了几个有代表性的问题列出来供你参考问题现象根因处理方法后端启动报端口占用8080端口被其他程序占用改application.yml里的server.port比如8081数据库连接超时或者Access denied用户名密码错误或权限不足检查application.yml的username/password可以先用Workbench测试是否能登录MyBatis-Plus报找不到表数据库未导入sql脚本或库名不对查看连接url中network_db是否与建立的库名完全一致重新执行init.sql前端页面白屏或路由空白Vue路由history模式刷新或路径错误开发环境用hash模式更稳如果部署到Nginx需配置try_files回到index.html登录接口返回401Token过期或未带请求头重新登录检查Axios拦截器是否正确设置了Authorizationnpm install报错Node版本过高或网络问题切换到Node LTS删除node_modules重新install6.2 API请求跨域问题后端接口如果直接在浏览器访问能通但前端调不通第一反应应该是跨域。开发环境下通过Vite代理解决已经讲到了关键在于代理配置写在server.proxy里。但如果你没用代理而是直接在后端CorsConfig里写了允许跨域的配置两者会有冲突容易把自己搞晕。一个简单粗暴的判断方式把前端请求的完整URL复制出来如果和你后端Controller的路径完全匹配放到Postman里请求能通那大概率是前端代理没配好。后端的跨域配置也不是必须的生产部署时前后端同域部署跨域问题天然不存在。6.3 修改配置后不生效这个问题很隐蔽很多人改完后端application.yml里的数据库密码重启后仍然连接旧密码原因是IDE里SpringBoot运行配置没有重新加载配置文件。在IDEA里修改配置后需要重新Run或Debug而不是点击刷新或者只重新编译。如果使用DevTools热部署有时候配置文件修改会被忽略保险做法是手动重启一次。前端改了代理配置或环境变量Vite开发服务器会提示需要重启才会生效。老一些的Vite版本不会自动加载.env文件修改新的3.x以上会自动重启。如果页面表现和预期不一致先看Vite终端有没有提示依赖更新或配置更新没提示就强制重启一下成本低、见效快。6.4 关于账号和权限的常见困扰默认管理员账号登录后看到全部菜单普通员工账号登录后看不到巡检记录管理页面。如果你登录后发现看不到某个菜单先去数据库里看下当前账号的角色字段是什么。角色值不匹配会导致菜单渲染不出来比如路由meta里写的管理员角色标识是ADMIN你数据库里存的却是admin大小写不一致就会出问题。密码登录不上的情况大概率是你改了数据库里密码字段但存的是明文而系统登录校验是BCrypt加密比对明文是永远匹配不上密文的。要么用系统里已有的接口去修改密码要么用工具把密码加密后替换到数据库。这个点特别容易踩改数据库密码之前先想清楚加密方式。7. 部署上线建议与后续扩展方向开发和本地运行过关之后真正要放到公司内网给同事用还有几件事必须做。后端打过jar包后命令是 mvn clean package生成的jar在target目录下然后找个Windows或Linux服务器放着用 nohup java -jar network-management.jar 后台运行。前端打的包可以先执行 npm run build产物在dist目录用Nginx来托管静态文件并且把 /api 路径反向代理到后端端口。上线前还有一个影响安全感的关键点改默认密码。源码里初始化的管理员密码是公开写在文档里的如果直接部署到内网被无关人员发现等于门户大开。再一个建议是数据库的备份小型系统虽然数据量不大但网络设备台账、IP分配记录这些数据一旦丢了很难恢复建议每天凌晨用crontab定时执行mysqldump把备份文件留存七天。这套系统后续如果还要扩展方向很明确可以加一个网络拓扑图可视化模块基于前端的关系图谱组件把设备节点的连接关系画出来可以把设备自动发现做进去通过SNMP协议扫描交换机的ARP表自动感知新增设备可以对接企业微信或钉钉的机器人工单创建或完成时自动推送通知。相比从零开发在源码基础上做这些扩展起步成本低很多。这些天跑下来我比较深的体会是可直接运行这几个字的含金量——真正从零搭一套SpringBoot加Vue的工程、写几十个接口、调通前后端联调对一个熟练工来说也得大半天时间。源码本来就该是这个样子下载、配置、启动、上手改而不是先研究几小时文档再碰运气这样学习、改造、上线才划算。返回总目录 基于SpringBoot+Vue的企业内网管理系统源码解析与部署指南
这套企业内部网络管理系统的源码我拿到手之后完整跑了一遍前后端加起来不到半小时就启动成功了。对于手里正管着几十台设备、天天被IP冲突和交换机故障折磨的运维同学来说这套东西的价值在于它不只是一个能交差的课设或者面试项目而是真的把企业内网日常管理中最高频的几个场景——设备台账、IP地址分配、故障工单流转、巡检记录——都做成了能直接用的功能。技术栈是SpringBoot Vue MySQL属于目前中小型企业内部系统最主流、最好招人的组合加上源码本身没有复杂的分布式依赖一台普通电脑就能跑起来非常适合拿来改一改、部署到生产环境。1. 系统整体设计与技术选型1.1 这套系统到底解决了什么问题先说个现实场景。很多公司规模不大网络设备也就几十台上百台但管理起来往往是这样的交换机、路由器、防火墙的型号和IP躺在某个老同事的Excel表格里谁改过配置没人知道某个IP被谁占用了要挨个问网络出了故障全靠微信群吼一声处理没处理、结果怎么样没有记录可查。这套小型网络管理系统的设计目标就是把这些线下Excel和口头沟通的流程搬到线上做三个核心事情管设备、管IP、管工单。如果再往细了说它还包含用户登录和权限控制、公告发布、操作日志算是一个五脏俱全的轻量级业务系统。它的使用对象很明确——企业内部的网络管理员和运维人员管理员负责设备和IP分配普通员工可以提交网络故障工单检修完成后还能做巡检登记。这个定位决定了它的功能不会太重也不会引入消息队列、微服务这些复杂度一个SpringBoot单体后端加一个Vue前端配一台MySQL完全够用。对于想学习前后端分离项目怎么落地的人来说这套代码的结构也比较规整是个不错的参考样本。1.2 为什么是SpringBoot Vue MySQL这个组合先聊聊SpringBoot。企业内部管理系统最怕的不是性能不够而是开发效率低、维护成本高。SpringBoot把Tomcat内嵌进来了不用单独部署Web容器Starter机制让依赖管理变得很省心配置也集中在application.yml这一个文件里加上Spring全家桶自带的AOP、事务管理、Validation校验这些能力写业务代码基本就是Controller调Service、Service调Mapper逻辑非常直白。Vue这边我用的是Vue 3 Vite Element Plus这套组合。Vue的响应式机制让表单校验、列表筛选、弹窗交互这些前端高频操作写起来很顺手Element Plus提供了一套现成的表格、表单、菜单、对话框组件不需要自己费劲去调CSS页面出来就是能看能用的后台管理风格。Vite做开发服务器热更新速度比老一代Webpack快了一个量级日常开发体验顺畅很多。MySQL不多说了企业内网管理系统本质上是数据管理工具设备信息、IP占用记录、工单状态这些数据就是系统的核心资产。MySQL 8.0的窗口函数、JSON能力虽然这里没怎么用上但它的稳定性和易用性对于这种规模的项目来说是性价比最高的选择。1.3 整体架构如何组织这套系统是典型的前后端分离单体架构。前端项目通过Axios发HTTP请求访问后端接口后端SpringBoot处理业务逻辑通过MyBatis-Plus访问MySQL数据库。认证方式用的是JWT用户登录成功后拿到一个带签名的Token之后的请求都在请求头里带上这个Token后端网关层面的拦截器或者Spring Security配置来校验。前端、后端、数据库三个部分的逻辑边界是清晰分开的前端工程目录src/views下按业务模块划分页面src/api下按模块封装接口请求后端工程目录controller层负责接收参数和返回结果service层处理业务逻辑mapper层访问数据库entity层对应数据库表数据库脚本包含建库语句、建表语句和初始化数据三个部分可以在一台机器上全部跑起来前端用开发服务器端口默认5173后端用SpringBoot内嵌Tomcat端口默认8080两者通过代理解决开发环境的跨域问题。部署到生产时可以用Nginx托管前端打包产物并反向代理到后端接口这是后话。2. 后端核心实现与接口设计2.1 后端工程结构如何组织拿到源码后我第一件事是把后端工程的目录结构扫了一遍。基础的SpringBoot项目会包含几个关键配置文件和包层级这套代码的包结构比较标准com.example.network ├── config // 配置类比如跨域配置、MyBatis-Plus配置 ├── controller // 接口层 ├── service // 业务逻辑层 ├── mapper // MyBatis-Plus数据访问层 ├── entity // 数据库实体类 ├── common // 通用返回结果、异常处理、工具类 └── security // JWT认证相关打开pom.xml看了一眼依赖核心的就那几样spring-boot-starter-web、MyBatis-Plus、MySQL驱动、JWT库、Hutool工具包。没有多余的东西这个点很关键——很多网上流传的源码喜欢堆依赖看起来高大上一跑就报依赖冲突。这个项目依赖干净启动成功率自然高。关于JDK版本源码的pom.xml里用的是Spring Boot 2.7.x对应JDK 8或JDK 11都行。如果你电脑上装的是JDK 17甚至更高需要留意版本兼容。网上很多人部署SpringBoot项目失败十有七八是JDK版本和SpringBoot版本对不上。Spring Boot 2.7官方就是基于JDK 8/11设计的JDK 17跑起来偶尔会有模块访问限制的报错不是不能解决但没必要给自己找麻烦。2.2 JWT认证流程是怎么回事说个常见误区很多人以为加了Spring Security就必须写一堆过滤器配置、WebSecurityConfigurerAdapter继承类其实搞小型管理系统用最简单的方案就行。这套源码里做的是在Spring Security基础上配置了JWT的登录认证接口其余接口统一校验Token。具体流程是这样的用户提交用户名密码到 /api/auth/login 接口后端校验用户名密码是否正确正确则用JWT工具类生成一个包含用户ID、用户名、角色信息的Token串前端把Token存到localStorage里之后每次请求都通过请求头 Authorization: Bearer 带上后端配置一个Spring Security过滤器链拦截所有 /api/** 下除登录接口之外的请求解析Token如果Token无效或过期就返回401这个方案的好处是前后端完全分离不需要依赖Session共享或者Cookie后端重启也不影响前端已登录的状态。实际开发中小型管理系统用JWT是最主流的做法也方便以后扩展App端调用同一个接口。生成Token时有一个细节值得注意JWT的密钥和过期时间在application.yml里配置密钥不要太短不然容易被暴力猜解过期时间建议设成2到4小时。如果做的是内部系统不追求极致安全可以允许每个用户同时在多处登录Token里不用存登录设备信息做成单点登录也可以但没必要增加复杂度。2.3 核心模块接口都有哪些按照网络管理员的日常工作习惯这套系统的核心接口主要有四类第一类是设备管理。设备接口对应交换机、路由器、防火墙这些网络设备核心字段包括设备名称、设备类型、品牌型号、管理IP、所在位置、运行状态、备注信息。接口提供分页查询、条件筛选比如按类型筛选、按状态筛选、按关键词搜索、新增、编辑、删除、批量导入导出。第二类是IP地址管理。这个模块解决的是某个IP段里哪些地址被用了、被谁用了的问题。核心字段包括IP地址、子网掩码、网关、所属网段、分配状态空闲/已占用/预留、绑定设备、分配的部门或人员、备注。新增IP地址时后端会做唯一性校验同一个网段里不允许重复分配。第三类是工单管理。员工遇到网络故障可以提交工单填写故障描述和故障现象网络管理员接单后修改工单状态为处理中处理完了填写处理结果并改成已完成。工单模块是整个系统里状态流转最复杂的但它也很有代表性——所有企业管理系统几乎都有类似的审批流或流程流转场景。第四类是巡检记录和公告。巡检记录用于登记日常巡检的设备范围、巡检人、巡检时间和巡检结论公告管理则让管理员可以发布系统维护通知或网络变更通知所有登录用户都能看到。后端统一返回格式为 { code, message, data }code为200表示成功其他为失败。前端Axios拦截器读取这个统一结构非200时弹出错误提示前端代码不用在每个请求里做重复判断。3. 前端页面与交互逻辑拆解3.1 Vue3工程结构和环境要求打开前端工程的package.json发现用的是Vue 3.4.x搭配Vite 5.xUI组件库是Element Plus。Node.js版本要求最好是16.14以上或者18.x长期支持版本更稳妥。拿到源码后不要觉得怎么一堆报错就慌新手最容易翻车的点是Node版本和依赖版本对不上比如Vite 5在Node 14下面跑不动Element Plus也要Node 14以上。前端工程的结构分四块理解就清晰了src/api按模块封装的接口请求函数比如device.js里定义了getDeviceList、createDevice、updateDevice、deleteDevice等方法每个方法内部调Axios实例的get/postsrc/router路由配置文件定义了登录页、首页、设备管理页、IP管理页、工单管理页、公告页等路由src/views页面组件每个业务模块对应一个目录src/store状态管理用Pinia管理当前登录用户的信息、侧边栏折叠状态等全局数据路由有一个需要留意的点使用了动态路由的思路。路由表里虽然写了所有页面的路径但导航守卫会检查当前用户是否登录未登录一律重定向到登录页。管理员和普通员工的差异也不是靠前端隐藏菜单来硬控的而是配合后端接口权限一起做。也就是说前端访问某个页面只是第一步后端接口校验不通过同样拿不到数据。3.2 登录和权限控制是怎么实现的登录页和权限控制是这类系统的门面也是很多人第一次跑前后端联调时最容易出问题的地方。登录表单提交后会调用后端登录接口拿到返回的Token会在内存和localStorage里各存一份。在Vue这边Axios实例的请求拦截器会统一取Token塞进请求头不需要每个接口单独处理。响应拦截器收到HTTP 401时自动帮用户退出登录并清空状态、跳回登录页。路由守卫的逻辑也很直白第一步判断有没有Token。没有Token就走登录页。第二步有Token但刷新了页面需要拿到用户信息来重新渲染菜单和用户名称这个通过调用后端获取当前用户信息的接口实现接口返回完整用户对象包括角色。第三步如果后端返回的用户角色是普通员工某些页面比如巡检记录管理就看不到这个通过在路由meta里标记roles来实现。组件方面页面左侧的菜单用的是Element Plus的el-menu组件根据路由配置的meta.title和meta.icon属性动态渲染出来这样加一个新页面时只需要在路由表里加一行配置菜单会自动跟着出来不用维护两份文件。3.3 核心页面操作体验设备管理页是这套系统使用频次最高的页面。页面上方是搜索栏支持按设备类型下拉选择、按状态选择、按名称关键词模糊搜索点击搜索按钮重新请求列表接口。中间是el-table表格展示了设备的名称、类型、IP、位置、状态等信息状态列用el-tag标签展示在用是绿色下线是灰色故障是红色一眼就能看出设备情况。右侧是操作列用下拉菜单提供编辑、删除、分配IP等操作。表格底部分页用el-pagination页大小10条后端返回总数。工单管理的状态流转在这里体现得比较典型。工单列表页会按待处理/处理中/已完成三个tab做分类用户提交工单时填写故障位置、故障描述、紧急程度管理员在处理中tab下点击接单系统自动把工单状态改为处理中并记录处理人处理完成后点击完成填写处理结果。这里核心是一组状态字段设计得清晰以后随便扩展什么流程都顺手。表单这块Element Plus的el-form配合rules校验规则提交前的必填项和格式校验在浏览器端就完成了后端再做一次参数校验层层把关。数据交互层面所有接口请求都封装在src/api目录下页面组件里不直接写Axios请求这是这个前端工程最值得学习的地方代码复用性和可维护性好了很多。4. 数据库设计与初始化脚本4.1 核心表结构和关联关系看数据库脚本时我比较关注的是表之间是否有关联、是否有可以让新人直接练手的初始化数据。这套源码的数据库名是network_db一共6张核心业务表加1张用户表基本满足一个小型内网管理系统的数据需求。用户表 sys_user 包含用户ID、用户名、密码、昵称、角色、手机号、邮箱、状态、创建时间这些字段。密码字段存的是BCrypt加密后的密文不是明文。这个细节很多人忽略但说真的明文存密码的项目在真实企业环境里是要挨骂的。你可以在导入脚本后用源码里预设的初始化管理员账号登录密码是admin123这样的初始值第一次登录后建议马上修改。设备表 net_device 记录了设备的核心信息字段包括设备ID、设备名称、设备类型、品牌、型号、管理IP、MAC地址、所在位置、运行状态、备注、创建时间和更新时间。这个表的字段设计几乎就是一份企业网络台账的标准模板实际使用时可以根据自己公司的情况加一列采购日期或者维护到期日期都可以直接扩展。IP地址表 net_ip 是这个系统最有特色的表字段包括IP地址、网段、掩码、网关、状态、绑定的设备ID、使用部门、使用人、分配时间和备注。注意这里绑定设备ID是一个外键逻辑关联到设备表的但在脚本里没有写外键约束这个设计是有意为之——很多团队害怕物理外键容易造成锁表和插入顺序问题所以用逻辑外键程序里通过ID关联查询。工单表 net_ticket 字段包括工单号、提交人ID、故障位置、故障描述、紧急程度、状态、处理人ID、处理结果、提交时间、处理时间。工单状态用一个int字段管理0待处理1处理中2已完成3已驳回加上一个状态变更记录的字段用于审计。巡检记录表 net_inspection 和公告表 net_notice 结构相对简单更多的价值在于让这个系统看起来有血有肉而不是只有设备列表从使用场景上讲也确实是网络管理工作的一部分。4.2 初始化脚本如何使用源码里带了一个init.sql脚本文件用Navicat或命令行都可以执行。执行步骤如下打开MySQL客户端执行 CREATE DATABASE network_db DEFAULT CHARACTER SET utf8mb4;utf8mb4比utf8强在能存emoji和生僻字现在建库基本都用这个字符集然后 USE network_db;接着直接执行 mysql source init.sql; 或者用Navicat直接运行SQL文件脚本会创建表、写入初始数据。初始数据里预置了一个管理员账号、一个普通员工测试账号、若干台设备、几十条IP占用记录和几条工单数据。这个设计对刚接触项目的人来说很友好因为不需要自己造数据登录就能看到列表、分页、状态筛选的效果。一个小提示如果你在本地启动时发现某张表不存在或者查询报错先检查SQL脚本是否完整执行尤其是中途有没有报错放弃。MySQL 8.0执行旧脚本一般没问题但如果你用的是5.7注意脚本里是否用了8.0专属语法比如CHECK约束或者某些函数。这套脚本我在8.0上跑是没问题的5.7有没有兼容问题需要实测。5. 本地环境准备与完整启动流程5.1 本地环境安装与版本匹配把源码跑起来之前需要先把环境准备好。我列一个清单直接对照着安装环境组件推荐版本用途说明JDK1.8或11运行SpringBoot后端程序Maven3.6.x或3.8.x依赖管理和构建后端项目MySQL8.0数据存储脚本按8.x编写Node.js16.14或18.x运行Vue前端工程IDEA2022.1打开后端工程有社区版即可VSCode 或 WebStorm任意较新版本打开前端工程开发调试MySQL安装有两点经验第一下载官方安装包时选择MySQL Installer社区版一路Next安装即可自定义安装时记得选上MySQL Server和MySQL Workbench第二root用户的密码务必记好后面配置application.yml要用的就是它。如果你装的是8.0默认认证方式caching_sha2_password可能导致老版本驱动连接不上但源码用的MySQL Connector/J 8.x驱动没这个问题。Maven需要配置阿里云镜像否则下载SpringBoot依赖会慢到怀疑人生这个配置网上搜一下就有改一下settings.xml里的mirrors节点即可。5.2 后端SpringBoot项目的启动步骤前端项目打开后先等Maven把依赖下载完。IDEA右下角会显示正在导入依赖这个过程可能持续几分钟取决于网络。首次运行时在IDEA里找到主启动类类名一般是NetworkManagementApplication右键点击Run即可。启动过程中留意控制台日志看到类似 Tomcat started on port(s): 8080 和 Started NetworkManagementApplication 就说明启动成功了。启动前有一项关键配置要改打开src/main/resources/application.yml检查数据源配置server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/network_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver这里三个坑是高频翻车点。第一个password要填你自己MySQL的root密码不要照抄源码里的示例密码第二个url里serverTimezoneAsia/Shanghai这个参数不能省否则MySQL 8.0默认时区是UTC和你本机时间对不上日期字段会显示差8小时第三个localhost改成127.0.0.1有时能规避一些DNS解析带来的慢连接问题特别是Windows电脑。若IDEA开启带热部署的DevTools修改后端代码或配置文件后会自动重启没有这块配置的话还需要手动重启。控制台的BUILD SUCCESS字样是重要标识看到它后才说明后端处于可用状态此时浏览器打开http://localhost:8080/api/auth/info 这类接口是能出JSON的——如果出JSON的是你好请先登录这类提示说明Restful接口响应正常。# 如果命令行操作后端启动命令是 mvn spring-boot:run5.3 前端Vue项目的启动步骤打开前端工程之前需要先进入项目目录然后依次执行两条命令npm install npm run devnpm install会拉取package.json里声明的所有依赖包括Vue、Element Plus、Axios、Pinia、vue-router等。如果卡在安装了很久说明npm默认源变慢了把镜像切到国内镜像可以明显提速npm config set registry https://registry.npmmirror.com有个很常见的报错是安装后期出现 node-gyp 相关的错误这通常是因为你的Node版本和某些依赖的编译版本不对比如ESLint、Sass这些带二进制编译的包。普通情况下换到Node LTS版本删除node_modules整个目录重新install就能解决。启动成功后终端会打印本地访问地址一般是VITE v5.x ready in 500 ms ➜ Local: http://localhost:5173/Vite的默认端口是5173如果被占用会自动往5174递增注意看清终端提示别打开错端口。此时浏览器打开此地址输入管理员的用户名密码如果一切顺利就能看到左侧菜单、仪表盘统计这些内容了。5.4 请求拦截器和开发代理配置前端需要与后端联调开发环境下最重要的一件事是把前端请求代理到后端8080端口。这个配置在vite.config.js里server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }原理很直白前端发的 /api/xxx 请求Vite开发服务器会把它转发到 http://localhost:8080/api/xxx前端代码里不用写死后端地址切换环境时只改代理配置即可。但如果部署生产环境时Nginx也需要配一段类似的反向代理把 /api 请示转发到后端服务的8080端口这是一套通用的逻辑。排查时如果出现请求能到达后端但返回404一般是后端接口路径和前端请求路径不一致比如前端请求 /api/device/list后端Controller的RequestMapping前缀是 /api/devices 这样拼写不匹配就会导致这个结果。这个问题用浏览器开发者工具的Network面板很快能定位看请求URL与后端接受路径是否一致。6. 实际运行中常见问题与排查技巧6.1 我实际踩过的启动坑清单把项目完整跑通的过程中我遇到了几个有代表性的问题列出来供你参考问题现象根因处理方法后端启动报端口占用8080端口被其他程序占用改application.yml里的server.port比如8081数据库连接超时或者Access denied用户名密码错误或权限不足检查application.yml的username/password可以先用Workbench测试是否能登录MyBatis-Plus报找不到表数据库未导入sql脚本或库名不对查看连接url中network_db是否与建立的库名完全一致重新执行init.sql前端页面白屏或路由空白Vue路由history模式刷新或路径错误开发环境用hash模式更稳如果部署到Nginx需配置try_files回到index.html登录接口返回401Token过期或未带请求头重新登录检查Axios拦截器是否正确设置了Authorizationnpm install报错Node版本过高或网络问题切换到Node LTS删除node_modules重新install6.2 API请求跨域问题后端接口如果直接在浏览器访问能通但前端调不通第一反应应该是跨域。开发环境下通过Vite代理解决已经讲到了关键在于代理配置写在server.proxy里。但如果你没用代理而是直接在后端CorsConfig里写了允许跨域的配置两者会有冲突容易把自己搞晕。一个简单粗暴的判断方式把前端请求的完整URL复制出来如果和你后端Controller的路径完全匹配放到Postman里请求能通那大概率是前端代理没配好。后端的跨域配置也不是必须的生产部署时前后端同域部署跨域问题天然不存在。6.3 修改配置后不生效这个问题很隐蔽很多人改完后端application.yml里的数据库密码重启后仍然连接旧密码原因是IDE里SpringBoot运行配置没有重新加载配置文件。在IDEA里修改配置后需要重新Run或Debug而不是点击刷新或者只重新编译。如果使用DevTools热部署有时候配置文件修改会被忽略保险做法是手动重启一次。前端改了代理配置或环境变量Vite开发服务器会提示需要重启才会生效。老一些的Vite版本不会自动加载.env文件修改新的3.x以上会自动重启。如果页面表现和预期不一致先看Vite终端有没有提示依赖更新或配置更新没提示就强制重启一下成本低、见效快。6.4 关于账号和权限的常见困扰默认管理员账号登录后看到全部菜单普通员工账号登录后看不到巡检记录管理页面。如果你登录后发现看不到某个菜单先去数据库里看下当前账号的角色字段是什么。角色值不匹配会导致菜单渲染不出来比如路由meta里写的管理员角色标识是ADMIN你数据库里存的却是admin大小写不一致就会出问题。密码登录不上的情况大概率是你改了数据库里密码字段但存的是明文而系统登录校验是BCrypt加密比对明文是永远匹配不上密文的。要么用系统里已有的接口去修改密码要么用工具把密码加密后替换到数据库。这个点特别容易踩改数据库密码之前先想清楚加密方式。7. 部署上线建议与后续扩展方向开发和本地运行过关之后真正要放到公司内网给同事用还有几件事必须做。后端打过jar包后命令是 mvn clean package生成的jar在target目录下然后找个Windows或Linux服务器放着用 nohup java -jar network-management.jar 后台运行。前端打的包可以先执行 npm run build产物在dist目录用Nginx来托管静态文件并且把 /api 路径反向代理到后端端口。上线前还有一个影响安全感的关键点改默认密码。源码里初始化的管理员密码是公开写在文档里的如果直接部署到内网被无关人员发现等于门户大开。再一个建议是数据库的备份小型系统虽然数据量不大但网络设备台账、IP分配记录这些数据一旦丢了很难恢复建议每天凌晨用crontab定时执行mysqldump把备份文件留存七天。这套系统后续如果还要扩展方向很明确可以加一个网络拓扑图可视化模块基于前端的关系图谱组件把设备节点的连接关系画出来可以把设备自动发现做进去通过SNMP协议扫描交换机的ARP表自动感知新增设备可以对接企业微信或钉钉的机器人工单创建或完成时自动推送通知。相比从零开发在源码基础上做这些扩展起步成本低很多。这些天跑下来我比较深的体会是可直接运行这几个字的含金量——真正从零搭一套SpringBoot加Vue的工程、写几十个接口、调通前后端联调对一个熟练工来说也得大半天时间。源码本来就该是这个样子下载、配置、启动、上手改而不是先研究几小时文档再碰运气这样学习、改造、上线才划算。返回总目录