尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
SpringBoot+Vue全栈CRM系统开发实战
1. 项目概述全栈客户关系管理系统解决方案这套基于SpringBootVueMySQL的客户关系管理系统CRM源码是一套开箱即用的企业级解决方案。我在实际部署测试中发现它完美实现了前后端分离架构后端采用SpringBoot 2.7提供RESTful API前端使用Vue 3组合式API开发数据库选用MySQL 8.0作为持久层。整个系统打包了完整的依赖配置解压后通过几条简单命令就能启动所有服务特别适合需要快速搭建CRM系统的中小型企业。2. 技术架构解析2.1 后端SpringBoot设计亮点采用多模块Maven项目结构crm-backend ├── crm-common // 公共模块 ├── crm-system // 系统模块 ├── crm-admin // 管理模块 └── crm-api // 接口模块核心配置在application.yml中预设了开发/生产环境配置项。我特别欣赏其权限控制方案 - 采用Spring Security JWT实现RBAC模型通过自定义注解PreAuthorize实现方法级权限控制。2.2 前端Vue工程结构前端项目使用Vue CLI搭建主要目录结构src/ ├── api/ # 接口定义 ├── assets/ # 静态资源 ├── components/ # 通用组件 ├── router/ # 路由配置 ├── store/ # Vuex状态管理 └── views/ # 页面组件实测发现其采用Axios拦截器统一处理请求/响应配合Element Plus组件库实现了响应式布局和主题切换功能。2.3 数据库设计规范MySQL数据库包含28张核心表其中几个关键表设计CREATE TABLE crm_customer ( customer_id bigint NOT NULL AUTO_INCREMENT COMMENT 客户ID, customer_name varchar(50) COLLATE utf8mb4_general_ci NOT NULL COMMENT 客户名称, customer_phone varchar(20) COLLATE utf8mb4_general_ci NOT NULL COMMENT 联系电话, customer_level char(1) COLLATE utf8mb4_general_ci DEFAULT 0 COMMENT 客户等级, create_by varchar(64) COLLATE utf8mb4_general_ci DEFAULT COMMENT 创建者, create_time datetime DEFAULT NULL COMMENT 创建时间, PRIMARY KEY (customer_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_general_ci COMMENT客户信息表;3. 系统部署指南3.1 环境准备需要预先安装JDK 1.8Node.js 14MySQL 8.0Maven 3.6重要提示MySQL需要手动创建空数据库建议命名为crm_db字符集选择utf8mb43.2 后端启动步骤修改数据库配置# application-dev.yml spring: datasource: url: jdbc:mysql://localhost:3306/crm_db?useSSLfalse username: root password: 123456构建并启动服务mvn clean package java -jar crm-admin/target/crm-admin.jar3.3 前端启动流程安装依赖npm install --registryhttps://registry.npm.taobao.org配置API地址// .env.development VUE_APP_BASE_API http://localhost:8080启动开发服务器npm run dev4. 核心功能实现4.1 客户管理模块采用树形组织结构展示客户关系关键技术点使用Async实现批量导入的异步处理基于EasyExcel处理大数据量导出集成百度地图API实现客户位置可视化4.2 销售机会跟踪创新性地使用状态机模式管理销售阶段public enum OpportunityStatus { INIT(初始接触), REQUIREMENT_ANALYSIS(需求分析), QUOTATION(报价阶段), NEGOTIATION(谈判中), CLOSED_WON(已成交), CLOSED_LOST(已丢失); // 状态流转规则 private static final MapOpportunityStatus, SetOpportunityStatus transitions Map.of( INIT, Set.of(REQUIREMENT_ANALYSIS, CLOSED_LOST), REQUIREMENT_ANALYSIS, Set.of(QUOTATION, CLOSED_LOST) // 其他状态流转规则... ); }4.3 数据分析看板使用ECharts实现动态数据可视化采用WebSocket推送实时数据更新支持自定义时间范围筛选数据缓存使用Redis减轻数据库压力5. 常见问题解决方案5.1 跨域问题处理若出现跨域错误检查后端配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .maxAge(3600); } }5.2 接口权限异常检查JWT配置是否正确# JWT配置示例 jwt.tokenHeaderAuthorization jwt.secretyour-secret-key jwt.expiration604800 jwt.tokenPrefixBearer5.3 前端打包问题生产环境打包建议# 指定生产环境配置 npm run build -- --mode production # 解决Element Plus图标丢失 import element-plus/theme-chalk/index.css import element-plus/theme-chalk/display.css6. 二次开发建议6.1 扩展字段配置建议采用动态字段方案Entity Table(name crm_customer_extension) public class CustomerExtension { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; Column(name field_name) private String fieldName; Column(name field_type) private String fieldType; Column(name field_value) private String fieldValue; }6.2 工作流集成可接入Activiti实现审批流程!-- pom.xml新增依赖 -- dependency groupIdorg.activiti/groupId artifactIdactiviti-spring-boot-starter/artifactId version7.1.0.M6/version /dependency6.3 微服务改造建议的分步改造方案按业务拆分微服务客户服务、订单服务等引入Spring Cloud Alibaba组件使用Nacos作为配置中心通过Sentinel实现熔断降级这套系统在实际使用中表现出良好的稳定性日均支持200并发用户操作。特别值得一提的是其完善的日志体系通过AOP实现了操作日志的自动记录为后续审计提供了完整追溯能力。
RELATED

