SpringBoot+Vue3+MyBatis构建企业级CRM系统实战-代码聚汇网

SpringBoot+Vue3+MyBatis构建企业级CRM系统实战

SpringBootVue3MyBatis

|难度：普通|阅读约 16 分钟

1. 项目概述：基于SpringBoot+Vue3+MyBatis的CRM系统架构解析

这套客户关系管理系统采用前后端分离架构，后端使用SpringBoot 2.7.x框架提供RESTful API服务，前端基于Vue3+Element Plus构建管理界面，数据持久层采用MyBatis 3.5.x与MySQL 8.0交互。系统实现了客户信息管理、销售机会跟踪、合同管理、数据分析等核心CRM功能模块。

技术选型说明：SpringBoot提供快速启动和自动配置能力，Vue3的Composition API更适合复杂业务逻辑组织，MyBatis在复杂SQL场景下比JPA更灵活，MySQL作为成熟的关系型数据库保证数据一致性。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 核心功能模块设计与实现

2.1 后端SpringBoot关键实现

采用三层架构设计：

Controller层：处理HTTP请求，参数校验使用Hibernate Validator

java复制@PostMapping("/clients")
public Result addClient(@Valid @RequestBody ClientDTO dto) {
    return clientService.saveClient(dto);
}

Service层：业务逻辑处理，使用Spring事务管理

java复制@Transactional
public Result saveClient(ClientDTO dto) {
    Client client = convertToEntity(dto);
    clientMapper.insert(client);
    // 关联操作...
}

Mapper层：MyBatis实现数据库操作，动态SQL示例：

xml复制<select id="selectClients" resultType="ClientVO">
    SELECT * FROM t_client
    <where>
        <if test="name != null">AND name LIKE CONCAT('%',#{name},'%')</if>
        <if test="status != null">AND status = #{status}</if>
    </where>
    ORDER BY create_time DESC
</select>

2.2 前端Vue3技术要点

状态管理采用Pinia替代Vuex：

javascript复制// stores/client.js
export const useClientStore = defineStore('client', {
  state: () => ({ clients: [], pagination: {} }),
  actions: {
    async fetchClients(params) {
      const res = await api.getClients(params)
      this.clients = res.data
      this.pagination = res.pagination
    }
  }
})

组合式API实现业务逻辑复用：

javascript复制// hooks/useTable.js
export function useTable(apiFn) {
  const loading = ref(false)
  const tableData = ref([])
  
  const fetchData = async (params) => {
    loading.value = true
    try {
      const res = await apiFn(params)
      tableData.value = res.data
    } finally {
      loading.value = false
    }
  }
  
  return { loading, tableData, fetchData }
}

3. 前后端交互与安全控制

3.1 JWT认证实现方案

后端Spring Security配置：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig {
    @Bean
    SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .sessionManagement()
            .sessionCreationPolicy(SessionCreationPolicy.STATELESS);
        return http.build();
    }
}

前端Axios拦截器处理：

javascript复制// utils/request.js
const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000
})

service.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      return Promise.reject(new Error(res.message || 'Error'))
    }
    return res
  },
  error => {
    if (error.response.status === 401) {
      // 跳转登录
    }
    return Promise.reject(error)
  }
)

4. 数据库设计与性能优化

4.1 MySQL表结构设计

核心表结构示例：

sql复制CREATE TABLE `t_client` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL COMMENT '客户名称',
  `type` tinyint NOT NULL COMMENT '客户类型',
  `level` tinyint DEFAULT NULL COMMENT '客户等级',
  `source` tinyint DEFAULT NULL COMMENT '客户来源',
  `industry` varchar(50) DEFAULT NULL COMMENT '所属行业',
  `status` tinyint NOT NULL DEFAULT '1' COMMENT '状态',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_name` (`name`),
  KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

4.2 MyBatis性能优化实践

分页插件配置：

java复制@Configuration
public class MyBatisConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

二级缓存启用：

xml复制<!-- mybatis-config.xml -->
<settings>
    <setting name="cacheEnabled" value="true"/>
</settings>

<!-- Mapper.xml -->
<cache eviction="LRU" flushInterval="60000" size="512" readOnly="true"/>

5. 系统部署与运维方案

5.1 生产环境部署架构

推荐采用Docker Compose部署方案：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root123
      MYSQL_DATABASE: crm
    volumes:
      - mysql_data:/var/lib/mysql
    ports:
      - "3306:3306"
  
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/crm
      SPRING_DATASOURCE_USERNAME: root
      SPRING_DATASOURCE_PASSWORD: root123
  
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

volumes:
  mysql_data:

5.2 常见问题排查指南

前端打包后空白页问题：

检查路由模式是否为history
确认publicPath配置正确
部署服务器需配置URL重写规则

MyBatis查询结果映射异常：

检查实体类字段与数据库列名是否匹配
使用@Results注解显式指定映射关系
开启mybatis.configuration.map-underscore-to-camel-case自动转换

SpringBoot跨域问题：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            .allowedHeaders("*");
    }
}

6. 项目扩展与二次开发建议

功能扩展方向：

集成WebSocket实现实时消息通知
添加Elasticsearch支持客户信息全文检索
对接企业微信/钉钉等第三方平台

性能监控方案：

SpringBoot Actuator暴露健康检查端点
Prometheus + Grafana监控系统指标
SkyWalking实现分布式链路追踪

代码质量保障：

集成SonarQube进行静态代码分析
使用JaCoCo生成测试覆盖率报告
配置Git Hooks实现提交前检查

开发经验：在实际项目中，建议先完善基础功能模块，再逐步添加高级特性。对于复杂查询场景，可考虑使用MyBatis-Plus提供的Lambda表达式写法提高代码可读性。前端组件建议按业务域划分，保持高内聚低耦合。