- 博客(125)
- 收藏
- 关注
RSS订阅原创 git版本回退到某一次提交
背景：今天一个前端女同事问我她如何才能回退到上一次她提交的版本。她网上找了方法，却没有起作用。问题虽然简单，但是还是记录下来，解决问题使用命令 git log查看提交记录，并复制下想要回退到那个版本的commitId，就是commit后面那一串编码序列。如下图：运行命令 git reset --hard 刚刚复制的commitId，就可以成功回退到那个版本。例如 ：git reset --hard 210b5ee81cd869d8f17309b4c8656a8816515398
2020-05-19 20:02:20
7462
原创 element-ui的table表格控件表头与内容列不对齐问题
背景：今天偶然发现饿了么的表格组件表头和内容列有点错位。如下：解决将下列样式代码添加到index.html、或app.vue中（必须是入口文件，起全局作用！）.el-table th.gutter{ display: table-cell!important; }问题已经解决，如下：...
2020-04-17 09:52:05
1812
1
原创 Cannot read property 'disabled' of null 问题解决
使用vue-element框架的后台管理项目一直报Cannot read property ‘disabled’ of null 问题，截图如下：1. 问题定位看了下代码，找了很多解决方案，最后发现是因为注释了el-dropdown-menu下的代码，如下：因为不需要显示右上角图标，所以把那一部分代码注释了。引起了一直报上述错误，在页面中使用了el-dropdown，但是在这个标签里面没...
2020-04-15 16:44:28
19099
5
原创 javascript：在当前页面URL后追加参数并获取相关属性
往往单点登录和一些表单回显涉及到操作页面的URL。这里为了是第三方访问我司的项目时自动回显查询条件，因此需要在浏览器url处追加一些参数，然后再从URL中取出相关属性用于表单的回显和接口的请求。如下：追加参数var url_p = window.location.origin+window.location.pathname+'?campusId=2&managerid=B716B...
2020-04-08 15:41:58
5073
原创 axios请求“跨域”的解决方案
背景：困扰了好几个小时的问题。启动项目后，页面内容如论如何都不出现，接口没有请求成功。看了一下控制台报了下面错误。Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header ...
2020-03-06 19:09:53
8868
原创 Error: Cannot find module 'webpack-cli/bin/config-yargs’解决方案
年前的项目启动一直没有问题，一个月没有维护，一个月后再次npm run dev 启动时，命令行报错Error: Cannot find module 'webpack-cli/bin/config-yargs'解决方法探索首先我本地package.json中对应版本信息如下：有网经说是webpack3.x版本和webpack-dev-server3.x版本不兼容，但是我这webpa...
2020-03-05 19:01:31
40012
32
原创 forEach中执行return无法跳出函数的解决方案
遇到一个很奇葩的问题，只怪自己基础不牢靠。在写提交函数时对字段是否填入做一个判断。要求每一个字段都填如以后才可以触发保存函数，否则不执行保存函数。按照自己的习惯，我就顺手写了forEach循环，代码如下：handleSub() { this.fields.forEach((v) => { if (v.orderid === 0) { this.$message.err...
2020-03-05 15:04:46
3545
原创 刷新页面：provide和inject的使用
provider/inject依赖注入：在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。vue中使用方法在App.vue中定义provide函数。比如我这里的刷新页面的方法。<template> <...
2020-03-03 10:52:15
395
原创 git: push代码报错! [remote rejected]xxxx分支 -> xxxx分支 (failed to update ref)
问题重现我新建了一个功能分支，在push代码到远程时，报如下错误：其原因应该是我操作不当引起的，我在创建新分支时报了错误，原因是存在与新分支名称前缀相同的分支。如已存在的分支是：feature/test，我再次新建名称是feature/test/v1.01的分支时就会报错的。所以我删除了名称是feature/test的分支。然后成功新建了feature/test/v1.01分支。但是在向远程...
2020-02-21 16:41:53
4223
1
原创 根据菜单权限实现动态路由遇到的几个奇葩问题：1.cannot read propery 'range' of null 2.cannot find module
问题：1.cannot read propery ‘range’ of null2.cannot find module ‘@/views/xxxxx’,(由两种现象引起)背景在使用vue-element-admin模版的后台管理系统中，根据菜单权限实现动态加载路由，在把从后端接口取到的菜单拼接成前端路由需要的形式时遇到了以下几个问题。问题1与解决方法问题截图解决方法这个...
2020-02-21 10:27:33
910
原创 elementui:date组件将当前月份放在右侧
背景：公司要求展示今天之前的数据，使用picker-options的disabled把当前天后面的日期屏蔽掉，但是这样就出现一个展示问题。当前月份在左侧，右侧月份均不可以选择，非常不美观，如下。于是要把当前月份放在右侧显示。解决方法使用default-value属性设置默认日期。如下：<el-date-picker v-model="timeRange" type="date...
2020-02-19 10:19:56
1834
2
原创 vue-admin:oauth2.0单点登录实现
背景：现在有一个需求是客户要求使用oauth2.0方式的单点登录进入系统，原先我们都是使用cas方式的单点登录。这里整理下代码：1.oauth2.0分为4个步骤：获取第三方token。为了安全性（不暴露第三方token和secretKey）,c此处是后端对第三方提供的API进行处理，前端只去公司后端提供的接口中拿token。拿到第三方token后，跳转到第三方认证平台。跳转到第三方...
2020-01-14 20:56:05
4579
原创 el-input和input输入框只允许输入数字小数点或某些字符
在表单验证中常常会有el-input和input输入框只允许输入数字小数点或某些制定字符的需求。实现方式也多种多样，element自带的表单验证和自定义验证器都可以实现，这里使用javascript的oninput事件，然后配上正则表达式，只需要一行就可以实现需求了。原理：oninput 事件在用户输入时触发。该事件在 <input> 或 <textarea> 元素的值...
2020-01-14 20:35:56
10625
原创 手写v项目中横向类tab（可展开与收起）功能
背景：在本次项目需求中涉及区域名称的展示，点击更多可以展开和点击收起即收起。项目框架：vue。设计如图：展开：element也有tab标签组件，有类似效果，这里决定自己手写一个原生的，点击事件也好控制。新建一个view页面，可以封装组件，再有其他地方使用时就可直接用。HTML部分1.展开与收起的动画是采用在点击事件中改变状态，根据不同状态写不同的样式来实现的。2.点击事件中传...
2020-01-11 12:43:39
976
原创 VsCode常用快捷键
全屏：F11zoomIn/zoomOut：Ctrl +/-侧边栏显/隐：Ctrl+B显示资源管理器 ：Ctrl+Shift+E显示搜索： Ctrl+Shift+F显示 Git： Ctrl+Shift+G显示 Debug ：Ctrl+Shift+D显示 Output ：Ctrl+Shift+U全局查找 ：Ctrl+Shift+F万能键：F1找到所有的引用： Shift+F12...
2020-01-10 16:35:38
536
原创 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.reqs[uid] = req; if (req && req.then) {...
2020-01-03 14:21:09
4209
原创 vue-element-admin路由切换到添加或编辑页面后实现侧边栏高亮
背景：使用vue-element-admin的后台管理系统。添加和编辑页面使用路由跳转的方式切换，但是切换到添加页面后，添加功能所在页面对应的侧边栏不会高亮显示。如图当点击添加或者编辑按钮以后，左侧菜单不再高亮。分析：原模板中使用:default-active="$route.path"实现侧边栏的高亮。default-active指当前激活菜单的索引。因为这里添加和编辑页面路由的path...
2019-12-30 16:56:34
6364
4
原创 不用防抖节流解决表单连续点击提交
背景：前端的表单提交功能，理论上是点击一次请求一次接口也就提交一次，无奈测试会按住鼠标一直点击。然后也就一直向后端发送数据，前端也会显示多个提交成功的提交。影响体验。测试提出要一段时间内只可以提交一次。直接使用状态判断。解决：在全局data函数中定义一个状态变量，如下：在提交函数中通过变换subFlag变量的状态控制提交测次数。如下：submitSetting() { if (th...
2019-12-26 15:12:38
730
2
原创 根据日期获取对应的是星期几、判断数组类型
背景：前端有一个需求是展示日期和星期，ui设计如下：而后端接口只返回了日期，所以前端要根据日期得到该日期对应的星期。封装函数如下：getWeek(t) { const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] // Date.parse(t)：转化成时间戳 // new Date(Date.parse(t)): ...
2019-12-26 14:26:27
933
原创 表单验证:多个upload上传图片验证，并且上传成功后清除提示信息
在加上表单验证以后，必填项不填会有提示信息。像一般的input输入框，有正确内容输入后提示信息就会自动消失。但是el-upload上传图片以后提示信息依然还在。如下：解决方法在文件上传成功时的钩子函数on-success定义的方法中写一句清除验证器的代码既可以实现。如下代码：验证规则：上传文件成功的钩子函数定义的方法写上下面关键的一句上传图片后提示信息就已经清除：效果：...
2019-12-17 15:34:51
2309
1
原创 element手动点击修改走马灯的播放索引
背景：项目中需求改成上方展示小区列表，下方是各校区数据的柱状图轮播，轮播到该校区时上方校区高亮。但是点击某一个校区也要展示该校区对应的柱状图，这里就用到了手动修改走马灯的播放索引。思路：element官方提供了setActiveItem方法，调用此方法可以改变当前播放的幻灯片。使用方法如下：<div class="bottom-box-right"> <div cla...
2019-12-13 21:15:43
4605
原创 "TypeError: Cannot read property 'xxxx' of undefined"报错的情况分析
报错如下：原因1模板渲染时出现问题，因为渲染的时候还没有拿到数据。又或者是后台返回的数据没有此字段，渲染时却使用了此字段。如下：为了重现报错，上述第二段删掉了v-if判断，因为后台接口返回的数组对象中只有一项（我以为是固定的三项，有时候接口返回会不规范），funnelData[1].count中的count就会未定义。添加上判断就不会有问题了。如下代码解析：原因2未初始化，就是没...
2019-12-12 22:19:20
4639
原创 封装函数：按数组中对象某字段的值从小到大排列
// 从小到大排列compare (item) { return (a, b) => { const val1 = a[item] const val2 = b[item] return val1 - val2 }},例如： data中定义的对象如下：data () { return { funnelData: [] } },...
2019-12-12 21:59:55
337
原创 封装函数：按照需要格式格式化时间
背景：后端返回的时间是时间对象，格式不是yy-mm-dd hh:mm:ss或者yy-mm-dd hh-mm-ss时间格式的，所以前端要对拿到的数据做一些处理才可以展示到页面上。这里将处理方式记录下来，方便以后直接拿来使用。如下：// 格式化时间，一位数不足两位 format(t) { if (t < 10) { return '0' + t } else { ...
2019-12-12 21:45:09
209
原创 input中type="number"类型去除上下箭头和禁止滚轮滚动改变数值
背景：在vue做后台管理系统项目中，会有一些表单需要验证，比如只能输入数字。有一种解决方法就是使用type="number"。由此也遇到了下面两个问题：1. 去除上下箭头写上type="number"后输入框右边会有上下箭头，影响视觉体验。可以使用下面方法去除：<style> input::-webkit-outer-spin-button, input::-webki...
2019-11-11 20:47:03
5299
2
原创 封装函数：数组对象中去除相同ID的项、递归找到所在ID的所有父级元素
记录下项目开发中遇到的两个实际需求。1.数组对象中去除相同ID的项从后台接口拿到的数据格式是数组对象，但是会存在前后调用同一个接口数据项重复的现象。导致页面中数据显示有重复的。所以在从接口取到数据以后，去除数组中有相同项的对象。比如我从接口拿到的数据如下：list: [ { mapcode: 7, name: '快鱼', price: 2 }, { mapcode: 8, na...
2019-11-05 21:23:54
2127
原创 vue:动态菜单只有一个子菜单时父级菜单不显示问题
使用vue-admin-template后台管理模板的项目中使用了动态路由，就是显示后端接口返回的路由。第二次遇到父级菜单不显示的问题，第一次解决的方法没有记录，便又思考了一会。这里记录下。父级菜单下有多个字菜单的父级都可以正常显示，只有父级下是一个子菜单的父级菜单不显示。所以断定是因为只有一个子菜单，父级隐藏不显示属性引起的。在处理从后台接口拿到的菜单数据时设置alwaysShow: true...
2019-10-29 22:08:02
8101
2
原创 pre-commit hook failed报错解决
错误呈现在git提交代码到远程库时，有时候会报pre-commit hook failed错误，导致提交失败。错误截图如下：解决在项目所在目录下的.git文件夹下（如果找不到，可能是隐藏了，可以通过设置文件夹属性找出来）的hooks文件下有一个pre-commit文件，删掉此文件，再次提交即可成功。...
2019-10-29 21:55:25
2771
原创 前端开发资源收藏
VSCode拓展推荐https://github.com/varHarrie/varharrie.github.io/issues/10vue-element-adminvue-element-admin是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的...
2019-09-28 13:47:48
201
原创 vue报错：Uncaught (in promise) TypeError: (0 , _auditorMange.default) is not a function解决
到了下班时间，脑袋越来越晕，犯得错误也越来越多。调用后台接口时，就发现了如下错误，虽然没有耽误太多时间来解决，还是很有必要记录下来。报错如下:这里vue文件中定位的行数也是不准确的。原因分析：脑袋不思考，ES6掌握不扎实。导致API引入时 没有带花括号引起该错误。错误截图如下：接口定义：解决：按如下形式调用，不再报此错。...
2019-09-24 18:33:22
44958
7
原创 后台管理项目blob导出文件乱码解决方案
项目中需要导出文件，使用blob对象方法导出文件成功，但是打开文件就是乱码，有时甚至打不开。导出代码如下：handleExport() { //exportFlie是调用接口的方法，如下： //export function exportFlie(data) { //return request({ //url: '/xxxx/v2/xxxxx', //method...
2019-09-17 21:01:30
3595
2
原创 vue实现富文本编辑器(附图)
工作项目中涉及到富文本编辑器的使用，这里我使用Vue-Quill-Editor插件实现了一个基本具备设计图上功能的编辑器。下载Vue-Quill-Editornpm install vue-quill-editor --save 安装 vue-quill-editor 插件。注册使用插件在main.js中写如下代码：import VueQuillEditor from 'vue-...
2019-09-15 22:59:29
2276
2
原创 element:常见用法总结（前后台常见问题与自定义表单验证）
后台给的状态是使用12345状态码表示的，前端要把它转成对应的状态文字。这里使用element-ui的table为例，代码如下：<el-table-column label="审核结果" align="center"> <template slot-scope="scope"> <span v-if="scope.row.authStatus === ...
2019-09-11 11:18:55
1628
原创 sublime和vscode常用高效插件及文件模板新建与git国内下载地址
1.常用插件列举sublime编辑器常用插件如下：Emmet功能：编码快捷键，前端必备。JSFormat功能：JavaScript的代码格式化插件。LESS功能：LESS高亮插件。Less2CSS功能：编译Less。简介：监测到文件改动时，编译保存为.css文件。Git功能：Git管理。Markdown Preview功能：md格式文件预览。...
2019-09-03 22:49:39
632
原创 小程序云开发获取不到其他用户数据库记录的解决方法
小程序云开发影评功能只能看到自己的评论，他人的看不到。只需要修改数据库权限即可，如下：1.获取comment集合记录const db = wx.cloud.database()onShow: function () { db.collection('comment') .get().then(res => { console.log(res.data)...
2019-08-24 15:12:52
1139
2
原创 一次webpack 的externals配置带来的优化体验
externals官方解释：防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。1.优化前使用echarts的一个项目，使用npm run build 打包以后还有6m左右的大小，如下：这里打包以后文件明显过大，可能会造成用户体验差。2.优化考虑到可能是因为引...
2019-08-20 17:37:45
4999
原创 面试中Promise相关问题
结合bilibili和小米和阿里的面试题中出现的与Promise对象相关的问题自己试着做了一些回答，涉及的有以下几个问题。详述Promise的异步机制？Promise有几种状态？Promise如何满足多个异步进程的同步顺序？Promise.all的用法如何让Promise.all在抛出异常后依然有效？Promise.all与Promise.race的区别？应用场景？1.Promi...
2019-08-11 16:54:40
483
原创 函数节流与防抖实现
问题引出：什么是函数节流？什么是函数防抖？1. 函数节流函数节流：一个函数执行一次后，只有大于设定的时间周期才会执行第二次。场景：有个需要频繁触发的函数，出于性能优化角度，在规定的时间内，只让函数触发的第一次生效，后面的不生效。代码实现： /* 节流函数：throttle fn: 要被节流的函数 delay：规定的时间 */ function throttle(fn,d...
2019-08-03 18:12:48
5083
3
原创 我们一起写算法08
已知有一个字符串foo='get-element-by-id'，请写一个function将其转化为驼峰表示法getElementById。思路:首先根据’-'分割字符串为单个单词。从第二个单词开始将首字母转为大写。再将单词拼接用到的js方法：toUpperCase：字母转为大写。substr：在字符串中抽取从 start 下标开始的指定数目的字符。charAt() ...
2019-08-01 20:58:49
335
原创 localStorage、sessionStorage 、cookie
问题1：请描述cookies、sessionStorage和localStorage的区别？问题2：有用过本地存储吗？有什么限制？有没有考虑过超出了限制怎么办？1.localStorage本地存储和sessionStorage会话存储localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。只读的localStorage属性 可以...
2019-07-29 14:48:08
319
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人