Deku_Ln-CSDN博客

原创 Vue实现动态路由菜单配置

这里感谢router新加的addRoute(route:Array)方法，让我们可以进行相关的路由权限的配置。路由的权限配置这里我介绍一下结合后端的方法。首先我们需要对于路由信息进行数据库的存储，通过后端进行路由的权限控制在前端添加一个菜单管理的界面来让我们可以在前端进行路由的相关配置信息const router = new Router({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), isAddDynamicMenuRou

2021-01-05 16:50:52 2376 2

原创记录一下实现界面水印的方法

2021-01-02 10:19:19 364

原创记录一下echarts实现Tooltip自动显示

话不多说直接上代码. // tooltip跳转 // this.axisIndex指当前tootip所在索引 // barChart 是Echarts初始化后的DOM节点 // this.xAxis为横坐标长度 setAnimation() { this.clearTooltip(); // timeAnimation为我们设置的进行动态执行tooltip的方法 this.timeAnimation = setInterval((

2020-12-31 16:41:41 1853

原创 Vue实现前端简单的验证码校验功能

关于验证码校验，可以通过后端返回校验图片，也可以前端进行校验。这里通过Canvas来简单的实现验证码的校验。首先先看效果吧~~~这里就只是实现一个简单的验证码校验的效果，话不多说直接看代码吧关于这个验证码效果我把他封装成一个组件。<template> <div class="confirm_code"> <canvas id="confirm_id" :width="contentWidth" :height="contentHeight">&l

2020-12-29 14:16:49 3139 1

原创解决Vue路由懒加载Webpack热更新慢的问题（记录）

这里就想记录一下关于解决路由懒加载热更新慢的问题。我们知道使用路由懒加载可以优化我们系统的加载速度，但是在使用懒加载的时候在我们开发环境下会导致Webpack热更新慢的问题，致使我们运行项目会很漫长。（当然如果是通过Vue3的Vite的话，它是不用webpack的所以这里也不列举进来）那么我们就可以进行设置，在我们开发环境下就不用懒加载，在我们生产环境下就用懒加载就可以了。我们可以在路由设置的文件夹里增加一个开发环境路由配置和生产环境路由配置。我们设置了增加了一个import_develo

2020-12-28 14:37:32 1068

原创 reduce()实现数组去重

关于reduce()我们这里不做太多说明，主要明白这是一个类递归的方法。其中接受两个参数，一个是回调函数，一个是可选的默认值。arr.reduce((pre, cur, index, arr) => {}, 0)// 这里的pre是上一个递归后的返回值，而cur是当前值，这两个参数是必传的，index是当前索引，arr是原始//数组，是可选的；0是pre的默认值，是一个可选参数，我们在进行一些数学运算可以给他赋一个初始值这里我们主要运用reduce()的递归特性来完成数组的去重le

2020-12-18 23:24:12 2248 1

原创 IntersectionObserver实现图片懒加载（超详细！）

关于IntersectionObserver 官方上说明是提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根（root）。具体的内容可以参考官网解释：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver这里我们主要来用IntersectionObserve来实现图片的懒加载。<!DOCTYPE html><.

2020-12-07 09:41:45 3504 3

转载浅谈Blob

在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上，File继承自Blob。基本上前端主要用于下载预览文件的时候需要从后端获取到流数据来进行解析，这个时候就需要通过Blob来进行数据的定义。基本上我们对于文件的处理可以通过以下几种方式。通过window.URL.createObjectURL方法可以把一个blob转化为一个Blob URL，并...

2020-12-05 13:27:00 510

原创关于Object.assign()与深拷贝问题

1. 首先我们需要知道关于浅拷贝与深拷贝的问题。简单来讲，浅拷贝是指向和拷贝对象相同的内存地址，因为是共用一个地址，所以当拷贝对象发生变化时，我们新的对象也会发生变化。let arr1 = [1, 2, 3]let arr2 = arr1console.log(arr2)arr1[0] = 0console.log(arr2)console.log(arr1)这里我们可以看到在进行浅拷贝的时候，我们改变被拷贝对象，相应的拷贝对象也会发生变化。而深拷贝的时候，我们是开辟了一块新的内存地址

2020-12-04 14:40:00 844 1

原创前端实现文件下载功能Vue

由于最近遇到项目是从服务器下载相关模板文件，所以在这里进行相关问题的总结。就拿我要下载的xls文件为例。往往我们可以通过a标签进行文件的下载，地址就是我们在静态文件中存放文件的地址<a :href="downloadURL" download="MATERIAL.xls" class="download_btn">下载模板 </a>其中downloadURL为我们静态文件的地址（往往我们把静态文件放到static或public下，这样打包文件找起来会方便

2020-12-03 20:16:40 2210

原创 Vue 使用POST传参完成DELETE

在进行接口调用的时候，我们通常都会使用POST和GET方法来进行请求。虽然还有put和delete的，但是实际运用的还是不多，不过如果在后端定义好的请求是delete后，我们往往需要在前端发送对应的请求。如果这个时候你想用post方法来进行接口请求，需要对于接口请求进行一定的修改。 this.$http({ url: this.$http.adornUrl('/auth/oauth/token'), method: 'delete',

2020-12-03 19:59:23 1403 1

原创 gnvm node多版本管理，解决node版本冲突（详细）

对于node版本问题，一直很多诟病。如果你电脑需要跑多个系统，而且这些系统的node版本可能还都不一样，那么我们就不能一直卸载在安装，这个时候gnvm就能帮助我们实现node管理。首先我们需要先下载gnvmgnvm官网下载地址网盘下载，相对较快我们需要将下载好的gnvm文件放到我们node文件的根目录下。（这个操作是对于我们已经装过node的来说，我们不需要全部卸载）。可以在命令行中找到我们node.js的文件地址where node我们可以找到node的根目录。然后将gnvm放到node

2020-12-03 17:06:14 1001

原创 eCharts柱状图点击传值

以Angular为例，这里我将echarts封装成一个子组件，通过父子组件传值来将点击后的数据传给父组件来进行相关操作// 子组件 @Output() titleName? = new EventEmitter() this.eCharts.init(this.bar_charts.nativeElement).on('click', params => { this.partsName = params.name // params作为参数记录当前

2020-10-02 15:04:17 2398

原创 Echarts关于饼图，柱状图，折线图的应用

Echarts关于饼图的运用环形进度图如图就是一个环形的进度条这里的颜色我用了一个渐变的色调。 this.circleOption = { title: { text: "", // 这里的text值指的是我们的环形图主标题就是我们这里的‘交付率’ left: "center", top: "32%", textStyle: { color: "#304D5D", font

2020-10-02 14:29:24 492

原创关于使用CSS Shadow进行样式修改

目前Ionic4.x开始采用css shadow样式来进行样式的修改，这是一种新的css扩展，主要是基于Shadow DOM. 关于Shadow DOM简单来说就是对于DOM和CSS进行一种封装，使其与主文档的DOM保持分离例如，我们在使用Ionic4.x的segment时，他的ion-segment-button会自动生成Shadow DOM我们可以看到在ion-segment-button下面会有shadow-root，这就是shadow DOM，一般在这里设置的样式我们是无法直接通过css来进行

2020-08-28 13:16:44 4351 4

Deku_Ln的博客