1. 项目概述
企业内部网络管理系统是现代企业数字化转型的基础设施之一。作为一名长期从事企业级应用开发的工程师，我经常遇到客户需要快速搭建轻量级管理系统的需求。这次分享的SpringBoot+Vue3+MyBatis前后端分离方案，正是经过多个真实项目验证的可靠架构。
这个系统最核心的价值在于：用最精简的技术栈实现企业最常用的管理功能。不同于市面上臃肿的ERP系统，我们聚焦于部门管理、员工档案、公告通知等高频场景，通过清晰的权限控制和响应式界面，让中小型企业也能享受数字化管理的便利。
2. 技术架构解析
2.1 后端技术选型
SpringBoot 2.7.x作为后端框架的选择基于三个实际考量：
- 自动配置特性大幅减少XML配置，我们的项目统计显示能节省约40%的初始化时间
- 内嵌Tomcat服务器使部署变得极其简单，实测从打包到运行只需3条命令：
bash复制
mvn clean package java -jar target/management-system.jar - Starter依赖机制让整合MyBatis、Spring Security等组件变得标准化
数据库选用MySQL 8.0而非5.7版本，主要因为：
- 窗口函数对统计报表的支持
- JSON字段类型便于存储动态扩展属性
- 更好的索引优化效果（实测查询性能提升15-20%）
2.2 前端技术栈
Vue3的组合式API相比Options API带来两个显著优势：
- 功能相关的代码可以集中组织，比如用户权限相关的ref、computed、methods可以放在同一代码块
- 逻辑复用更灵活，我们提取了如下可复用的组合函数：
javascript复制// src/composables/useAuth.js export function useAuth() { const user = ref(null) const checkPermission = (permissionCode) => { // 权限校验逻辑 } return { user, checkPermission } }
Element Plus作为UI库的选择标准：
- 表格组件支持虚拟滚动，万级数据渲染不卡顿
- 表单验证规则配置直观，与Vue3的响应式系统完美契合
- 主题定制系统完善，实测修改主色只需修改1个SCSS变量
3. 核心功能实现
3.1 权限控制系统
RBAC（基于角色的访问控制）模型是我们经过多次迭代后的选择。数据库设计上有几个关键点需要注意：
-
用户-角色多对多关系通过中间表实现：
sql复制CREATE TABLE sys_user_role ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL, role_id INT NOT NULL, UNIQUE KEY uk_user_role (user_id, role_id) ); -
权限标识采用「资源:操作」的格式，如：
- dept:read
- user:create
- notice:delete
-
Spring Security的配置要点：
java复制@Configuration @EnableWebSecurity public class SecurityConfig { @Bean SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/api/dept/**").hasAuthority("dept:manage") .anyRequest().authenticated(); return http.build(); } }
3.2 部门树形结构
递归查询是处理树形结构的经典方案，但存在N+1查询问题。我们的解决方案是：
-
使用MP的@TableField注解处理父子关系：
java复制public class Department { @TableField(exist = false) private List<Department> children; } -
通过一次SQL查询获取全量数据，在内存中构建树：
java复制public List<Department> buildDeptTree(List<Department> allDepts) { // 实现逻辑... } -
前端使用ElTree组件展示，关键配置：
vue复制<el-tree :data="deptTree" :props="{label: 'deptName', children: 'children'}" node-key="deptId" @node-click="handleNodeClick" />
4. 开发实战技巧
4.1 接口联调规范
前后端协作我们采用以下流程：
-
使用Swagger UI生成API文档
java复制@Operation(summary = "创建部门") @PostMapping("/dept") public Result<Long> createDept(@RequestBody @Valid DeptDTO dto) { // ... } -
定义统一的响应格式：
typescript复制interface ApiResult<T> { code: number; message: string; data: T; timestamp: number; } -
前端封装axios实例：
javascript复制const service = axios.create({ baseURL: import.meta.env.VITE_API_URL, timeout: 10000 })
4.2 性能优化点
-
二级缓存配置：
yaml复制mybatis-plus: configuration: cache-enabled: true -
大列表分页查询优化：
sql复制SELECT * FROM sys_notice WHERE notice_status = 1 ORDER BY publish_time DESC LIMIT #{offset}, #{pageSize} -
前端懒加载策略：
vue复制<el-table v-loading="loading" :data="tableData" lazy :load="loadChildren" >
5. 部署指南
5.1 数据库初始化
建议使用Flyway管理数据库变更：
java复制@Bean
public FlywayMigrationStrategy cleanMigrateStrategy() {
return flyway -> {
flyway.repair();
flyway.migrate();
};
}
5.2 生产环境配置
Nginx反向代理关键配置：
nginx复制location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
Docker Compose编排示例：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: 123456
backend:
build: ./backend
ports:
- "8080:8080"
frontend:
build: ./frontend
ports:
- "80:80"
6. 常见问题排查
-
跨域问题解决方案：
java复制@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*"); } } -
MyBatis查询结果映射异常：
- 检查@TableName注解的value是否正确
- 确认@TableField注解的exist属性
- 使用resultMap进行复杂映射
-
Vue页面刷新404：
nginx复制location / { try_files $uri $uri/ /index.html; }
这套系统在多个客户现场部署后，最值得分享的经验是：权限设计要预留扩展空间。我们最初设计的5种角色在实际使用中很快就不够用了，后来改进为角色+权限点的组合模式，通过权限模板功能让配置变得灵活。