从0到1完成一个Vue后台管理项目（二十一、网上地图资源、树形控件及路由权限分析、路由守卫）

最新推荐文章于 2023-02-09 09:03:21 发布
最新推荐文章于 2023-02-09 09:03:21 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： 从0开始创建vue项目 文章标签： vue.js 前端 javascript echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59816940/article/details/128643505
版权

往期

从0到1完成一个Vue后台管理项目（一、创建项目）

从0到1完成一个Vue后台管理项目（二、使用element-ui）

从0到1完成一个Vue后台管理项目（三、使用SCSS/LESS，安装图标库）

从0到1完成一个Vue后台管理项目（四、引入axios、配置路由）

从0到1完成一个Vue后台管理项目（五、登录页（表单校验的使用和封装））

从0到1完成一个Vue后台管理项目（五、登录页，mock，token，axios封装）

从0到1完成一个Vue后台管理项目（六、404页）

从0到1完成一个Vue后台管理项目（七、Header、Footer、页面布局）

从0到1完成一个Vue后台管理项目（八、Menu改造完善、子组件创建、配置路由）

从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）

从0到1完成一个Vue后台管理项目（十、列表API封装、Table列表渲染、表格数据转换）

从0到1完成一个Vue后台管理项目（十一、前端分页实现）

从0到1完成一个Vue后台管理项目（十二、学生table列表删除、查询、重置）

从0到1完成一个Vue后台管理项目（十三、信息列表页面实现：对话框新增、DateTimePicker 日期时间选择器）

从0到1完成一个Vue后台管理项目（十四、对话框封装、接口联通、api优化 很重点（封装思想））

从0到1完成一个Vue后台管理项目（十五、作业列表、表格数据方法的封装）

从0到1完成一个Vue后台管理项目（十六、后端分页方法以及分页组件的封装以及复用）

从0到1完成一个Vue后台管理项目（十七、使用Echarts：柱状图、折线图）

从0到1完成一个Vue后台管理项目（十八、基础地图绘制）

从0到1完成一个Vue后台管理项目（十九、地图区域样式设置、区域文字和立体设置）

从0到1完成一个Vue后台管理项目（二十、地图涟漪、线图）

网上地图资源

chartsdev.com：chartsdev.com
我们随便找一个资源
在这里插入图片描述
我们可以直接cv数据
在这里插入图片描述

<template>
  <div class="score-map">
    <div id="main"></div>
  </div>
</template>

