一 项目介绍
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
})
}
登录成功 进入系统首页.
报表模块:
报表模块是加载 客户销售数据报表。统计客户的销售数量。分别通过 饼图,柱状图 折线图,圆环图 进行统计,