SpringBoot+Vue3企业级工位管理系统开发实战

1. 项目概述

工位管理系统是现代企业办公场景中的刚需工具，我们团队基于SpringBoot+Vue3+MyBatis技术栈开发了一套完整的企业级解决方案。这个系统采用前后端分离架构，后端使用Java SpringBoot构建RESTful API，前端采用Vue3组合式API开发，数据持久层使用MyBatis操作MySQL数据库，实现了工位预约、权限管理、设备报修等核心功能模块。

提示：系统源码已通过企业级代码审查，包含完整的单元测试和API文档，可直接用于生产环境部署或二次开发。

2. 技术架构解析

2.1 后端技术栈

SpringBoot 2.7.x作为后端框架，配置了以下核心依赖：

xml复制<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.2.2</version>
    </dependency>
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.4.6</version>
    </dependency>
</dependencies>

关键设计要点：

1. 采用三层架构（Controller-Service-Dao）
2. 使用Spring Security实现RBAC权限控制
3. 集成PageHelper实现分页查询
4. 配置MyBatis-Plus代码生成器自动生成基础CRUD代码

2.2 前端技术栈

Vue3组合式API开发，主要技术组件：

javascript复制import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'

const app = createApp(App)
app.use(createPinia())
app.use(ElementPlus)
app.mount('#app')

前端工程特点：

• 使用Pinia状态管理替代Vuex
• 采用Element Plus组件库
• 配置axios拦截器处理JWT认证
• 实现动态路由权限控制

3. 数据库设计

MySQL 8.0数据库包含12张核心表，主要表结构如下：

索引优化方案：

1. 为所有外键字段创建BTREE索引
2. 高频查询字段建立复合索引
3. 使用explain分析慢查询

4. 核心功能实现

4.1 工位预约模块

后端接口示例：

java复制@PostMapping("/book")
@PreAuthorize("hasRole('USER')")
public Result bookSeat(@RequestBody BookingDTO dto) {
    // 检查时间冲突
    if(bookingService.checkConflict(dto)){
        throw new BusinessException("该时段已被预约");
    }
    return Result.success(bookingService.save(dto));
}

前端实现关键点：

vue复制<script setup>
const form = reactive({
  seatId: '',
  date: '',
  timeRange: []
})

const submit = async () => {
  try {
    await bookingApi.submit(form)
    ElMessage.success('预约成功')
  } catch (e) {
    ElMessage.error(e.message)
  }
}
</script>

4.2 权限控制方案

基于Spring Security的权限配置：

java复制@Override
protected void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests()
        .antMatchers("/admin/**").hasRole("ADMIN")
        .antMatchers("/book/**").hasAnyRole("USER", "ADMIN")
        .anyRequest().authenticated()
        .and()
        .addFilter(new JwtAuthenticationFilter(authenticationManager()))
        .addFilter(new JwtAuthorizationFilter(authenticationManager()));
}

5. 部署与运维

5.1 后端部署

1. 打包命令：

bash复制mvn clean package -DskipTests

2. 启动参数配置：

properties复制server.port=8080
spring.datasource.url=jdbc:mysql://localhost:3306/seat_db?useSSL=false
spring.datasource.username=root
spring.datasource.password=123456

5.2 前端部署

1. 生产环境构建：

bash复制npm run build

2. Nginx配置示例：

nginx复制server {
    listen       80;
    server_name  seat.example.com;
    
    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend:8080;
    }
}

6. 开发经验分享

6.1 前后端联调技巧

1. 使用Swagger UI生成API文档
2. 配置axios响应拦截器统一处理错误
3. 开发环境配置代理解决跨域问题

6.2 性能优化实践

1. 使用Redis缓存热点数据
2. 配置MyBatis二级缓存
3. 前端路由懒加载组件

6.3 常见问题排查

1. MyBatis映射问题：

   • 检查mapper.xml中resultMap配置
   • 确认字段名大小写匹配

2. Vue3响应式失效：

   • 复杂对象使用shallowRef
   • 数组操作使用扩展运算符

3. Spring事务失效场景：

   • 检查方法是否为public
   • 确认是否抛出RuntimeException