1. 项目概述
这个基于Java SpringBoot+Vue3+MyBatis+MySQL的客户管理系统,是一个典型的前后端分离架构的企业级应用。我在实际开发中发现,这种技术组合特别适合中小型企业客户管理场景,既能保证系统稳定性,又能提供良好的用户体验。
系统采用SpringBoot作为后端框架,Vue3作为前端框架,MyBatis作为ORM层,MySQL作为数据库。前后端完全分离,通过RESTful API进行数据交互。这种架构设计让前后端开发可以并行进行,也便于后期维护和扩展。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术选型解析
2.1 后端技术栈
SpringBoot 2.7.x作为后端框架,主要考虑以下几点:
- 快速开发:自动配置和起步依赖大大简化了项目搭建
- 内嵌Tomcat:无需额外部署Web服务器
- 丰富的生态:与MyBatis、Spring Security等组件无缝集成
MyBatis 3.5.x作为ORM框架的选择理由:
- 灵活的SQL编写能力
- 动态SQL支持
- 与SpringBoot完美整合
- 性能优于Hibernate等全自动ORM
2.2 前端技术栈
Vue3作为前端框架的优势:
- Composition API提供更好的代码组织
- 更好的TypeScript支持
- 更小的打包体积
- 更高效的响应式系统
搭配Element Plus组件库,可以快速构建美观的管理界面。
2.3 数据库设计
MySQL 8.0作为数据库的选择依据:
- 成熟稳定,社区支持好
- 性能满足中小型系统需求
- 与Java生态配合良好
- 支持事务和复杂查询
3. 系统架构设计
3.1 整体架构
系统采用典型的三层架构:
- 表现层:Vue3前端
- 业务逻辑层:SpringBoot后端
- 数据访问层:MyBatis+MySQL
前后端通过HTTP接口通信,接口遵循RESTful规范。
3.2 核心模块划分
- 用户认证模块
- 客户管理模块
- 联系人管理模块
- 销售机会模块
- 报表统计模块
- 系统管理模块
3.3 数据库表设计
主要包含以下表:
- 用户表(sys_user)
- 角色表(sys_role)
- 客户表(crm_customer)
- 联系人表(crm_contact)
- 销售机会表(crm_opportunity)
- 操作日志表(sys_log)
4. 关键功能实现
4.1 用户认证与授权
采用JWT实现无状态认证:
- 用户登录成功后生成Token
- Token包含用户ID和角色信息
- 前端将Token存储在localStorage
- 每次请求携带Token
- 后端通过拦截器验证Token
权限控制采用RBAC模型:
- 用户-角色-权限三级结构
- 前端根据权限动态渲染菜单
- 后端接口添加权限注解
4.2 客户管理功能
核心功能点:
- 客户信息CRUD
- 客户分类管理
- 客户标签管理
- 客户导入导出
- 客户查重合并
技术实现要点:
- MyBatis动态SQL处理复杂查询
- EasyExcel处理Excel导入导出
- Redis缓存常用客户数据
- 分布式锁防止并发修改
4.3 前后端数据交互
接口设计规范:
- 统一响应格式
json复制{
"code": 200,
"message": "success",
"data": {}
}
- 分页参数标准化
- 错误码统一管理
- 接口文档使用Swagger生成
5. 开发环境搭建
5.1 后端环境
- JDK 17
- Maven 3.8+
- IDEA开发工具
- SpringBoot 2.7.x
- MyBatis 3.5.x
- MySQL 8.0
5.2 前端环境
- Node.js 16+
- Vue CLI 5
- Vue 3.2+
- Element Plus 2.2+
- Axios 1.2+
5.3 数据库初始化
- 创建数据库
sql复制CREATE DATABASE crm_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
- 执行初始化SQL脚本
- 配置连接池参数
6. 项目部署方案
6.1 后端部署
- 打包SpringBoot应用
bash复制mvn clean package
- 部署到Tomcat或直接运行jar
bash复制java -jar crm-system.jar
- 配置Nginx反向代理
- 设置JVM参数优化性能
6.2 前端部署
- 构建生产环境代码
bash复制npm run build
- 部署到Nginx
- 配置路由History模式
- 设置Gzip压缩
6.3 数据库部署
- MySQL主从配置
- 定期备份策略
- 性能优化配置
- 监控设置
7. 常见问题解决
7.1 跨域问题
解决方案:
- 后端配置CORS
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*");
}
}
- Nginx配置跨域头
- 开发环境配置代理
7.2 性能优化
- 数据库层面:
- 合理设计索引
- 优化慢查询
- 使用连接池
- 应用层面:
- 启用二级缓存
- 异步处理耗时操作
- 批量操作代替循环
- 前端层面:
- 组件懒加载
- 路由懒加载
- 图片压缩
7.3 安全性问题
- XSS防护:
- 前端过滤输入
- 后端转义输出
- 设置HttpOnly Cookie
- SQL注入防护:
- 使用预编译语句
- MyBatis使用#{}代替${}
- 输入参数校验
- CSRF防护:
- 使用SameSite Cookie
- 添加CSRF Token
- 重要操作二次验证
8. 项目扩展方向
- 移动端适配:开发微信小程序或H5版本
- 工作流引擎:集成Activiti实现业务流程管理
- 消息通知:集成WebSocket实现实时消息
- 数据分析:集成BI工具实现数据可视化
- 微服务化:拆分为多个微服务
9. 开发经验分享
在实际开发中,有几个特别值得注意的点:
-
接口版本控制:从项目开始就规划好API版本策略,可以在URL中添加/v1/前缀,为后续升级留有余地。
-
枚举的使用:对于状态、类型等固定值,使用枚举而不是魔术数字,可以提高代码可读性和可维护性。
-
日志规范:统一日志格式和级别,关键业务操作记录详细日志,方便问题排查。
-
单元测试:虽然初期会增加开发时间,但对于核心业务逻辑,编写单元测试可以大大减少后期维护成本。
-
代码规范:使用Checkstyle、PMD等工具强制代码规范,保持团队代码风格一致。