<script>
import chinaJSon from 'echarts/map/json/china.json'
export default {
  data(){
    return{

    }
  },
  mounted() {
    let myChart = this.$echarts.init(document.getElementById('main'))
    this.$echarts.registerMap('china', chinaJSon)

    // 从这里开始复制
    var name_title = "中国人民大学2017年各省市计划录取人数"
    var subname = '数据爬取自千栀网\n，\n上海、浙江无文理科录取人数'
    var nameColor = " rgb(55, 75, 113)"
    var name_fontFamily = '等线'
    var subname_fontSize = 15
    var name_fontSize = 18
    var mapName = 'china'
    var data = [
      {name:"北京",value:177},
      {name:"天津",value:42},
      {name:"河北",value:102},
      {name:"山西",value:81},
      {name:"内蒙古",value:47},
      {name:"辽宁",value:67},
      {name:"吉林",value:82},
      {name:"黑龙江",value:66},
      {name:"上海",value:24},
      {name:"江苏",value:92},
      {name:"浙江",value:114},
      {name:"安徽",value:109},
      {name:"福建",value:116},
      {name:"江西",value:91},
      {name:"山东",value:119},
      {name:"河南",value:137},
      {name:"湖北",value:116},
      {name:"湖南",value:114},
      {name:"重庆",value:91},
      {name:"四川",value:125},
      {name:"贵州",value:62},
      {name:"云南",value:83},
      {name:"西藏",value:9},
      {name:"陕西",value:80},
      {name:"甘肃",value:56},
      {name:"青海",value:10},
      {name:"宁夏",value:18},
      {name:"新疆",value:67},
      {name:"广东",value:123},
      {name:"广西",value:59},
      {name:"海南",value:14},
    ];

    var geoCoordMap = {};
    var toolTipData = [
      {name:"北京",value:[{name:"文科",value:95},{name:"理科",value:82}]},
      {name:"天津",value:[{name:"文科",value:22},{name:"理科",value:20}]},
      {name:"河北",value:[{name:"文科",value:60},{name:"理科",value:42}]},
      {name:"山西",value:[{name:"文科",value:40},{name:"理科",value:41}]},
      {name:"内蒙古",value:[{name:"文科",value:23},{name:"理科",value:24}]},
      {name:"辽宁",value:[{name:"文科",value:39},{name:"理科",value:28}]},
      {name:"吉林",value:[{name:"文科",value:41},{name:"理科",value:41}]},
      {name:"黑龙江",value:[{name:"文科",value:35},{name:"理科",value:31}]},
      {name:"上海",value:[{name:"文科",value:12},{name:"理科",value:12}]},
      {name:"江苏",value:[{name:"文科",value:47},{name:"理科",value:45}]},
      {name:"浙江",value:[{name:"文科",value:57},{name:"理科",value:57}]},
      {name:"安徽",value:[{name:"文科",value:57},{name:"理科",value:52}]},
      {name:"福建",value:[{name:"文科",value:59},{name:"理科",value:57}]},
      {name:"江西",value:[{name:"文科",value:49},{name:"理科",value:42}]},
      {name:"山东",value:[{name:"文科",value:67},{name:"理科",value:52}]},
      {name:"河南",value:[{name:"文科",value:69},{name:"理科",value:68}]},
      {name:"湖北",value:[{name:"文科",value:60},{name:"理科",value:56}]},
      {name:"湖南",value:[{name:"文科",value:62},{name:"理科",value:52}]},
      {name:"重庆",value:[{name:"文科",value:47},{name:"理科",value:44}]},
      {name:"四川",value:[{name:"文科",value:65},{name:"理科",value:60}]},
      {name:"贵州",value:[{name:"文科",value:32},{name:"理科",value:30}]},
      {name:"云南",value:[{name:"文科",value:42},{name:"理科",value:41}]},
      {name:"西藏",value:[{name:"文科",value:5},{name:"理科",value:4}]},
      {name:"陕西",value:[{name:"文科",value:38},{name:"理科",value:42}]},
      {name:"甘肃",value:[{name:"文科",value:28},{name:"理科",value:28}]},
      {name:"青海",value:[{name:"文科",value:5},{name:"理科",value:5}]},
      {name:"宁夏",value:[{name:"文科",value:10},{name:"理科",value:8}]},
      {name:"新疆",value:[{name:"文科",value:36},{name:"理科",value:31}]},
      {name:"广东",value:[{name:"文科",value:63},{name:"理科",value:60}]},
      {name:"广西",value:[{name:"文科",value:29},{name:"理科",value:30}]},
      {name:"海南",value:[{name:"文科",value:8},{name:"理科",value:6}]},
    ];

    /*获取地图数据*/
    myChart.showLoading();
    var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
    myChart.hideLoading();
    mapFeatures.forEach(function(v) {
      // 地区名称
      var name = v.properties.name;
      // 地区经纬度
      geoCoordMap[name] = v.properties.cp;

    });

// console.log("============geoCoordMap===================")
// console.log(geoCoordMap)
// console.log("================data======================")
    console.log(data)
    console.log(toolTipData)
    var max = 480,
        min = 9; // todo
    var maxSize4Pin = 100,
        minSize4Pin = 20;

    var convertData = function(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };
    let option = {
      title: {
        text: name_title,
        subtext: subname,
        x: 'center',
        textStyle: {
          color: nameColor,
          fontFamily: name_fontFamily,
          fontSize: name_fontSize
        },
        subtextStyle:{
          fontSize:subname_fontSize,
          fontFamily:name_fontFamily
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          if (typeof(params.value)[2] == "undefined") {
            var toolTiphtml = ''
            for(let i = 0;i<toolTipData.length;i++){
              if(params.name==toolTipData[i].name){
                toolTiphtml += toolTipData[i].name+':<br>'
                for(let j = 0;j<toolTipData[i].value.length;j++){
                  toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                }
              }
            }
            console.log(toolTiphtml)
            // console.log(convertData(data))
            return toolTiphtml;
          } else {
            for(let i = 0;i<toolTipData.length;i++){
              if(params.name==toolTipData[i].name){
                toolTiphtml += toolTipData[i].name+':<br>'
                for(let j = 0;j<toolTipData[i].value.length;j++){
                  toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                }
              }
            }
            console.log(toolTiphtml)
            // console.log(convertData(data))
            return toolTiphtml;
          }
        }
      },
      // legend: {
      //     orient: 'vertical',
      //     y: 'bottom',
      //     x: 'right',
      //     data: ['credit_pm2.5'],
      //     textStyle: {
      //         color: '#fff'
      //     }
      // },
      visualMap: {
        show: true,
        min: 0,
        max: 200,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: {
          // color: ['#3B5077', '#031525'] // 蓝黑
          // color: ['#ffc0cb', '#800080'] // 红紫
          // color: ['#3C3B3F', '#605C3C'] // 黑绿
          // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
          // color: ['#23074d', '#cc5333'] // 紫红
          color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#1488CC', '#2B32B2'] // 浅蓝
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿

        }
      },
      /*工具按钮组*/
      // toolbox: {
      //     show: true,
      //     orient: 'vertical',
      //     left: 'right',
      //     top: 'center',
      //     feature: {
      //         dataView: {
      //             readOnly: false
      //         },
      //         restore: {},
      //         saveAsImage: {}
      //     }
      // },
      geo: {
        show: true,
        map: mapName,
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false,
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#3B5077',
          },
          emphasis: {
            areaColor: '#2B91B7',
          }
        }
      },
      series: [{
        name: '散点',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        symbolSize: function(val) {
          return val[2] / 10;
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: '#05C3F9'
          }
        }
      },
        {
          type: 'map',
          map: mapName,
          geoIndex: 0,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderColor: '#3B5077',
            },
            emphasis: {
              areaColor: '#2B91B7'
            }
          },
          animation: false,
          data: data
        },
        {
          name: '点',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbol: 'pin', //气泡
          symbolSize: function(val) {
            var a = (maxSize4Pin - minSize4Pin) / (max - min);
            var b = minSize4Pin - a * min;
            b = maxSize4Pin - a * max;
            return a * val[2] + b;
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 9,
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#F62157', //标志颜色
            }
          },
          zlevel: 6,
          data: convertData(data),
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(data.sort(function(a, b) {
            return b.value - a.value;
          }).slice(0, 5)),
          symbolSize: function(val) {
            return val[2] / 10;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: 'yellow',
              shadowBlur: 10,
              shadowColor: 'yellow'
            }
          },
          zlevel: 1
        },

      ]
    };
    myChart.setOption(option);
  }
}
</script>

