SpringBoot+Vue全栈企业项目管理系统开发实战-代码聚汇网

SpringBoot+Vue全栈企业项目管理系统开发实战

CarrieYung

1. 项目概述

企业项目管理系统是现代企业数字化转型的核心工具之一。这套基于SpringBoot+Vue+MySQL的全栈解决方案，是我在实际企业级开发中经过多次迭代优化的成果。系统采用前后端分离架构，后端使用SpringBoot提供RESTful API，前端采用Vue.js构建响应式界面，数据库选用稳定可靠的MySQL。

这套源码最大的特点是"开箱即用"——下载后只需简单配置就能直接运行，省去了从零搭建框架的时间。我在开发时特别注重企业级应用的实际需求，包含了项目管理、任务分配、进度跟踪、团队协作等核心功能模块，同时也考虑了权限控制、数据安全等企业级特性。

2. 技术架构解析

2.1 后端技术栈

SpringBoot 2.7.x作为后端框架，这是我经过多个项目验证的稳定版本。相比原生Spring，它提供了自动配置、内嵌服务器等便利特性，大幅减少了XML配置。我在项目中特别优化了以下几点：

采用多环境配置（dev/test/prod），通过application-{profile}.yml实现
集成了Spring Security实现RBAC权限控制模型
使用MyBatis-Plus作为ORM框架，简化了90%的CRUD操作
添加了Swagger接口文档，方便前后端协作

数据库设计上，MySQL 8.0采用了InnoDB引擎，所有表都设置了合理的索引。特别要注意的是用户-角色-权限的三层关联设计，这是系统安全性的基础。

2.2 前端技术栈

Vue 3.x + Element Plus构成了前端主体。相比Vue 2，Composition API让代码组织更清晰。我在架构上做了这些优化：

使用Vue Router实现动态路由，根据权限加载对应菜单
采用Pinia状态管理，替代原来的Vuex
封装了axios请求拦截器，统一处理401/403等异常
实现了基于角色的组件权限控制（v-permission指令）

前端工程通过Vite构建，相比Webpack启动速度快了5-8倍，热更新几乎瞬间完成。

3. 核心功能实现

3.1 项目管理模块

这是系统的核心功能，包含项目创建、任务分解、甘特图展示等。后端主要接口：

java复制@RestController
@RequestMapping("/api/project")
public class ProjectController {
    
    @PostMapping
    public Result createProject(@Valid @RequestBody ProjectDTO dto) {
        // 项目创建逻辑
    }
    
    @GetMapping("/gantt/{projectId}")
    public Result getGanttData(@PathVariable Long projectId) {
        // 获取甘特图数据
    }
}

前端使用vue-ganttastic实现甘特图，关键是要处理好任务依赖关系的可视化：

javascript复制const ganttOptions = {
    data: tasks,
    viewMode: 'day',
    language: 'zh',
    onTaskChange: (task, changes) => {
        // 处理任务更新
    }
}

3.2 权限控制系统

采用RBAC（基于角色的访问控制）模型，数据库设计如下：

表名	关键字段	说明
sys_user	id, username, password	用户表
sys_role	id, name, code	角色表
sys_menu	id, name, perms	菜单权限表
sys_user_role	user_id, role_id	用户-角色关联
sys_role_menu	role_id, menu_id	角色-菜单关联

权限验证通过Spring Security的过滤器链实现，核心配置：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig {
    
    @Bean
    SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .anyRequest().authenticated()
            .and()
            .addFilterBefore(jwtFilter, UsernamePasswordAuthenticationFilter.class);
        return http.build();
    }
}

4. 部署与运行

4.1 环境准备

需要预先安装：

JDK 1.8+
MySQL 5.7+
Node.js 14+
Maven 3.6+

4.2 数据库初始化

创建数据库：

sql复制CREATE DATABASE pm_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

执行项目中的SQL脚本：

bash复制mysql -u root -p pm_db < sql/pm_db.sql

4.3 后端启动

修改application-dev.yml中的数据库配置
编译打包：

bash复制mvn clean package

运行：

bash复制java -jar target/project-management.jar

4.4 前端启动

安装依赖：

bash复制npm install

修改.env.development中的API地址
启动：

bash复制npm run dev

5. 常见问题解决

5.1 跨域问题

开发环境下常见，解决方案：

后端添加CORS配置：

java复制@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

5.2 接口404错误

可能原因：

后端Controller未添加@RequestMapping
前端请求路径错误
未正确添加@RestController注解

检查步骤：

查看Swagger文档确认接口路径
使用Postman测试接口
检查浏览器控制台Network标签

5.3 页面刷新后空白

这是Vue路由history模式的常见问题，解决方案：

后端添加404重定向（SpringBoot示例）：

java复制@Configuration
public class WebConfig implements WebMvcConfigurer {
    
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/{spring:\\w+}")
                .setViewName("forward:/");
        registry.addViewController("/**/{spring:\\w+}")
                .setViewName("forward:/");
    }
}

或改用hash模式（修改router/index.js）：

javascript复制const router = createRouter({
    history: createWebHashHistory(),
    routes
})

6. 扩展与定制

6.1 添加新模块

以添加"会议室预约"模块为例：

后端：

创建MeetingRoom实体类
添加MeetingRoomMapper接口
实现MeetingRoomService业务逻辑
创建MeetingRoomController暴露API

前端：

在src/views下新建meeting-room目录
创建列表页、表单页等Vue组件
在router/index.js中添加路由
在src/api下添加接口定义

6.2 集成第三方服务

比如集成钉钉通知：

添加SDK依赖：

xml复制<dependency>
    <groupId>com.taobao.top</groupId>
    <artifactId>top-api-sdk</artifactId>
    <version>1.0.0</version>
</dependency>

实现通知服务：

java复制@Service
public class DingTalkService {
    
    public void sendNotice(String content, List<String> users) {
        // 调用钉钉API
    }
}

在需要的地方注入使用：

java复制@Autowired
private DingTalkService dingTalkService;

7. 性能优化建议

7.1 数据库优化

为常用查询字段添加索引：

sql复制ALTER TABLE project_task ADD INDEX idx_project_status (project_id, status);

大表考虑分库分表，使用ShardingSphere
配置连接池参数（application.yml）：

yaml复制spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      connection-timeout: 30000

7.2 前端优化

路由懒加载：

javascript复制const UserManage = () => import('@/views/system/user')

使用keep-alive缓存组件：

html复制<keep-alive :include="cachedViews">
    <router-view />
</keep-alive>

生产环境开启Gzip压缩（vite.config.js）：

javascript复制import viteCompression from 'vite-plugin-compression'

plugins: [
    viteCompression({
        threshold: 10240 // 对大于10KB的文件进行压缩
    })
]

这套系统在实际部署时，建议后端采用Docker容器化部署，前端使用Nginx作为静态资源服务器。对于高并发场景，可以考虑引入Redis缓存热点数据，使用Elasticsearch实现复杂搜索功能。