ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

SpringBoot+Vue全栈CRM系统开发实战

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实现了操作日志的自动记录为后续审计提供了完整追溯能力。
返回列表