<style lang="scss" scoped>
.score-map{
  width: 100%;
  #main{
    width: 100%;
    height: 500px;
  }
}
</style>

效果
在这里插入图片描述

使用el-tree

在这里插入图片描述
我们可以打印一下值，看看是什么
页面效果
在这里插入图片描述

动态路由思路

  1. 权限管理和动态路由的思路
  2. 根据不同的用户登陆上来，返回对应的路由权限菜单
  3. 一般可以通过树形控件达到权限的精准控制，根据不同的角色，勾选不同的菜单权限，将菜单数据提交给
    后端进行保存
  4. 后端保存之后，在用户进行登录都时候就会查询该用户的菜单数据，最终进行动态的渲染展示
  5. 动态添加路由使用addRoutes方法

获取树形控件选中的值

在这里插入图片描述
在这里插入图片描述

路由导航守卫拦截验证

在这里插入图片描述
这样我们必须通过login才能进入别的页面

林多多@
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
自定义指令和路由守卫进行权限拦截, vue后台管理系统
09-26
vue后台管理项目权限控制开发雏形,使用自定义指令和路由守卫 权限控制 vue后台管理端 博客https://blog.csdn.net/github_35631540/article/details/97674939
vue后台管理之挂载路由守卫
zailaisanwan的博客
12-09 164
挂载路由导航守卫，访问要cookie的页面时，没有登录就直接跳转到登录页面，写在router.js上 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({}) router.beforeEach((to, from, next) => { // to指要访问的地址 // form值要跳转的地址 // next是一个函数，表示放行
VUE项目中页面权限和按钮权限
thewar196的博客
06-25 2805
vue项目权限管理 页面权限管理 按钮权限管理
vue-admin-template-master组件学习-Tree 树形控件（1）
木蒙的博客
08-17 916
vue-admin-template-master组件学习-Tree 树形控件（1） 最终效果 一、前端部署 1）router路由 在router文件夹中的index.js中添加路由 { path: '/subject', component: Layout, redirect: '/subject/info', name: '课程分类列表', meta: { title: '课程分类列表', icon: 'example' }, children: [
Vue路由守卫及页面登录权限控制的设置方法(两种)
10-15
主要介绍了Vue路由守卫及页面登录权限控制的设置方法,本文通过实例代码通过两种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
自写原生仿vue数据绑定和路由
04-28
本文将详细解析"自写原生仿vue数据绑定和路由"的知识点，通过理解这些核心概念，你可以更好地理解Vue.js的工作原理，并能够自行实现一个简易版的Vue。 首先，我们来看数据绑定。Vue.js的核心特性之一就是它的双括号...
2021最新Vue3打造一款音乐播放器 (源码).zip
10-20
总结来说，这个Vue3音乐播放器项目涵盖了现代前端开发的多个方面，包括Vue3的新特性、前端音频处理、路由管理、样式设计以及项目构建工具的使用，对于想要深入学习Vue3和前端开发的开发者来说，是一个很好的实践案例...
仿网易云音乐平台（vue项目）
06-30
为了提升用户体验，项目可能会采用Vue.js的特性如懒加载、路由守卫、异步组件等进行性能优化，减少不必要的资源加载，提高页面加载速度。 以上是"仿网易云音乐平台（vue项目）"中可能涉及的主要知识点，每个部分都...
几个简单的vue面试题
06-07
Vue.js 是一个流行的JavaScript框架，专门用于构建用户界面，尤其适用于单页面应用程序（SPA）。它的设计目标是简化前端开发流程，提高代码复用性和可维护性。Vue.js 的核心特性包括响应式数据绑定、组件系统、指令...
Vue面试题70道题目及答案
04-26
Vue.js 是一个流行的JavaScript框架，用于构建用户界面。它的核心特性包括数据驱动和组件化，使得开发者能够构建高性能、易维护的应用程序。Vue.js 的设计理念是渐进式，这意味着你可以根据项目的复杂性逐步引入Vue...
vue + el-tree 实现角色分配权限功能
Claudia_c的博客
09-18 700
HTML部分 <template> <div class="permissions-wrapper"> <!-- :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" --> <el-tree ref="permissionsTree" v-loading="loadingTree" :data="permissionsDat
vue3+element plus 树形控件权限控制
weixin_45621877的博客
02-09 1018
【代码】vue3+element plus 树形控件。
vue使用 高德百度地图 管理后台选择位置
小白菜
01-07 726
ps:调试了很多方式，申请了高德 百度地图，调试了各种的方法，也尝试了高德官方的demo，都是无果，都显示不出来地图，最后使用了百度地图 + vue-baidu-map插件得以解决。vue管理后台某字段需要选择位置。（我这边使用的是vue2）
Vue Element UI Tree 路由组件 树形菜单组件 视图组件 组件通信 （详解）
Bnana博客
03-19 2653
实现 菜单 树形 视图 动态显示bus.js同级组件通信 el-tree router-link :to="'/manor'" @click.native="searchtree('home')"> handleNodeClick bus.$on bus通信 bus.$emit
78.(前端)分配权限页面显示——树形结构使用（Element-ui的Tree树形控件）
m0_63953077的博客
10-26 2645
树形结构使用（Element-ui的Tree树形控件）
Element-UI+Vue实现开发权限
weixin_51351637的博客
10-22 4388
默认展开所有结点默认勾选结点 ，然后绑定一个数组@click="showSetRigthDialog(scope.row)"，scope.row代表着这一整行的数据对象，也就是人物，我们为什么要传入这个呢？因为我们要实现默认勾选结点，利用递归的方式。
分配权限树形结构怎么做
codercjw的博客
02-06 330
111
【Vue 权限管理(权限分配)
weixin_47906106的博客
02-22 4491
点击分配权限按钮展示所有权限 elementui Tree树形控件 在显示权限对话框的时候获取所有权限数据 后端返回数据格式 { data: [ { id: 101, authName: '商品管理', path: null, pid: 0, children: [ { id: 104, authName: '商品列表',
vue.js侦听器和过滤器的使用及使用案例
dat_stick的博客
05-09 407
vue.js中侦听器用于数据变化时执行异步或开销较大的操作 当侦听器所绑定数据发生变化时，通知到侦听器所绑定的方法，执行该方法 下面所做的例子为模拟注册时检查用户名是否可用操作 通过侦听input框中的内容对input框后方的提示进行改变，并判断用户名是否可用 <body> <div id="app"> <span>userName：</span> <span> <input t
vue后台管理系统项目从0到1
最新发布
08-25
Vue后台管理系统项目从0到1，可以按照以下步骤进行： 1. 创建项目：首先，使用Vue CLI工具创建一个新的Vue项目。可以使用命令行或图形界面工具来完成这一步骤。 2. 设计界面：根据需求，设计后台管理系统的界面。可以使用UI组件库（如Element UI、Ant Design Vue等）来加快开发速度。 3. 路由配置：使用Vue Router来配置路由，定义页面之间的跳转关系。可以根据后台管理系统的功能模块进行划分，设计合理的路由结构。 4. 数据管理：使用Vuex来管理全局的状态和数据。可以定义各个模块的状态、获取数据的方法，并在组件中使用。 5. 接口调用：根据后台管理系统与后端API的交互需求，使用Axios或其他HTTP请求库来发送请求并处理响应数据。 6. 功能开发：根据需求逐步开发各个功能模块。可以按照模块划分，分别开发不同的页面和组件。 7. 数据展示：根据后台管理系统的需求，使用Vue组件来展示数据，例如表格、图表等。可以使用第三方库来提供更多扩展功能。 8. 权限控制：根据需求，实现后台管理系统的权限控制功能。可以使用路由守卫、角色权限配置等方式来限制用户的操作权限。 9. 测试和调试：完成功能开发后，进行测试和调试，确保后台管理系统的稳定性和可靠性。 10. 打包部署：最后，使用Vue CLI提供的打包命令，将项目打包为静态文件，并部署到服务器上。 通过以上步骤，你可以从零开始构建一个Vue后台管理系统项目。当然，在实际开发中还会遇到各种具体问题和挑战，需要根据具体情况进行解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林多多@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值