自定义博客皮肤VIP专享

*博客头图：

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

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

博客底图：

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

栏目图：

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

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览 取消 提交

自定义博客皮肤

-+
上一步保存

tomorrownan的博客

我也要用
排序：
默认
按更新时间
按访问量
RSS订阅

原创 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

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