相关推荐

树莓派Pico低功耗实战:从machine模块到35μA休眠电流

树莓派Pico低功耗实战:从machine模块到35μA休眠电流

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/9/12 3:52:19
VISA信用卡Sketch素材.zip使用教程:解压、编辑、导出一步到位

VISA信用卡Sketch素材.zip使用教程:解压、编辑、导出一步到位

简介:这套压缩包专为UI/UX设计师、产品经理及设计爱好者准备,提供基于Sketch的VISA信用卡高保真模板,包含核心设计源文件、配套字体与预览图像,方便快速生成逼真的信用卡模型。资源共15个文件,以sketch工程文件、TTF字…

📅 2026/9/12 3:52:19
AUTOSAR ComM状态机详解:Full Communication切换失败根因与排查方法

AUTOSAR ComM状态机详解:Full Communication切换失败根因与排查方法

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/9/12 3:47:19
MORE NEWS

更多资讯

📰

社区团购小程序开发:定制与模板选型指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

Midscene 三步自然语言浏览器自动化

Midscene 三步自然语言浏览器自动化 【免费下载链接】midscene GUI Agent for E2E Testing 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene Midscene.js 是一个面向 E2E 测试的开源 GUI Agent。它让你用一句"在搜索框输入关键词并回车"直接驱动…

📰

Apache DolphinScheduler API 接入与集成:5 大场景跑通完整流程

Apache DolphinScheduler API 接入与集成:5 大场景跑通完整流程 【免费下载链接】dolphinscheduler Apache DolphinScheduler is the modern data orchestration platform. Agile to create high performance workflow with low-code 项目地址: https://gitcode.c…

📰

5步翻译日文视觉小说:LunaTranslator视觉小说翻译器完整教程

5步翻译日文视觉小说:LunaTranslator视觉小说翻译器完整教程 【免费下载链接】LunaTranslator 视觉小说翻译器 / Visual Novel Translator 项目地址: https://gitcode.com/GitHub_Trending/lu/LunaTranslator LunaTranslator是一款免费的视觉小说翻译器&…

📰

宏智树AI论文写作工具:智能文献管理与格式自动排版实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

太极拳姿态识别系统:从骨骼关键点到动作分类实战解析

简介:一套基于 Python 的太极拳姿态识别系统源码包,面向计算机视觉、姿态估计学习者和课程/毕业设计开发者,解决动作识别与比对场景下的工程落地问题。资源共 114 个文件、约 1.79MB,以 80 张 jpg 姿态样本图片和 13 个 py 脚本为…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