vue3+elementplus+ts+vite+router4+springboot版CRM客户关系管理系统

一 项目介绍

CRM客户关系管理系统是基于VUE3+elementplus+vite+ts开发的前后端分离的项目，从系统登录，后台首页，客户维护，销售维护，报表管理，员工管理，系统管理等等功能 含有客户关系系统和权限系统。

二 项目开发技术和工具

前端：vue3 elementplus vite ts vuex router4 echart 等技术点
后端：springboot mybatis springmvc spring springsecurity jwt 等技术点
数据库: 关系型数据库mysql 或者mangodb
开发环境: JDK13版本
开发工具：idea或者eclipse vscode或者webstorm 或者hbuilderx

三 CRM项目功能结构图

项目功能结构图：包含下面的核心模块 客户管理 销售管理 ，报表管理 系统管理 员工管理 如下图

四 项目开发和设计

登录页：

登录这块其实做了很多事情，比如form表单验证，验证码处理，存储用户登录信息，然后登录成功 读取用户动态菜单，渲染路由处理.

核心代码：

	const doLogin =()=> {
        loading.value = true;
        //处理验证码
        if(loginFormState.loginForm.checkCode == null || loginFormState.loginForm.checkCode == ''){
            ElMessage({
                message: h('p', null, [
                  h('span', null, '请填写验证码! '),
                  h('i', { style: 'color: red' }, ''),
                ]),
              })
              loading.value = false
               return;
        }else{
	
            if(state.imgCode != loginFormState.loginForm.checkCode){
              ElMessage({
                message: h('p', null, [
                  h('span', null, '验证码填写有误! '),
                  h('i', { style: 'color: red' }, ''),
                ]),
              })
              loading.value = false
               return;
            }

        }
        //处理登录
        $store.dispatch('sysuser/login',loginFormState.loginForm).then(()  => {
            router.push({ path: '/' })
            //存储登录信息
            sessionStorage.setItem("loginName",loginFormState.loginForm.username)
            loading.value = false
        }).catch(() => {
          ElMessage({
                message: h('p', null, [
                  h('span', null, '用户名或者密码有错误! '),
                  h('i', { style: 'color: red' }, ''),
                ]),
              })
          loading.value = false
        })
      }
      

登录成功 进入系统首页.

报表模块:

报表模块是加载 客户销售数据报表。统计客户的销售数量。分别通过 饼图，柱状图 折线图