自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 axios请求“跨域”的解决方案

背景: 困扰了好几个小时的问题。 启动项目后,页面内容如论如何都不出现,接口没有请求成功。看了一下控制台报了下面错误。 Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked ...

2020-03-06 19:09:53

阅读数 55

评论数 0

原创 Error: Cannot find module 'webpack-cli/bin/config-yargs’解决方案

年前的项目启动一直没有问题,一个月没有维护,一个月后再次npm run dev 启动时,命令行报错 Error: Cannot find module 'webpack-cli/bin/config-yargs' 解决方法探索 首先我本地package.json中对应版本信...

2020-03-05 19:01:31

阅读数 34

评论数 0

原创 forEach中执行return无法跳出函数的解决方案

遇到一个很奇葩的问题,只怪自己基础不牢靠。 在写提交函数时对字段是否填入做一个判断。要求每一个字段都填如以后才可以触发保存函数,否则不执行保存函数。 按照自己的习惯,我就顺手写了forEach循环,代码如下: handleSub() { this.fields.forEach((v) =>...

2020-03-05 15:04:46

阅读数 75

评论数 0

原创 刷新页面:provide和inject的使用

provider/inject依赖注入:在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。 这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。 vue中使用方法 在App.vu...

2020-03-03 10:52:15

阅读数 38

评论数 0

原创 git: push代码报错! [remote rejected]xxxx分支 -> xxxx分支 (failed to update ref)

问题重现 我新建了一个功能分支,在push代码到远程时,报如下错误: 其原因应该是我操作不当引起的,我在创建新分支时报了错误,原因是存在与新分支名称前缀相同的分支。如已存在的分支是:feature/test,我再次新建名称是feature/test/v1.01的分支时就会报错的。所以我删除了名称...

2020-02-21 16:41:53

阅读数 124

评论数 0

原创 根据菜单权限实现动态路由遇到的几个奇葩问题:1.cannot read propery 'range' of null 2.cannot find module

问题: 1.cannot read propery ‘range’ of null 2.cannot find module ‘@/views/xxxxx’,(由两种现象引起) 背景 在使用vue-element-admin模版的后台管理系统中,根据菜单权限实现动态加载路由,在把从后端接口取到的菜...

2020-02-21 10:27:33

阅读数 45

评论数 0

原创 elementui:date组件将当前月份放在右侧

背景: 公司要求展示今天之前的数据,使用picker-options的disabled把当前天后面的日期屏蔽掉,但是这样就出现一个展示问题。当前月份在左侧,右侧月份均不可以选择,非常不美观,如下。于是要把当前月份放在右侧显示。 解决方法 使用default-value属性设置默认日期。如下: &...

2020-02-19 10:19:56

阅读数 115

评论数 0

原创 vue-admin:oauth2.0单点登录实现

背景: 现在有一个需求是客户要求使用oauth2.0方式的单点登录进入系统,原先我们都是使用cas方式的单点登录。这里整理下代码: 1.oauth2.0 分为4个步骤: 获取第三方token。 为了安全性(不暴露第三方token和secretKey),c此处是后端对第三方提供的API进行处理,前...

2020-01-14 20:56:05

阅读数 119

评论数 0

原创 el-input和input输入框只允许输入数字小数点或某些字符

在表单验证中常常会有el-input和input输入框只允许输入数字小数点或某些制定字符的需求。实现方式也多种多样,element自带的表单验证和自定义验证器都可以实现,这里使用javascript的oninput事件,然后配上正则表达式,只需要一行就可以实现需求了。 原理: oninput 事件...

2020-01-14 20:35:56

阅读数 329

评论数 0

原创 手写v项目中横向类tab(可展开与收起)功能

背景: 在本次项目需求中涉及区域名称的展示,点击更多可以展开和点击收起即收起。项目框架:vue。 设计如图: 展开: element也有tab标签组件,有类似效果,这里决定自己手写一个原生的,点击事件也好控制。新建一个view页面,可以封装组件,再有其他地方使用时就可直接用。 HTML部分...

2020-01-11 12:43:39

阅读数 82

评论数 0

原创 VsCode常用快捷键

全屏:F11 zoomIn/zoomOut:Ctrl +/- 侧边栏显/隐:Ctrl+B 显示资源管理器 :Ctrl+Shift+E 显示搜索: Ctrl+Shift+F 显示 Git: Ctrl+Shift+G 显示 Debug :Ctrl+Shift+D 显示 Output :Ctrl+Shi...

2020-01-10 16:35:38

阅读数 27

评论数 0

原创 el-upload删除上传的文件: error in v-on handler TypeError: reqs[uid].abort is not a function

问题: 使用elementui的el_upload组件上传文件,但是点击叉号上传的文件无法删除。报错如下: 分析: 查看源码的时候会发现http-request 这个传入的回调函数返回一个Promise。 const req = this.httpRequest(options); this...

2020-01-03 14:21:09

阅读数 178

评论数 0

原创 vue-element-admin路由切换到添加或编辑页面后实现侧边栏高亮

背景: 使用vue-element-admin的后台管理系统。添加和编辑页面使用路由跳转的方式切换,但是切换到添加页面后,添加功能所在页面对应的侧边栏不会高亮显示。如图当点击添加或者编辑按钮以后,左侧菜单不再高亮。 分析: 原模板中使用:default-active="$route.p...

2019-12-30 16:56:34

阅读数 93

评论数 0

原创 不用防抖节流解决表单连续点击提交

背景: 前端的表单提交功能,理论上是点击一次请求一次接口也就提交一次,无奈测试会按住鼠标一直点击。然后也就一直向后端发送数据,前端也会显示多个提交成功的提交。影响体验。测试提出要一段时间内只可以提交一次。直接使用状态判断。 解决: 在全局data函数中定义一个状态变量,如下: 在提交函数中通过变...

2019-12-26 15:12:38

阅读数 26

评论数 0

原创 根据日期获取对应的是星期几、判断数组类型

背景: 前端有一个需求是展示日期和星期,ui设计如下: 而后端接口只返回了日期,所以前端要根据日期得到该日期对应的星期。 封装函数如下: getWeek(t) { const weekDay = ['周日', '周一', '周二',...

2019-12-26 14:26:27

阅读数 37

评论数 0

原创 表单验证:upload上传图片后清除提示信息

在加上表单验证以后,必填项不填会有提示信息。像一般的input输入框,有正确内容输入后提示信息就会自动消失。但是el-upload上传图片以后提示信息依然还在。如下: 解决方法 在文件上传成功时的钩子函数on-success定义的方法中写一句清除验证器的代码既可以实现。如下代码: 验证规则: ...

2019-12-17 15:34:51

阅读数 42

评论数 0

原创 element手动点击修改走马灯的播放索引

背景: 项目中需求改成上方展示小区列表,下方是各校区数据的柱状图轮播,轮播到该校区时上方校区高亮。但是点击某一个校区也要展示该校区对应的柱状图,这里就用到了手动修改走马灯的播放索引。 思路: element官方提供了setActiveItem方法,调用此方法可以改变当前播放的幻灯片。使用方法如下:...

2019-12-13 21:15:43

阅读数 110

评论数 0

原创 "TypeError: Cannot read property 'xxxx' of undefined"报错的情况分析

报错如下: 原因1 模板渲染时出现问题,因为渲染的时候还没有拿到数据。又或者是后台返回的数据没有此字段,渲染时却使用了此字段。 如下: 为了重现报错,上述第二段删掉了v-if判断,因为后台接口返回的数组对象中只有一项(我以为是固定的三项,有时候接口返回会不规范),funnelData[1].c...

2019-12-12 22:19:20

阅读数 81

评论数 0

原创 封装函数:按数组中对象某字段的值从小到大排列

// 从小到大排列 compare (item) { return (a, b) => { const val1 = a[item] const val2 = b[item] return val1 - val2 } }, 例如: data中定义的对象如下:...

2019-12-12 21:59:55

阅读数 24

评论数 0

原创 封装函数:按照需要格式格式化时间

背景: 后端返回的时间是时间对象,格式不是yy-mm-dd hh:mm:ss或者yy-mm-dd hh-mm-ss时间格式的,所以前端要对拿到的数据做一些处理才可以展示到页面上。这里将处理方式记录下来,方便以后直接拿来使用。如下: // 格式化时间,一位数不足两位 format(t) { ...

2019-12-12 21:45:09

阅读数 13

评论数 0

原创 input中type="number"类型去除上下箭头和禁止滚轮滚动改变数值

背景: 在vue做后台管理系统项目中,会有一些表单需要验证,比如只能输入数字。有一种解决方法就是使用type="number"。由此也遇到了下面两个问题: 1. 去除上下箭头 写上type="number"后输入框右边会有上下箭头,影响视觉体验。可以使用下面...

2019-11-11 20:47:03

阅读数 437

评论数 1

原创 封装函数:数组对象中去除相同ID的项、递归找到所在ID的所有父级元素

记录下项目开发中遇到的两个实际需求。 1.数组对象中去除相同ID的项 从后台接口拿到的数据格式是数组对象,但是会存在前后调用同一个接口数据项重复的现象。导致页面中数据显示有重复的。所以在从接口取到数据以后,去除数组中有相同项的对象。 比如我从接口拿到的数据如下: list: [ { mapc...

2019-11-05 21:23:54

阅读数 23

评论数 0

原创 vue:动态菜单只有一个子菜单时父级菜单不显示问题

使用vue-admin-template后台管理模板的项目中使用了动态路由,就是显示后端接口返回的路由。第二次遇到父级菜单不显示的问题,第一次解决的方法没有记录,便又思考了一会。这里记录下。 父级菜单下有多个字菜单的父级都可以正常显示,只有父级下是一个子菜单的父级菜单不显示。所以断定是因为只有一个...

2019-10-29 22:08:02

阅读数 788

评论数 0

原创 pre-commit hook failed报错解决

错误呈现 在git提交代码到远程库时,有时候会报pre-commit hook failed错误,导致提交失败。 错误截图如下: 解决 在项目所在目录下的.git文件夹下(如果找不到,可能是隐藏了,可以通过设置文件夹属性找出来)的hooks文件下有一个pre-commit文件,删掉此文件,再次提...

2019-10-29 21:55:25

阅读数 85

评论数 0

原创 前端开发资源收藏

VSCode拓展推荐 https://github.com/varHarrie/varharrie.github.io/issues/10 vue-element-admin vue-element-admin是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的...

2019-09-28 13:47:48

阅读数 46

评论数 0

原创 vue报错:Uncaught (in promise) TypeError: (0 , _auditorMange.default) is not a function解决

到了下班时间,脑袋越来越晕,犯得错误也越来越多。调用后台接口时,就发现了如下错误,虽然没有耽误太多时间来解决,还是很有必要记录下来。报错如下: 这里vue文件中定位的行数也是不准确的。 原因分析: 脑袋不思考,ES6掌握不扎实。导致API引入时 没有带花括号引起该错误。错误截图如下: 接口定义...

2019-09-24 18:33:22

阅读数 1942

评论数 0

原创 后台管理项目blob导出文件乱码解决方案

项目中需要导出文件,使用blob对象方法导出文件成功,但是打开文件就是乱码,有时甚至打不开。导出代码如下: handleExport() { //exportFlie是调用接口的方法,如下: //export function exportFlie(data) { //return re...

2019-09-17 21:01:30

阅读数 555

评论数 0

原创 vue实现富文本编辑器(附图)

工作项目中涉及到富文本编辑器的使用,这里我使用Vue-Quill-Editor插件实现了一个基本具备设计图上功能的编辑器。 下载Vue-Quill-Editor npm install vue-quill-editor --save 安装 vue-quill-editor 插件。 注册使用...

2019-09-15 22:59:29

阅读数 124

评论数 0

原创 element:常见用法总结(前后台常见问题与自定义表单验证)

后台给的状态是使用12345状态码表示的,前端要把它转成对应的状态文字。 这里使用element-ui的table为例,代码如下: <el-table-column label="审核结果" align="center"> <templ...

2019-09-11 11:18:55

阅读数 380

评论数 0

原创 sublime和vscode常用高效插件及文件模板新建与git国内下载地址

1.常用插件 列举sublime编辑器常用插件如下: Emmet 功能:编码快捷键,前端必备。 JSFormat 功能:JavaScript的代码格式化插件。 LESS 功能:LESS高亮插件。 Less2CSS 功能:编译Less。 简介:监测到文件改动时,编译保存为.css文件...

2019-09-03 22:49:39

阅读数 126

评论数 0

原创 小程序云开发获取不到其他用户数据库记录的解决方法

小程序云开发影评功能只能看到自己的评论,他人的看不到。只需要修改数据库权限即可,如下: 1.获取comment集合记录 const db = wx.cloud.database() onShow: function () { db.collection('comment'...

2019-08-24 15:12:52

阅读数 211

评论数 2

原创 一次webpack 的externals配置带来的优化体验

externals官方解释: 防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。 1.优化前 使用echarts的一个项目,使用npm run build 打包以后还有6...

2019-08-20 17:37:45

阅读数 269

评论数 0

原创 面试中Promise相关问题

结合bilibili和小米和阿里的面试题中出现的与Promise对象相关的问题自己试着做了一些回答,涉及的有以下几个问题。 详述Promise的异步机制? Promise有几种状态? Promise如何满足多个异步进程的同步顺序? Promise.all的用法 如何让Promise.all在抛出...

2019-08-11 16:54:40

阅读数 115

评论数 0

原创 函数节流与防抖实现

问题引出: 什么是函数节流?什么是函数防抖? 1. 函数节流 函数节流:一个函数执行一次后,只有大于设定的时间周期才会执行第二次。 场景:有个需要频繁触发的函数,出于性能优化角度,在规定的时间内, 只让函数触发的第一次生效,后面的不生效。 代码实现: /* 节流函数:throttle fn:...

2019-08-03 18:12:48

阅读数 440

评论数 0

原创 我们一起写算法08

已知有一个字符串foo='get-element-by-id',请写一个function将其转化为驼峰表示法getElementById。 思路: 首先根据’-'分割字符串为单个单词。 从第二个单词开始将首字母转为大写。 再将单词拼接 用到的js方法: toU...

2019-08-01 20:58:49

阅读数 212

评论数 0

原创 localStorage、sessionStorage 、cookie

问题1: 请描述cookies、sessionStorage和localStorage的区别? 问题2: 有用过本地存储吗?有什么限制?有没有考虑过超出了限制怎么办? 1.localStorage本地存储和sessionStorage会话存储 localStorage 和 sessionStora...

2019-07-29 14:48:08

阅读数 177

评论数 0

原创 防止页面跳转的几种方法

1.<a href="javascript:;" >先学习</a> <a href="javascript:;" >点我试试</a>:执行一段空白的javascript语句,返回空或者false值,从而防止链接...

2019-07-22 15:24:52

阅读数 1354

评论数 0

原创 前端面试必备总结:CSS盒模型与BFC

盒模型是css的基石,由什么是css盒模型一个问题引出下面一系列的问题,深度逐渐递增。 1.基本概念:标准模型+IE模型 2.标准模型和IE模型的区别 3.css如何设置这两种模型 4.JS如何设置获取盒模型对应的宽和高 5.根据盒模型解释边距重叠 6.BFC(边距重叠解决方案) 1.什么是css...

2019-07-15 20:12:59

阅读数 183

评论数 0

原创 前端面试必备总结:页面布局5种解决方案

在一面或者二面中,页面布局是经常问到的点,昨天在慕课网听了老师讲的课,今天自己敲下代码整理下。主要解答三栏布局下面两题目,两栏布局与三栏布局相似。 1.高度已知,左右宽度固定,使中间自适应。 2.上下高度固定,使中间自适应 1.左右宽度固定,中间自适应 float解决方案 css实现: htm...

2019-07-12 14:43:01

阅读数 488

评论数 0

原创 我们一起写算法07

快速排序算法与三路快排 快速排序(Quicksort)是对冒泡排序的一种改进。 它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序序列。 ...

2019-07-11 13:15:28

阅读数 172

评论数 0

提示
确定要删除当前文章?
取消 删除