`、````(3)、空元素 ( 在 HTML[1] 元素中，没有内容的 HTML 元素被称为空元素 )
//换⾏
//分隔线 //⽂本框等 ![]()
//图⽚ ⼋、Css Hack 由于不同的浏览器和浏览器各版本对CSS的⽀持及解析结果不⼀样，以及**CSS优先级对浏览器展现效果的影响**，我们可以据此针对**不同的浏览器情景来应⽤不同的CSS**。 （1）、选择符 （1）IE6 能识别 `*html .class{}` （2）IE7 能识别 `*+html .class{}` 或 `*:first-child+html .class{} （2）、属性 （1）IE6 能识别下划线" _ "和星号" * " （2）IE7 能识别星号" * "，但不能识别下划线" _ " （3）IE6~IE10 都识别" 9 " （4）firefox 前述三个都不能识别。` （3）、条件 （1）所有 IE (注：IE10+ 已经不再⽀持条件注释)能识别 （2）IE6及以下版本能识别 这类 Hack 不仅对 CSS ⽣效，对写在判断语句⾥⾯的所有代码都会⽣效。 （3）实际项⽬中 CSS Hack ⼤部分是针对 IE 浏览器不同版本之间的表现差异⽽引⼊的。九、src与href的区别 href和src的区别： href是指向⽹络资源所在位置，建⽴当前元素或者当前⽂档之间的链接，⽤于超链接。 例如：a标签 link标签 src:是指向外部资源位置，指向的内容会嵌套到当前⽂档标签所在的位置。 例如：img标签 frame标签 主要区别: href是⽹络资源，src是外部资源。 href是超链接，src资源会嵌套到当前标签。⼗、link与@import区别两者都是外部引⽤CSS的⽅式，但是存在⼀定的区别： 区别1：link除了引⽤样式⽂件，还可以引⽤图⽚等资源⽂件，⽽import只能引⽤样式⽂件 区别2：link引⽤CSS时，在页⾯载⼊时同时加载；@import需要页⾯⽹页完全载⼊以后加载。 区别3：link是XHTML标签，⽆兼容问题；@import是在CSS2.1提出的，低版本的浏览器不⽀持。 区别4：link⽀持使⽤Javascript控制DOM去改变样式；⽽@import不⽀持。⼗⼀、css3/H5新特性⼀、css3 1、选择器 :last-child /* 选择元素最后⼀个孩⼦ */ :first-child /* 选择元素第⼀个孩⼦ */ :nth-child(1) /* 按照第⼏个孩⼦给它设置样式 */ 2.背景和边框 border-radius: 圆⾓ border-shadow/text-shadow: 阴影 border-image: 边框图⽚⼆、html5新特性 1. 语义化标签：⽂档头部:header、⽂档尾部:footer、⽂档中的节点:section、导航:nav、侧边栏:aside、独⽴内容区域:article2. 增强型表单：HTML5 拥有多个新的表单 Input 输⼊类型。这些新特性提供了更好的输⼊控制和验证⼗⼆、浏览器兼容性问题不同浏览器的标签默认间距不同，所以在⽹页解析有⼀定的差异 1、.css3新属性，加浏览器前缀兼容早期浏览 `-moz-` / ⽕狐浏览器 / `-webkit-` / Safari, ⾕歌浏览器等使⽤Webkit引擎的浏览器 / `-o-` / Opera浏览器(早期) / `-ms-` / IE / 2、.IE浏览器div最⼩⾼度和宽度的问题 加宽⾼，并且宽⾼加autoJS相关⼀、 原型和原型链1. prototype 每个函数都有⼀个prototype属性，被称为显⽰原型2._ _proto_ _ 每个实例对象都会有_ _proto_ _属性 ,其被称为隐式原型 每⼀个实例对象的隐式原型_ _proto_ _属性指向⾃⾝构造函数的显式原型prototype3. constructor 每个prototype原型都有⼀个constructor属性，指向它关联的构造函数。4. 原型链 获取对象属性时，如果对象本⾝没有这个属性，那就会去他的原型_ _proto_ _上去找，如果还查不到，就去找原型的原型，⼀直找到最顶层(ype)为⽌。ype对象也有_ _proto_ _属性值为null。⼆、 作⽤域1、作⽤域 每⼀个变量、函数都有其作⽤的范围，超出作⽤不得使⽤，这个叫做作⽤域。2、全局变量、局部变量： 1.全局变量： （1）在全局范围内声明的变量，如var a=1; （2）只有赋值没有声明的值，如a=2; （注：如果a=2在函数环境中，也是全局变量） 2.局部变量： 写⼊函数中的变量，叫做局部变量。 3.作⽤： （1）程序的安全。 （2）内存的释放。三、 闭包1、闭包 闭包是可以访问另⼀个函数中的变量的函数2、优点缺点 优点：长期驻留内存，可以缓存数据 缺点：可以隔离作⽤域，避免全局污染四、 This的指向核⼼点1：谁调⽤指向谁，全局this指向window（隐含）。核⼼点2：两种情况：作为全局函数或在函数中调⽤->window，作为对象⽅法调⽤->对象； 普通函数中this指向函数的拥有者 构造函数中this指向实例化对象 箭头函数中没有this，this拿的是上⼀级的this来使⽤五、 垃圾回收和内存机制内存泄漏： 要想破坏循环引⽤，引⽤DOM元素的对象或DOM对象的引⽤需要被赋值为null。1.闭包 在闭包中引⼊闭包外部的变量时，当闭包结束时此对象⽆法被垃圾回收（GC）。泄露 当原有的DOM被移除时，⼦结点引⽤没有被移除则⽆法回收垃圾回收：六、宏任务和微任务宏任务 宏任务指执⾏栈中待执⾏的任务，`计时器，事件回调，http回调`都是宏任务。微任务 微任务指执⾏栈清空后⽴即执⾏的任务，`Promise 和 MutationObserver`都是微任务。七、Js基础1、数据类型 js 中基本数据类型：String(字符串)、Number(数字)、Array(数组)、Boolean(布尔类型)、Object(对象)、null、undefined； (1).堆栈内存： 栈内存：⽤来存储基本数据类型，⽤来执⾏函数 堆内存：⽤来存储引⽤数据类型：对象，函数2、⼿写深拷贝 (1)、深拷贝和浅拷贝的区别 浅拷贝 ： 只是将数据中所有的数据引⽤下来，依旧指向同⼀个存放地址，拷贝之后的数据修改之后，也会影响到原数据中的对象数据 深拷贝： 将数据中所有的数据拷贝下来，对拷贝之后的数据进⾏修改不会影响到原数据 var data = { name:"test", //⼀会要被拷贝的数据，包含字符串、对象、函数、数组 main:{ a:1, b:2 }, fn:function(){ }, friends:[1,2,3,[22,33]] } function shallowCopy(obj){ var data = {}; for (var i in obj){ if(Property(i)){ data[i] = obj[i] } } return data } var obj2 = shallowCopy(data) = '修改成功' //由于name是基本数据类型，会开辟⼀个新的地址来储存我们拷贝的内容，所以原数据的name属性不会被修改 .a = 100 // main是引⽤类型，浅拷贝会直接拷贝它的地址，所以原数据的这个值也会改变 (data,obj2)3、类型判断 数据类型判断⼤概有四种typeof、instanceof、constructor、()4、数组⽅法 (1).push() 可以添加⼀个或多个参数到数组的尾部，添加之后原来的数组会发⽣改变，返回的是添加后的数组的长度 (2).pop() 从数组尾部删除⼀个元素，原数组会发⽣改变，返回数组中被删除的元素 (3).unshift() 可以添加⼀个或多个参数到数组的头部，添加后原来的数组会发⽣改变，返回的是添加后的数组的长度 (7).reverse() 数组翻转 (8).sort() 数组排序 (9).join() 数组拼接 (10).isArray() 判断是否是数组 (11).toString() 数组转字符串5、数组去重 利⽤indexOf属性，判断新数组⾥是否存在原数组中的值，当⼩于0，证明没有这个元素，就添加其道新数组，从⽽达到去重的作⽤6、数组排序 冒泡排序、快速排序—递归排序、选择性排序7、数组扁平化 数组扁平化就是将⼀个多维数组转换为⼀个⼀维数组9实现基本⽅式 (1)、对数组的每⼀项进⾏遍历。 (2)、判断该项是否是数组。 (3)、如果该项不是数组则将其直接放进新数组。 (4)、是数组则回到1，继续迭代。 (5)、当数组遍历完成，返回这个新数组。⼋、 ⾼频⾯试题1、 for···in和for···of的区别 (1)、从遍历数组⾓度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值) (2)、从遍历字符串的⾓度来说，同数组⼀样。 (3)、从遍历对象的⾓度来说，for···in会遍历出来的为对象的key，但for···of会直接报错。 (4)、如果要使⽤for…of遍历普通对象，需要配合()⼀起使⽤。2、null和undefined区别 但是null和undefined仍然存在⼀些区别： (1).类型不⼀样 (2).转为数值时，值不⼀样 (3).===运算符可区分null和undefined3、this, call, apply, bind (1).浏览器⾥，在全局范围内的this 指向window对象； (2).在函数中，this永远指向最后调⽤他的那个对象； (3).构造函数中，this指向new出来的那个新的对象； (4).Call、apply、bind中的this被强绑定在指定的那个对象上；4、继承 (1).原型链继承 将⽗类的实例作为⼦类的原型 优点： ⾮常纯粹的继承关系，实例是⼦类的实例，也是⽗类的实例 ⽗类新增原型⽅法/原型属性，⼦类都能访问到 简单，易于实现 缺点： 要想为⼦类新增属性和⽅法，必须要在new Animal()这样的语句之后执⾏，不能放到构造器中⽆法实现多继承 来⾃原型对象的所有属性被所有实例共享创建⼦类实例时，⽆法向⽗类构造函数传参 (2).拷贝继承 原理：遍历对象拷贝函数的属性，赋值到当前函数的属性上。再把属性值重新赋值。 优点：⽀持多继承 缺点：效率较低，内存占⽤⾼（因为要拷贝⽗类的属性） ⽆法获取⽗类不可枚举的⽅法（不可枚举⽅法，不能使⽤for in 访问到）5、设计模式 (1).什么是单例 保证⼀个类只有⼀个实例，并且提供⼀个访问该全局访问点 (2).什么是观察者模式 ⾏为性模型：⾏为型模式关注的是系统中对象之间的相互交互，解决系统在运⾏时对象之间的相互通信和协作，进⼀步明确对象的职责。 观察者模式，是⼀种⾏为性模型，⼜叫发布-订阅模式，他定义对象之间⼀种⼀对多的依赖关系，使得当⼀个对象改变状态，则所有依赖于它的对象都会得到通知并⾃动更新。九、dom操作⼀、dom元素获取 1.`mentById(id``的值``)` 通过id来获取元素的对象，返回值是⼀个对象 2.`mentsByName(name)` 通过name属性来获取对象的,返回值是⼀个数组，与getElementById()⽅法类似，但他是查询的name元素，⽽不是id属性 3.`mentsByTagName()` 通过标签来获取元素的对象, 返回值是⼀个数组 4.`mentsByClassName()` 通过class类名来获取的对象,返回值是⼀个数组 5.`elector()` css选择器，返回与该模式匹配的第⼀个元素，结果为⼀个元素；如果没找到匹配的元素，则返回null 6.`electorAll()` css选择器，返回与该模式匹配的所有元素，结果为⼀个类数组⼆、dom创建
⼆、dom操作 1. 创建：新的标签(元素节点) = Element("标签名") 2. 删除：⽗节点.removeChild(⼦节点); 3. 插⼊：insertBefore(新插⼊的节点，参照物节点) 往某个节点的前⾯插⼊⼀个新的节点 4. 追加：appendChild(新的节点的名) 当前对象追加⼀个⼦节点⼗、js操作BOM 什么是Bom? Bom是浏览器对象。它提供与浏览器的交互5⼤属性。⼗⼀、事件⼀、DOM事件三种级别 (1).DOM0级事件 DOM0 级时间分两种，⼀是直接在标签内直接添加执⾏语句，⼆是定义执⾏函数。 (2).DOM2 级事件 第⼀个参数：事件名称 第⼆个参数：执⾏函数 第三个参数：指定冒泡还是捕获，默认是false，冒泡。 (3).DOM3 级事件 同DOM2级⼀样，只不过添加了更多的事件类型，⿏标事件、键盘事件。DOM事件两种类型 (1).事件类型分两种：事件捕获、事件冒泡 事件捕获就是由外往内，从事件发⽣的顶点开始，逐级往下查找，⼀直到⽬标元素。 事件冒泡就是由内往外，从具体的⽬标节点元素触发，逐级向上传递，直到根节点。⼆、事件委托 事件冒泡：就是事件从最深的节点开始，然后逐步向上传播事件。 作⽤： 提⾼性能：每⼀个函数都会占⽤内存空间，只需添加⼀个事件处理程序代理所有事件，所占⽤的内存空间更少；三、封装⼀个通⽤的事件绑定函数 需要点击每个a，来。弹出他们的内容
// 封装通⽤的事件绑定函数 function bindEvent(elem, type, fn) { ntListener(type, fn) }//获取⽗元素 const fu = mentById('div3') bindEvent(fu, 'click', function (event) { // () // 获取触发的元素 let target= tDefault() // 阻⽌默认⾏为 //过滤符合条件的⼦元素，主要是过滤掉 加载更多
if(rCase()==="A"){ alert(TML; } })⼗⼆、Ajax1、原⽣Ajax的创建过程 创建 XMLHttpRequest 对象； 注册回调函数； 设置连接信息； 发送数据，与服务器开始交互； 接受服务器返回数据。2、Jsonp的原理 JSONP（JSON with Padding）可⽤于解决主流浏览器的跨域数据访问的问题）。跟JSON没有关系。 JSONP本质上是利⽤HTML元素的src属性都可以跨域的思路来解决的。⼗三、存储本地存储分为cookie、localStorage、sessionStorage， Cookie设计初衷是⽤来和服务器通讯，⽽不是本地存储，他只是被‘借⽤’到本地存储。 Cookie有⼀些缺点：存储空间⼩，最⼤4k、http请求时需要发送到服务器，增加请求数据量、只能⽤ =’…’ 来修改，太过简陋⼗四、Es61、let、var、const区别 (1).变量提升 var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使⽤，否则会报错。 (2).重复声明 var声明变量时，可以重复声明变量，const和let不能重复声明。 (3).初始值设置 在变量声明时，var 和 let。⽽const声明变量必须设置初始值。 (4).块级作⽤域 块作⽤域由 { }包括，let和const具有块级作⽤域，var不存在块级作⽤域。 块级作⽤域解决了ES5中的两个问题： 内层变量可能覆盖外层变量 ⽤来计数的循环变量泄露为全局变量2、es6解构赋值 最常⽤的场景是：element-ui,vant-ui按需引⼊，请求接⼝返回数据，提取想要数据。 常见的⼏种⽅式有 1.默认值 2.交换变量 3.将剩余数组赋给⼀个变量 当结构⼀个数组时，可以使⽤剩余模式，将数组剩余部分赋值给⼀个变量 4.给新的变量名赋值 可以从⼀个对象中提取变量并赋值给和对象属性名不同的新的变量名3、箭头函数与普通函数的区别 1、函数体内的 this 对象，就是定义时所在的作⽤域中的 this 值，⽽不是使⽤时所在的对象。this 相当于⼀个普通变量会向作⽤域链中查询结果，同时定义时所在对象也并不等于所在对象中的 this 值。 2、不可以使⽤ arguments 对象，该对象在函数体内不存在。如果要⽤，可以⽤ rest 参数代替。 3、不可以使⽤ yield 命令，因此箭头函数不能⽤作 Generator 函数。 4、不可以使⽤ new 命令，因为： 没有⾃⼰的 this，⽆法调⽤ call，apply。 没有 prototype 属性 ，⽽ new 命令在执⾏时需要将构造函数的 prototype 赋值给新的对象的 __proto__4、class与class继承 class: Class是⾯向对象的语法的⼀个实现。Class本质上类似⼀个模板，通过模板去构建⼀些东西。可以通过constructor去构建⼀些东西，构建的时候可以复制⼀些属性，⼀些⽅法。⽐如我们构建⼀个学⽣在这个模板，这个模板呢，可以传⼊名称、学号等属性， class继承: 当我们有很多个class,这些class有⼀些共⽤的属性的时候，就可以抽离出来。⽐如说我们刚才声明的class Student(),还可以声明⽼师，⽼师和学⽣有⼀些共同点，⽐如都是⼈，⼈都会吃饭，学⽣可以学习、打招呼，⽼师可以教课。 通过extends去做的 ⾥⾯通过super来执⾏⽗类的构造函数，也就是⽗类的构建过程。 扩展或重写的⽅法5、promise使⽤及实现 1.传⼊⼀个promise的数组，返回⼀个新的promise，当所有给定的promise都被处理并最终以数组的形式呈现其结果时，新的promise也就被resolve了 2.返回的顺序与传⼊promise的顺序⼀致，即使第⼀个promise需要很长的时间来resolve，但它仍然是结果数组中的第⼀个 Promise是⼀个构造函数 是⼀种异步解决⽅案 // promise接收⼀个函数作为参数 // 该函数⼜接收两个函数作为参数 // promise 有三个状态 pending表⽰进⾏中 // resolve 是将promsie从进⾏中转化为成功的状态的⽅法（fulfill ed） // reject 是将promsie从进⾏中的状态转化为失败的状态的⽅法（rejected） // promise从进⾏中转化为成功或者失败时就⽴即结束了6、async await async 函数返回⼀个 Promise 对象，当函数执⾏的时候，⼀旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执⾏函数体内后⾯的语句。 await后⾯的语句会⽴即执⾏，返回promise时，由于考虑到异步操作，且下⼀⾏语句需要知道结果才能执⾏，所以返回的promise会等后⾯的同步语句执⾏完之后放⼊微队列中7、generator函数8、Es6中新的数据类型symbol JavaScript基本数据类型有6种：Undefined、Null、Boolean、String、Number、Object。 ES6新增了⼀种数据类型：Symbol，表⽰独⼀⽆⼆的值，Symbol最⼤的⽤途是⽤来定义对象的唯⼀属性名。 Symbol不是⼀个构造函数，如果⽤new Symbol会报错（Symbol是⼀个原始类型的值，不是对象）。 Symbol值可以显式转为字符串，也可以转为布尔值，但是不能转为数值。⼀、状态码http状态码分类： 100-199 提⽰信息 – 表⽰请求正在处理 200-299 成功 – 表⽰请求正常处理完毕 300-399 重定向 – 要完成请求必须进⾏更进⼀步的处理 400-499 客户端错误 – 请求有语法错误或请求⽆法实现 500-599 服务器端错误 – 服务器处理请求出错常见的状态码有哪些？ 200：请求成功，浏览器会把响应体内容（通常是html）显⽰在浏览器中； 404：(客户端问题)请求的资源没有找到
400: 语义有误，当前请求⽆法被服务器理解。 401: 当前请求需要⽤户验证
403: 服务器已经理解请求，但是拒绝执⾏它。 500：(服务端问题)请求资源找到了，但服务器内部发⽣了不可预期的错误； 301/302/303：(⽹站搬家了，跳转)重定向⼆、当url输⼊到页⾯发⽣了什么**⼤致过程是：** 浏览器的地址栏输⼊URL并按下回车， 查找当前的URL是否存在缓存，并⽐较缓存是否过期， DNS解析URL对应的IP， 根据IP建⽴TCP连接（三次握⼿）， HTTP发起请求，服务器处理请求，浏览器接收HTTP响应， 渲染页⾯，构建DOM树， 关闭TCP连接（四次挥⼿）。三、跨域什么是跨域 跨域指浏览器不允许当前页⾯的所在的源去请求另⼀个源的数据。源指协议，端⼝，域名。只要这个3个中有⼀个不同就是跨域JSONP 浏览器的script、img、iframe标签是不受同源策略限制的 ，所以通过script标签引⼊⼀个js⽂件，这个js⽂件载⼊成功后会执⾏我们在url参数中指定的callback函数，并把把我们需要的json数据作为参数传⼊。在服务器端，当参数中带有callback属性时，则把数据作为callback的参数执⾏，并拼接成⼀个字符串后返回。
- 优点：兼容性好，在很古⽼的浏览器中也可以⽤，简单易⽤，⽀持浏览器与服务器双向通信。
- 缺点：只⽀持GET请求，且只⽀持跨域HTTP请求这种情况（不⽀持HTTPS）在vue 中主要是通过vue 脚⼿架中的 ⽂件来配置的，通过在devServer中的proxy来配置跨域的前缀四、Git 新增⽂件的命令：git add file或者git add . 提交⽂件的命令：git commit –m或者git commit –a 查看⼯作区状况：git status –s 拉取合并远程分⽀的操作：git fetch/git merge或者git pull 查看提交记录命令：git reflog master分⽀：最为稳定功能⽐较完整的随时可发布的代码，即代码开发完成，经过测试，没有明显的bug，才能合并到 master 中。请注意永远不要在 master
分⽀上直接开发和提交代码，以确保 master 上的代码⼀直可⽤； develop分⽀；⽤作平时开发的主分⽀，并⼀直存在，永远是功能最新最全的分⽀，包含所有要发布 到下⼀个 release 的代码，主要⽤于合并其他分⽀，⽐如 feature 分⽀； 如果修改代码，新建 feature 分⽀修改完再合并到 develop 分⽀。所有的 feature、release 分⽀都是从 develop 分⽀上拉的。 feature分⽀；这个分⽀主要是⽤来开发新的功能，⼀旦开发完成，通过测试没问题（这个测试，测试新功能没问题），我们合并回develop 分⽀进⼊下⼀个 release release分⽀；⽤于发布准备的专门分⽀。当开发进⾏到⼀定程度，或者说快到了既定的发布⽇，可以发布时，建⽴⼀个 release 分⽀并指定版本号(可以在 finish 的时候添加)。开发⼈员可以对 release 分⽀上的代码进⾏集中测试和修改bug。（这个测试，测试新功能与已有的功能是否有冲突，兼容性）全部完成经过测试没有问题后，将 release 分⽀上的代码合并到 master 分⽀和 develop 分⽀ hotfix分⽀；⽤于修复线上代码的bug。**从 master 分⽀上拉。**完成 hotfix 后，打上 tag 我们合并回 master 和 develop 分⽀。GitFlow主要⼯作流程五、http和https的区别 1、https协议需要到ca申请证书，⼀般免费证书较少，因⽽需要⼀定费⽤。 2、http是超⽂本传输协议，信息是明⽂传输，https则是具有安全性的ssl加密传输协议。 3、http和https使⽤的是完全不同的连接⽅式，⽤的端⼝也不⼀样，前者是80，后者是443。 4、http的连接很简单，是⽆状态的；HTTPS协议是由SSL+HTTP协议构建的可进⾏加密传输、⾝份认证的⽹络协议，⽐http协议安全。六、三次握⼿和四次挥⼿三次握⼿: 1）发送端⾸先发送⼀个带有SYN（synchronize）标志地数据包给接收⽅。 2）接收⽅接收后，回传⼀个带有SYN/ACK标志的数据包传递确认信息，表⽰我收到了。 3）最后，发送⽅再回传⼀个带有ACK标志的数据包，代表我知道了，表⽰’握⼿‘结束。 通俗的说法-上⾯三条的意思 client(服务器)----Server(客户端) 1）Client：嘿，李四，是我，听到了吗？ 2）Server：我听到了，你能听到我的吗? 3）Client：好的，我们互相都能听到对⽅的话，我们的通信可以开始了。四次挥⼿: 1）第⼀次挥⼿：Client发送⼀个FIN，⽤来关闭Client到Server的数据传送，Client进⼊FIN_WAIT_1状态。 2）第⼆次挥⼿：Server收到FIN后，发送⼀个ACK给Client，确认序号为收到序号+1（与SYN相同，⼀个FIN占⽤⼀个序号），Server进⼊CLOSE_WAIT状态。 3）第三次挥⼿：Server发送⼀个FIN，⽤来关闭Server到Client的数据传送，Server进⼊LAST_ACK状态。 4）第四次挥⼿：Client收到FIN后，Client进⼊TIME_WAIT状态，接着发送⼀个ACK给Server，确认序号为收到序号+1，Server进⼊CLOSED状态，完成四次挥⼿ 通俗的说法-上⾯四条的意思 client(服务器)----Server(客户端) 1）Client：我所有东西都说完了 2）Server：我已经全部听到了，但是等等我，我还没说完 3）Server：好了，我已经说完了 4）Client：好的，那我们的通信结束l七、使⽤基于token的登录流程 1、客户端使⽤⽤户名跟密码请求登录 2、服务端收到请求，去验证⽤户名与密码 3、验证成功后，服务端会签发⼀个 Token，再把这个 Token 发送给客户端 4、客户端收到 Token 以后可以把它存储起来，⽐如放在 Cookie ⾥或者 Local Storage ⾥ 5、客户端每次向服务端请求资源的时候需要带着服务端签发的 Token 6、服务端收到请求，然后去验证客户端请求⾥⾯带着的 Token，如果验证成功，就向客户端返回请求的数据⼋、Get和postGET请求只能进⾏url编码，⽽POST⽀持多种编码⽅式。GET请求会被浏览器主动cache，⽽POST不会，除⾮⼿动设置。GET产⽣的URL地址可以被Bookmark，⽽POST不可以。GET在浏览器回退时是⽆害的，⽽POST会再次提交请求。**Get****和post****的选择：** 1.私密性的信息请求使⽤post（如注册、登陆）。 2.查询信息使⽤get。九、web安全及防护(1)XSS攻击指的是攻击者往Web页⾯⾥插⼊恶意 html标签或者javascript代码 ⽤来窃取cookie中的⽤户信息 解决：对⼀些输⼊的字符进⾏过滤，尽量采⽤post表单提交的⽅式(2)CSRF攻击 是⼀种挟制⽤户在当前已登录的Web应⽤程序上执⾏⾮本意的操作的攻击⽅法 解决：通过验证码的⽅式解决(3)SQL注⼊攻击 就是通过吧SQL命令插⼊到Web表单递交或输⼊域名，最终达到欺骗服务器执⾏恶意的SQL命令。 解决：表单输⼊时通过正则表达式将⼀些特殊字符进⾏转换⼗、html和XMLHTML：超⽂本标记语⾔XML：可扩展标记语⾔1、语法上 HTML：语法要求不是很严格，例如：不严格区分⼤⼩写，可⾃动过滤空格，可以不适⽤引号等。 XML：与之相反。2、标记不同 html使⽤固有的标记；⽽xml没有固有的标记。 Html标签是预定义的；XML标签是免费的、⾃定义的、可扩展的。3、作⽤不同 html是⽤来显⽰数据的；xml是⽤来描述数据、存放数据的，所以可以作为持久化的介质。Html将数据和显⽰结合在⼀起，在页⾯中把这数据显⽰出来；xml则将数据和显⽰分开。 XML被设计⽤来描述数据，其焦点是数据的内容。HTML被设计⽤来显⽰数据，其焦点是数据的外观。Vue相关⼀、 vue双向数据绑定 VUE实现双向数据绑定的原理就是利⽤了 Property() 这个⽅法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
⼆、 vue虚拟dom，diff算法 虚拟dom1、**想要理解虚拟****dom****⾸先要知道什么是虚拟****dom****？** 虚拟dom可以简单的⽤⼀句话概括，就是⽤普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。2、为什么要⽤虚拟DOM来描述真实的DOM呢？ 创建真实DOM成本⽐较⾼，如果⽤ js对象来描述⼀个dom节点，成本⽐较低，另外我们在频繁操作dom是⼀种⽐较⼤的开销。所以建议⽤虚拟dom来描述真实dom。 diff算法 diff算法就是进⾏虚拟节点对⽐，并返回⼀个patch对象，⽤来存储两个节点不同的地⽅，最后⽤patch记录的消息去局部更新Dom。三、 组件通讯1.****⽗传⼦：** 在⽗组件的⼦组件标签上绑定⼀个属性，挂载要传输的变量。在⼦组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使⽤ props:["属性名"] props:{属性名:数据类型}2.****⼦传⽗：** 在⽗组件的⼦组件标签上通过绑定⾃定义事件，接受⼦组件传递过来的事件。⼦组件通过$emit触发⽗组件上的⾃定义事件，发送参数.3.****兄弟组件传值：** 通过初始化⼀个全局的$bus,在发送事件的⼀⽅通过$bus.$emit(“事件名”，传递的参数信息)发送，在接收事件的⼀⽅通过$bus.$on("事件名",参数)接收传递的事件四、 Vuexvuex ：是⼀个专为开发的状态管理器，采⽤集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也⽅便我们管理以及维护 场景：多个组件共享数据或者是跨组件传递数据时有五种,分别是State , Getter , Mutation , Action , Modules1. state：vuex的基本数据，⽤来存储变量2. getters：从基本数据(state)派⽣的数据，相当于state的计算属性3. mutation：提交更新数据的⽅法，必须是同步的(如果需要异步使⽤action)。每个mutation 都有⼀个字符串的 事件类型 (type) 和 ⼀个 回调函数 (handler)。回调函数就是我们实际进⾏状态更改的地⽅，并且它会接受 state 作为第⼀个参数，提交载荷作为第⼆个参数。4. action：和mutation的功能⼤致相同，不同之处在于 ==》1. Action 提交的是 mutation，⽽不是直接变更状态。 2. Action 可以包含任意异步操作。5. modules：模块化vuex，可以让每⼀个模块拥有⾃⼰的state、mutation、action、getters,使得结构⾮常清晰，⽅便管理。6.⾼级⽤法-辅助函数（语法糖） 1. 有那⼏个辅助函数(4⼤⾦刚) mapState,mapActions,mapMutations,mapGetters 2. 辅助函数可以把vuex中的数据和⽅法映射到vue组件中。达到简化操作的⽬的 3. 如何使⽤： Import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'五、 ⾃定义指令，⾃定义过滤器⾃定义指令： vue中提供了丰富的内置指令，如v-if,v-bind,v-on…,除此之外我们还可以通过全局的⾃定义指令ive({})或者局部的⾃定义指令directives:{}来定义指令全局指令： 在中使⽤ive()函数⾃定义⼀个v-focus全局指令 在其它组件中引⼊v-focus指令后，表单会⾃动获取焦点局部指令： 局部指令定义使⽤directives，我们在某个组件中export default {}中，定义⼀个设置颜⾊的指令v-color钩⼦函数： ⾃定义指令的⽣命周期，有5个事件钩⼦,可以设置指令在某⼀个事件发⽣时的具体⾏为： 1、bind(el,binding): 只调⽤⼀次，指令第⼀次绑定到元素时调⽤，⽤这个钩⼦函数可以定义⼀个在绑定时执⾏⼀次的初始化动作。 ed: 被绑定元素插⼊⽗节点时调⽤（⽗节点存在即可调⽤，不必存在于 document 中）。 3、update: 被绑定元素所在的模板更新时调⽤，⽽不论绑定值是否变化。通过⽐较更新前后的绑定值，可以忽略不必要的模板更新。 4、componentUpdated: 被绑定元素所在模板完成⼀次更新周期时调⽤。 5、unbind: 只调⽤⼀次， 指令与元素解绑时调⽤。⾃定义过滤器： 过滤器通常⽤来对即将显⽰的数据进⾏进⼀步处理，如格式化时间戳，内容加《》…，在模板中使⽤通过“管道符（ | ）”⽅式引⽤全局过滤器： 在中使⽤()函数⾃动定义⼀个capital全局指令，将字母全部转为⼤写 定义⼀个组件，然后引⼊capital过滤器，将msg的值hello格式化为HELLO局部过滤器： 使⽤filters:{}，与methods,data同级六、 vue-router(路由原理？路由守卫？传参)1、路由原理 通过改变 URL，在不重新请求页⾯的情况下，更新页⾯视图。路由原理分为两种模式: hash模式：在浏览器中符号的“#”，以及#后⾯的字符称之为hash，⽤ history模式：history采⽤HTML5的新特性；且提供了两个新⽅法：pushState（），路由守卫: 全局守卫: Each((to,from,next)=>{}) 进⼊之前触发 ach((to,from)=>{}) 进⼊之后触发（后置钩⼦函数，不需要next） 组件守卫: beforeRouteEnter((to,from,next)=>0{}) 进⼊路由前调⽤ beforeRouteUpdate((to,from,next)=>{}) 该组件被复⽤时调⽤ beforeRouteLeave((to,from,next)=>{})导航离开该组件的对应路由时调⽤ 单个守卫: beforeEnter((to,from,next)=>{})传参: 分为三种：
分别是query，params，动态路由传参
接收：
通过query⽅式传递过来的参数⼀般是通过this.$接收
通过params⽅式传递过来的参数⼀般是通过this.$接收
通过动态路由传参⽅式传递过来的参数⼀般是通过this.$接收七、 声明周期(那⼏个？每⼀个⽣命周期的特点,可以做什么)⽣命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段，挂载阶段，更新阶段，销毁阶段分别有： 创建前：beforeCreate() 只有⼀些实例本⾝的事件和⽣命周期函数 创建后：Created() 是最早使⽤data和methods中数据的钩⼦函数 挂载前：beforeMount() 指令已经解析完毕，内存中已经⽣成dom树 挂载后：Mounted() dom渲染完毕页⾯和内存的数据已经同步 更新前：beforeUptate() 当data的数据发⽣改变会执⾏这个钩⼦，内存中的数据是新的，页⾯是旧的 更新后：Updated() 内存和页⾯都是新的 销毁前：beforeDestroy() 即将销毁data和methods中的数据此时还是可以使⽤的，可以做⼀些释放内存的操作 销毁后：Destroyed() 已经销毁完毕⼋、 ⾃定义组件在vue中开发，都是⽤的组件化的思想开发的，⼀般在都会在搭建项⽬的时候，都会先建⽴组件的模板，把架⼦搭起来。也就是在组件中定义好``视图层，`
