1. 项目概述
这个毕业设计项目是一个基于SpringBoot+Vue+MySQL技术栈的客户关系管理系统(CRM)完整解决方案。作为全栈开发实战案例,它涵盖了从后端API开发到前端界面实现,再到数据库设计和系统部署的全流程。
我在实际开发中发现,这种前后端分离架构特别适合中小型企业CRM系统的快速开发。SpringBoot提供了稳定的后端服务,Vue带来了灵活的前端交互体验,而MySQL则确保了数据的安全存储。三者结合既能满足业务需求,又能保证系统的可维护性和扩展性。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 系统架构设计
2.1 技术选型分析
选择SpringBoot作为后端框架主要基于以下考虑:
- 自动配置简化了Spring应用的初始搭建
- 内嵌Tomcat无需额外部署
- 丰富的starter依赖简化了第三方组件集成
- 完善的监控机制便于后期维护
Vue.js作为前端框架的优势:
- 组件化开发提高代码复用率
- 响应式数据绑定简化DOM操作
- Vue Router实现前端路由控制
- Vuex管理全局状态
MySQL数据库的选择理由:
- 开源免费适合毕业设计项目
- 完善的ACID特性保证数据一致性
- 丰富的文档和社区支持
- 与SpringBoot生态完美兼容
2.2 系统模块划分
系统主要分为以下几个功能模块:
-
用户管理模块
- 登录/注销
- 权限控制
- 个人信息维护
-
客户管理模块
- 客户信息CRUD
- 客户分类
- 客户跟进记录
-
销售管理模块
- 销售机会跟踪
- 销售漏斗分析
- 业绩统计
-
报表分析模块
- 客户分布统计
- 销售趋势分析
- 业绩排名
3. 后端实现细节
3.1 SpringBoot项目结构
code复制src/main/java
├── config # 配置类
├── controller # 控制器层
├── entity # 实体类
├── repository # 数据访问层
├── service # 业务逻辑层
└── util # 工具类
3.2 关键代码实现
3.2.1 用户认证实现
java复制@RestController
@RequestMapping("/api/auth")
public class AuthController {
@Autowired
private UserService userService;
@PostMapping("/login")
public Result login(@RequestBody LoginDto loginDto) {
return userService.login(loginDto);
}
@GetMapping("/info")
public Result getInfo(@RequestParam String token) {
return userService.getUserInfo(token);
}
}
3.2.2 客户管理API
java复制@RestController
@RequestMapping("/api/customer")
public class CustomerController {
@Autowired
private CustomerService customerService;
@GetMapping("/list")
public Result list(@RequestParam Map<String, Object> params) {
return customerService.queryPage(params);
}
@PostMapping("/save")
public Result save(@RequestBody CustomerEntity customer) {
return customerService.saveCustomer(customer);
}
}
3.3 数据库设计
3.3.1 主要表结构
- 用户表(sys_user)
sql复制CREATE TABLE `sys_user` (
`user_id` bigint NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(100) NOT NULL,
`salt` varchar(20) DEFAULT NULL,
`email` varchar(100) DEFAULT NULL,
`mobile` varchar(100) DEFAULT NULL,
`status` tinyint DEFAULT NULL,
`create_time` datetime DEFAULT NULL,
PRIMARY KEY (`user_id`),
UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
- 客户表(crm_customer)
sql复制CREATE TABLE `crm_customer` (
`customer_id` bigint NOT NULL AUTO_INCREMENT,
`customer_name` varchar(100) NOT NULL,
`phone` varchar(20) DEFAULT NULL,
`industry` varchar(50) DEFAULT NULL,
`source` varchar(50) DEFAULT NULL,
`level` varchar(10) DEFAULT NULL,
`address` varchar(200) DEFAULT NULL,
`remark` varchar(500) DEFAULT NULL,
`create_user_id` bigint DEFAULT NULL,
`create_time` datetime DEFAULT NULL,
PRIMARY KEY (`customer_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
4. 前端实现细节
4.1 Vue项目结构
code复制src
├── api # 接口定义
├── assets # 静态资源
├── components # 公共组件
├── router # 路由配置
├── store # Vuex状态管理
├── utils # 工具函数
└── views # 页面组件
4.2 关键页面实现
4.2.1 登录页面
vue复制<template>
<div class="login-container">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
</el-form-item>
<el-button type="primary" @click="handleLogin">登录</el-button>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
}
},
methods: {
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.$store.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({ path: '/' })
})
}
})
}
}
}
</script>
4.2.2 客户列表页面
vue复制<template>
<div class="customer-container">
<el-table :data="list" border style="width: 100%">
<el-table-column prop="customerName" label="客户名称"></el-table-column>
<el-table-column prop="phone" label="联系电话"></el-table-column>
<el-table-column prop="industry" label="所属行业"></el-table-column>
<el-table-column prop="level" label="客户等级"></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryParams.pageNum"
:page-sizes="[10, 20, 30, 50]"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
import { getCustomerList } from '@/api/customer'
export default {
data() {
return {
list: [],
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10
}
}
},
created() {
this.getList()
},
methods: {
getList() {
getCustomerList(this.queryParams).then(response => {
this.list = response.data.list
this.total = response.data.total
})
},
handleSizeChange(val) {
this.queryParams.pageSize = val
this.getList()
},
handleCurrentChange(val) {
this.queryParams.pageNum = val
this.getList()
}
}
}
</script>
5. 系统部署方案
5.1 开发环境部署
- 后端部署步骤:
bash复制# 克隆项目
git clone https://github.com/xxx/crm-system.git
# 导入IDE(推荐IntelliJ IDEA)
File -> Open -> 选择项目目录
# 配置数据库
修改application.yml中的数据库连接信息
# 启动项目
运行CrmApplication主类
- 前端部署步骤:
bash复制# 进入前端目录
cd crm-web
# 安装依赖
npm install
# 启动开发服务器
npm run dev
5.2 生产环境部署
- 后端打包部署:
bash复制# 打包
mvn clean package
# 生成的可执行jar位于target目录
java -jar crm-system.jar
- 前端打包部署:
bash复制# 生产环境打包
npm run build
# 生成的静态文件位于dist目录
# 可部署到Nginx等Web服务器
5.3 数据库初始化
- 创建数据库:
sql复制CREATE DATABASE crm DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
- 执行初始化SQL脚本:
bash复制mysql -u root -p crm < crm_schema.sql
6. 开发经验与技巧
6.1 前后端联调技巧
- 接口调试建议:
- 使用Swagger生成API文档
- 使用Postman测试接口
- 统一响应格式(如{code, msg, data})
- 跨域问题解决:
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);
}
}
6.2 性能优化建议
- 数据库优化:
- 为常用查询字段添加索引
- 避免SELECT * 查询
- 合理使用连接查询
- 前端优化:
- 组件按需加载
- 合理使用keep-alive缓存
- 图片等静态资源压缩
6.3 常见问题解决
- Vue页面刷新后路由丢失:
javascript复制const router = new VueRouter({
mode: 'history',
routes
})
需要后端配置支持:
java复制@Controller
public class PageController {
@RequestMapping(value = "/{path:[^\\.]*}")
public String redirect() {
return "forward:/index.html";
}
}
- MyBatis查询结果为空:
- 检查实体类字段与数据库列名是否匹配
- 使用@Results注解显式映射
- 检查SQL语句是否正确
7. 论文写作要点
7.1 论文结构建议
- 摘要:简要说明系统功能和实现技术
- 绪论:研究背景和意义
- 需求分析:功能和非功能需求
- 系统设计:架构设计和模块设计
- 系统实现:关键技术和代码片段
- 系统测试:测试方案和结果
- 总结与展望:项目总结和未来改进
7.2 技术要点撰写技巧
- SpringBoot部分:
- 重点说明自动配置原理
- 展示核心配置代码
- 分析启动流程
- Vue部分:
- 解释响应式原理
- 展示组件通信方式
- 分析路由实现
- MySQL部分:
- 说明表设计原则
- 展示关键SQL语句
- 分析索引优化
8. 项目扩展方向
8.1 功能扩展建议
- 客户画像分析
- 基于客户行为数据构建标签体系
- 实现客户分群功能
- 提供个性化推荐
- 移动端适配
- 开发微信小程序版本
- 实现PWA应用
- 适配响应式布局
8.2 技术深化方向
- 微服务改造
- 使用SpringCloud拆分模块
- 引入服务注册中心
- 实现服务间调用
- 大数据分析
- 集成Hadoop/Spark
- 实现销售预测
- 构建数据看板
- 人工智能应用
- 集成NLP处理客户反馈
- 使用机器学习预测客户流失
- 实现智能客服功能
这个毕业设计项目完整展示了如何使用主流技术栈开发企业级应用。在实际开发过程中,我特别注重代码的可维护性和系统的扩展性。通过这个项目,不仅掌握了SpringBoot+Vue的全栈开发技能,还深入理解了企业应用开发的完整流程。对于想要学习现代Web开发的同学,这个项目提供了很好的实践机会。
