基于springboot+vue客户关系管理系统
一、项目概述
1.1 项目背景
在现代化企业经营过程中，客户资源、销售订单、企业资讯是企业核心经营数据。传统线下纸质台账、Excel 表格管理客户与订单存在数据易丢失、查询效率低、无法直观统计销售数据、多角色数据权限混乱等痛点。为实现企业客户数字化管理、订单全流程线上维护、经营数据可视化分析，搭建企业客户关系管理系统（CRM）。
系统分为前台用户端（企业员工日常操作：录入客户、新增订单、查看资讯、个人中心）与后台管理员端（系统全数据管理、销量统计、账号权限管控），基于 SpringBoot+Vue 前后端分离架构开发，覆盖客户信息、销售订单、新闻资讯、轮播图、系统用户全生命周期管理，配套 ECharts 销量柱状图可视化分析，满足中小企业客户关系数字化运营需求。
1.2 项目目标
前台员工端目标
员工登录后可维护客户基础信息、新增 / 编辑销售订单；
浏览企业新闻资讯、查看首页轮播宣传图；
个人中心修改账号基础信息，统一操作入口。
后台管理员端目标
统一管理管理员账号、普通员工用户账号；
维护前台首页轮播图、企业新闻资讯；
全量管理销售订单、客户信息，支持条件检索、增删改查；
销量数据可视化统计，直观查看各商品销售体量；
技术实现目标
采用 SpringBoot+Vue 前后端分离架构，代码分层解耦，易维护扩展；
实现 JWT 身份认证、多角色登录区分（管理员 / 普通员工）；
支持文件上传（客户头像、资讯配图、轮播图）、分页查询、模糊检索；
ECharts 图表完成销量数据可视化统计；
统一全局异常处理、接口返回规范，保证系统稳定运行。
1.3 技术栈选型
后端技术（SpringBoot）
核心框架：SpringBoot 2.7.x
ORM 持久层：MyBatis-Plus（封装 CRUD、内置分页插件、逻辑删除）
数据库：MySQL 8.0（InnoDB 引擎、utf8mb4 字符集）
安全认证：JWT（区分管理员 / 员工角色、登录 Token 校验）
工具类：Hutool（日期处理、文件工具、加密工具）、Lombok（简化实体类 get/set）
文件存储：本地服务器文件存储（图片、头像、轮播图）
接口规范：RESTful 风格接口，统一 JSON 返回封装
辅助工具：EasyExcel（预留订单、客户数据导出扩展）
前端技术（Vue2 + Element UI）
核心框架：Vue2、Vue Router（路由导航、页面缓存）
UI 组件库：Element UI（管理后台深色侧边栏、前台浅色表单页面）
网络请求：Axios（请求拦截自动携带 Token、响应拦截捕获登录失效）
可视化图表：ECharts（销量柱状统计图表弹窗）
文件上传：el-upload 组件（客户头像、资讯图片、轮播图上传）
表单组件：日期选择器、输入框、下拉选择、分页组件
本地存储：localStorage（记住密码、存储登录 Token）
开发 & 部署工具
后端开发：IDEA
前端开发：VS Code
数据库工具：Navicat Premium
版本控制：Git
部署方式：SpringBoot 内置 Tomcat、Nginx 反向代理前后端静态资源
1.4 系统角色划分
管理员角色
拥有系统全部管理权限，登录后台管理页面，可管理管理员账号、普通员工、轮播图、新闻资讯、销售订单、客户信息，查看销量统计图表。普通员工（前台用户）
仅可登录前台业务页面，操作客户信息、销售订单、浏览新闻资讯、访问个人中心，无后台数据管理权限。
二、系统功能模块详细设计
2.1 登录模块（统一登录入口，区分角色）
页面元素：账号输入框、密码输入框、角色单选框（管理员 / 用户）、登录按钮；
核心功能：
表单非空校验，账号密码不能为空；
根据选择角色区分登录渠道：管理员跳转后台管理首页，员工跳转前台业务首页；
后端校验账号密码、角色匹配，校验通过生成 JWT Token 返回前端；
Token 存储至 localStorage，后续所有接口自动携带完成身份鉴权；
补充：员工前台独立登录页面支持「记住密码」勾选框，本地缓存账号密码，底部提供注册入口。
2.2 前台员工端功能模块（浅色业务页面）
2.2.1 前台首页
顶部横幅轮播图：后台配置宣传图片自动轮播；
左侧固定侧边导航栏：首页、销量订单、新闻资讯、个人中心；
顶部状态栏：展示当前城市、实时温度、系统时间；
核心入口：快速跳转订单新增、客户信息录入页面。
2.2.2 客户信息管理页面
表单字段：客户姓名、联系方式、客户地址、兴趣爱好、客户头像上传；
功能逻辑：
员工填写客户基础资料，上传客户头像图片；
保存按钮提交表单数据至后端，新增 / 更新客户记录；
取消按钮清空表单，返回首页；
支持查询已有客户信息，回显表单编辑修改。
2.2.3 销量订单管理页面
订单表单字段：订单编号、商品名称、购买数量、商品单价、客户姓名、客户联系方式、订单状态、付款方式、发货日期、收货日期；
业务功能：
自动生成唯一订单编号，支持手动修改；
日期选择器选取发货、收货时间；
填写完成点击保存，新增销售订单；
可查询历史订单，回显全部字段进行编辑修改；
订单数据同步至后台统计模块，用于销量图表计算。
2.2.4 新闻资讯页面
展示后台管理员发布的企业新闻资讯，包含资讯标题、配图、正文详情，员工可点击查看完整资讯内容。
2.2.5 个人中心
员工查看、修改自身账号姓名、手机号、头像等基础信息，修改登录密码。
2.3 后台管理员端功能模块（深色侧边管理系统）
后台左侧侧边菜单栏包含：首页、管理员管理、新闻资讯管理、销量订单管理、轮播图管理、用户管理、客户信息管理。
2.3.1 后台首页仪表盘
欢迎文字展示，作为后台系统总入口，快速切换各功能菜单标签页。
2.3.2 管理员管理
分页列表展示全部管理员账号；
支持新增、修改、删除管理员账号；
条件检索：账号名称模糊查询。
2.3.3 用户管理（普通员工账号）
管理前台所有员工账号，提供新增、编辑、删除、分页查询功能，管控员工登录权限。
2.3.4 轮播图管理
维护前台首页顶部轮播宣传图：上传图片、配置跳转链接、设置排序权重、启用 / 下线轮播图。
2.3.5 新闻资讯管理
资讯列表字段：序号、资讯标题、配图、操作按钮（详情）；
顶部操作按钮：新增、修改、批量删除；
检索功能：输入标题关键词模糊搜索资讯；
新增 / 编辑资讯：上传封面配图、填写标题、富文本编辑资讯正文；
删除功能：单条 / 批量删除资讯，系统弹出删除成功提示。
2.3.6 客户信息管理
全量管理所有员工录入的客户数据：分页列表、条件检索、新增、编辑、删除、查看客户详情，统一维护企业客户资源。
2.3.7 销量订单管理
订单列表字段：序号、订单编号、商品、客户、数量、金额、订单状态、操作详情按钮；
顶部功能：新增订单、修改、删除、销量统计按钮；
检索条件：订单编号模糊搜索；
销量统计弹窗：点击后弹出 ECharts 柱状图，横轴为商品名称，纵轴为销售数量，直观展示各商品销量对比；
订单详情：查看完整订单全部字段信息，支持后台直接修改订单数据。
三、数据库设计
数据库名称：crm_enterprise，字符集 utf8mb4，InnoDB 引擎，所有表添加逻辑删除字段is_delete（0 未删除，1 已删除）。
3.1 核心数据表结构
（1）sys_user 用户表（管理员 + 普通员工）
| 字段名 | 字段类型 | 约束 | 说明 |
|---|---|---|---|
| id | bigint | 主键自增 | 用户 ID |
| username | varchar(50) | 非空、唯一 | 登录账号 |
| password | varchar(100) | 非空 | 加密密码 |
| real_name | varchar(30) | 非空 | 用户姓名 |
| avatar | varchar(255) | 可空 | 用户头像路径 |
| phone | varchar(11) | 可空 | 手机号 |
| role | tinyint | 非空 | 1 = 管理员 2 = 普通员工 |
| create_time | datetime | 默认当前时间 | 创建时间 |
| update_time | datetime | 更新自动赋值 | 修改时间 |
| is_delete | tinyint | 默认 0 | 逻辑删除 |
（2）banner 轮播图表
| 字段名 | 字段类型 | 约束 | 说明 |
|---|---|---|---|
| id | bigint | 主键自增 | 轮播 ID |
| img_url | varchar(255) | 非空 | 轮播图片地址 |
| link_url | varchar(255) | 可空 | 跳转链接 |
| sort | int | 默认 1 | 排序权重 |
| status | tinyint | 默认 1 | 1 启用 0 下线 |
| create_time | datetime | 默认当前时间 | 创建时间 |
| is_delete | tinyint | 默认 0 | 逻辑删除 |
（3）news 新闻资讯表
| 字段名 | 字段类型 | 约束 | 说明 |
|---|---|---|---|
| id | bigint | 主键自增 | 资讯 ID |
| title | varchar(100) | 非空 | 资讯标题 |
| img_url | varchar(255) | 可空 | 资讯封面图 |
| content | text | 可空 | 资讯正文富文本 |
| create_time | datetime | 默认当前时间 | 发布时间 |
| is_delete | tinyint | 默认 0 | 逻辑删除 |
（4）customer 客户信息表
| 字段名 | 字段类型 | 约束 | 说明 |
|---|---|---|---|
| id | bigint | 主键自增 | 客户 ID |
| customer_name | varchar(50) | 非空 | 客户姓名 |
| phone | varchar(11) | 可空 | 客户联系方式 |
| address | varchar(200) | 可空 | 客户地址 |
| hobby | varchar(200) | 可空 | 兴趣爱好 |
| avatar | varchar(255) | 可空 | 客户头像 |
| create_user | bigint | 非空 | 录入员工 ID（关联 sys_user） |
| create_time | datetime | 默认当前时间 | 创建时间 |
| is_delete | tinyint | 默认 0 | 逻辑删除 |
（5）sales_order 销售订单表（核心业务表）
| 字段名 | 字段类型 | 约束 | 说明 |
|---|---|---|---|
| id | bigint | 主键自增 | 订单 ID |
| order_no | varchar(32) | 非空、唯一 | 订单编号 |
| goods_name | varchar(100) | 非空 | 商品名称 |
| num | int | 非空 | 购买数量 |
| price | decimal(10,2) | 非空 | 商品单价 |
| customer_id | bigint | 非空 | 关联客户 ID |
| customer_name | varchar(50) | 非空 | 客户姓名（冗余，方便查询） |
| customer_phone | varchar(11) | 可空 | 客户联系方式 |
| order_status | varchar(30) | 可空 | 订单状态（待付款 / 已发货 / 已完成） |
| pay_type | varchar(30) | 可空 | 付款方式（微信 / 支付宝 / 对公转账） |
| send_date | date | 可空 | 发货日期 |
| receive_date | date | 可空 | 收货日期 |
| create_user | bigint | 非空 | 录入员工 ID |
| create_time | datetime | 默认当前时间 | 下单时间 |
| is_delete | tinyint | 默认 0 | 逻辑删除 |
四、后端 SpringBoot 项目分层架构设计
4.1 项目包结构
com.crm ├── CrmApplication.java // SpringBoot启动类 ├── config // 全局配置类 │ ├── CorsConfig // 跨域配置 │ ├── JwtConfig // JWT令牌配置 │ ├── MyBatisPlusConfig // MyBatis-Plus分页、逻辑删除配置 │ ├── UploadConfig // 文件上传路径配置 │ └── WebConfig // 拦截器、静态资源映射 ├── controller // 控制层（接收前端请求） │ ├── AdminController // 管理员账号接口 │ ├── BannerController // 轮播图接口 │ ├── CustomerController// 客户信息接口 │ ├── NewsController // 新闻资讯接口 │ ├── OrderController // 销售订单、销量统计接口 │ └── UserController // 员工登录、注册、个人中心接口 ├── entity // 数据库实体类（对应数据表） │ ├── SysUser │ ├── Banner │ ├── News │ ├── Customer │ └── SalesOrder ├── mapper // Mapper层（MyBatis-Plus） │ ├── SysUserMapper │ ├── BannerMapper │ ├── NewsMapper │ ├── CustomerMapper │ └── SalesOrderMapper ├── service // 业务逻辑层 │ ├── impl // Service实现类 │ │ ├── SysUserServiceImpl │ │ ├── BannerServiceImpl │ │ ├── NewsServiceImpl │ │ ├── CustomerServiceImpl │ │ └── OrderServiceImpl │ ├── SysUserService │ ├── BannerService │ ├── NewsService │ ├── CustomerService │ └── OrderService ├── util // 工具类 │ ├── JwtUtil // Token生成、解析、校验工具 │ ├── ResultUtil // 统一返回结果封装工具 │ ├── UploadFileUtil // 图片上传处理工具 │ └── DateUtil // 日期格式化工具 ├── dto // 请求入参DTO（接收前端表单、检索条件） │ ├── LoginDTO // 登录接收账号密码角色 │ ├── OrderQueryDTO // 订单检索条件 │ └── CustomerSaveDTO // 客户新增编辑参数 ├── vo // 返回前端VO（封装页面展示数据） │ ├── PageVO // 通用分页返回对象 │ ├── OrderChartVO // 销量统计图表数据VO │ └── LoginVO // 登录成功返回Token、用户信息 ├── interceptor // JWT登录拦截器 └── exception // 全局异常处理 ├── GlobalExceptionHandler // 统一捕获所有异常 └── BusinessException // 自定义业务异常4.2 分层职责说明
Controller 控制层：接收前端 Axios 请求，完成参数基础校验，调用对应 Service 业务方法，通过 ResultUtil 封装统一 JSON 返回；
Service 业务层：核心业务逻辑处理，多表关联查询、事务控制（订单新增、客户删除等）、数据组装；
Mapper 持久层：基于 MyBatis-Plus 实现单表基础 CRUD，自定义多表联查 SQL（销量统计分组查询）；
Entity 实体类：直接映射数据库字段，使用 Lombok 简化 get/set；
DTO 入参类：封装前端复杂表单、搜索条件，解耦前端参数与数据库实体；
VO 出参类：封装返回前端的页面数据，隐藏数据库敏感字段；
Interceptor 拦截器：拦截所有需要登录鉴权的接口，校验 Token 有效性、用户角色权限；
GlobalException 全局异常：捕获系统运行时异常、自定义业务异常，返回标准化错误信息，避免原生报错页面。
4.3 统一接口返回格式
所有后端接口固定返回 JSON 结构，方便前端统一处理：
{"code":200,// 200成功 401未登录/Token失效 500业务异常"msg":"操作成功","data":{}// 分页数据、详情、token、图表数据等业务内容}五、前端 Vue 项目结构设计
前端分为前台员工端、后台管理员端两套独立页面，共用基础请求工具。
5.1 前台员工端（浅色业务页面）
src/front ├── main.js // 前台入口文件 ├── App.vue ├── router/index.js // 前台路由 │ ├── /login // 员工登录页 │ ├── /register // 员工注册页 │ ├── /index // 前台首页 │ ├── /customer // 客户信息页面 │ ├── /order // 销售订单页面 │ ├── /news // 新闻资讯列表 │ └── /personal // 个人中心 ├── views // 页面组件 │ ├── Login.vue │ ├── Register.vue │ ├── Index.vue │ ├── Customer.vue │ ├── Order.vue │ ├── News.vue │ └── Personal.vue ├── components // 公共组件 │ ├── SideNav.vue // 左侧侧边导航 │ ├── Banner.vue // 顶部轮播图组件 │ └── UploadImg.vue // 图片上传封装组件 ├── api // 前台接口请求 │ ├── user.js // 登录、注册、个人中心接口 │ ├── customer.js // 客户信息接口 │ ├── order.js // 订单增删改查接口 │ └── news.js // 资讯查询接口 └── utils ├── request.js // Axios请求封装（携带Token、拦截401） └── storage.js // localStorage缓存工具（记住密码、token）5.2 后台管理员端（深色管理系统）
src/admin ├── main.js // 后台入口 ├── App.vue ├── router/index.js // 后台侧边栏菜单路由 ├── views │ ├── Dashboard.vue // 后台首页仪表盘 │ ├── admin/ // 管理员管理页面 │ ├── user/ // 员工账号管理 │ ├── banner/ // 轮播图管理 │ ├── news/ // 资讯管理列表、新增弹窗 │ ├── customer/ // 客户管理列表 │ └── order/ // 订单列表、销量统计图表弹窗 ├── components │ ├── Sidebar.vue // 左侧深色侧边菜单栏 │ ├── Table.vue // 通用分页表格组件 │ ├── Upload.vue // 文件上传组件 │ └── Chart.vue // ECharts销量图表封装 ├── api // 后台管理接口 │ ├── admin.js │ ├── banner.js │ ├── news.js │ ├── customer.js │ └── order.js └── utils ├── request.js // 后台Axios请求 └── echarts.js // ECharts初始化工具5.3 前端核心功能说明
Axios 请求拦截
请求拦截器自动从 localStorage 读取 Token 放入请求头 Authorization；响应拦截捕获 401 未登录状态，自动跳转登录页面清空失效 Token。文件上传组件
el-upload 实现客户头像、资讯配图、轮播图上传，后端接收图片返回访问 URL，自动回填表单字段。ECharts 销量柱状图
管理员点击「销量统计」按钮，弹窗加载图表，请求后端分组统计接口，获取各商品销量数据渲染柱状图，直观展示销售体量差异。表单校验
新增客户、订单、资讯页面配置 Element 表单校验规则，非空字段未填写时禁止提交并提示用户。分页通用封装
所有列表页面统一封装分页组件，传递 pageNum、pageSize 参数，后端 MyBatis-Plus 分页返回总条数、当前页数据，实现翻页查询。弹窗表单
后台新增 / 修改资讯、订单、客户均使用 el-dialog 弹窗，关闭弹窗自动清空表单数据，避免缓存脏数据。
六、核心业务流程详解
6.1 用户登录鉴权流程
用户打开登录页，输入账号、密码，选择角色（管理员 / 员工）；
前端携带账号、密码、角色调用后端
/user/login接口；后端查询 sys_user 表，校验账号密码、角色匹配；
校验通过生成 JWT Token，返回 Token、用户角色、姓名；
前端将 Token 存入 localStorage，根据角色跳转对应页面：管理员→后台首页，员工→前台首页；
后续所有业务接口，请求拦截器自动携带 Token，后端拦截器校验 Token 合法性，过期 / 无效则返回 401 跳转登录。
6.2 新增销售订单流程
员工前台进入销量订单页面，填写订单全部字段，选择发货、收货日期；
点击保存，前端校验商品名称、数量、客户姓名非空；
上传表单数据请求后端订单新增接口；
后端封装订单数据插入 sales_order 表，同步更新商品销量统计数据；
返回操作成功提示，前端刷新订单列表 / 清空表单。
6.3 销量统计图表生成流程
管理员登录后台，进入销量订单管理页面；
点击顶部「销量统计」按钮，弹出图表弹窗；
前端请求后端
/order/getSalesChart统计接口；后端使用 MyBatis-Plus 分组查询 sales_order 表，按商品名称 sum 统计总销量，封装 OrderChartVO 返回；
前端 ECharts 接收数据渲染柱状图，横轴商品、纵轴销量，弹窗展示。
6.4 客户信息录入流程
员工前台进入客户信息页面，填写姓名、联系方式、地址、爱好，上传客户头像；
上传图片至后端，后端返回图片访问路径；
点击保存，将表单文字 + 图片路径提交后端；
后端插入 customer 客户表，记录当前登录员工 ID 为创建人；
提示保存成功，表单可继续录入下一位客户。
七、系统部署方案
数据库部署
安装 MySQL8.0，执行项目 SQL 脚本创建crm_enterprise数据库与全部数据表，配置数据库账号密码。后端 SpringBoot 部署
Maven 打包项目为 jar 包，执行java -jar crm.jar启动；修改 application.yml 配置文件，配置数据库连接地址、文件上传存储路径、JWT 密钥。前端打包部署
前台、后台分别执行npm run build打包生成 dist 静态资源文件夹。Nginx 反向代理配置
所有 /api 路径转发至 SpringBoot 后端端口；
前台静态资源绑定域名根路径；
后台管理页面分配
/admin路由访问；配置图片静态资源访问、跨域允许、缓存策略。
文件存储方案
测试环境使用本地服务器文件夹存储图片；生产环境可扩展阿里云 OSS 对象存储，替换本地文件上传逻辑。
八、系统扩展优化方向
数据导出功能：后台新增 Excel 导出，批量导出客户清单、销售订单报表；
权限细分：增加多角色权限（运营、财务、超级管理员），实现按钮级、菜单级权限控制；
消息提醒：新增订单新增、客户录入站内消息推送；
客户跟进记录：扩展客户跟进记录表，记录每次沟通内容；
移动端适配：前台页面做响应式适配手机、平板，开发微信小程序端；
订单状态流程：新增订单流转状态变更（待付款→已发货→已完成），流程日志记录；
数据备份：定时自动备份 MySQL 数据库，防止数据丢失；
Redis 缓存：引入 Redis 缓存热门资讯、高频查询客户数据，减轻数据库压力。
九、项目总结
本系统基于 SpringBoot+Vue 前后端分离架构，完整实现中小企业客户关系数字化管理需求，区分管理员、普通员工双角色，覆盖前台业务操作与后台全量数据管控两大场景。系统支持客户信息维护、销售订单全生命周期管理、企业资讯发布、轮播图宣传、销量数据可视化统计、文件上传、分页检索、JWT 登录鉴权等核心功能。
项目代码分层清晰、业务解耦，扩展性强，可直接用于中小企业 CRM 数字化落地，同时满足计算机专业毕业设计、课程设计完整开发需求，贴合企业客户管理真实业务场景，解决传统纸质台账管理效率低下、数据无法可视化分析的痛点。
八、项目资料
👇🏻 精彩专栏推荐订阅👇🏻 在下方专栏👇🏻不然下次找不到哟
《Java精品推荐项目》
《springboot+vue项目100套》
《ssm项目100套》
《微信小程序合集》
