基于Java的客户管理系统源码，CRM 带小程序 CRM小程序源码

• 前端：Vue
• 后端：Spring Boot
• 数据库：MySQL
• 开发语言：Java

CRM客户关系管理系统，高效管理客户全流程，包括客户资料管理、客户跟踪管理、订单/合同管理和回款及交付管理等功能。

后台功能展示：

1. 系统管理：员工管理、角色管理、菜单管理、部门管理、岗位管理、字典管理、参数设置、日志管理
2. 系统监控：在线用户、定时任务、数据监控、服务监控
3. 系统工具：表单构建、代码生成、系统接口
4. 平台配置：平台配置、公海规则配置
5. 客户管理：公海客户、合同管理、我的客户、我的合同、回款管理
6. 审批管理：客户审批、合同审批、回款审批
7. 业绩管理：业绩目标、添加业绩目标
8. 通讯录：全部员工信息（包括员工姓名、岗位、部门、手机号码）
9. 产品管理：产品分类、产品管理
10. 日历：我的日程（包括日程提醒、休假、开会、出差）
11. 统计分析：公海客户分析、员工客户分析、客户跟进分析、合同金额分析、产品销售分析、客户销售分析

今天我要介绍一个基于Java的企业级客户关系管理系统（CRM），这个系统涵盖了前端、后端以及数据库的完整架构。作为一个完整的管理平台，它不仅提供了基础的客户管理功能，还包括订单管理、合同管理和回款管理等丰富的模块。此外，系统还支持小程序的接入，方便移动设备使用。

前端：Vue + Element UI

前端部分采用了Vue.js框架，结合Element UI进行组件开发。Element UI是一个基于Vue的UI框架，提供了一系列丰富的组件，使开发更加高效。

客户列表组件示例

<template>
  <div class="crm-customer-list">
    <el-table :data="customers" border style="width: 100%">
      <el-table-column prop="name" label="客户名称" width="180">
      </el-table-column>
      <el-table-column prop="contact" label="联系人" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" width="150">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "CustomerList",
  props: {
    customers: Array,
  },
  methods: {
    handleEdit(index, row) {
      console.log("编辑客户：", row);
    },
    handleDelete(index, row) {
      console.log("删除客户：", row);
    },
  },
};
</script>

代码分析：

上面的代码是一个典型的Vue组件，展示了客户列表的功能。使用el-table组件来展示客户数据，每一列对应客户的不同属性。

el-table

el-table-column定义了每一列的属性，比如宽度、对齐方式等。

el-table-column

在“操作”列中，使用了el-button组件来实现编辑和删除功能。

整个组件通过props接收客户数据，并通过methods处理编辑和删除的操作。

el-button

props

methods

后端：Spring Boot

后端部分使用了Spring Boot框架，这是一个功能强大的Java框架，能够快速搭建高性能的Web应用。

客户管理Controller示例

@RestController
@RequestMapping("/api/customer")
public class CustomerController {

  @Autowired
  private CustomerService customerService;

  @GetMapping("/list")
  public Result<CustomerListVO> getCustomerList(
      @RequestParam(required = false) String name,
      @RequestParam(required = false) String status,
      @RequestParam(defaultValue = "1") Integer pageNo,
      @RequestParam(defaultValue = "10") Integer pageSize) {

    CustomerQueryVO query = new CustomerQueryVO();
    query.setName(name);
    query.setStatus(status);
    query.setPageNo(pageNo);
    query.setPageSize(pageSize);

    return Result.success(customerService.getCustomerList(query));
  }

  // 其他接口...
}

代码分析：

上面是一个典型的Spring Boot控制器类。@RestController注解表明这是一个REST风格的控制器。@RequestMapping("/customer")定义了请求映射路径，所有的接口请求都会以这个路径为基础。

@RestController

@RequestMapping

@GetMapping("/list")定义了具体的GET请求路径。

/api/customer

方法参数中使用了@RequestParam来接收查询参数，包括客户名称、状态、页码和每页大小。

@GetMapping

通过PageRequest.of(page, size)实现了分页查询，简化了分页逻辑。

GET

/list

@RequestParam

PageHelper

数据库：MySQL

数据库部分使用了MySQL，这是一个常用的关系型数据库，具备高性能和高可用性。

客户信息表结构

CREATE TABLE `tbl_customer` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL COMMENT '客户名称',
  `contact` varchar(50) NOT NULL COMMENT '联系人',
  `phone` varchar(20) NOT NULL COMMENT '联系电话',
  `status` varchar(20) NOT NULL COMMENT '客户状态',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

代码分析：

这是一个简单的客户信息表结构，包含了客户的基本信息和状态。id作为主键，自动生成。name、contact、phone分别对应客户名称、联系人和联系电话。status表示客户状态，可以是“潜在客户”、“成交客户”等。

id

name

contact

phone

create_time和update_time记录了数据的创建和更新时间。

status

update

time

小程序端

小程序部分基于微信小程序开发，提供了移动端的访问入口。

客户列表页面

// pages/customerList/customerList.js
Page({
  data: {
    customers: [],
    loading: false,
    page: 1,
  },

  onLoad: function (options) {
    this.loadCustomerList();
  },

  loadCustomerList: function () {
    wx.showLoading({
      title: '加载中',
    });
    this.setData({
      loading: true,
    });
    
    wx.request({
      url: `${apiUrl}/api/customer/list`,
      method: 'GET',
      data: {
        name: this.data.name,
        status: this.data.status,
        pageNo: this.data.page,
        pageSize: 10,
      },
      success: (res) => {
        this.setData({
          customers: res.data.data,
          loading: false,
        });
      },
      fail: () => {
        wx.showToast({
          title: '加载失败',
          icon: 'none',
        });
      },
      complete: () => {
        wx.hideLoading();
      },
    });
  },

  // 上拉加载更多
  onReachBottom: function () {
    this.setData({
      page: this.data.page + 1,
    });
    this.loadCustomerList();
  },
});

代码分析：

这是一个微信小程序的客户列表页面。通过wx.request发送HTTP请求到后端，获取客户数据。onReachBottom实现上拉加载更多功能。整个页面通过wx:for动态更新客户列表。

wx.request

onReachBottom

setData

系统亮点

• 前后端分离：前端使用Vue.js，后端使用Spring Boot，这种架构使得前后端开发更加灵活高效。
• 模块化设计：整个系统按照功能模块划分，每个模块都有独立的功能和接口。
• 支持移动端：通过开发小程序，实现了移动端的无缝对接，方便用户随时随地访问系统功能。

总的来说，这个基于Java的客户管理系统不仅功能全面，而且架构清晰，能够满足大多数企业的客户管理需求。希望这篇博文能够为读者提供一个全面的了解，也欢迎感兴趣的读者深入研究源码，探索更多细节。