- 博客(36)
- 收藏
- 关注
RSS订阅原创 cookie，session，token的区别和作用
1.cookie，session，token的出现的背景很久很久以前，Web 基本上就是文档的浏览而已， 既然是浏览，作为服务器， 不需要记录谁在某一段时间里都浏览了什么文档，每次请求都是一个新的HTTP协议， 就是请求加响应， 尤其是我不用记住是谁刚刚发了HTTP请求， 每个请求对我来说都是全新的。这段时间很嗨皮但是随着交互式Web应用的兴起，像在线购物网站，需要登录的网站等等，马上就面临一个问题，那就是要管理会话，必须记住哪些人登录系统， 哪些人往自己的购物车中放商品， 也就是说我必须把每个人区分开
2021-11-03 10:57:54
490
原创 Vue中props用法和传值问题
props的基本用法是父组件给子组件传输数据和验证基本用法：1.在父组件中的data中定义值2.在子组件中使用props声明要引用哪个值3.标签中使用4.在template模板中，要使用中划线写法；在script脚本中使用小驼峰props的使用：1.静态props静态即传入的值不变化，直接在父组件中定义，子组件中使用2.动态props动态即传入的值会变化，父组件中要动态地绑定父组件的数据。3.props验证验证传入的props参数的数据规格，如果不符合数据规格则发出警告，注意这个数据
2021-10-14 16:26:19
35107
3
原创 同时发起100个http请求，总共会建立多少个TCP连接
要搞明白这个问题，首先要解决以下问题：1.现代浏览器在与服务器建立了一个TCP连接后，是否会在一个HTTP请求完成之后断开？什么情况下会断开？在HTTP/1.0中，一个服务器在发送完一个HTTP响应后，会断开TCP连接。但是这样每次请求都会重新建立和断开TCP连接，代价过大。所以虽然标准中没有设定，某些服务器对Connection: keep-alive的Header进行了支持。意思是说，完成这个HTTP请求之后，不要断开HTTP请求使用TCP连接。这样的好处是连接可以被重新使用，之后发送HTTP请求
2021-10-14 14:37:07
4123
原创 Ajax！！！
什么是ajax！ajax是asynchronous javascript and XML的简写，中文翻译是异步的javascript和XML，可以局部请求网络数据但不刷新页面；然名字中包含XML，但ajax通信与数据格式无关ajax包括以下几步骤：1、创建AJAX对象；2、发出HTTP请求；3、接收服务器传回的数据；4、更新网页数据概括起来，就是一句话，ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理怎么创建ajaxajax技术的核心是XMLH
2021-10-09 16:30:24
99
原创 前后端路由,单页面应用以及vue-router两种模式
前后端分离 ===> 利用Ajax，可以在不刷新浏览器的情况下异步数据请求交互。单页应用（只有一个html文件，整个网站的所有内容都在这一个html里，通过js来处理）不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的。为了实现单页应用 ==> 前后端分离 + 前端路由。（更新视图但不重新请求页面）前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，加载不同的组件，然后动态的渲染出区域 html 内容。早期的后端路由前端路由单页面应用:单页Web应用（sing
2021-09-29 16:45:24
827
原创 vue2的响应式原理
Vue的响应式原理是用Object.definePrototy()的et与get结合观察者模式进行数据劫持；首先了解一下Object.definePrototy()的set与get；在获取对象prototy的时候，会自动调用get方法，在修改时会自动调用set方法VUE给data里所有的属性加上set,get这个过程就叫做Reactive化。观察者模式（发布订阅者模式）观察者模式分为注册环节与发布环节依赖dep类与watch类这个Watcher实际上是连接Vue组件与Dep的桥梁。
2021-09-29 14:48:22
599
原创 vue中computed和watch的区别
两者都是监听数据，都是当依赖的数据发生改变时，被依赖的数据就自动发生改变区别：1.computed是监听多个数据，一搬用于计算一些复杂的场景，如购物车计算价格，即多对一，多个数据中的一个改变会引起汇总那个数据的改变；watch是监听一个数据，通过观察一个数据的变化去改变其他数据，如搜索框列表2.computed用于计算，watch用于观察3.computed一定要有return4.computed具有缓存性，当依赖的数据没有发生变化时，就会从缓存中取出数据，所以computed的性能比watch要
2021-09-28 15:35:28
197
原创 CSRF攻击
CSRF（跨站请求伪造）攻击CSRF(Cross Site Request Forgery,跨站请求伪造)是一种近年来才逐渐被大众了解的网络攻击方式，又被称为One-Click Attack或Session Riding。攻击原理某用户登录了A网站，认证信息保存在cookie中。当用户访问攻击者创建的B网站时，攻击者通过在B网站发送一个伪造的请求提交到A网站服务器上，让A网站服务器误以为请求来自于自己的网站，于是执行响应的操作，该用户的信息边遭到了篡改.总结起来就是，攻击者利用用户在浏览器中保存的认
2021-09-28 11:00:29
654
原创 请求一个URL的优化
当浏览器请求一个URL的时候，通过firebug我们可以发现大概有以下几个过程：阻挡、域名解析、建立连接、发送请求、等待响应、接收数据。后面四个跟用户的网络情况和你的服务器处理速度有关，本文重点说说前两个。1、阻挡：解决方案——提高浏览器并发连接数（并发即同时）阻挡：不同的浏览器对单个域名的最大并发连接数有一定的限制，HTTP/1.0和HTTP/1.1也不相同。比如HTTP/1.1协议下，IE6的并发连接数限制是2个；而在HTTP/1.0下，IE6的并发连接数可以达到4个。在其它浏览器也有类似的限制，
2021-09-28 10:59:29
135
原创 ==隐式转换
！！关于JavaScript中0、空字符串、'0’是true还是false的总结首先看下面：false == 0 输出true；因为在做判断的时候，两者中有boolean（布尔类型），会把boolean先转化为number（数字类型），false为0，true是1。也就是等价于判断 0 == 0 ，结果为true。‘’ == false 输出为true**；js中空字符串与0相等，也就意味着空字符串等等于false**。‘0’ == false 正确输出为true；这里犯了一个错误认为结果会.
2021-09-27 21:36:04
608
原创 git解决一些错误操作
git使用：https://blog.csdn.net/qq_45798556/article/details/114632849
2021-09-27 21:34:30
59
原创 Vue生命周期函数的部分理解
1.Vue中ajax放在Created和Mounted的区别放在哪个钩子好？个人见解：！！！一般来说放在Created中就可以了，如果涉及到需要操作DOM节点或者需要页面加载完成的情况才放到Mounted中的this.$nextTick函数中(vue的异步更新)区别（暂时确定是这些，如有求评论！！）：1.ssr（服务器端）不支持beforeMount/Mounted等钩子，意思是服务端渲染的话不能放在Mounted。2.Created中无Dom节点误区（不知道对不对）：1.放在Created中
2021-09-27 11:47:04
411
原创 Vue中异步更新队列
Vue 在更新 DOM 时是异步执行的看下官网介绍:只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不
2021-09-15 13:46:41
2150
原创 深拷贝与浅拷贝
1.浅拷贝与深拷贝简单来讲，浅拷贝是指向和拷贝对象相同的内存地址，因为是共用一个地址，所以当拷贝对象发生变化时，我们新的对象也会发生变化。深拷贝的话，我们是开辟了一块新的内存地址来存放新的对象，这样两个对象是指向不同内存地址，所以对于被拷贝对象进行修改时，不会影响到拷贝的对象。如浅拷贝：let a=[0,1,2,3,4],b=a;console.log(a===b);a[0]=1;console.log(a,b);再例如**简单数组的深拷贝（没有嵌套层级）**的深拷贝当然这里只是进
2021-09-09 14:49:54
630
转载 HSTS是什么
HSTS(HTTP Strict Transport Security)HSTS（HTTP Strict Transport Security）国际互联网工程组织IETF正在推行一种新的Web安全协议HSTS的作用是强制客户端（如浏览器）使用HTTPS与服务器创建连接。国际互联网工程组织IETE正在推行一种新的Web安全协议HTTP Strict Transport Security（HSTS），采用HSTS协议的网站将保证浏览器始终连接到该网站的HTTPS加密版本，不需要用户手动在URL地址栏中输入
2021-09-08 14:41:53
2183
转载 浏览器渲染页面的原理及流程
浏览器页面渲染的原理及浏览浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。CSS文件的解析是不可中断的！2.构建渲染树（Render Tree）。3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或
2021-09-08 13:39:57
100
转载 http缓存
为什么需要缓存当浏览器第一次访问一个网站时，需要加载许多资源，html+css+js+img…，但是第一次过后，再次访问该网站，若是没有缓存，则需要再次进行网络请求，不但对服务器不友好，加载速度、渲染出页面的速度也会有很大的降低，所以说缓存可以帮我们减少网络请求的体积和数量，加速网页加载渲染速度。强缓存强缓存是利用http的返回头中的Expires或者Cache-Control两个字段来控制的，用来表示资源的缓存时间。Cache-ControlCache-Control是一个相对时间，例如Cac
2021-09-08 09:47:44
62
原创 宏任务与微任务
JS运行机制概念1：JS是单线程执行，该单线程是指JS引擎线程在浏览器环境中，有JS 引擎线程和渲染线程，且两个线程互斥。Node环境中，只有JS 线程。概念2：宿主JS运行的环境。一般为浏览器或者Node。所以一般也叫宿主环境概念3：执行栈是一个储存函数调用的栈结构，遵循先进后出的原则概念4：Event Loop...
2021-09-07 11:06:25
173
原创 axios原理
1.axios是什么？axios是一个基于promise的http库，可以用在浏览器和node.js的环境中；本质上也是对原生xhr的封装，只不过它是promise的实现版本，符合最新的ES规范axios有什么特性1.可以用在浏览器和node.js的环境中，从浏览器中创建XMLHttpRequests；基于node内置核心模块http实现axios，从中创建http请求，也就是说，axios可以在浏览器上和服务器上都可以发起请求2.是一个基于Promise的HTTP库，支持promise的所有API
2021-09-06 11:04:48
4271
原创 防抖与节流函数
防抖或节流：都是为了限制业务逻辑函数的执行次数1.防抖debounce防抖即通过setTimeOut的方式，将多次触发变为一次触发什么是函数防抖概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。为什么需要函数防抖 前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内
2021-09-02 17:26:23
289
转载 xss是什么以及如何防范
Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。而由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，或
2021-08-31 09:59:45
2474
原创 关于toString的自动调用
首先看一道函数结果alert为6这里涉及到这个toString的自动调用问题！这里log一下add(1)发现打印了字符串形式的tmp函数的函数体，但是类型为函数然后再看这道看结果，注意这个函数的执行顺序：fn(1)函数调用开始，从上到下，先打印了‘第一次’,然后return help，注意！return后面如果为函数体的话，为了输出字符串会自动调用toString方法，也即是会自动执行这里的help.toString()！意思即是就算这个函数里面没有这个help.toString()
2021-08-20 13:28:01
1196
原创 解决element-ui分页器中删除最后一页最后一项数据时，页面不刷新到最新页的问题
首先看删除完最后一项数据后，明明只剩6页，当前页确还是第七页，所以导致最后页面没有数据这时候需要在调用重新渲染数据列表之前写下以下判断，再调用数据请求即可
2021-08-16 16:47:25
638
原创 object的defineProperty方法简介
defineProperty方法的初始写法：注意这个enumerable是枚举的意思，也就是我们说的遍历defineProperty方法的第二种写法：什么时候执行getter？可以看出，打印了一个空的对象，但是点开有下面的方法和属性，当点击这三个点的时候，即invoke property getter调用原型getter方法，也是去访问这个值，同obj.name...
2021-08-05 10:06:16
98
原创 插槽的用法
首先要知道，默认情况下是不渲染子组件标签中的内容的，如图：然后插槽就出现了，如果想展示子组件中标签的内容，就需要在子组件中使用插槽。而slot标签出现的位置，就是这些内容出现的位置。有name属性的就是具名插槽，没有name的就是匿名插槽。用法是这样：子组件的模板中使用slot标签，相当于实体；而父**模板中使用slot=“name值”**就是外壳引用了这个实体作用域插槽呢，即在子模板中定义了slot插槽标签，那么它访问到子组件中的值；而插槽是要在父模板中使用的，而用的是父模板的值，确访问不到
2021-08-05 10:06:02
243
原创 数组的常用方法
数组的常用方法经常用到，下面只给汇总1.push:后面添加一个或者多个元素，返回新长度数组2.pop:删除最后面一个元素，返回删除元素3.unshift:同push4.shift:同pop（shift的中文意思是转移，即删除），返回删除元素5.splice:参数为start和end返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。如果start为负数，那么从尾部开始算起，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（
2021-07-30 12:31:40
60
原创 数组的三个高阶方法reduce,fliter,map
首先要明白这个高阶方法都是将函数作为参数或者返回值的函数1.reduce方法语法 这个方法接收两个参数：1)要执行的函数，要执行的函数中也可传入参数，分别为prev：上次调用函数的返回值cur：当前元素index：当前元素cur的索引arr：被遍历的数组2)函数迭代的初始值即一个fn,一个val先看一下如果只传函数不传初始值：打印结果所以可以看出，不传初始值的话，会将数组的第一个元素作为prev初始值，所以迭代了三次传初始值：打印结果prev从5开始计算，可以看到，这
2021-07-30 11:48:17
132
原创 vue项目中用less怎么用以及依赖包
less在vue中的用法以及错误例如：1.首先npm install less@版本号 --save2.npm install less-loader@版本号 --save（注意：版本过高会报错如下）.补充：指定依赖包指定包取决于你的项目，你需要在package.json 文件中列出你需要使用的包，有两种包可以选择：“dependencies”： 这些包都是你的应用程序在生产环境中所需要的。“devDepedencies”：这些包只是在开发和测试中需要的。–save 和–save-de
2021-07-20 16:03:32
871
翻译 js的继承方式
1.原型链继承：重点：让新实例的原型等于父类的实例优点：实例可以继承的属性有：1.实例的构造函数的属性、2.父类构造函数属性、3.父类原型的属性；但是注意：新实例不会继承父类实例的属性缺点：1.新实例无法向父类构造函数传参、2.继承单一、3.所有新实例都会共享父类实例的属性，原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改2.构造函数继承重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））优点：1.只继承了
2021-07-20 15:49:19
50
原创 理解预编译
JS的运动过程：1.语法分析2.预编译3.执行解释语法分析就是JS引擎去检查你的代码是否有错误，解释执行就是执行你的代码。最重要的当然还是预编译：首先要明白函数声明和变量赋值的区别：预编译（函数执行的前一刻）：1.创建AO对象（Activation Object）（执行上下文）；2.找函数形参和函数内变量声明，将形参名和变量名作为AO对象的属性名，值为undefined；3.将实参值和行参统一，实参值赋给形参；4.在函数体内里面找函数声明，值赋予函数体可以看下面的例子：大概按着这
2021-06-30 15:00:21
89
转载 彻底理解prototype和__proto__、constructor
首先看一段代码，定义一个构造函数Parent 和 Child, new一下Child构造函数创造出实例对象child1.然后这里说明实例是个对象，一定要注意prototype:prototype属性也叫原型对象,主要是为了实现继承和共享属性;可以说我们的每一次编程,内在都有原型对象来发挥着作用,如果你没有掌握原型对象的含义,那么你的js还没有真正的入门!这里记住：对象分为函数对象与普通对象；除函数对象之外的对象全部是普通对象！只有函数对象才具有prototype属性！；而系统内置的函数对
2021-06-24 18:07:33
190
原创 js中的堆栈内存和闭包理解
要理解堆栈，先理解js的数据类型：1.基本类型（也叫值类型）：number,string,boolean,null,undefined2.引用类型：object,function3.特殊类型：symbol熟悉了基本类型和引用类型后来看看什么叫栈内存吧！栈内存stack：1.提供一个供js执行的环境（js都是在栈中执行的）2.存储js的基本数据类型，由于基本数据类型比较简单，所以都是直接在栈内存中开辟一个位置存储的。=> 当栈内存被销毁，存储的那些基本值也跟着销毁了堆内存heap：1
2021-06-24 09:00:03
422
原创 闭包的经典面试题之一
闭包的经典面试题之一首先，上题目：问打印结果是什么？结果为：要做这道题，首先要理解以下概念：1.js的执行机制：单线程执行，也就是所谓的stack(栈).2.作用域链：可以看作一个集合，即当前作用域及父级的作用域的集合。可以看下图一个函数的执行过程：首先进行全局执行上下文，执行完毕后，根据上下文存在的books函数，就去执行books的执行上下文，再然后是匿名函数的上下文在这里还需要再了解一下执行机制，由于js是单线程执行机制，在执行上下文的时候，若是出现了一个方法中的事情很多，每次都需
2021-06-22 20:26:46
244
原创 关于第一次刷新页面会有1s延迟问题解决##js
关于第一次刷新页面会有1s延迟问题解决要解决这个问题，只需将执行条件封装成一个函数，在点击后立刻执行一次函数，然后定时器setInterval再调用函数即可，如图！以下是有一些基础不稳定的（就是我自己）犯的易错点：1.setInterval / setTimeout （回调函数，延迟时间）中的回调函数可以直接写函数，或者函数名，或者采用字符串’函数名()'的形式！第一篇文章，以后好好加油，希望这篇文章能对大家有用，完毕！...
2021-04-20 00:17:10
359
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人