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

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

王端端·2026-08-28·阅读 22 GEO检测（免费）

SpringBootVueCRM系统

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

1. 项目概述：基于SpringBoot+Vue的客户关系管理系统

这个毕业设计项目采用前后端分离架构，使用SpringBoot+Vue+MySQL技术栈构建了一套完整的客户关系管理(CRM)系统。作为企业数字化转型的核心系统，CRM平台需要处理客户数据管理、销售跟踪、服务记录等核心业务场景，对系统的稳定性、安全性和交互体验都有较高要求。

我在实际开发中发现，采用SpringBoot 2.7作为后端框架，配合Vue 3的组合式API，能够很好地满足这类管理系统的开发需求。SpringBoot的自动配置特性简化了SSM框架的整合过程，而Vue的响应式特性则让前端数据绑定变得异常简单。MySQL 8.0作为关系型数据库，提供了完善的ACID事务支持和JSON数据类型，非常适合存储结构化的客户业务数据。

提示：选择技术栈时需要考虑团队技术储备和项目规模。对于毕业设计这类中小型项目，SpringBoot+Vue的组合既能体现技术深度，又不会过度增加开发复杂度。

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

2. 系统架构设计解析

2.1 技术选型依据

后端选择SpringBoot主要基于以下考量：

内嵌Tomcat服务器，简化部署流程
Starter依赖机制自动管理JAR包版本
完善的AOP支持便于实现日志和权限控制
与MyBatis的天然整合优势

前端选用Vue 3.x版本的核心原因：

Composition API更适合复杂业务逻辑组织
更小的运行时体积和更好的TypeScript支持
丰富的生态系统(Vue Router、Pinia等)
渐进式框架特性适合从简单到复杂的需求扩展

数据库层采用MySQL 8.0的关键优势：

窗口函数等高级SQL特性支持复杂报表查询
完善的索引机制优化查询性能
角色权限管理体系符合企业级安全要求

2.2 系统模块划分

系统主要分为以下核心模块：

权限管理模块：基于RBAC模型，使用Spring Security实现
客户管理模块：客户信息CRUD及标签管理
销售机会模块：销售漏斗可视化与跟进记录
服务工单模块：客户问题处理流程跟踪
数据分析模块：使用ECharts实现业务数据可视化

各模块间通过RESTful API进行通信，采用JWT进行身份认证。这种松耦合的设计使得前后端可以并行开发，也便于后期功能扩展。

3. 核心功能实现细节

3.1 后端关键实现

3.1.1 分层架构设计

采用经典的三层架构：

code复制controller层：接收HTTP请求，参数校验
service层：业务逻辑处理，事务管理
mapper层：数据库操作，MyBatis实现

以客户查询接口为例：

java复制@RestController
@RequestMapping("/api/customer")
public class CustomerController {
    
    @Autowired
    private CustomerService customerService;
    
    @GetMapping("/{id}")
    public Result<CustomerVO> getCustomer(@PathVariable Long id) {
        return Result.success(customerService.getCustomerById(id));
    }
}

@Service
@Transactional
public class CustomerServiceImpl implements CustomerService {
    
    @Autowired
    private CustomerMapper customerMapper;
    
    public CustomerVO getCustomerById(Long id) {
        Customer customer = customerMapper.selectById(id);
        // 数据转换和业务处理
        return convertToVO(customer);
    }
}

3.1.2 数据库设计要点

客户表核心字段设计：

sql复制CREATE TABLE `t_customer` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL COMMENT '客户名称',
  `type` tinyint NOT NULL COMMENT '客户类型',
  `level` tinyint DEFAULT NULL COMMENT '客户等级',
  `source` varchar(20) DEFAULT NULL COMMENT '客户来源',
  `industry` varchar(30) DEFAULT NULL COMMENT '所属行业',
  `contacts` json DEFAULT NULL COMMENT '联系人信息',
  `creator_id` bigint NOT NULL 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_creator` (`creator_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

注意：使用JSON类型存储联系人信息既保持了灵活性，又避免了多表关联查询的复杂度。但要注意JSON字段的索引限制。

3.2 前端关键技术实现

3.2.1 Vue 3组合式API应用

客户列表组件示例：

vue复制<script setup>
import { ref, onMounted } from 'vue'
import { getCustomerList } from '@/api/customer'

const loading = ref(false)
const tableData = ref([])
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

const fetchData = async () => {
  loading.value = true
  try {
    const res = await getCustomerList({
      page: pagination.page,
      size: pagination.size
    })
    tableData.value = res.data.list
    pagination.total = res.data.total
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchData()
})
</script>

