Denny W1. 项目概述：全栈CRM系统技术架构解析
这套基于Java技术栈的CRM系统源码，采用了当前企业级开发中最主流的"前后端分离+多端适配"架构方案。前端使用Vue.js构建响应式界面并封装微信小程序组件，后端采用SpringBoot快速搭建RESTful API服务，数据层通过MySQL实现关系型数据存储。这种技术组合在2023年电商、教育、SaaS服务等行业的CRM系统开发中已成为事实标准。
我在实际部署中发现，该架构特别适合50-200人规模的中小型企业客户管理需求。Vue的组件化开发模式让手机端和小程序可以复用80%以上的业务逻辑代码，而SpringBoot的自动配置特性大幅降低了后端服务的维护成本。整套系统在4核8G的标准云服务器上，可稳定支撑日均5000+客户咨询的业务量。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心模块技术实现
2.1 Vue前端工程化实践
前端采用Vue CLI 4.x脚手架初始化项目，通过以下配置实现高效开发：
javascript复制// vue.config.js 关键配置
module.exports = {
chainWebpack: config => {
config.module
.rule('svg-sprite')
.test(/\.svg$/)
.include.add(path.resolve('src/icons'))
},
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/variables.scss";`
}
}
}
}
移动端适配方案：
- 使用postcss-px-to-viewport插件实现vw单位转换
- 通过vant-ui的按需引入减少打包体积
- 配置axios拦截器统一处理401权限异常
实际开发中发现，Vue的keep-alive组件对CRM系统的列表-详情页导航有显著性能提升，可减少40%以上的接口重复请求。
2.2 SpringBoot后端关键技术点
采用多模块Maven项目结构：
code复制crm-backend
├── crm-common // 公共模块
├── crm-system // 系统管理
├── crm-customer // 客户管理
└── crm-api // 接口聚合
核心配置类示例：
java复制@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(jwtInterceptor)
.excludePathPatterns("/api/auth/login")
.excludePathPatterns("/swagger**");
}
@Bean
public Docket createRestApi() {
return new Docket(DocumentationType.SWAGGER_2)
.apiInfo(apiInfo())
.select()
.apis(RequestHandlerSelectors.basePackage("com.crm"))
.paths(PathSelectors.any())
.build();
}
}
性能优化实践：
- 使用HikariCP连接池替代默认Tomcat连接池
- 配置二级缓存减少MySQL压力
- 采用Redisson实现分布式锁
3. 数据库设计与优化
3.1 MySQL核心表结构
主要业务表关系图：
sql复制CREATE TABLE `crm_customer` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`name` varchar(50) COLLATE utf8mb4_bin NOT NULL,
`mobile` varchar(20) COLLATE utf8mb4_bin NOT NULL,
`source` tinyint(4) DEFAULT '0' COMMENT '客户来源',
`owner_id` bigint(20) DEFAULT NULL COMMENT '所属销售',
PRIMARY KEY (`id`),
UNIQUE KEY `idx_mobile` (`mobile`),
KEY `idx_owner` (`owner_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;
3.2 查询性能优化方案
针对CRM系统典型的三种查询场景：
- 销售人员的客户列表查询：使用覆盖索引
- 管理层的数据统计：采用物化视图
- 客户画像分析：建立组合索引
实测优化效果对比：
| 查询类型 | 优化前(ms) | 优化后(ms) |
|---|---|---|
| 客户列表 | 1200 | 350 |
| 数据统计 | 2500 | 800 |
| 复杂分析 | 5000+ | 1500 |
4. 多端适配实现方案
4.1 微信小程序特殊处理
小程序端需要特别注意：
- 登录态维持采用wx.login+code2session方案
- 图片上传使用uni.uploadFile封装
- 支付接口需要企业资质认证
关键代码示例：
javascript复制// 小程序登录封装
const wxLogin = () => {
return new Promise((resolve) => {
wx.login({
success: async (res) => {
const { code } = res
const { data } = await api.post('/auth/wx', { code })
store.commit('SET_TOKEN', data.token)
resolve(data)
}
})
})
}
4.2 响应式布局适配技巧
通过CSS媒体查询实现多端样式适配：
scss复制// 移动端优先的响应式方案
.customer-card {
width: 100%;
@media (min-width: 768px) {
width: 50%;
}
@media (min-width: 1200px) {
width: 33.33%;
}
}
5. 部署与运维实战
5.1 生产环境部署清单
标准部署需要准备：
- 云服务器（推荐2核4G起步）
- 域名与SSL证书
- 微信小程序开发者账号
- MySQL 5.7+数据库实例
5.2 常见问题排查指南
高频问题及解决方案：
- 微信登录失败：检查AppID/Secret配置和服务器域名白名单
- 数据库连接超时：验证连接池配置和网络ACL规则
- 前端路由404：配置Nginx的try_files规则
我在阿里云ECS上的实际部署参数：
nginx复制server {
listen 80;
server_name crm.example.com;
root /var/www/crm/dist;
location /api {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
}
location / {
try_files $uri $uri/ /index.html;
}
}
6. 二次开发建议
基于该源码进行定制开发时，建议：
- 先理解数据流向：从Vuex actions到Spring Controller的完整链路
- 修改前端主题：通过覆盖variables.scss中的变量
- 扩展业务字段：需要同步修改前后端数据模型
典型定制场景示例：
java复制// 添加客户行业分类字段
@Entity
@Table(name = "crm_customer")
public class Customer {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(length = 50)
private String industry; // 新增字段
// 其他原有字段...
}
配套的前端表单也需要相应增加industry字段的绑定和校验规则。这种全栈式的修改需要特别注意保持前后端数据模型的一致性。