1. 项目背景与核心需求
作为一名长期从事企业级应用开发的工程师,我最近指导了几位应届生的毕业设计,发现SpringBoot+Vue技术栈的客户管理系统(CRM)成为了热门选题。这背后反映了一个有趣的现象:高校计算机专业正在从传统的SSH框架教学转向更贴近企业实际需求的现代化技术栈。
客户管理系统本质上是一个典型的企业资源管理(ERP)子系统,核心要解决三个业务痛点:
- 客户信息碎片化(销售、客服、市场部门数据孤岛)
- 商机跟进过程不可视化
- 客户服务响应效率低下
采用SpringBoot+Vue的组合具有天然优势:
- 后端:SpringBoot的自动配置特性让学生能快速搭建RESTful API
- 前端:Vue的组件化开发模式完美匹配CRM的模块化需求
- 交互:Axios+JSON的数据交换方式符合现代Web开发规范
提示:选择该课题时,建议明确区分"课程设计"与"毕业设计"的深度差异。毕业设计应当包含完整的业务建模、技术选型论证和性能优化方案。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 后端技术栈选型
SpringBoot 2.7.x版本是最稳妥的选择(避免使用3.0+可能遇到的兼容性问题)。关键依赖包括:
xml复制<dependencies>
<!-- 核心依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!-- 实用工具 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.83</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
数据库建议采用MySQL 8.0,配置连接池时要注意:
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/crm_db?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: 123456
hikari:
maximum-pool-size: 10
connection-timeout: 30000
2.2 前端架构设计
Vue 3.x + Element Plus是目前最成熟的组合。项目初始化时要注意:
bash复制npm init vue@latest
# 选择TypeScript、Pinia、Router等选项
关键目录结构建议:
code复制src/
├── api/ # API请求封装
├── assets/ # 静态资源
├── components/ # 公共组件
│ ├── CustomerCard.vue
│ └── FollowUpDialog.vue
├── router/ # 路由配置
├── stores/ # Pinia状态管理
├── utils/ # 工具函数
└── views/ # 页面组件
├── customer/
└── dashboard/
3. 核心功能实现
3.1 客户信息管理模块
实体类设计要遵循JPA规范:
java复制@Entity
@Table(name = "t_customer")
@Data
public class Customer {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false)
private String name;
@Enumerated(EnumType.STRING)
private CustomerLevel level; // VIP/普通/潜在
@OneToMany(mappedBy = "customer")
private List<ContactRecord> records;
}
前端采用Element Plus的表格+表单组合:
vue复制<template>
<el-table :data="customerList">
<el-table-column prop="name" label="客户名称" />
<el-table-column label="客户等级">
<template #default="{row}">
<el-tag :type="levelMap[row.level]">
{{ row.level }}
</el-tag>
</template>
</el-table-column>
</el-table>
</template>
3.2 商机跟进系统
需要特别注意时间轴组件的实现:
vue复制<el-timeline>
<el-timeline-item
v-for="(record, index) in followRecords"
:key="index"
:timestamp="record.time">
{{ record.content }}
</el-timeline-item>
</el-timeline>
后端需处理复杂的关联查询:
java复制@Repository
public interface ContactRecordRepository extends JpaRepository<ContactRecord, Long> {
@Query("SELECT r FROM ContactRecord r WHERE r.customer.id = :customerId "
+ "ORDER BY r.contactTime DESC")
List<ContactRecord> findByCustomer(@Param("customerId") Long customerId);
}
4. 毕业论文专项优化
4.1 系统安全防护
针对PDF导出可能存在的XSS攻击:
java复制@RestController
public class ExportController {
@GetMapping("/export")
public void exportPdf(HttpServletResponse response) {
response.setContentType("application/pdf");
response.setHeader("Content-Disposition", "attachment");
response.setHeader("X-Content-Type-Options", "nosniff");
// 使用PDFBox等工具生成内容
}
}
4.2 性能优化方案
- 前端懒加载优化:
javascript复制const CustomerDetail = () => import('@/views/customer/Detail.vue')
- 后端缓存配置:
java复制@Cacheable(value = "customers", key = "#id")
public Customer getById(Long id) {
return customerRepository.findById(id).orElseThrow();
}
4.3 论文图表规范
建议包含以下技术图表:
- 系统架构图(使用Draw.io绘制)
- E-R关系图(PowerDesigner导出)
- API调用时序图
- 性能对比测试数据表
5. 常见问题解决方案
5.1 跨域问题处理
SpringBoot配置类:
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.maxAge(3600);
}
}
5.2 文件上传下载
大文件分块上传示例:
vue复制<template>
<el-upload
:before-upload="handleBeforeUpload"
:http-request="customUpload">
<el-button type="primary">上传文件</el-button>
</el-upload>
</template>
<script setup>
const customUpload = async (options) => {
const chunkSize = 5 * 1024 * 1024; // 5MB
const file = options.file;
const chunks = Math.ceil(file.size / chunkSize);
for (let i = 0; i < chunks; i++) {
const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
await uploadChunk(chunk, i);
}
}
</script>
5.3 生产环境部署
Docker Compose配置示例:
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: 123456
ports:
- "3306:3306"
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
frontend:
build: ./frontend
ports:
- "80:80"
6. 论文写作建议
-
技术章节结构建议:
- 第2章 相关技术综述(SpringBoot/Vue原理)
- 第3章 系统需求分析(用例图/流程图)
- 第4章 系统设计(类图/数据库设计)
- 第5章 系统实现(核心代码截图)
- 第6章 系统测试(JMeter压力测试)
-
创新点挖掘方向:
- 基于RBAC的动态权限控制
- 客户价值评估模型
- 移动端适配方案
- 数据可视化看板
-
答辩演示技巧:
- 准备两套演示数据(正常流程/异常处理)
- 在本地保留快速恢复的数据库备份
- 对关键业务场景录制演示视频备用
在系统开发过程中,我特别建议使用Git进行版本控制。创建一个合理的分支策略,例如:
main分支:稳定版本dev分支:日常开发feature/*分支:功能开发hotfix/*分支:紧急修复
这不仅能保证开发过程有序,也能在论文的"开发管理"章节体现工程规范性。对于需要团队协作的情况,可以配置GitHub Actions实现自动化构建和测试,这部分内容也可以成为论文的技术亮点