3.2.2 状态管理方案

使用Pinia进行全局状态管理：

javascript复制// stores/customer.js
import { defineStore } from 'pinia'

export const useCustomerStore = defineStore('customer', {
  state: () => ({
    currentCustomer: null,
    searchHistory: []
  }),
  actions: {
    setCurrentCustomer(customer) {
      this.currentCustomer = customer
    },
    addSearchHistory(keyword) {
      this.searchHistory.unshift(keyword)
      if (this.searchHistory.length > 5) {
        this.searchHistory.pop()
      }
    }
  }
})

4. 系统部署与运维

4.1 后端部署方案

4.1.1 传统部署方式

打包SpringBoot应用：

bash复制mvn clean package -DskipTests

服务器环境准备：

JDK 11+
MySQL 8.0+
Redis（可选，用于缓存）

启动应用：

bash复制java -jar crm-system.jar --spring.profiles.active=prod

4.1.2 Docker容器化部署

Dockerfile示例：

dockerfile复制FROM openjdk:11-jre-slim
VOLUME /tmp
COPY target/crm-system.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]

使用docker-compose编排：

yaml复制version: '3'
services:
  crm-app:
    build: .
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
      - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/crm
    depends_on:
      - mysql
  
  mysql:
    image: mysql:8.0
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=crm
    volumes:
      - mysql_data:/var/lib/mysql

volumes:
  mysql_data:

4.2 前端部署方案

4.2.1 生产环境构建

bash复制npm run build

生成的dist目录包含所有静态资源，可直接部署到Nginx或Apache。

4.2.2 Nginx配置示例

nginx复制server {
    listen       80;
    server_name  crm.example.com;
    
    location / {
        root   /usr/share/nginx/html/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

5. 开发中的典型问题与解决方案

5.1 跨域问题处理

开发环境下配置SpringBoot允许跨域：

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

生产环境建议通过Nginx反向代理解决跨域，避免直接开放所有来源。

5.2 文件上传大小限制

SpringBoot默认文件上传限制为1MB，需要调整：

yaml复制spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB

同时前端需要处理大文件分片上传：

javascript复制const chunkSize = 2 * 1024 * 1024 // 2MB
const chunks = Math.ceil(file.size / chunkSize)

for (let i = 0; i < chunks; i++) {
  const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize)
  const formData = new FormData()
  formData.append('file', chunk)
  formData.append('chunkNumber', i)
  formData.append('totalChunks', chunks)
  
  await uploadChunk(formData)
}

5.3 数据库连接池优化

配置HikariCP连接池参数：

yaml复制spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      minimum-idle: 5
      idle-timeout: 30000
      max-lifetime: 1800000
      connection-timeout: 30000
      pool-name: CRMHikariPool

重要：连接池参数需要根据实际并发量和服务器配置进行调整。过大的连接数反而会导致性能下降。

6. 论文写作要点与技巧

6.1 技术章节组织建议

系统需求分析：使用用例图和文字描述功能需求与非功能需求
系统设计：包括架构设计、数据库设计、接口设计等
关键技术实现：选择3-5个有技术亮点的功能详细说明
系统测试：单元测试、接口测试、性能测试方案与结果

6.2 图表使用技巧

架构图：使用分层架构图展示系统组成
E-R图：展示核心实体关系
界面截图：选择典型功能界面
性能对比图：如加入缓存前后的响应时间对比

6.3 常见论文问题规避

避免大段代码展示，应该用伪代码或核心代码片段
参考文献需要规范标注，建议使用15篇以上中外文文献
测试数据要真实可验证，避免编造测试结果
格式要符合学校模板要求，特别注意图表编号和引用

7. 项目扩展方向建议

7.1 功能扩展

客户画像分析：基于客户行为数据构建标签体系
智能推荐：使用协同过滤算法推荐相关产品
移动端适配：开发微信小程序或APP版本
工作流引擎：集成Activiti实现复杂业务流程

7.2 技术深化

微服务改造：使用SpringCloud Alibaba拆分模块
实时通信：集成WebSocket实现消息实时推送
大数据分析：使用Flink处理海量客户行为数据
AI集成：使用NLP处理客户咨询内容

在实际开发这个CRM系统的过程中，我发现最大的挑战不在于技术实现，而在于如何设计出符合实际业务场景的数据结构和业务流程。建议开发前先深入了解目标行业的客户管理流程，最好能访谈一线销售人员，这样才能设计出真正实用的系统。