- 博客(113)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 利用elementUI中的带有建议列表功能的输入框和高德地图中的输入提示与POI搜索服务实现在已选择行政区域内限制搜索地址（项目中实用性高！！！）
先看效果图：图一：图二：图三：图四：解释：这里实现的功能是先选择一个行政区域，然后在该区域下去搜索地址（一开始地址搜索框默认禁止的，强制必须选择区域后才能搜索，删除已选的行政区域后，地址输入框又变回禁用状态，即只能搜索该区域下的地址。当然了，这里可以根据自己需求进行修改）。我这里行政区域只需要选到市级即可（即两级联动），如果需要选到区级，可以改成三级联动选择即可，看个人需求。行政区域的实现使用了一个npm功能包【element-china-area-data】，简单方便，可自定义选
2020-12-29 11:26:12
1080
原创 小程序导航栏左上角按钮去掉解决方案(实际上线项目亲测，100%有效)
问题需求：1.小程序某些页面跳转后，不让点击左上角按钮返回到进来之前的页面。(比如登录成功后跳转的页面或授权页面跳转之后的页面)。2.某些情况下一进去就判断跳转到某一页面，然后点击返回按钮，就可能出现空白页问题。除了上面提到的两点之外，可能实际当中大家会遇到其他一些情况，不管如何，目的一致，就是解决掉返回按钮显示问题。下面给出具体解决方案：uni-app小程序：在跳转到需要隐藏按钮的页面的跳转接口调用那里使用 uni.reLaunch 替换掉 uni.navigateTo即可。两者区别：uni
2020-12-09 16:41:28
11894
8
原创 electron-vue在开发环境中跨域请求代理配置(亲测有效！！！)
文件位置：项目 .electron-vue——dev-runner.js，添加proxy即可，target换成自己项目的请求地址即可。直接上代码：const server = new WebpackDevServer( compiler, { contentBase: path.join(__dirname, '../'), quiet: true, + proxy: { + // 配置整个项目请求代理，不用区分
2020-10-16 17:40:44
6189
17
原创 vue生命周期学习(基础原理)
vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染—>更新—>渲染、销毁等一系列过程，我们称这是Vue的生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。下图为vue生命周期示意图：具体各个生命周期的意义及用法beforeCreated这个时候数据还没有挂载，访问不到数据和真实的Dom，一般不做操作created这个时候可以使用数据及更改数据了，但不会触发updated函数，不会触发其他
2020-10-11 20:49:06
736
原创 React基础知识总结(精简版)
JSX什么是jsx？既不是字符串也不是 HTML，是一个 JavaScript 的语法扩展，它具有 JavaScript 的全部功能。为什么浏览器无法读取jsx？因为jsx使用的是ES6标准，而目前很多浏览器仍然只支持ES5，所以我们就需要将jsx转成普通jsjsx注意事项：使用JSX时要引入React库虚拟dom中jsx的渲染里，对象不能渲染，数组和数组里的每个元素（包括元素为dom的数组）可以渲染jsx语法中只能有一个顶级标签（元素）使用组件时，首字母必须大写样式中.
2020-10-11 20:28:17
368
原创 纯css利用伪类实现类似于ElementUI中复选框选中时的状态样式
直接看下面代码，简单易懂：<div class="choseMask"></div>.choseMask { position: absolute; top: 0; right: 0; width: 16px; height: 16px; background-color: #409eff; z-index: 12;}.choseMask::after { width: 3px; height: 8px; box-sizing: co
2020-09-03 19:25:30
604
原创 vue前端导出表格使用Blob处理后台返回的二进制流数据（亲测可用，兼容谷歌，火狐，IE！！！）
一般前端导出表格时，后台会有两种方式返给前端数据：后台返回一个下载地址url。这种方式是后台得先生成文件保存在服务器某个地方，然后返回给前端url地址，前端直接拿到url地址一行代码去下载文件即可。这种有个问题就是后台得知道什么时候可以删除生成的那个文件。一般这种方式不推荐使用。后台返回给前端的是一个二进制流，这种方式好处在于后台不用生成文件去保存，二进制流保存在内存中，不用占用服务器存储空间，不用考虑什么时候删除去文件。这种方式也是常见的一种方式。下面我们主要讲一下第二种方式的使用和一些需要注意
2020-08-24 17:32:23
3339
原创 elementUI中el-table表格在flex布局下出现表格宽度一直在增大变化的问题解决方案(100%解决！！！)
解决方案：在table外层包一层div元素，设置css宽度继承自父级宽度，添加代码：position:absolute; width:100%;一般上级元素就设置这flex布局flex:1;加入一行代码：position:relative;示例截图：
2020-08-04 14:21:20
9802
9
原创 elementUI中的select下拉框多选显示的文本内容过长导致显示溢出框外的解决方案(已解决！！！)
解决代码如下所示：.logMgCls .el-select__tags-text { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.logMgCls .el-select .el-tag__close.el-icon-close { top: -7px;}说明： .logMgCls 是我自己文件中的父级元素类
2020-07-14 18:14:32
23827
10
原创 在终端使用命令将本地文件或文件目录上传到Linux服务器
scp命令：scp -P 1234 -r file(dir) username@服务器IP:/www/aaa/ (服务器存放位置目录路径)使用scp上传文件或文件目录。如果未修改默认登录端口 22，则这里不用写 -P 1234 参数，如果修改了服务器默认的 22 端口， 则这里的端口号写你自己修改后的，而且-P要大写。-r 参数表示递归复制整个目录。如果这里是单个文件可以不用写这个参数。-...
2020-02-21 22:18:21
3537
原创 阿里云 Specified parameter Version is not valid 报错解决方案（亲测！！！100%解决）
报错代码如下：InvalidVersionError: Specified parameter Version is not valid.原因： 下面代码中 apiVersion 字段后面的值写的有问题。解决方案： 获取正确的版本号时间即可，具体以当时的阿里云官方文档上的为准。var client = new Core({ accessKeyId: '<accessKeyId...
2020-02-05 23:40:06
24852
原创 阿里云You are not authorized to do this action. You should be authorized by RAM报错解决方案（亲测！！！100%解决）
STS使用Node.js SDK（其他语言SDK也类似）生成临时账号密码报错的信息如下所示：Error message: You are not authorized to do this action. You should be authorized by RAM.原因： 因为进行授权的RAM用户没有相应的权限，因此使用时系统会报错。解决方案： 为RAM用户添加系统策略（AliyunS...
2020-02-05 22:50:42
16198
4
原创 css实现居中布局的解决方案
html示例代码如下：<div class="parent"> <div class="child">Demo</div></div>上面的parent元素是居中元素的外部div元素，里面的child元素就是要去做居中的元素，这两个元素的大小都是不固定的水平居中上面html示例代码水平布局效果示意图如下所示：为了能让大家看清楚效果...
2020-02-02 21:30:11
465
原创 webpack原理解析（几张图清楚了解其原理）
webpack是利用什么来打包的？webpack依赖于node的环境与文件操作系统webpack的打包过程，其实就是利用node去读取文件，然后进行一些字符串处理后，再利用node去写入文件webpack打包流程Loader是如何生效的？Loader其实是一个方法：接受一个字符串，方法内部处理完后再返回字符串，结构如下图代码所示：// Loader 组织结构// 下面会将文...
2019-12-14 00:37:37
1044
原创 windwos系统中使用npm全局安装之后，终端输入命令显示“xxx-此命令无法识别”解决方法（亲测！！100%解决！！！）
第一步，先按照下图所示操作：第二步，根据上图所示操作获取的结果，再按照下图所示进行操作即可：总结： 其实就是将npm配置中的 prefix 后面是路径值添加到系统环境变量 Path 中去即可。后面再npm install -g xxx 全局安装一些东西之后，在任意目录路径下，执行命令都可识别。...
2019-12-04 21:00:00
1247
1
原创 在spa(单页面应用)开发中，点击侧边栏当前路由来刷新页面的两种方案（业界推荐使用的方案）
背景：在用 spa(单页面应用) 这种开发模式的之前，也就是多页面开发模式下，用户每次点击侧边栏都会重新请求这个页面，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。如今：大多都是spa这种，但 spa 就不一样了，当用户点击当前高亮的路由并不会刷新 view，因为 vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的...
2019-11-28 21:44:22
947
原创 Linux crontab命令（可用于拆分日志）
简介Linux crontab是用来定期执行程序的命令。Linux任务调度的工作主要分为以下两类：系统执行的工作：系统周期性所要执行的工作，如备份系统数据、清理缓存。个人执行的工作：某个用户定期要做的工作，例如每隔10分钟检查邮件服务器是否有新信，这些工作可由每个用户自行设置。crontab 是用来让使用者在固定时间或固定间隔执行程序之用，换句话说，也就是类似使用者的时程表。拆分日志
2019-11-15 20:03:15
509
原创 利用ES6中class里的new.target属性写出不能独立使用、必须继承后才能使用的类
new.target属性new是从构造函数生成实例对象的命令。ES6 为new命令引入了一个new.target属性，该属性一般用在构造函数之中，返回new命令作用于的那个构造函数。如果构造函数不是通过new命令或Reflect.construct()调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。function Person(name...
2019-11-11 16:11:18
395
原创 js中的装箱和拆箱操作
装箱操作： 把基本数据类型转换为对应的引用类型的操作拆箱操作： 把引用类型转换为基本数据类型的操作上面两个概念只是简洁的实质总结，可能看完后大家心里会产生疑问，到底怎么样叫装箱操作和拆箱操作呢？下面我们一起带着这个疑问往下看~~装箱操作：首先我们要知道在js中有三个基本包装类型：NumberStringBoolean下面看一个例子： var str="hello...
2019-09-14 23:37:34
1407
原创 一张图看明白一次资源请求过程中存在的浏览器缓存原理
强缓存： Expires/Cache-control 搭配 协商缓存： ETag/If-none-match(HTTP1.1) 或者 Last-modified/If-modified-since(HTTP1.0) 实现浏览器请求资源时的缓存过程：协商缓存需要配合强缓存使用，如果不启用强缓存的话，协商缓存根本没有意义大部分web服务器都默认开启协商缓存，而且是同时启用【Last-Modif...
2019-06-06 17:43:58
720
原创 圣杯布局和双飞翼布局
一. 圣杯布局首先中间部分宽度肯定设置100%自适应，即width: 100%;左右两个元素都固定宽度，将三个元素都设置浮动，即float: left;因为之前main元素设置了宽度100%，且浮动，所以占据了第一行整行，下面需要将left元素放到左边，right元素放到右边；则需要分别设置负值margin-left,给left元素设置 margin-left: -100%；（相当于往左移动...
2019-06-05 14:55:02
640
原创 重排与重绘及优化策略
1.重排渲染层内的元素布局发生修改，都会导致页面重新排列，比如窗口尺寸发生变化、删除或添加DOM元素以及修改了影响元素盒子大小的CSS属性（如width，height，padding，）重排由CPU处理的2.重绘绘制，即渲染上色，所有对元素的视觉表现属性的修改，都会引发重绘。重绘由GPU处理的无论是重排还是重绘，都会阻塞浏览器；要提高网页性能，就要降低重排和重绘的频率和成本，尽可能少的...
2019-05-29 15:22:54
621
原创 深拷贝的两种不同实现方式
简介: 在js当中，经常会遇到复制拷贝对象的场景，但是由于对象在内存中的存储于一般普通数据类型值的存储是不一样的，一般值在内存中是直接存在栈当中的，而对象一般在栈中存一个引用(也可以理解为指针),真正的值存储在堆当中，栈中的引用指向堆中对应的值。所以，在现实中，采用赋值形式的复制方式，会出现问题；如果对象里的某个元素的值依然是一个对象，即多层对象，此时将这个对象复制给一个新对象，后面如果修改新对...
2019-04-10 17:49:33
1074
原创 编程式导航router.push(...)中传参的两种方式query和params及两者区别
vue中的两种导航方式：声明式编程式<router-link :to="…">router.push(…)除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push想要导航到不同的 UR...
2019-04-10 11:22:55
3953
1
原创 npm远程package的删除失败及解决方案
首先npm包的一些基本操作命令如下：npm init：初始化一个npm包，一般会有选项配置，可根据自己情况来写，具体可查看官网。npm login：本地登陆npm。npm publish <package>：上传包到远程npm。npm unpublish <package> --force：将远程的npm包删除。npm deprecate <pkg>...
2019-03-25 14:59:56
2664
原创 nodeJs网络爬虫技术(本例子为爬去国家行政区域地区数据)
这里将会介绍两种技术方案，都是基于nodejs相关技术进行展开的，唯一不同的就是选取的技术稍有不同，本质其实一样第一种技术方案：需要用到的技术模块：superagent、superagent-charset、cheerio、fs安装以上依赖模块（也可以单独依次安装）：npm install superagent superagent-charset cheerio fs说明：Su...
2019-03-22 18:06:12
2959
原创 vue后台管理系统项目标准完整的目录开发架构
注意：里面的部分文件夹可根据自己项目需求进行删减（比如lang，icons，mock，vendor这些文件夹），vendor文件夹用来存放第三方提供的功能插件等。static文件夹下一般放一些静态资源（比如静态资源图片等）。...
2019-02-28 16:19:14
3651
原创 常用日期时间格式处理工具封装
// 日期时间格式处理工具//核心代码const formatTime = date =&gt; { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = ...
2019-02-22 10:53:45
375
原创 vue双向数据绑定核心原理基本模拟实现
vue双向数据绑定主要是通过 Object对象的defineProperty属性，重写data的set和get函数来实现的，这里只会实现最基本的内容，主要实现v-model，v-bind 和v-click三个命令，其他命令也可以自行补充<!DOCTYPE html><html><head> <meta charset="utf-8" />...
2019-01-24 17:45:28
404
原创 在vscode工具中，使用eslint，stylelint，htmlhint对vue项目代码格式的检查
1. 对js代码格式的检查：首先全局安装以下插件：“eslint”“vue-eslint-parser”“babel-eslint”“eslint-config-alloy”“eslint-plugin-html”“eslint-plugin-import”“eslint-plugin-node”“eslint-plugin-promise”在项目根目录添加 .eslint...
2019-01-09 18:53:05
5244
原创 IE10+浏览器下登陆输入框text类型输入框和password类型输入框尾部出现叉号和眼睛默认样式的问题修复
1. 修复text输入框叉号样式问题：#username::-ms-clear{ display: none } //username表示输入框自身id2. 修复password输入框眼睛样式问题：#password::-ms-reveal { display: none } 或 #password::-ms-reveal { visibility: hidden } //pass...
2019-01-07 17:30:14
960
原创 ES5中的数组方法slice()的底层内部实现及拓展
代码实现如下：Array.prototype.slice=function(start,end){ //ES5 中的数组方法slice的底层内部实现 var result = new Array(); //新数组 var start = start || 0; var end = end || this.length; //this指向调用的对象，用了call之后，改变...
2019-01-02 17:59:20
1201
原创 js实现金额数字输入规范限制（支持负数的输入，精确到小数点后两位【限制范围为：-99999999.99~99999999.99】）
// 输入事件 keyinput() { let t = this.adjustForm.adjustCash.charAt(0); if(t != '-' &amp;amp;&amp;amp; this.adjustForm.types === 1){ // 如果类型里显示为余额,输入的值变为正数时做类型清空,其他情况不做清空 ...
2018-10-29 14:48:28
2967
原创 js实现数字金额转换为对应的大写金额(精确到小数点后两位,支持负数金额的转换)
数字金额转换为对应的大写金额代码实现如下:export function convertMoney(money) { //汉字的数字 var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); //基本单位 var cnIntRadice = new Array('', '拾...
2018-08-30 15:41:17
2786
2
原创 git日常常用命令总结
Git基础 1. 要使用git来管理我们的代码，首先获得一个仓库，进入根目录执行git init 这样就创建了一个.git目录（仓库） 2. git config 配置用户信息（只需配置一次） 3. git status 查看仓库状态 4. git add 将文件放入暂存区 5. git checkout 文件名 可以将暂存区的内容还原到...
2018-04-01 20:13:11
372
原创 vue中的双向数据绑定的实现（数据劫持，结合发布者---订阅者模式）
代码简单原理的实现：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>&
2018-03-13 09:52:32
4275
原创 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩
2017-11-12 18:46:36
12910
原创 排序算法总结（js代码实现，思想通用）
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>sort</title> <link rel="stylesheet" href=""></head><body> <script
2017-11-12 18:25:01
430
原创 js实现找出字符串中的最长回文串
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>回文</title> <link rel="stylesheet" href=""></head><body> <script t
2017-10-14 17:24:50
3175
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人