tomorrownan的博客

背景：今天一个前端女同事问我她如何才能回退到上一次她提交的版本。她网上找了方法，却没有起作用。问题虽然简单，但是还是记录下来，解决问题使用命令 git log查看提交记录，并复制下想要回退到那个版本的commitId，就是commit后面那一串编码序列。如下图：运行命令 git reset --hard 刚刚复制的commitId，就可以成功回退到那个版本。例如 ：git reset --hard 210b5ee81cd869d8f17309b4c8656a8816515398

背景：今天偶然发现饿了么的表格组件表头和内容列有点错位。如下：解决将下列样式代码添加到index.html、或app.vue中（必须是入口文件，起全局作用！）.el-table th.gutter{ display: table-cell!important; }问题已经解决，如下：...

使用vue-element框架的后台管理项目一直报Cannot read property ‘disabled’ of null 问题，截图如下：1. 问题定位看了下代码，找了很多解决方案，最后发现是因为注释了el-dropdown-menu下的代码，如下：因为不需要显示右上角图标，所以把那一部分代码注释了。引起了一直报上述错误，在页面中使用了el-dropdown，但是在这个标签里面没...

往往单点登录和一些表单回显涉及到操作页面的URL。这里为了是第三方访问我司的项目时自动回显查询条件，因此需要在浏览器url处追加一些参数，然后再从URL中取出相关属性用于表单的回显和接口的请求。如下：追加参数var url_p = window.location.origin+window.location.pathname+'?campusId=2&managerid=B716B...

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

年前的项目启动一直没有问题，一个月没有维护，一个月后再次npm run dev 启动时，命令行报错Error: Cannot find module 'webpack-cli/bin/config-yargs'解决方法探索首先我本地package.json中对应版本信息如下：有网经说是webpack3.x版本和webpack-dev-server3.x版本不兼容，但是我这webpa...

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

provider/inject依赖注入：在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。vue中使用方法在App.vue中定义provide函数。比如我这里的刷新页面的方法。<template> <...

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

问题：1.cannot read propery ‘range’ of null2.cannot find module ‘@/views/xxxxx’,(由两种现象引起)背景在使用vue-element-admin模版的后台管理系统中，根据菜单权限实现动态加载路由，在把从后端接口取到的菜单拼接成前端路由需要的形式时遇到了以下几个问题。问题1与解决方法问题截图解决方法这个...

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

背景：现在有一个需求是客户要求使用oauth2.0方式的单点登录进入系统，原先我们都是使用cas方式的单点登录。这里整理下代码：1.oauth2.0分为4个步骤：获取第三方token。为了安全性（不暴露第三方token和secretKey）,c此处是后端对第三方提供的API进行处理，前端只去公司后端提供的接口中拿token。拿到第三方token后，跳转到第三方认证平台。跳转到第三方...

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

背景：在本次项目需求中涉及区域名称的展示，点击更多可以展开和点击收起即收起。项目框架：vue。设计如图：展开：element也有tab标签组件，有类似效果，这里决定自己手写一个原生的，点击事件也好控制。新建一个view页面，可以封装组件，再有其他地方使用时就可直接用。HTML部分1.展开与收起的动画是采用在点击事件中改变状态，根据不同状态写不同的样式来实现的。2.点击事件中传...

全屏：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...

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

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

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

背景：前端有一个需求是展示日期和星期，ui设计如下：而后端接口只返回了日期，所以前端要根据日期得到该日期对应的星期。封装函数如下：getWeek(t) { const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] // Date.parse(t)：转化成时间戳 // new Date(Date.parse(t)): ...

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