阿米的柴火饭1. 项目概述：从零构建客户管理系统的技术栈选型
去年帮学弟调试毕业设计时，发现很多同学对SpringBoot+Vue+MySQL这套技术组合的实际应用存在理解断层。这个客户管理系统看似简单，却完整涵盖了企业级应用开发的核心要素。选择这个技术栈主要基于三个现实考量：首先SpringBoot的自动配置特性能让新手快速搭建后端服务而不被繁琐的XML配置困扰；其次Vue的响应式数据绑定天然适合处理客户信息这类表单密集型的业务场景；最后MySQL作为最广泛使用的关系型数据库，既能保证数据安全性又便于答辩时演示SQL查询能力。
这个系统在功能设计上遵循了"CRUD+"原则——基础的用户认证、客户信息管理、交互日志记录是必选项，而数据可视化看板、批量导入导出等则是体现技术深度的加分项。特别提醒：在毕业设计场景下，一定要控制好功能边界，我曾见过有同学贪多求全最后连基础功能都没调通，建议优先保证核心流程（如客户信息增删改查）的完整度。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构深度解析
2.1 后端SpringBoot设计要点
采用分层架构时，建议按这个包结构组织代码：
code复制com.example.crm
├── config # 安全配置、Swagger配置
├── controller # 暴露API接口
├── service # 业务逻辑
├── repository # 数据库操作
├── model # 实体类
└── exception # 全局异常处理
数据库连接池配置是新手常踩的坑，在application.yml中建议这样配置：
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/crm?useSSL=false&serverTimezone=UTC
username: root
password: 123456
hikari:
maximum-pool-size: 10 # 根据机器配置调整
connection-timeout: 30000
重要提示：一定要关闭SSL连接（useSSL=false）并在测试环境关闭druid的wall过滤器，否则容易在答辩演示时出现连接超时问题。
2.2 前端Vue工程化实践
推荐使用Vue CLI创建项目，目录结构保持清晰：
code复制src/
├── api/ # 封装axios请求
├── assets/ # 静态资源
├── components/ # 公共组件
├── router/ # 路由配置
├── store/ # Vuex状态管理
├── views/ # 页面组件
└── utils/ # 工具函数
在main.js中配置axios拦截器是处理鉴权的关键：
javascript复制axios.interceptors.request.use(config => {
config.headers['Authorization'] = localStorage.getItem('token')
return config
})
axios.interceptors.response.use(
response => response.data,
error => {
if(error.response.status === 401) {
router.push('/login')
}
return Promise.reject(error)
}
)
2.3 MySQL数据库设计规范
客户表设计示例（注意字段注释和索引设置）：
sql复制CREATE TABLE `customer` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`name` varchar(50) NOT NULL COMMENT '客户名称',
`type` tinyint(4) DEFAULT '1' COMMENT '客户类型1-个人2-企业',
`phone` varchar(20) DEFAULT NULL COMMENT '联系电话',
`address` varchar(255) DEFAULT NULL COMMENT '联系地址',
`creator_id` int(11) DEFAULT NULL COMMENT '创建人ID',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
PRIMARY KEY (`id`),
KEY `idx_phone` (`phone`),
KEY `idx_creator` (`creator_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='客户信息表';
经验之谈：时间字段一定要设置默认值，更新时间用ON UPDATE自动维护，避免业务代码中遗漏时间更新。
3. 核心功能实现细节
3.1 客户信息管理模块
后端Controller层采用RESTful风格设计：
java复制@RestController
@RequestMapping("/api/customer")
public class CustomerController {
@Autowired
private CustomerService customerService;
@GetMapping("/{id}")
public Result<Customer> getById(@PathVariable Integer id) {
return Result.success(customerService.getById(id));
}
@PostMapping
public Result<Void> add(@Valid @RequestBody Customer customer) {
customerService.save(customer);
return Result.success();
}
@PutMapping
public Result<Void> update(@Valid @RequestBody Customer customer) {
customerService.updateById(customer);
return Result.success();
}
@DeleteMapping("/{id}")
public Result<Void> delete(@PathVariable Integer id) {
customerService.removeById(id);
return Result.success();
}
}
前端使用Element UI表格组件时，注意分页参数的传递：
vue复制<template>
<el-table :data="tableData" @row-click="handleRowClick">
<el-table-column prop="name" label="客户名称"></el-table-column>
<el-table-column prop="phone" label="联系电话"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryParams.pageNum"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</template>
<script>
export default {
data() {
return {
queryParams: {
pageNum: 1,
pageSize: 10
},
total: 0,
tableData: []
}
},
methods: {
loadData() {
getCustomerList(this.queryParams).then(res => {
this.tableData = res.rows
this.total = res.total
})
}
}
}
</script>
3.2 权限控制实现方案
推荐使用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);
}
}
前端路由守卫配置示例：
javascript复制router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.getters.isLoggedIn) {
next({ name: 'Login' })
} else {
next()
}
})
4. 项目部署与调试技巧
4.1 多环境配置管理
SpringBoot的多环境配置建议这样组织：
code复制resources/
├── application.yml # 公共配置
├── application-dev.yml # 开发环境
└── application-prod.yml # 生产环境
通过启动参数切换环境：
bash复制java -jar crm.jar --spring.profiles.active=prod
4.2 前端打包优化
在vue.config.js中配置生产环境优化：
javascript复制module.exports = {
productionSourceMap: false,
configureWebpack: {
externals: process.env.NODE_ENV === 'production' ? {
vue: 'Vue',
'element-ui': 'ELEMENT'
} : {}
}
}
4.3 常见问题排查指南
| 问题现象 | 可能原因 | 解决方案 |
|---|---|---|
| 前端请求404 | 后端未启动或跨域问题 | 1. 检查后端服务状态 2. 配置@CrossOrigin注解 |
| 数据库连接失败 | 时区或SSL配置错误 | url添加?serverTimezone=UTC&useSSL=false |
| Vue页面空白 | 路由模式或baseUrl错误 | 检查router/index.js中的mode和base配置 |
| JWT失效异常 | token过期或签名不匹配 | 检查服务端密钥与token有效期配置 |
5. 论文撰写与答辩要点
技术选型章节建议包含以下对比分析表格：
| 技术选项 | 优势 | 适用场景 | 最终选择理由 |
|---|---|---|---|
| SpringBoot | 快速启动、自动配置 | 需要快速迭代的后端服务 | 简化配置、内嵌Tomcat |
| Vue.js | 响应式编程、组件化开发 | 数据驱动的单页应用 | 学习曲线平缓、生态丰富 |
| MySQL | ACID事务支持、成熟稳定 | 结构化数据存储 | 高校教学主流数据库 |
在系统测试章节，建议设计这样的测试用例：
java复制@Test
public void testCustomerCRUD() {
// 新增测试
Customer customer = new Customer();
customer.setName("测试客户");
customerService.save(customer);
// 查询验证
Customer dbCustomer = customerService.getById(customer.getId());
Assert.notNull(dbCustomer, "新增客户查询失败");
// 更新测试
dbCustomer.setPhone("13800138000");
customerService.updateById(dbCustomer);
// 删除测试
customerService.removeById(dbCustomer.getId());
Assert.isNull(customerService.getById(dbCustomer.getId()), "客户删除失败");
}
最后在部署文档中，务必包含以下关键信息：
- JDK版本要求（推荐1.8）
- MySQL版本及初始化脚本
- 前端node版本要求（建议14.x）
- 启动命令（前后端分离部署说明）
- 默认管理员账号密码
我在指导毕业设计时发现，90%的部署问题都源于环境版本不匹配。建议在文档开头就用醒目标注环境要求，可以节省大量调试时间。另外提醒学弟学妹们，答辩前务必在评委电脑上提前测试演示流程，避免现场出现"在我电脑上是好的"这类尴尬情况。