SpringBoot+Vue+MySQL全栈客户管理系统开发实践-代码聚汇网

SpringBoot+Vue+MySQL全栈客户管理系统开发实践

SpringBootVueMySQL

|难度：普通|阅读约 13 分钟

1. 项目概述：SpringBoot+Vue+MySQL客户管理系统全栈实现

这套客户管理系统采用当前主流的前后端分离架构，后端基于SpringBoot 2.7.x构建RESTful API，前端使用Vue 3组合式API开发管理界面，数据库选用MySQL 8.0作为持久化存储。整个系统采用Maven进行依赖管理，前后端通过axios进行数据交互，实现了客户信息管理、交互记录跟踪、数据统计分析等核心业务功能。

提示：系统已通过完整测试，包含详细的部署文档和初始化SQL脚本，解压后按照README配置即可运行，适合作为企业级CRM系统的入门实践项目或二次开发基础框架。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术架构深度解析

2.1 后端SpringBoot设计要点

后端采用经典的三层架构设计：

Controller层：处理HTTP请求，使用@RestController注解
Service层：业务逻辑实现，通过@Transactional保证事务
DAO层：MyBatis-Plus实现数据库操作

关键配置示例：

java复制// 分页插件配置
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
    MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
    interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
    return interceptor;
}

2.2 前端Vue工程结构

前端项目采用Vue CLI搭建，主要目录结构：

code复制src/
├── api/           # axios请求封装
├── assets/        # 静态资源
├── components/    # 公共组件
├── router/        # 路由配置
├── store/         # Vuex状态管理
├── utils/         # 工具类
└── views/         # 页面组件

路由懒加载配置示例：

javascript复制const routes = [
  {
    path: '/customer',
    component: () => import('@/views/customer/List.vue'),
    meta: { requiresAuth: true }
  }
]

3. 数据库设计与优化

3.1 核心表结构

主要数据表及其关系：

客户表(customer)：存储客户基本信息
联系人表(contact)：客户关联联系人
交互记录(interaction)：客户跟进记录
用户表(user)：系统用户账户

sql复制CREATE TABLE `customer` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL COMMENT '客户名称',
  `type` tinyint NOT NULL COMMENT '客户类型',
  `level` tinyint DEFAULT '1' COMMENT '客户等级',
  `source` varchar(50) DEFAULT NULL COMMENT '客户来源',
  `industry` varchar(50) DEFAULT NULL COMMENT '所属行业',
  `status` tinyint DEFAULT '1' COMMENT '状态',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 查询性能优化

为常用查询字段添加索引：

sql复制ALTER TABLE `customer` ADD INDEX `idx_name` (`name`);
ALTER TABLE `interaction` ADD INDEX `idx_customer_id` (`customer_id`);

使用MyBatis-Plus的QueryWrapper构建复杂查询：

java复制QueryWrapper<Customer> wrapper = new QueryWrapper<>();
wrapper.like("name", keyWord)
       .eq("status", 1)
       .orderByDesc("create_time");

4. 核心功能实现细节

4.1 客户信息管理模块

前端采用Element Plus表格+分页组件：

vue复制<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="客户名称" />
  <el-table-column prop="type" label="客户类型">
    <template #default="scope">
      {{ formatType(scope.row.type) }}
    </template>
  </el-table-column>
</el-table>

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

4.2 数据统计可视化

使用ECharts实现客户分布饼图：

javascript复制// 初始化图表
const initChart = () => {
  const chartDom = document.getElementById('chart');
  const myChart = echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '客户行业分布',
        type: 'pie',
        radius: '70%',
        data: chartData.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  myChart.setOption(option);
}

5. 系统部署与运维

5.1 开发环境搭建

后端环境：

bash复制# 安装JDK 1.8+
java -version

# 配置Maven
mvn clean install

# 启动应用
mvn spring-boot:run

前端环境：

bash复制# 安装Node.js 14+
node -v

# 安装依赖
npm install

# 启动开发服务器
npm run dev

5.2 生产环境部署

Nginx配置示例（前端）：

nginx复制server {
    listen       80;
    server_name  yourdomain.com;

    location / {
        root   /path/to/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
    }
}

6. 常见问题解决方案

6.1 跨域问题处理

SpringBoot后端配置CORS：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

6.2 接口安全防护

使用JWT进行身份验证：

java复制public class JwtUtil {
    private static final String SECRET = "your-secret-key";
    
    public static String generateToken(UserDetails userDetails) {
        return Jwts.builder()
                .setSubject(userDetails.getUsername())
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + 86400000))
                .signWith(SignatureAlgorithm.HS512, SECRET)
                .compact();
    }
}

接口权限控制：

java复制@PreAuthorize("hasRole('ADMIN')")
@DeleteMapping("/customers/{id}")
public Result deleteCustomer(@PathVariable Long id) {
    // 删除逻辑
}

7. 项目扩展建议

客户画像分析：集成机器学习算法分析客户行为
移动端适配：开发基于Uniapp的移动端应用
工作流引擎：集成Activiti实现业务流程管理
消息通知：集成WebSocket实现实时消息推送
数据导出：支持Excel/PDF格式报表导出

注意事项：进行二次开发时，建议先熟悉项目结构，修改数据库结构时需要同步更新MyBatis-Plus的实体类和Mapper文件，并考虑数据迁移方案