- 博客(163)
- 收藏
- 关注
RSS订阅原创 浅谈跨站脚本攻击XSS
1. 概念跨站脚本攻击（Cross-site scripting, 通常简称为XSS）,是一种网站应用程序的安全漏洞攻击。2. 攻击类型XSS属于代码注入的一种，是通过在客户端写入javaScript, flash代码，盗取网站Cookie, 或者使网站无法正常浏览。3. 攻击手段利用XSS盗取Cookie, 再通过Cookie，伪装成用户，向服务端发送数据，进而盗取用户的信息。目的：恶作剧 <script> alert('this is a joke') </sc
2020-08-01 09:05:02
386
原创 vscode配置文件setting.json
{// sublime语法“sublimeTextKeymap.promptV3Features”: true,// Alt + Shift + 鼠标左键拖动就可以选择多行，请注释掉下面这行代码// “editor.multiCursorModifier”: “ctrlCmd”,// 控制是否将代码段与其他建议一起显示以及它们的排序方式“editor.snippetSuggestions”: “top”,// 工作区颜色主题“workbench.colorTheme”: “Monokai”,
2020-07-24 07:20:33
1985
原创 在Vue中导出文件格式为word
前段时间，遇到一个功能，前段将填写的数据，按模板导出到word文件。现在，在这里记录一下自己的使用心得。这里主要用到了docxtemplater, pizzip, jszip-utils, file-saver四个插件。所以首先先安装对应插件：npm i docxtemplater pizzip jszip-utils file-saver -S安装后的版本是：在安装的同时，我们在public目录（vue-cli3.0构建的项目）放下我们要导出的模板文件。我这里是将其命名world-exp
2020-05-29 10:34:54
2899
原创 webpack配置historyApiFallback的坑
博主在使用webpack做spa（单页面应用）的时候出现了404错误，原因很简单是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。于是我就看webpack的官网，在devServer里面有个historyApiFallback的属性，是用于如果找不到界面就返回默认首页，我一看这就是我要的东西，兴奋的设置上了。发现他不管用，原因是他默认的就是主目录的index.html，你自己设置的index没有用于是按官方的说法：historyApiFallback: {
2020-05-26 19:37:28
1674
原创 JavaScript二进制数据处理
JavaScript类型化数组使用JavaScript类型化数组可以方便地操作二进制数据，它分为两层，数据缓存和数据视图，数据缓存（ArrayBuffer）用于储存数据，但不负责数据读写，读写数据需要创建数据视图来实现 ，类型化数组就是数据视图的一种。数据缓存和数据视图的关系如下：let buffer = new ArrayBuffer(16)buffer.length // 16let int32View = new Int32Array(buffer)int32View.length //
2020-05-26 14:25:54
1258
原创 大公司怎么开发和部署前端代码
这个问题很有意思，也在面试中经常被问，这里在知乎上看到一个作者，回答的很完整，在这里搬过来，也作为备注，以便后续查阅。让我们返璞归真，从原始的前端代码开发讲起，上图是一个“可爱”的index.html页面和它的样式文件a.css,用文件编辑器写代码，无需编译，本地预览，确认OK，丢到服务器，等待用户访问。前端就是这么简单，好好玩啊，门槛好低啊，分分钟学会有木有？然后我们访问页面，看到效果，再查看一下网络请求，200！不错，太完美了！那么，研发完成了吗？等等，这还没完呢！对于大公司来说，那些变态的
2020-05-24 16:34:32
598
原创 package-lock.json的作用
其实用一句话来概括很简单，就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install 的时候的依赖能保证一致。
2020-05-23 06:51:00
250
原创 关于JSON,以下代码输出什么
const obj = { a: 3, b: 4, c: null, d: undefined, get e() { return 'e' }}console.log(JSON.stringify(obj)) 答案："{"a": 3, "b": 4, "c": null}"对象中的null, function将在JSON.stringify时会忽略掉如果对上面的例子，再进行改造，看看会输出什么结果var obj = { a: 3, b: 3, c: nu
2020-05-22 17:35:30
251
原创 如何在vue项目中使用Tinymce
我们在项目中，总会遇到需要使用富文本的情况，而Tinymce就是一个很不错的富文本编辑器,如何将Tinymce整合到vue项目中呢？本文是利用vue-cli3.0结合Tinymce4.x版本作的整合1、安装tinymce, @tinymce/tinymce-vue组件npm install tinymce @tinymce/tinymce-vue -S安装成功后，在node_modules目录中，查找tinymce/skins目录，将skins目录拷贝到public目录下。为了结构清晰，在s
2020-05-20 15:12:02
2132
1
原创 你在工作中遇到了哪些问题，解决办法是什么
经常在面试中，会听到面试官问，你在工作中遇到了哪些问题，你是怎么解决的？这里总结一下经常在工作中遇到的一些问题Uncaught TypeError: Cannot read property ‘b’ of undefined该错误说明没有某个属性，一般是该属性前面的值是undefined或者是null的情况会出现。这个错误经常发生在后端返回的数据没有按文档的格式返回，这个时候，前端可以做一些异常处理如var a = res && res.a更好的方法，是使用lodash中的g
2020-05-11 06:51:29
2961
原创 前端代码规范
前端代码规范随着前端技术的发展，越来越多的人员加入到了这个领域，随之而来的就是，代码写法上的差异，代码维护难度的增加，所以推出前端代码规范，势在必行。HTML 部分优先使用 IE 最新版本和 Chrome Frame<!-- 优先使用 IE 最新版本和 Chrome Frame --><meta http-equiv="X-UA-Compatible" content=...
2020-04-27 17:28:16
1293
原创 在使用resetField报错Cannot read property 'indexOf' of undefined
elementUI 的resetField是对整个表单进行重置，将甩有字段值重置为初始值并移除校验结果，当内容不一致，或者找不到内容时，就会报错，具体原因举例如下：原因： 当表单有v-if根据表单内部数据去控制是否显示时，会存在这个问题 <el-form ref="form" :model="form" :rules="addLabelValidator"> <el-f...
2020-04-22 13:28:39
4498
3
原创 Vue移动端项目适配方案总结
Vue移动端适配项目是采用vue-cli3.0开发，经本人研究实践，这里提供四种解决方案，亲测有效。一、lib-flexible + postcss-plugin-px2rem(推荐)安装px2rem-loader(将css中的px转换为rem)npm install px2rem-loader --save-dev移动端适配解决npm包 “lib-flexible”npm ...
2020-04-18 08:48:51
1337
1
原创 利用vue从零实现一个消息通知组件
利用vue从零实现一个消息通知组件平时，我们肯定用过类似element-ui,antd等一些UI框架，感受它们带给我们的便利。但当我们的需求或者设计这些框架内置的相差太大，用起来，就会觉得特别别扭，这时候，就有必要自己来重新造轮子。重新造轮子，有几个好处，1.所有代码都是服务你的业务，没有太多用不上的东西。2.代码是由自己维护，而不是第三方，方便维护。3.提升自己的视野，让自己站在更高的角度来...
2020-03-03 13:51:51
2160
原创 webpack从零构建一个vue的项目
webpack从零构建一个vue的项目平时里，大家要构建一个vue项目或者react项目，大都是通过官方提供的脚手架来实现，这也确实为我们提供了便利，可这同时也为我们，带来了很多的困惑，为什么有那么多的配置文件，有那么多的项目依赖，它们之间有什么关系，是如何工作的？感觉用了webpack项目开发是变得简单了，但同时问题也变得多了，项目的构建变成了一个墨盒子，我们不知道盒子里的内容是如何工作的。这...
2020-03-03 11:13:10
280
原创 对比vue学习react
官方介绍React：React 是一个用于构建用户界面的 JavaScript 库。Vue： Vue是一个渐进式JavaScript 框架Hello WorldReactReactDOM.render(<h1>Hello, World</h1>,document.getElementById('root'))Vuenew Vue({ el:...
2020-01-17 18:00:30
539
原创 element-ui 在IE11上无法选择日期
当时使用element-ui的日期控件，没有问题，后来，测试提出说，默认高亮的时间要用应用服务器的时间，摸索半天，想先将服务器时间取回来，最后发现没有用，后来就跟产品反馈了这个问题，就说暂时不处理了，因为代码他了异常处理，就想改不了，也就没有将代码还原，结果，这几天，测试这边反馈说，在IE11上用不了日期控件，找了半天，最后发现是用了async语法。模板部分：<el-date-pick...
2020-01-17 11:13:21
1150
原创 根据element-ui封装属于自己的组件库之公用table组件
平时在开发中，会经常使用到element-ui等类似的UI组件库，而在业务开发中，经常会调用一些组件，如table组件，于是就想，可不可以将其封装起来，方便自己调用呢，于是说干就干。封装的这个组件要有以下功能：首先想的是封装的这个组件要完全覆盖element-ui组件table原生的功能。不仅支持prop方式去渲染表格列，也支持render方式渲染。支持分页于是，为了实现自己的这个想...
2020-01-16 11:04:46
2218
9
转载 解决axios请求超时
简介在vue中经常使用axios发起网络请求，与服务器进行数据交互。在使用过程中会有许多问题存在，比如由于网络不稳定导致请求超时/失败，通常有两种解决方案，一种是提示用户重新提交请求，另一种是进行相关提示并自动重新发送请求。第二种方式用户体验明显高于第一种方式。本文就针对第二种方式设计一个解决方案。拦截器基本所有的网络请求库都有拦截器接口，包括请求拦截器和响应拦截器。axios设置拦截器的接...
2020-01-14 10:42:03
8614
原创 前端开发经验总结
经过几年开发，自己也犯过各种大大小小的错误，现在把这些错误或者经验总结出来，避免以后再犯，同时也希望能帮助到其他也在前端开发路上的朋友们。1.输入框要限制长度任何输入框，只要需要将数据传给后台，都一定要限制其长度，必竟后台数据库字段都有长度限制，如果，不做长度限制，提交给后台，后台做了限制还好，如果没有做限制，sql则会报错。2.新增/修改数据成功后，要清空数据新增/修改数据成功后，记得...
2020-01-14 09:57:14
1355
原创 手写一个Promise
经常在面试题中会看到，让你实现一个Promsie,或者问你实现Promise的原理，所以今天就尝试利用class类的形式来实现一个Promise为了不与原生的Promise命名冲突，这里就简单命名为MyPromise.class MyPromise { constructor(executor) { let _this = this this.state = 'pendin...
2020-01-11 11:28:38
271
原创 防抖与截流
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove，keyup 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。防抖 （debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函...
2020-01-11 08:57:02
1412
原创 记vue-cli3.0实现一个多页面应用的历奇经历
故事背景这是在刚请完假回来，一切都在计划之中，早上一来，就接到项目经历的新的需求（这个是烂摊子，已经好几个人接手，离职），我内心是拒绝的，可最后办法，没有其他人去做，最后就落在了我头上。接到需求，先看了需求，跟以前的比起来，改动挺大，数据结构全改了，如果在原来的基础上改，成本有点大，所以，就想着重启项目来实现。于是就使用vue的最新脚手架工具vue-cli3.0来初始化项目，但突然，一个会议又...
2019-12-20 14:30:25
589
原创 为什么要在axios中使用qs
ajax请求的get请求是通过URL传参的（以？和&符连接），而post大多是通过json传参的。qs是一个库。里面的stringify方法可以将一个json对象直接转为(以?和&符连接的形式)。在开发中，发送请求的入参大多是一个对象。在发送时，如果该请求为get请求，就需要对参数进行转化。使用该库，就可以自动转化，而不需要手动去拼接。axios默认的content-type是a...
2019-06-27 10:43:22
5818
原创 Vue中父子组件生命周期执行顺序
最近在开发中遇到一个问题，就是由于对父子组件生命周期钩子函数执行顺序理解不透彻引起的。问题是这样的：有一个组件由一系列子组件组成，子组件又被分解成组件，这样下来构成了三级组件。需求是在组件显示在页面上之后，再将数据初始化进行回显。父组件获取数据后传递到子组件，要求子组件根据这个值将内部元数据进行过滤和加工。那么在子组件中什么时机下才能获取父组件传递过来的新值呢？我的做法是这样的：最高层父组件的m...
2019-06-21 08:17:15
1413
原创 $attrs,$listeners,inheritAttrs
$attrs包含了父组件中不被认为（且不预期为）props的特性绑定(class和style除外)。当一个组件没有声明任何props时，这时会包含所有父组件的绑定(class和style除外)，并且可以通过v-bind="$attrs"传入内部组件-在创建更高层次的组件时非常有用。$listeners包含了父组件中的(不含.native修饰器)v-on事件监听器。它可以通过v-on="$li...
2019-06-20 07:59:51
207
原创 vue-cli3.0如何mock数据
在vue-cli3.0中mock数据在vue-cli3.0中mock数据，可以通过vue.config.js中的devServer配置项来mock数据。devServer: { before(app) { app.get('/api/seller', (req, res) => { res.json({ errno: 0, ...
2019-06-15 08:55:53
1248
原创 前端模块化
1.什么是前端模块化模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便地使用别人的代码，要用什么功能就加载什么模块。2.模块化开发的好处1）避免变量污染，命名冲突2）提高代码利用率3）提高维护性4）依赖关系的管理3.前端模块化的进程前端模块化规范从原始野蛮阶段现在慢慢进入“文艺复兴”时代，实现的过程如下：3.1 函数封装我们在讲到函数逻辑的时候提到过，函数...
2019-06-10 14:02:05
210
原创 深拷贝与浅拷贝的区别与概念
数据类型分为两种基础类型和引用类型：1.基础类型：如Number, String, Boolean，undefined, null2.引用类型：Object，Array, Function浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝（例：assign()）深拷贝是将对象及值复制过来，两个对象修改其中任意的值另一个值不会...
2019-06-06 13:29:34
324
原创 原型链的顶端是什么
js中到处是对象，对象之间往往会通过__proto__连接在一起，这种链接的现象被称为原型链。极少数的对象会滑原型，比如:Object.create(null)生生的对象里面没有任何属性，非常“空”，我们称它为字典，这种字典对象适合存放数据，不必担心原型带来的副作用。对象生的有三种方式，一种是上面的Object.create(),一中是字面量（var a = {}）,另外一种是通过构造函数（v...
2019-06-06 12:24:15
7875
原创 __proto__指向什么，而__proto__.__proto__又指向什么
在chrome控制台打印可以找到答案：__proto____proto__.__proto____proto__.constructor.__proto____proto__.constructor.__proto__.__proto____proto__.constructor.__proto__.__proto__.__proto__...
2019-06-06 11:47:26
944
原创 构造函数的__proto__指向什么
function A() {}A.__proto__ === A.constructor.prototype // true上面代码，构造函数A也是对象，我们知道，任何对象都有一个constructor属性，指向它的构造函数，即A的构造函数为A.constructor而构造函数中又有一个属性prototype指向实例的原型，即A.constructor.prototype...
2019-06-06 11:22:27
3274
原创 箭头函数的this指向
实现一个bind函数var fn = function(a, b, c, d) { return a + b + c + d}fn.bind(scope, a, b)(c, d)Function.prototype.bind = function(scope) { let newFn = this let args = Array.prototype.slice.call(argum...
2019-06-05 17:13:02
216
原创 箭头函数与bind的问题
箭头函数没有自己的this，所以不能通过bind动态地去修改thisvar a = {say: function() { var fn = (() => { console.log(this) }).bind(window) fn()}}a.say() // {say: f}
2019-06-05 16:28:57
2378
原创 vue的diff算法
1.当数据发生变化时，vue是怎么更新节点的？要知道渲染真实的DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能免帮助我们。我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode,然后Vn...
2019-06-05 15:41:15
221
原创 Vu Virtual DOM
Virtual DOM这个概念相信大部分人都不会陌生，它产生的前提是浏览器中的DOM是昂贵的，为了更直观的感受，我们可以简单地把一个div元素的属性都打印出来，可以看到真正的DOM元素是非常庞大的，因为浏览器的标准就把DOM设计得非常复杂。当我们频繁地去做DOM更新，会产生一定的性能问题。而Virtual DOM就是用一个原生的JS对象去描述一个DOM节点，所以它比创建一个DOM的代价要小得多。...
2019-06-05 08:36:29
300
原创 vue中的双向数据绑定
什么是双向数据绑定？vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也是算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提，如果我们使用vuex，那么数据流也是单向的，这时就会和双向数据绑定有冲突，我们可以这...
2019-06-05 08:07:44
519
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人