![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 59
Eirice
地图业务质量检测机,3维模型业务的搬运工
展开
-
浅谈Vue3 computed计算属性
官方给出的解释:接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象// 只读 function computed < T >(getter :() => T , debuggerOptions?原创 2023-07-31 14:21:04 · 320 阅读 · 0 评论 -
浅谈vite与webpack的区别及Vite为什么那么快
Vite,webpack原创 2022-05-25 11:10:02 · 3119 阅读 · 0 评论 -
Vue3.0+typescript+element plus 持续更新中
1.Node环境配置推荐使用nvm 管理node.js Vue3.0及后续版本均在12x后的node版本中运行,nvm具体操作可以异步度娘2.Vue3.0构建方式官方给出了两种直接构建方式,前提是在cli4x之后,若脚手架版本过低可以@next升级后使用1.> vue create xxx 传统构建方式 有npm 驱动2.> npm install -g create-vite-app使用 ‘create-vite-app xxx’ 的方式区别在于传统的 create xx原创 2021-04-09 10:23:20 · 586 阅读 · 0 评论 -
MineMap动态路径规划方案
首先我们可以观察常用的百度和高德两家地图自带的路径规划都是基于了起点终点已知情况下根据类型区分(步行,骑行,驾车)等采用路径最短,路径拥堵指标等综合规划出的一套路线MineMap同样也提供了基础的路径规划服务,开发者需要在使用时注意:MineMapLBS同样也是最多支持7个选点 。起点+终点 +5个经过点的 /** * @Description:自动路径规划 生产最短路径 及起始点 * @Author: ShiWei * @Date: 2020..原创 2021-03-22 15:15:55 · 1980 阅读 · 0 评论 -
前端js+canvas实现雷达扫描效果
//页面容器 <div class="canvas_loop" v-show="isCanvas"> <canvas id="can" width="490" height="490" style=" margin:0 auto;"></canvas> </div>//调用 Rds.init() //雷达主体 ////////////////////////////////////////////////.原创 2021-02-03 16:32:19 · 2757 阅读 · 0 评论 -
前端实时刷新页面、操作后停止自动刷新,无操作后重新启动刷新
前端很多页面会要求可以实时刷新页面内容,切在响应操后短暂终止无操作后继续定时刷新,这里需求一般多集中在大屏信息展示的页面中我们针对此可以进行一次动作分解1.了解刷新的整体流程其中我们需要用到两个定时器,一个是总流程的定时刷新,另外一个就是我们熔断器的定时刷新/** * @Description: * 自动更新及暂停更新页面信息 初始化页面后一分钟钟内刷新,发生任何操作后停止更新,当无操作1min后重启更新 * @Author: ShiWei * @Date: 2021-01-28原创 2021-02-03 16:23:41 · 2327 阅读 · 0 评论 -
js数组赋值改变一个,引发原数组改变问题
我们常常在Vue项目中的Data 中会定义很多数据变量,类型也多样。老司机可能轻车熟路,但且有老马失蹄数组,private cardList:Array<any>=[]; 作为我们常用的一个数据类型,我们真的那么了解它么?很多人在面试时候也会被问到Vue data()中的的Object,Array可以直接赋值修改吗?有什么问题吗?要解答这些首先我们要明确一个问题Array在内存中的存储方式Array ======>> 它指向的是一段内存地址 public原创 2021-01-05 11:04:04 · 2532 阅读 · 0 评论 -
mapbox/MineMap单一图层绘制多元素后点击变更指定点击位置元素属性
背景分析:采用Layer绘制方案中存在很多情况下需求在一张地图绘制n个属性显示的问题,例如行政区划面,边界等等。例如如下场合未知多个元素汇集在同一张地图实例上去做显示,编辑等效果。处理方案:1.第一反应是N个layer叠加显示优点:数据处理简单,执行编辑方案简单缺点:需要使用存储全局变量多,绘制性能占用大,内存占用大,后续清理图层,清理数据麻烦2.单图N元素的显示核心利用 数据组装时 组装 features=[];优点:需要使用存储变量少,绘制性能占用低,图层唯一,数据,图层清理简单。整体原创 2020-11-18 11:12:50 · 1900 阅读 · 0 评论 -
TypeScript+VueCli3+Router+Vuex
前面分享过在cli2x下typescript的开发,这次分享的是目前比较贴近Vue3bate版本的cli3下的typescript开发不了解typescript的同学可以先去看看基本的typescript跳过createVue阶段 我们直接看生产环境下的目录结构与cli2下的目录我们不再做过多的比较,我们只看typeScript下文件的变化1.main.ts 我们发现其实并没有什么变化2.App.vue作为路由页面初始化给出的入口很多同学喜欢直接在App下进行后续开发,我个人喜欢使用新建Ho原创 2020-11-05 16:33:25 · 568 阅读 · 0 评论 -
js树形数据处理--树形数据转换,获取指定类型节点下的所有子节点或指定类型下的所有父节点
常用的UI组件为我们提供了很便捷的树形展示和操作方案,例如ant,element,Iview等Tree组件;以此为基础,无历是友好的java同学直接给你treeList 还是评级结构下的前端组装数据的处理仍需要使用者自己来动手为了事半功倍工具函数是不可少的1.树形数据组装: /** * @Description:sourceData数据源 * @Author: ShiWei * @Date: 2020-11-04 */export const cre原创 2020-11-04 16:14:39 · 2388 阅读 · 0 评论 -
前端-传参安全处理window.btoa base64加密,线性对称加密
前端参数传输安全的必要性我们在任何场合都不应该直接或间接的暴露用户信息,或核心参数指标在浏览器上即是做不到无法查看也应做基本的加密处理放置恶意攻击或信息泄露那么如何保证自己前端简单又便捷的生成加密参数呢1.我们可以使用window.btoa() window对象自带的一个base64加密规则实现 前提参数需要时独立的string。 解密方式 是将加密后的文本使用window.atob(Str) 注意Str: 必需是一个通过 btoa() 方法编码的字符串。代码中我们可以这样使用 /*原创 2020-10-28 17:08:47 · 2700 阅读 · 1 评论 -
Vuex---数据持久化的多种方式
vuex无论你喜不喜欢或者想不想,但凡涉及到了Vue项目多数时候你都会需要。但万物都有弊端,页面刷新后状态,数据丢失一直很头大。而这个问题我们也常常在面试中被问到,传统的解决方案是Vuex+sessionStorage等存储方案解决好吧 不墨迹直接上封装好的干货,喜欢那个选那个。直接在Vuex中调用即可var Storage = { // ==================sessionStorage设置缓存================ // 设置缓存 sessionSet: f原创 2020-10-13 16:35:30 · 2936 阅读 · 0 评论 -
Vue源码解析------Part1认识Flow
随手打开一个网页,输入’Vue源码’各种五花八门的介绍都能让你或多或少的理解一些。但多数时候我们都停在了"use"这个阶段。举一个很简单的例子,一个中量级的Vue项目多人合作开发。然后统一的代码风格,愉快的开发过程。在一段时间的手舞足蹈后有人掉队了。回头看看接手的变成你一个人了,内心窃喜(成果都是我的了)但常年的快速开发让你也很敏感(接手接锅)!!!打开前几个社畜的模块你发现了很多不好的习惯例如 props [XX], ""诸如此类的写法。手起刀落你开始正篇幅的找然后开始改。改了玩编辑器没有黄色警告了原创 2020-10-12 11:30:54 · 145 阅读 · 0 评论 -
地图已知一个坐标和一个半径生成随机多边形
背景这个方案背景其实就是上篇中那次快速响应的一个额外需求,客户需要一个面来表示一个特定的区域,但客户只能提供一个点,且要求生成的图形不能是很规则的圆,长方形或者正方形需求分析:已知一个点center,一个半径R。我们首先能想到的就是一个圆。以当前圆的圆心为基点我们可以将该圆切割成4个象限。那么是否我们可以使用随机的角度去去这个四个象限内的随机坐标呢?初次实验,结果是成立的满足可以四边形需求。但仍不满足我们多边不含(四边)的需求。如果想做我们需要一个合理的算法支撑。时间是不允许我这样考虑的换个思路:外原创 2020-09-17 11:05:24 · 921 阅读 · 0 评论 -
基于mineMap的地图台风灾害预警轨迹可视化方案
1.需求概要可视化界面显示气象云图及台风中心运动变化,实时数据显示;2.效果预览方案实施1.>图层构成分析:可视范围内构成的应该包含基础图层和动态移动图层,运动线路,运动风标,及运动信息框;2.>结构拆分://:基于但图层创建多个根据风力大小为半径的风面圆图层;数据组装: /** * @Description:圆心处理 * @Author: ShiWei * @Date: 2020-09-07 */原创 2020-09-08 17:09:55 · 1475 阅读 · 3 评论 -
Vue篇01--送给初学者的小礼物个性背景特效登录界面
背景图+js鼠标移动折线特效直接上效果图速食版模块login<template> <div id="login"> <!-- 背景及不规则图形效果 --> <div id="particles-js"> <div class="sk-rotating-plane"> </div> </div> <div class=原创 2020-08-04 16:18:28 · 672 阅读 · 0 评论 -
前端篇--VueX常用构建使用方式(getters,mutations,...mapGetters,...mapMutations)
VueX---->Vue中标准的状态管理库1.了解业务常见,多问问自己为什么要使用VueX.2.Vuex的组成部分3.如何快速构建自己的Store4.项目上如何使用初学者眼中的VueX1.当你是一个Vue的初学者时,无论你看多少资料,听多少人说Vue,总会时不时让你听到一个名词“VueX”然而你看完官网介绍,网上数不清的案例后内心的真实写照:很多时候讲地再多不如实际操作一下。放我们来构建一个最简单的业务场景A组件有一个MODAl弹窗,B页面是一个独立的编辑页面,现在A,B页面都原创 2020-07-15 16:40:15 · 254 阅读 · 0 评论 -
vue项目多表格展示小技巧(tableAny)
Vue多表格展示及导出1.设计背景:在有限的容器内展示以多表格形式展示数据,不能使用单一表格绘制添加滚动轴2.期望效果3.需求分析:1.在有限的容器内使用table组件但,但渲染成本回大大增加,table:表头+数据;2.替代方案,前端仿写成表格样式,但采用简单的dom绘制。对比:方案2更具灵活性,且渲染成本回大大降低。可控制性增加4.实现思路:1.表格数据一般由两部分构成,但目前形式下 推荐使用一个list返回,这种方式后台也会很喜欢list{“xx”:xx,…}.2.数据解构,分离出原创 2020-06-29 10:34:12 · 4663 阅读 · 0 评论 -
vue使用地图道路渐变色绘制解决方案
一:需求点:对数动力道路,车辆,人流道路,载能分析道路等等道路渐变色属性支持:mapBox(支持),mineMap(3.0支持,目前我们内部使用);官网提供的为mineMap2.0(不支持),传统瓦片地图(不支持)解决对象:1.使用传统道路绘制方式,绘制道路的地图。2.mineMap2.0使用者。3.传统瓦片地图使用方案者。核心:道路数据特点,geo数据中核心点的coordinates:[]是一个Array这是我们可以最大化利用的一点;方案:已知的所有道路coordinates是一个连续的数量原创 2020-06-15 15:00:26 · 1949 阅读 · 1 评论 -
前端面试-浅谈New vue 之后发生了什么
New Vue如果有看过源码的同学,不难发现从⼊⼝代码开始我们先来分析 new Vue 之后发⽣了哪些事情。new 关键字在 Javascript 语⾔中代表实例化是⼀个对象。⽽ Vue 实际上是⼀个类,类在 Javascript 中是⽤ Function 来实现的,来看⼀下源码,在 src/core/instance/index.js中。function Vue (options) { if (process.env.NODE_ENV !== 'production'&&原创 2020-06-08 11:44:34 · 531 阅读 · 0 评论 -
web面试之正确理解GET和POST的区别
什么是GET和POST广义的理解其实就是数据请求的两种方式,区别的也基本人尽可之1.GET在浏览器回退时是无害的,而POST会再次提交请求。2.GET产生的URL地址可以被Bookmark,而POST不可以。3.GET请求会被浏览器主动cache,而POST不会,除非手动设置。4.GET请求只能进行url编码,而POST支持多种编码方式。5.GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。6.GET请求在URL中传送的参数是有长度限制的,而POST么有。7.对参数原创 2020-05-15 09:54:30 · 239 阅读 · 0 评论 -
轨迹回放与echarts图表响应变化(基于mapbox/mineMap)此方式适用于目前绝大部分地图服务
一:需求分析1.场景:多数道路车辆信息都会设计到历史轨迹回放,包含当前车辆信息,道路信息,已经随之变化的响应数据变更,常采用图表形式展现2:效果展示静态:二 核心分析轨迹 要素:点[经纬度],车头的方向(保证车的反向是当前的行进方向),速度(车的行驶速度)2.图表联动时数据的传输:当前点位与之对应的变化图表的数据应该时同步的三 解决方案1.了解可以实时播放的数据处理方式:1-1:后端提供接口,按照约定的时间间隔实时获取1-2:前端一次获取,使用定时器触发利弊分析:后端实时获取可以省去原创 2020-05-14 18:25:00 · 2148 阅读 · 7 评论 -
前端片--常见数据处理工具函数,日期函数,缓存设置,Vue指令
@前端工具函数篇(最近工作比较忙整理一下)常用树形结构数据处理export const NewTree = function (sourceData,id,pid) { // 转换成插件需要格式的树结构 // const id = id // const pid = pid // 深拷贝 const data = sourceData.map(item => { return Object.assign({}, item) }) const res = []原创 2020-05-08 18:30:22 · 303 阅读 · 0 评论 -
前端js基础防抖函数,节流函数应用意义,场景
函数防抖概念**函数防抖当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 **export function debounce(func,wait=500){let timeOut=null; (用来处理事件的定时器)return function(event){ clearTimeout(timeout); //每次触发前先清除上一次的定...原创 2019-12-05 16:18:44 · 331 阅读 · 2 评论 -
vue使用axios拦截配置(涵盖fecth及多样拦截配置)
import axios from 'axios'import {Message} from 'iview'let util = {};axios.defaults.withCredentials = true;util.ajax = axios.create({ // baseURL: ajaxUrl, timeout: 120000, withCredentials:...原创 2019-11-28 18:21:27 · 356 阅读 · 0 评论 -
前端常用数据处理方式总结
工具:lodash对于前端而言数据处理并不是核心但是随着越来越高要求产生前端数据处理变成了常态;常常因为后端同事无法处理某些特殊要求的时候就需要前端自己封装数据;lodash作为一个高性能的javascript数据工具库可以高效的帮我们解决这些;以数组对象为例:data=[“scr1”:{},“ser2”:{}]要获取其中的某些属性的数据;当数据量较小的时候我们可以直接获取对象的...原创 2019-11-07 15:31:43 · 1696 阅读 · 0 评论 -
Vue常见异常处理技巧
常见5中Vue异常报错处理常见错误第一种:引用一个不能存在的变量:<div id="app" v-cloak> Hello, {{text}}</div上述代码运行后不会抛出错误,但是在控制台会有[Vue warn]消息。第二种:将变量绑定到一个被计算出来的属性,计算的时候会抛出异常。<div id="app" v-cloak> Hello,...原创 2019-06-22 15:46:33 · 4917 阅读 · 0 评论