SpringBoot + Vue 客户关系管理系统设计与实现

系统概述

本项目采用 B/S 架构，基于 Java 语言与 MySQL 数据库构建，后端依托 Spring Boot 框架，前端结合 Vue.js。系统设计旨在将客户管理的各个环节集中化、数字化，确保在稳定运行的前提下支持多角色协同。整体架构遵循组件化设计，逻辑层与数据层分离，便于后续的功能扩展与维护。

技术选型

• 开发语言：Java
• 后端框架：Spring Boot
• 前端技术：Vue.js、JavaScript、CSS3
• 开发工具：IDEA / VS Code
• 数据库：MySQL 5.7/8.0
• JDK 版本：1.8
• 构建工具：Maven 3.8.1

功能模块设计

系统主要划分为管理员、客户和员工三种角色，不同角色的权限控制严格区分，确保数据安全。

管理员端功能

管理员拥有最高权限，负责系统的整体运营与维护。登录成功后，可访问首页概览及个人中心。核心管理模块包括：

• 基础信息管理：涵盖客户档案（账号、姓名、联系方式等）与员工信息（工号、职务、联系方式等）的增删查改。
• 业务资源管理：管理产品库（名称、类型、品牌、库存、售价）及服务项目的定义。
• 订单与流程管理：处理产品购买记录与服务订单，包括下单时间、支付状态及备注信息。
• 服务调度：进行服务分配、任务处理进度跟踪、反馈收集以及归档管理。
• 数据分析：提供客户分析视图，辅助决策。

客户与员工端功能

普通用户通过注册登录后进入个人工作台。客户侧主要关注消费体验，可查看产品信息、发起购买、追踪服务订单及提交反馈。员工侧则聚焦于任务执行，能够接收分配的服务工单，更新处理状态并归档历史记录。

核心逻辑实现

在身份认证环节，我们采用了 Token 机制来保障接口安全。以用户控制器为例，登录时校验用户名与密码，验证通过后生成 Token 返回给前端，后续请求需携带该 Token 进行鉴权。

/** * 登录相关 */ 
@RequestMapping("users") 
@RestController 
public class UsersController { 
    @Autowired 
    private UsersService usersService; 
    @Autowired 
     TokenService tokenService; 
    
     
     
     
     R  { 
           usersService.selectOne( <UsersEntity>().eq(, username)); 
        (user== || !user.getPassword().equals(password)) { 
             R.error(); 
        } 
           tokenService.generateToken(user.getId(),username, , user.getRole()); 
           R.ok(); 
        r.put(, token); 
        r.put(,user.getRole()); 
        r.put(,user.getId()); 
         r; 
    } 
    
     
     
     
     R { 
        (usersService.selectOne( <UsersEntity>().eq(, user.getUsername())) !=) { 
             R.error(); 
        } 
        usersService.insert(user); 
         R.ok(); 
    } 
    
     
     
     R  { 
        request.getSession().invalidate(); 
         R.ok(); 
    } 
    
     
     
     R  { 
           usersService.selectById((Integer)request.getSession().getAttribute()); 
        (newPassword == ){ 
             R.error() ; 
        } 
        (!oldPassword.equals(users.getPassword())){ 
             R.error(); 
        } 
        (newPassword.equals(users.getPassword())){ 
             R.error() ; 
        } 
        users.setPassword(newPassword); 
        usersService.updateById(users); 
         R.ok(); 
    } 
    
     
     
     R { 
        EntityWrapper<UsersEntity> ew =  <UsersEntity>(); 
           usersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params)); 
         R.ok().put(, page); 
    } 
    
     
     
     R { 
        List<UsersEntity> user = usersService.selectList(); 
        (user.size() > ){ 
            usersService.deleteBatchIds(Arrays.asList(ids)); 
        }{ 
             R.error(); 
        } 
         R.ok(); 
    } 
}