- 博客(37)
- 收藏
- 关注
RSS订阅原创 彻底弄懂IntersectionObserver
最近vue3在开发一个页面懒加载组件，使用到的核心API就是IntersectionObserver，虽然之前也了解用过，但是还是不够理解，本文就用于记录自己的学习理解过程。
2024-02-26 10:46:52
351
1
原创 Vue-cli3+打包懒加载失败原因
最近在梳理以vue-cli3为基础的几个项目的脚手架，发现其中一个项目在打包时通过() => import动态导入的文件不会生成单个chunk文件。 从babel版本, webpack版本， babel插件各个角度都无效，冷静下来分析，一定是babel上的问题，而vue-cli4的babel.config.js中preset使用的是@vue/cli-plugin-babel/preset， 因此顺腾摸瓜去找源码看逻辑，最终找到了关键文件 @vue\babel-preset-app\index.js
2022-02-08 10:28:09
1315
原创 postMessage使用误区
最近在写Webview，涉及到了web与客户端的数据交互，因此也就有了使用postMessage的理由。先贴上postMessage的文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage文档中介绍了postMessage方法的入参及使用方式，但是我在理解中存在了个误区，记录下来希望能帮和我一样理解误区了的朋友一起走出误区误区：A页面使用window.postMessage指定了targetOrigin..
2021-01-21 09:07:18
417
原创 nginx转发配置location proxy_pass是否带/笔记
假设访问地址为http://192.168.0.123/test/aaa.html配置1: location /test { proxy_pass: http://192.168.0.124 }location，proxy_pass末尾都不带/ => 实际访问地址: http://192.168.0.124/test/aaa.html配置2: location /test/ { proxy_pass:...
2020-08-24 09:20:47
452
原创 sortable.js控制拖拽区域经验
sortable.js配置项:http://www.sortablejs.com/options.html方法一:通过配置属性完成handle: 设置可拖拽元素的classNamefilter: 设置不可拖拽元素的classNamedragable: 设置设置可被拖拽区域的className方法二：在onStart实践中通过方法toArray先记录拖拽前的顺序, onEnd若拖拽不合法可以使用sort方法重新变回拖拽前的顺序...
2020-06-03 13:41:27
5448
10
原创 Axios经验
1. 报错:Cannot read property 'protocol' of undefined 原因: 引入axios方式问题 错误代码: 正确方式: import axios from 'axios' import axios from ...
2020-05-20 09:58:40
111
1
原创 Vue中codemirror使用心得
最新在使用codemirror，整理了一下使用心得，仔细看下官网文档，看个一两天肯定就熟悉了1. hint (1) javascript-hint: a: 在源文件javascript-hint.js中下面代码修复空字符串时也会有代码提示出现。 ```javascriptif (token.string == "") { re...
2020-02-25 17:07:50
1546
原创 Promise中then的执行顺序详解
Promise在前端中主要用于处理异步调用，其基本使用方式通过阮一峰大佬的文档一下就可以入手，但是最近我看了一篇文章wecTeam中，作者深山蚂蚁的《高级进阶：深度揭秘Promise注册微任务和执行过程》一文，让我对Promise的执行顺序有了更深的了解，与此同时我也有了一个疑问，通过这篇文章与大家探讨。1. promise的异步主要发生在微任务队列中2. 第一个then的回调监听最新Pr...
2020-01-10 10:15:56
11332
6
原创 jspdf + html2canvas 开发前端pdf导出功能记录
目录插件实现简单分页进一步分页关于html2canvas的一点小经验最近在开发项目的时候，接到了一个需求。听起来是比较简单的，将后台系统的报表以pdf文件的形式导出。excel导出,图片导出都做过了，现在轮到pdf了。在实现的过程中遇到了一些困难，通过查阅资料，网上各位朋友使用过的经验后，差不多完成。写这篇博客希望将自己的经验留下，帮助到更多的朋友。插件PDF类...
2019-11-22 10:56:07
815
原创 angular根模块与特性模块
Angular开发过程中的一些知识点积累。根模块与特性模块的执行环境相同，因此服务实例是通用的。 根模块中import的模块，declaration的组件、管道，特性模块无法进行共享根模块中import的模块，组件，管道...
2019-11-12 15:27:08
302
原创 webpack配置解决开发环境中的跨域问题
跨域这个事儿是前端避不开的问题，至于为什么产生跨域不是本文的重点，希望有兴趣的朋友可以去尝试搜下相关文章。首先vue-cli2.0搭建的项目下是需要在文件目录config/index.js文件中进行配置,下面例子是将所有请求域名改为“https://interface.meiriyiwen.com/”。module.exports = { dev: { // Paths...
2019-07-24 18:05:09
895
原创 对象的继承
对象继承的方式原型继承 构造函数继承 组合继承 寄居组合继承(当前最优继承方式)4种继承形式的区别 使用方式 缺点 原型继承 通过将子类的原型对象赋值为父类的对象实例， 继承父类的所有内容 例子: function Super(){} function Sub(){} ...
2019-07-05 13:20:42
131
原创 作用域、作用域链、闭包
为什么闭包这个概念看的七晕八素闭包概念中的一些专业名词概念不清晰 作用域链：本质是一个指向变量对象的指针列表。函数的作用域链在函数调用完成后即被销毁。 变量对象： 全局变量对象（js运行时一直存在）。 活动变量对象(局部变量对象，函数执行完毕后销毁)。函数在调用时创建本地的活动对象加上函数定义时预创建的作用域链，形成一个新的用于执行函数的作用域链。 闭包的定义不清晰...
2019-06-14 17:47:47
118
原创 Node做excel导入学习到的finish与end事件监听
重点： finsih事件来自stream.Writable类，end事件来自stream.Readable类。背景因为一个excel导入数据的需求，我用node通过使用formidable，fs，xlsx，mysql四个模块对上传的excel文件进行了解析，并将excel中的文件的内容导入到数据库中。业务逻辑很简单，使用formidable模块接收前端上传的excel文...
2019-06-06 15:51:09
431
原创 阿里云ICP备案管理
1. 域名未实名认证无法备案，但是xxx.org未实名认证已备案？ （1） 在这个政策之前已经备案好的域名可以继续正常使用，但是目前域名备案需要先进行域名实名认证。2. 想要变更的主体已注册存在，如何将现有的域名与服务器产品备案至新的主体上？ （1） 将现有的域名的备案进行注销，再通过新的备案主体对网站进行备案。 3. 每个备案服务号只能于一个网站绑定，绑...
2019-05-28 23:26:14
355
原创 html网页显示乱码问题
1. 在html代码里的header标签里添加<meta http-equiv="Content-Type" content="text/html;charset=utf-8">2. 查看html文件编码格式是否为utf-8-bom类型
2019-04-16 15:32:08
218
原创 Node.js服务将stream流转换为文件传给前端（导出文件给前端）
思路1. 服务端生成文件,将文件在服务端的地址返回给前端供前端下载。2. 服务端直接通过文件流传递给前端，前端直接将导出的接口地址使用window.open打开。（单纯的导出功能）3. 服务端将文件流传给前端,前端用bolb将文件流转为文件并下载。4. 服务端将文件流存在公共变量中,post请求上传文件后,再根据文件导出来进行请求。（只局限于每次上传并导入操作时，只有一个用户）...
2019-03-15 13:53:52
9628
原创 阻止移动端H5开发浏览器默认左右滑动行为
Touch事件小知识1.避免点击300ms延迟css： *{ touch-action: manipulation;}正题:如何解决H5移动端开发浏览器默认左右滑动事件在进行移动端开发时,由于浏览器自带的滑动行为，使手指只要左右滑动页面就可以上一页，下一页的跳转，体验可以说是十分的不好。为了解决这个问题，我在网上进行了一番搜索以及一番尝试得出了下面两种方法。现在就下...
2019-03-07 16:14:09
21566
11
原创 excel函数经验收藏
1. switch语句作用:对某一列或某一个单元格的数据进行变换处理例如:将一列城市编码转换成中文SWITCH(M2,"330100","杭州","330200","宁波","330300","温州","330400","嘉兴","330500","湖州","330600","绍兴","330700","金华","330800","衢州","330900","舟山","331000",...
2019-02-22 13:41:38
129
原创 vue使用xlsx模块导出EXCEL且给合并单元格添加边框
准备后台系统开发中，统一功能经常遇到需要将统计的数据以EXCEL的形式导出。针对这个需求，我遍在网上搜寻相应的解决方案。最终选择了大多数的建议：使用js-xlsx插件(https://www.npmjs.com/package/xlsx)。js-xlsx在npm中需要使用npm install xlsx进行安装，安装后还需要配合模块file-saver，以及对Blob对象处理的一个工具...
2019-02-20 12:11:07
9533
6
原创 Vue之生命周期activated与created使用
Vue中生命周期钩子的使用一般主要用于数据的初始化，最近使用了keep-alive，又学习到了actived这一钩子。于是就与created做了一个比较。 created activated 触发顺序 组件创建最初始 created => mounted =>activated 触发次数 只在组件刚创建时创建 在使用keep-ali...
2019-01-22 09:35:34
19811
3
原创 vuex学习
2018年过去了，2019年来临。希望新的一年能收获更丰富的经验，代码更加成熟。Module今天来记录下自己在vuex中module这一章的学习时所遇见的问题。想要使用module的原因也是因为，之前只建立一个全局的store对象，之后state对象里的属性越来越多，不利于以后的维护和后续的开发。理所当然的从官方文档进行学习，通篇看下来，大致都清楚了。如何将store模块化，模块化以后...
2019-01-08 23:42:36
101
原创 Koa2之解析在线excel文件
涉及Npm模块formidable -- 用于接收http请求中上传的文件 node-xlsx -- 用于解析excel文件 fs --操作文件思路通过formiadble将获取前端通过http请求上传的excel文件，并将文件保存至本地（因为node-xlsx无法通过虚拟地址解析文件）。然后通过node-xlsx解析并获取excel文件中的数据。将数据获取完后，删除本地excel...
2019-01-08 11:03:12
1568
原创 vue之keep-alive
vue通常作为单页面开发，而实际业务开发后台管理系统中，使用过程中可以开多个tab页使用起来比较方便。但是使用vue-router进行各个tab页之间路由切换时，每次重新进入路由之前页面中的资料就全部重新刷新一次。这显然达不到我们方便使用的效果。因此,keep-alive就能派上大用场了。官方文档解释使用keep-alive标签报过动态组件，会缓存不活动的组件实例。 使用方式...
2019-01-03 22:57:02
146
原创 Element开发后台管理系统（长期更新）
NavTabs组件这个组件主要用作为后台系统的菜单栏组件。使用该组件时，碰到路由回到根路径“/”,将“default-active”的值设置为""时无法取消当前激活菜单。对于该问题，我采用的解决方案是操作dom，将跳转至根路径前对应的激活菜单的样式"is-active"给删除。 Input组件想要添加输入完毕后，监听点击回车键事件。使用@keyup.enter.native...
2019-01-02 21:43:03
1900
原创 vue导出excel文件功能实现记录
excel文件导出功能主要是用于数据的统计方面，因此使用Vue开发后台管理系统的朋友可以来看我的记录。希望巩固自己的同时也能够方便大家。使用的npm包file-saver ---用于将导出的excel文件保存至本地的一个模块 xlsx ----极其强大，用于编写和解析excel。要详细了解https://docs.sheetjs.com/#sheetjs-js-xlsx附上文档链接，...
2018-12-17 23:36:33
640
原创 Vue组件开发学习总结
使用Vue各种ui框架如element-ui，iview可以提供开发效率。但是用别人的手短，有时候它们不能完全满足我们自己的需求。所以就促使我萌生了开发自定义组件的念头。由需求推动学习，重新去vue2的官网查看了组件开发这一节的内容。开始开发一个可拖曳的Modal对话框组件。组件的构成首先要了解如何构造一个组件，其实Vue作为spa开发，每一个vue文件都可以看做是一个组件。只不过这里我们...
2018-12-13 10:31:39
213
2
转载 Node.js中的文件路径解析
__dirname ： 返回被执行的 js 所在文件夹的绝对路径 __filename：返回被执行的 js文件 的绝对路径 process.cwd(): 返回运行 node 命令时所在的文件夹的绝对路径 ./：在 require() 中使用是跟 __dirname 的效果相同，不会因为启动脚本的目录不一样而改变，在其他情况下跟 process.cwd() 效果相同，是相对于启动脚本所在目录的...
2018-12-12 17:55:13
273
原创 Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历
今天想实现一个功能，在全局中随时改变用户的部分信息。这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象。看似一个很简单的逻辑，就体现了我基本功的不扎实呀。代码1：// store.jsimport Vuex from 'vuex';const store = new Vuex.Store({ state: { person...
2018-11-30 15:50:07
11994
2
原创 Vue中使用TinyMce方法
最新项目上需要添加一个富文本编辑器，通过各种推荐与比较选择了TinyMce。我的项目是vue2，通过npm下载了模块后，找到官方文档进行阅读，只有英文文档，所以在阅读的时候有些细节方面就很难理解。下面我就记录一下我在学习中遇到的几个问题，希望能给更多的朋友提供帮助。正文要学习怎么使用插件，首先肯定是要去官网看文档:https://www.tiny.cloud/docs。但是有一个小小...
2018-11-25 22:45:55
6188
原创 记由创建自定义组件实例需求驱动的vue.extend学习过程
学习vue.extend纯粹是因为当前项目使用的ui框架不能满足需求，所以使我萌生了自定义组件的念头。自定义组件写完后，又想能够自定义创建组件实例。这样一步一步，接触到了vue.extend。First首先要做的当然是先了解vue.extend的作用，通过官方文档API里的说明可以得知vue.extend(option) option的参数是一个包含组件选项的对象 返回一个Vue...
2018-11-21 23:42:22
163
原创 async/await中的await小结
由于学习Node.js写后台代码，那么必不可少要学习一下async/await。顺其自然的就找到了阮一峰大师的ES6文档，翻阅了其async这一模块内容来学习。主要来说说await吧Await 了解过程初步了解： 来源:阮一峰版本ES6入门文档 async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。 awai...
2018-11-21 10:29:40
879
原创 async/await ,Blurbird Promise,原生Promise学习小结。
最近在研究node+koa构建服务端，在数据库方面我选择了sequelize。于是乎就碰到了个问题，sequelize文档说它是使用Bluebird Promise来控制流程。那么Bluebird Promise和原生Promise 有什么差别呢?在使用async/await进行异步执行的时候会有什么不同的影响吗？带着这些问题，我开始了为期一个下午加一个早上的摸索。首先我先想测试下Blu...
2018-11-19 16:31:54
284
原创 跨域图片使用toDataURL遇坑记。（最终还是解决了）
这两天接到一个需求，需要做一个图片裁剪功能。找到了cropper.js，使用起来算是顺手,在做到将截好的图片以base64的形式上传保存的时候，突然遇到了一个之前没有碰到过的问题，没错就是：图片跨域问题。 网上搜锁了一下跨域图片使用toDataURL转换为base64的方法,没错,想必大家也肯定都知道了。 给Img标签设置crossOrign属性,将值设置为""或"A...
2018-07-11 11:44:34
12273
22
原创 使用jsJdk异步上传图片至OSS服务器
阿里云官方文档中给的基本都是同步上传文件的DEMO，可能是异步的比较简单，但是由于自己JS基础还不够牢固，在学习使用的时候也很闹心，因为老是看着看着就看到异步的那边去了。将自己写好的的一个DEMO放于博客中，万一能够帮助到任何一个和我一样的朋友也是好的。<!DOCTYPE html><html lang="en"><head> <meta ch...
2018-03-29 13:32:39
690
原创 数组对象Array的sort实现方法
数组对象Array的sort默认排序实现代码1.以下代码实现方式只显示了实现思路，希望朋友们可以提出更简洁的代码实现。Array.prototype.sort = function(){ var len = this.length; var mid; for(var i = len-1;i>=0;i--){ for(var j=0 ;j<=i;j++){ ...
2018-03-20 15:47:52
191
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人