SpringBoot+Vue实现小型企业CRM系统开发指南-代码聚汇网

SpringBoot+Vue实现小型企业CRM系统开发指南

独立鱼电影·2026-08-16·阅读 23 GEO检测（免费）

SpringBootVueCRM系统

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

1. 项目背景与核心价值

这个基于SpringBoot+Vue的小型企业客户关系管理系统（CRM）管理平台，是我在指导本科生毕业设计时反复打磨的一个实战项目。它完美解决了学生在做Java全栈项目时的几个痛点：技术栈要主流但不过度复杂、业务逻辑要完整但不过于庞大、数据库设计要规范但不需要分布式架构。

市面上很多号称"适合学习"的项目源码，要么是过度简化到只剩CRUD的玩具，要么是堆砌各种中间件的炫技作品。而这个项目在技术选型上做了精准平衡：

后端采用SpringBoot 2.7 + MyBatis Plus组合，既包含自动配置、注解开发等现代特性，又避免了Spring Cloud的复杂度
前端使用Vue 2.x + Element UI，足够支撑管理后台类项目的交互需求
数据库选用MySQL 8.0，支持窗口函数等新特性但部署简单

提示：项目源码中特别设计了"教学注释版"和"生产精简版"两个分支，前者包含大量中文注释和开发思路说明，后者则是标准的工程化代码结构。

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

2. 系统架构设计解析

2.1 技术栈选型依据

选择SpringBoot而非原生Spring的主要考虑是：

自动配置机制让初学者免于被XML配置困扰
内嵌Tomcat支持一键启动，降低环境搭建门槛
Starter依赖管理能自动处理版本兼容问题

前端选用Vue而非React的原因在于：

中文文档和社区资源更丰富
单文件组件(.vue)的组织方式更符合传统开发习惯
Element UI的表格、表单等组件开箱即用

2.2 分层架构示意图

code复制[Vue前端] ←Axios→ [SpringBoot后端] ←MyBatis→ [MySQL]
    ↑                     ↑
    |                     |
  Element UI           Spring Security

关键设计决策：

前后端完全分离，通过RESTful API交互
后端采用经典三层架构(Controller-Service-Dao)
使用Hutool工具类处理通用功能（如日期转换）

3. 核心功能模块实现

3.1 客户管理模块

数据库表设计示例：

sql复制CREATE TABLE `crm_customer` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL COMMENT '客户名称',
  `level` tinyint DEFAULT '1' COMMENT '1-普通 2-VIP',
  `contact` varchar(20) DEFAULT NULL COMMENT '联系人',
  `phone` varchar(20) DEFAULT NULL COMMENT '联系电话',
  `address` varchar(255) DEFAULT NULL COMMENT '地址',
  `creator_id` bigint DEFAULT NULL COMMENT '创建人ID',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

后端接口关键代码：

java复制@RestController
@RequestMapping("/api/customer")
public class CustomerController {
    
    @Autowired
    private CustomerService customerService;
    
    @GetMapping("/list")
    public Result listCustomers(
        @RequestParam(required = false) String keyword,
        @RequestParam(defaultValue = "1") Integer pageNum,
        @RequestParam(defaultValue = "10") Integer pageSize) {
        
        Page<Customer> page = customerService.queryCustomers(
            keyword, pageNum, pageSize);
        return Result.success(page);
    }
}

3.2 交互日志模块

采用AOP实现无侵入式的操作日志记录：

java复制@Aspect
@Component
public class LogAspect {
    
    @Autowired
    private OperationLogService logService;
    
    @Around("@annotation(logAnnotation)")
    public Object around(ProceedingJoinPoint joinPoint, 
        Log logAnnotation) throws Throwable {
        
        long startTime = System.currentTimeMillis();
        Object result = joinPoint.proceed();
        long costTime = System.currentTimeMillis() - startTime;
        
        // 构建日志对象并保存
        OperationLog log = new OperationLog();
        log.setOperation(logAnnotation.value());
        log.setCostTime(costTime);
        logService.saveLog(log);
        
        return result;
    }
}

4. 开发环境搭建指南

4.1 后端环境准备

JDK 17安装验证：

bash复制java -version
# 应输出类似：openjdk version "17.0.3" 2022-04-19

Maven配置阿里云镜像（settings.xml）：

xml复制<mirror>
  <id>aliyunmaven</id>
  <mirrorOf>*</mirrorOf>
  <name>阿里云公共仓库</name>
  <url>https://maven.aliyun.com/repository/public</url>
</mirror>

数据库初始化：

创建名为crm_db的数据库
执行项目中的schema.sql和data.sql

4.2 前端环境配置

Node.js版本管理建议：

bash复制nvm install 14.19.0
nvm use 14.19.0

解决npm安装慢的问题：

bash复制npm config set registry https://registry.npmmirror.com

项目依赖安装：

bash复制cd frontend
npm install

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")
            .allowCredentials(true)
            .maxAge(3600);
    }
}

生产环境建议通过Nginx配置：

nginx复制location /api {
    proxy_pass http://backend:8080;
    add_header 'Access-Control-Allow-Origin' '$http_origin';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
}

5.2 日期格式序列化问题

统一处理方案（配置Jackson）：

java复制@Configuration
public class JacksonConfig {
    
    @Bean
    public Jackson2ObjectMapperBuilderCustomizer jacksonCustomizer() {
        return builder -> {
            builder.simpleDateFormat("yyyy-MM-dd HH:mm:ss");
            builder.serializers(new LocalDateTimeSerializer(
                DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
        };
    }
}

6. 项目扩展方向建议

6.1 权限控制增强

当前系统采用简单的角色控制，可升级为：

基于Spring Security + JWT的认证方案
引入RBAC模型（用户-角色-权限）
增加数据权限控制（如部门数据隔离）

6.2 数据分析功能

利用MySQL 8.0的窗口函数实现基础分析：

sql复制-- 客户贡献度排名
SELECT 
    customer_id,
    name,
    SUM(amount) AS total_amount,
    RANK() OVER(ORDER BY SUM(amount) DESC) AS rank
FROM orders
GROUP BY customer_id;

6.3 微服务化改造

当业务规模扩大时，可考虑：

将客户、订单等模块拆分为独立服务
引入Spring Cloud Alibaba生态
使用Nacos作为注册中心

7. 教学使用建议

这个项目特别适合作为教学案例的原因在于：

代码规范严格遵循阿里巴巴Java开发手册
每个核心类都有详细的注释说明
提交记录保留了完整的开发过程（可配合Git讲解）
包含典型错误示例和修复方案（如N+1查询问题）

建议的教学路线：

先运行完整项目了解全貌
按commit历史逐步重现开发过程
重点讲解Controller-Service-Dao的协作方式
分析Vue组件间的数据流动

我在实际教学中发现，学生最容易卡壳的点是：

前端axios拦截器的配置
MyBatis Plus的LambdaQueryWrapper使用
Vue的组件生命周期钩子选择

针对这些问题，项目里特别准备了 troubleshooting.md 文档，列出了20个常见问题及解决方法。比如当遇到"Invalid bound statement"错误时，通常是因为Mapper接口与XML文件的命名空间不匹配，需要检查：

XML中的namespace是否全类名正确
Mapper接口是否加了@Mapper注解
是否配置了正确的mapper-locations

这个项目经过3届学生的实战检验，不断优化后已经成为一个非常成熟的Java全栈学习样板。它不仅适合作为毕业设计基础，也可以作为企业级应用的入门参考。特别值得一提的是，项目中包含完整的API文档（基于Swagger UI）和前端组件文档，这对初学者理解全栈协作模式大有裨益