1. 项目概述：基于SpringBoot+Vue.js的CRM系统设计与实现
在当今企业数字化转型浪潮中，客户关系管理（CRM）系统已成为提升销售效率的核心工具。传统Excel表格管理客户信息的模式，不仅难以实现团队协作，更无法满足企业对客户行为分析和销售预测的需求。本项目采用SpringBoot+Vue.js技术栈，构建了一套支持多角色协作、具备完整销售漏斗管理的现代化CRM系统。
作为一名长期从事企业级应用开发的架构师，我在过去三年中为7家不同规模的企业部署过CRM解决方案。这个毕业设计级别的项目虽然功能精简，但完整实现了从客户建档、商机跟进到订单成交的全流程管理，特别适合Java Web初学者学习前后端分离架构的实战应用。系统采用MIT开源协议，所有源码和SQL脚本均可直接用于学习和二次开发。
2. 技术架构解析
2.1 后端SpringBoot设计要点
SpringBoot的自动配置机制大幅简化了传统SSM框架的XML配置工作。在项目实践中，我特别推荐以下配置方案：
java复制// 数据源配置示例（application.yml）
spring:
datasource:
url: jdbc:mysql://localhost:3306/crm_db?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
jpa:
hibernate:
ddl-auto: update
show-sql: true
关键经验：生产环境务必关闭ddl-auto（建议设为none），数据库变更应通过Flyway等迁移工具管理。我曾遇到过团队成员误操作导致生产数据表被自动删除的惨痛案例。
权限控制采用Spring Security + JWT方案，这是目前最轻量级的认证方案。核心拦截器配置如下：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
}
}
2.2 前端Vue.js工程化实践
项目采用Vue CLI 4.x搭建，Element UI作为基础组件库。值得注意的工程配置包括：
- API请求封装：使用axios拦截器统一处理token和错误消息
javascript复制// src/utils/request.js
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['Authorization'] = `Bearer ${store.getters.token}`
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
- 权限指令：实现v-permission按钮级控制
javascript复制// src/directives/permission.js
export default {
inserted(el, binding, vnode) {
const { value } = binding
const roles = store.getters.roles
if (value && value instanceof Array && value.length > 0) {
const hasPermission = roles.some(role => {
return value.includes(role)
})
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
}
}
}
3. 核心功能实现细节
3.1 客户信息管理模块
数据库设计采用三范式原则，客户基础表（client_info）与联系人表（client_contact）做1:N关联。为提高查询效率，我在实际项目中通常会添加以下索引：
sql复制ALTER TABLE client_info
ADD INDEX idx_industry_level (industry_type, client_level);
前端实现卡片式布局与高级搜索组合，关键代码如下：
vue复制<template>
<el-card class="client-card" v-for="item in clientList" :key="item.client_id">
<div slot="header" class="clearfix">
<span>{{ item.client_name }}</span>
<el-tag :type="levelMap[item.client_level]">
{{ levelText[item.client_level] }}
</el-tag>
</div>
<div class="client-content">
<p><i class="el-icon-phone"></i> {{ item.contact_phone }}</p>
<p><i class="el-icon-office-building"></i> {{ item.industry_type }}</p>
</div>
</el-card>
</template>
3.2 销售机会跟踪系统
采用经典的销售漏斗模型，定义五个阶段：
- 初步接触 → 2. 需求分析 → 3. 方案报价 → 4. 商务谈判 → 5. 成交关闭
状态机实现使用枚举类保证数据一致性：
java复制public enum OpportunityStage {
INITIAL_CONTACT("初步接触"),
NEEDS_ANALYSIS("需求分析"),
PROPOSAL("方案报价"),
NEGOTIATION("商务谈判"),
CLOSED_WON("成交关闭"),
CLOSED_LOST("已丢失");
private final String desc;
// 构造方法、getter省略...
}
避坑指南：销售阶段变更需要记录操作日志，我曾在项目中遇到销售员篡改阶段时间的情况。建议添加如下审计字段：
- stage_changed_by
- stage_changed_time
- previous_stage
4. 典型问题排查实录
4.1 跨域问题解决方案
开发环境常见跨域错误，推荐三种解决方式：
- 后端配置（SpringBoot方案）：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true)
.maxAge(3600);
}
}
- 前端代理（vue.config.js）：
javascript复制module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
}
- Nginx层配置：
nginx复制location /api/ {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE';
proxy_pass http://backend-server;
}
4.2 性能优化实践
- 数据库层面：
- 添加适当的索引（但不超过5个，避免写性能下降）
- 对大文本字段（如followup_notes）使用垂直分表
- 配置连接池参数（建议HikariCP）
- 前端层面：
- 路由懒加载
javascript复制const ClientList = () => import('./views/client/List.vue')
- 表格数据分页查询（每页不超过100条）
- 使用keep-alive缓存高频访问的组件
- 缓存策略：
java复制@Cacheable(value = "clientCache", key = "#clientId")
public ClientInfo getClientById(Long clientId) {
return clientRepository.findById(clientId).orElse(null);
}
5. 项目部署指南
5.1 后端部署要点
推荐使用Docker Compose编排服务：
dockerfile复制# Dockerfile示例
FROM openjdk:11-jre
VOLUME /tmp
ADD target/crm-system.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
yaml复制# docker-compose.yml
version: '3'
services:
mysql:
image: mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: crm_db
ports:
- "3306:3306"
volumes:
- mysql_data:/var/lib/mysql
backend:
build: .
ports:
- "8080:8080"
depends_on:
- mysql
volumes:
mysql_data:
5.2 前端部署方案
生产环境建议：
- 使用nginx作为静态资源服务器
- 开启gzip压缩
- 配置合理的缓存策略
典型nginx配置：
nginx复制server {
listen 80;
server_name crm.yourdomain.com;
gzip on;
gzip_types text/plain application/xml application/javascript;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
}
}
在项目开发过程中，我特别建议初学者关注以下几点：1）严格遵循RESTful API规范设计接口 2）前端表单验证必须与后端双重校验 3）敏感操作必须记录操作日志。这个项目虽然定位毕业设计，但已经包含了企业级应用的核心要素，掌握这些技术要点对求职面试大有裨益。