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

谁借莪１个温暖的怀抱￠ 2022-09-13 04:03 178阅读 0赞

# 一 项目介绍 #

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项目功能结构图 #

项目功能结构图：包含下面的核心模块 客户管理 销售管理 ，报表管理 系统管理 员工管理 如下图  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

# 四 项目开发和设计 #

登录页：

登录这块其实做了很多事情，比如form表单验证，验证码处理，存储用户登录信息，然后登录成功 读取用户动态菜单，渲染路由处理.  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]  
核心代码：

登录成功 进入系统首页.  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]  
报表模块:

报表模块是加载 客户销售数据报表。统计客户的销售数量。分别通过 饼图，柱状图 折线图，圆环图 进行统计，非常直观 明白…  
项目内容很多,一篇文章说不完 需要更多资料 和 需要答 疑 加 扣 扣 ： 二 三 零 零 四 五 零 三 四 二  
下面图是 报表效果图:  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]  
核心处理代码:

import {  defineComponent ,computed,ref,getCurrentInstance ,toRefs,reactive } from 'vue'
        import {  useStore } from "vuex";
        import * as echarts from 'echarts';
        export default defineComponent({ 
        mounted(){ 
           this.getSaleReports()  
        },
        setup(props,context) { 
        	//获取store实例
            const $store = useStore(); 
            const dataList = ref([])
            //获取后台报表数据
            const getSaleReports = ()=>{ 
                $store.dispatch('report/getSaleReports')
                .then((data) => { 
                  //处理报表数据
                   data.saleReportsData.forEach(element => { 
                     let name = element.khname
                     let value = element.salenum
                     dataList.value.push({ name:name,value:value})
                   });
                  showSaleReports();
                })
                .catch((err) => { 
                  console.log('失败' + err)
                })
                showSaleReports()
            }
            	//加载报表
             const showSaleReports = ()=>{ 
                    // 初始化echarts实例 ****************************饼图********************
                    let myChart = echarts.init(document.getElementById('main'));
                    //饼图效果
                    let option = { 
                      title: { 
                        text: '客户销售统计报表',
                        subtext: '销售数据',
                        left: 'center'
                      },
                      tooltip: { 
                        trigger: 'item'
                      },
                      legend: { 
                        orient: 'vertical',
                        left: 'left'
                      },
                      series: [
                        { 
                          name: '销量',
                          type: 'pie',
                          radius: '50%',
                          data: dataList.value,
                          emphasis: { 
                            itemStyle: { 
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                          }
                        }
                      ]
                    };
                    myChart.setOption(option)
                    }
                     return{ 
    			       dataList,
    			       getSaleReports,
    			       showSaleReports    
         }
        }
        })

感恩有您的关注，感恩有您的陪伴，生命有您而灿烂如花，喜欢就多来学习学习… 就多来csdn…

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/fbd1d902c62242689dbdfb88b732ff42.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/c8416ff18d604243ade1cc8dc60bc4df.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/c4add87755ea4d1d80c8dbdd8cd07ee4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: /images/20220828/aa1f1a3596b14cb081394c873fe7ae3c.png