挑战前端知识点HTTP/ECMAScript

哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗像四处流荡的心定下来，一直走下去，加油，2021加油！欢迎关注加我vx:xiaoda0423，欢迎点赞、收藏和评论

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

前言

希望可以通过这篇文章，能够给你得到帮助。(感谢一键三连)，接收好挑战了吗？

关于HTTP模块

1.说说你对HTTP和HTTPS的理解，并说一下它们的端口号是什么

好的，HTTP是超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议，所有的www文件都必须遵守这个标准，设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。

HTTP是一种广泛使用的网络传输协议，是客户端浏览器或其他程序与web服务器之间的应用层通信协议或者标准tcp，用于从www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

那么HTTPS，它是一种通过计算机网络进行完全通信的传输协议，经过HTTP进行通信，利用SSL/TLS建立通信，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。

https是http的加密版，是以安全为目标的http，在http中加入ssl,安全基础是ssl。

TLS是传输层加密协议，前身是SSL协议。

HTTP通常承载于TCP之上，在HTTTP和TCP之间添加一个安全协议层（SSL或TSL），就是我们常说的HTTPS。

HTTP特点：

支持客户端或服务器模式，C/S模式；

简单快速，客户端向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET,HEAD,POST，每种方法规定了客户与服务器联系的类型不同，由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快；

比较灵活，HTTP允许传输任意类型的数据对象，正在传输的类型由Content-Type加以标记；

无连接，表示限制每次连接只处理一个请求，服务器处理完客户端的请求，并收到客户端的应答后，就断开连接，采用这种方式可以节省传输时间；

无状态，HTTP协议是无状态的协议，无状态表示协议对于事务处理是没有记忆能力的，缺少状态意味着如果后续处理需要前面的信息，则它就必须重传，这样可能导致每次连接传送的数据量不断增加，另一方面，在服务器不需要先前信息时它的应答就比较快。

HTTPS特点

它是采用混合加密技术，中间者是无法看到明文内容，对内容加密过；

又对身份进行验证，通过证书认证客户端访问的是自己的服务器；

可以防止传输的内容被中间人冒充或者篡改，保户了数据的完整性。

HTTP的URL是以http://开头，对于HTTPS的URL是以https://开头；HTTP是不安全的，而HTTPS是安全的；HTTP无法加密，而HTTPS对传输的数据进行加密；HTTP无需证书，而HTTPS需要CA机构的颁发的SSL证书。

它们的端口号分别是：

HTTP默认的端口号为80，HTTPS默认的端口号为443

那么HTTPS更加安全的因为是：在网络请求中，需要很多服务器，路由器的转发。其中的节点都可能篡改信息，而如果使用HTTPS，密钥在终点站才有。HTTPS之所以比HTTP安全，是因为它利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等技术，保障了传输过程的安全性。

https，全称Hyper Text Transfer Protocol Secure，相比http，多一个secure，这一个secure是由TLS（ssl）提供的。https和http都属于application layer，基于tcp以及udp协议，但是又完全不一样。

http是客户端和服务器端之间数据传输的格式规范，表示“超文本传输协议”

小结

1. 无状态协议对于事务没有记忆能力，缺少状态表示如果后续需要处理，需要前面提供的信息
2. 克服无状态协议缺陷的办法是通过cookie和会话保存信息

2.http/2你了解多少

HTTP/2引入了“服务器端推送”的概念，它允许服务器端在客户端需要数据之前主动将数据发送到客户端缓存中，从而提高性能。

HTTP/2提供更多的加密支持。使用多路技术，允许多个消息再一个连接上同时交差。增加了头压缩，因此请求非常小，请求和响应的header都只会用很小的带宽比例。

http/2协议是基于https的，所以http/2的安全性也是有保障的。

头部压缩：http/2会压缩头，如果你同时发出多个请求，他们的头是一样的或是相似的，那么，协议会帮你消除重复的部分。

对于http/2不再使用像http/1.1里的纯文本形式的报文，而是采用了二进制格式。头信息和数据体都是二进制，统称为帧，头信息帧和数据帧。

数据流：http/2的数据包不是按顺序发送的，同一个连接里面连续的数据包，可能属于不同的回应，必须要对数据包做标记，指出它属于哪个回应。每个请求或回应的所有数据包，称为一个数据流。

多路复用：http/2是可以在一个连接中并发多个请求或回应，而不用按照顺序一一对应，解决了http/1.1中的串行请求，不需要排队等待，也就不会出现队头阻塞问题，降低了延迟，大幅度提高了连接的利用率。

服务器推送，http/2改善了传送的请求-应答工作模式，服务端不再是被动响应，也可以自动向客户端发送信息了。

http2问题出现在，多个http请求在复用一个tcp连接，下层的tcp协议是不知道有多少个http请求的，一旦发生丢包现象，会触发tcp的重传机制，这样一个tcp连接中的所有的http请求都必须等待这个丢了的包被重传回来。

第一，http/1.1中的管道传输中如果有一个请求阻塞了，那么队列后请求也统统被阻塞了。第二，http/2多请求复用一个tcp连接，一旦发生丢包，就会阻塞所有的http请求。

3.说说http常见的状态码

五大类的http状态码：

1xx: 提示信息，表示目前是协议处理的中间状态，后续还有操作

2xx: 成功，报文已经收到并被正确处理，200， 204， 206

3xx: 重定向，资源位置发生变动，需要客户端重新发送请求

4xx: 客户端错误，请求报文有误，服务器无法处理

5xx：服务器错误，服务器在处理请求时内部发生了错误

1. 100 Continue 表示继续，一般在发送post请求时，已经发送了http header之后，服务器端将返回此信息，表示确认，之后发送具体参数信息。
2. 200 ok 表示正常返回信息。
3. 201 Created 表示请求成功并且服务器创建了新的资源
4. 202 Accepted 表示服务器已经接受请求，但尚未处理
5. 301 Moved Permanently 表示请求的网页已永久移动到新位置
6. 302 Found 表示临时性重定向
7. 303 See Other 表示临时性重定向，且总是使用GET请求新的URI
8. 304 Not Modified 表示自从上次请求后，请求的网页伪修改过
9. 400 Bad Request 表示服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发送请求。
10. 401 Unauthorized 表示请求未授权
11. 403 Forbidden 表示禁止访问
12. 404 Not Found 表示找不到如何与uri 相匹配的资源
13. 500 Internal Server Error 表示最常见的服务器端错误
14. 503 Service Unavailable 表示服务器端暂时无法处理请求

4.说说http事务流程

第一步，域名的解析；第二步，发起tcp的三次握手；第三步，建立tcp连接后发起HTTP请求；第四步，服务器端响应HTTP请求，浏览器得到HTML代码；第五步，浏览器解析HTML代码，并请求HTML代码中的资源；第六步，浏览器对页面进行渲染并呈现给用户。

5.手写简单的HTTP服务器

var http = require('http');

http.createServer(function(req, res){
 res.writeHead(200, {'Content-Type': 'text/html'});
 res.write('<meta charset="UTF-8"><h1>dadaqianduan</h1>');
 res.end();
}).listen(3000);

6.说说http的请求报文和响应报文包含哪些部分

请求报文包含三部分：

1.请求行，包含请求方法，URI，HTTP版本信息

2.请求首部字段

3.请求内容实体

请求报文包含三部分：

1.状态行，包含HTTP版本，状态码，状态码的原因短语

1. 响应首部字段
2. 响应内容实体

7. 什么是反向代理

反向代理，Reverse Proxy，是指通过代理服务器来接收互联网上的连接请求，然后将请求转发给内部网络上的服务器，并把从服务器上得到的结果返回给互联网上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

8.HTTP中有哪些请求方式

GET，请求访问已经被uri，统一资源标识符识别的资源，可以通过url，给服务器传递参数数据

POST，传输信息给服务器，主要功能与GET方法类似，但传递的数据量通常不受限制。

PUT，传输文件，报文主体中包含文件内容，保存到对应的URI位置。

HEAD，获得报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URI是否有效。

DELETE，删除文件，与PUT方法相反，产生对应URI位置的文件

OPTIONS，查询相应URI支持的HTTP方法

9.HTTP协议中1.0版本规范与1.1版本规范的区别

在http1.0中，当建立连接后，客户端发送一个请求，服务器端返回一个信息后就关闭连接，当浏览器下次请求的时候又要建立连接，这种不断建立连接的方法会造成很多问题。

在http1.1中，引入了连续连接的概念，通过这种连接，浏览器可以在建立一个连接之后，发送请求并得到返回信息，然后继续发送请求再次等到返回信息。客户端可以连续发送多个请求，而不用等待每一个响应的到来。

10.HTTP的首部字段包括哪些类型

通用首部字段，请求报文和响应报文都会使用的首部字段

1. Date，创建报文的时间
2. Connection，连接的管理
3. Cache-Control，缓存的控制
4. Transfer-Encoding，报文主体的传输编码方式

请求首部字段，请求报文会使用的首部字段

1. Host，请求资源所在服务器
2. Accept，可处理的媒体类型
3. Accept-Charset，可接受的字符集
4. Accept-Encoding，可接受的内容编码
5. Accept-Language：可接受的自然语言

响应首部字段，响应报文会使用的首部字段

1. Accept-Ranges，可接受的字节范围
2. Location，令客户端重新定向到URI
3. Server，HTTP服务器的安装信息

实体首部字段，请求报文与响应报文的实体部分使用的首部字段

1. Allow，资源可支持的http方法
2. Content-Type，实体主体的类型
3. Content-Encoding，实体主体使用的编码方式
4. Content-Language，实体主体的自然语言
5. Content-Length，实体主体的字节数
6. Content-Range，实体主体的位置范围，一般用于发出部分请求时使用

11.与https相比，http有什么缺点

http的缺点是：通信使用明文，不加密，内容可能被窃听，也就是被抓包分析；不验证通信方身份，可能遭到伪装；无法验证报文完整性，可能性篡改。

https就是http+加密处理+认证+完整性保护

12.如何优化HTTP请求

利用负载均衡优化和加速HTTP应用请求，利用HTTP缓存来优化网站请求

13.HTTP协议有哪些特征

支持客户端或服务器模式，简单快捷，灵活，无连接，无状态。

14.HTTP1.1版本的新特性

默认持久连接，节省通信量，只要客户端或服务端中任意一端没有明确指出断开TCP连接，就一直保持连接，可以多次发送HTTP请求。

管线化，客户端可以同时发出多个HTTP请求，而不用一个个等待响应。

断点续传原理。

15.tcp传输的三次握手，四次挥手

三次握手，用tcp把数据包发送出去后，tcp不会对传送后的数据置之不理，它一定会向对方确认是否成功送达。握手过程中使用了tcp的标志，既是 SYN 和 ACK

发送端首先给接收端发送一个带SYN标志的数据包。接收端收到后，回传一个带有SYN/ACK标志的数据包以表示正确传达，并确认信息。最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。若在握手过程中的某个阶段莫名中断，TCP会再次以相同的顺序发送相同的数据包。

断开一个TCP连接则需要“四次握手”

第一次握手：主动关闭方发送一个 FIN，用来关闭主动关闭方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方，主动关闭方已经不会再给被动关闭方发送数据了，但是，此时主动关闭方还可以接收数据。

第二次握手：被动关闭方收到FIN包后，给对方发送一个ACK，确认序号为收到序号+1，与SYN相同，一个FIN占用一个序号。

第三次握手：被动关闭方收到FIN包后，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，被动关闭方的数据也发送完了，不会再给主动关闭方发送数据了。

第四次握手：主动关闭方收到FIN后，给被动关闭方发送一个ACK，确认序号为收到序号+1。

16.说说tcp和udp的区别

tcp传输控制协议，是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个tcp连接必须要经过三次对话才能建立起来。

udp用户数据报协议，是与tcp相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去。udp适用于一次只传送少量数据，对可靠性要求不高的应用环境。

17.一个页面从输入url到页面加载显示完成的过程发送什么

当发送一个url请求时，这个url是web页面的url还是web页面上每个资源的url,浏览器都会开启一个线程来处理这个请求，同时在远程dns服务器上启动一个dns查询，这能使浏览器获得请求对应的Ip地址。

浏览器与远程web服务器通过tcp三次握手协商来建立一个tcp/ip连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这个3个报文在浏览器和服务器之间传递，该握手首先由客户端尝试建立起通信，然后服务器应答并接受客户端的请求，最后由客户端发出已经接受该请求的报文。

一旦tcp/ip连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求，远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态码表示一个正确的响应。

web服务器提供资源服务，客户端开始下载资源，请求返回后，便进入了浏览器模块，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS规则树，而javascript又可以根据DOM API操作DOM。

18.网络分层模型有哪个七层

1. 应用层：允许访问OSI环境的手段
2. 表示层：对数据进行翻译，加密和压缩
3. 会话层：建立，管理和终止会话
4. 传输层：提供端到端的可靠报文传递和错误恢复
5. 网络层：负责数据包从源到宿的传递和网际互联
6. 数据链路层：将比特组装成帧并实现点到点的传递
7. 物理层：通过媒介传输比特，确定机械以及电气规范

19.说说304缓存的原理

服务器首先为请求生成ETag，服务器可在稍后的请求中，使用它来判断页面是否已经修改，本质上，客户端通过将该记号传回服务器要求服务器验证其客户端是否缓存。

304是HTTP状态码，服务器用它来标识这个文件没有修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件。

客户端请求页面A，服务器返回页面A，并给A加上一个ETag，客户端展现该页面，并将页面连同ETag一起缓存，客户端再次请求页面A，并将上次请求时服务器返回的ETag一起传递给服务器。服务器检查该ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。

es模块

20.总结严格模式的限制

1. 变量必须声明后再使用
2. 函数的参数不能有同名参数，否则报错
3. 不能使用with语句
4. 不能对只读属性赋值，否则报错
5. 不能使用八进制数，否则报错
6. 不能使用特殊字符
7. 不能使用delete删除变量，方法等，只能用delete删除对象的属性
8. eval不会在它的外层作用域引入变量
9. eval和arguments不能被重新赋值
10. arguments不会自动反映函数参数的变化
11. 不能使用arguments.callee
12. 不能使用arguments.caller
13. 禁止this指向全局对象
14. 不能使用fn.caller和fn.arguments获取函数调用的栈
15. 增加了保留字

21.说说es6

1. 新增了模板字符串${}
2. 箭头函数
3. for-of
4. 获取剩余参数语法代替arguments对象
5. 定义默认参数语法
6. es6将Promise对象纳入规范，提供了原生的Promise对象
7. 增加了let关键字以定义块作用域的变量
8. 增加了const以定义常量
9. 增加了Symbol数据类型
10. 引入module模块的概念

22.Promise有哪些特点

es6原生提供了Promise对象，它是用来处理异步操作的。

Promise对象特点：

对象的状态不受外界影响，Promise对象有三个状态：Pending，进行中，Resolved，已完成，Rejected，已失败，只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

一旦状态改变，就不会再改变，任何时候都可以得到这个结果。Promise对象的改变，只有两种可能，从Pending变为Resolved和从Pending变为Rejected。只有这两种情况，状态就固定了，会一直保持这个结果，不会再变了。

即使对Promise对象添加回调函数，也会立即得到这个结果，这与事件完全不同，事件的特点是，如果你错过了它，再去监听，也无法得到结果。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套到的回调函数，此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

缺点：无法取消Promise，一旦新建，它就会立即执行，无法中途取消，如果不设置回调函数，Promise内部抛出的错误不会反映到外部。

23.说说Promise的理解

三种状态：

Pending指初始状态，非Fulfilled或Rejected状态

Resolved指成功的操作

Rejected是指失败的操作

let p = new Promise(resolve, reject) => {
 if(condition) {
  resolve(result)
 }else{
  reject(result)
 }
}
});

promise.then(onResolved,onRejected)

24.es6实现数组去重

// es5
var varr [1,2,3,4,3,4,5,5,3]
function removeDa(arr){
 var obj = {};
 arr.forEach(function(item,index){
  obj[item] = true
 })
 return Object.keys(obj);
}
// es6
let removeDa = arr => [...{new Set([...arr]))];

25.es6使用进行两个数的交换

let a = 1, b = 2;
[a,b] = [b,a];
console.log(a); // 2
console.log(b); // 1

26.为啥使用es6

第一：符合未来趋势；第二：提高开发效率；第三：减少代码量，提高可读性等。

27.如何让开发环境下的浏览器支持es6

使用babel编译

28.es6中let关键字支持块级作用域吗

var arr = [];
for (var i = 0; i < 5; i++){
 arr[i] = function(){
  console.log(i);
 }
}
arr[3](); // 5

let arr = [];
for(let i = 0; i < 5; i++) {
 arr[i] = function() {
  console.log(i);
 }
}
arr[3](); // /5

let为JavaScript新增了块级作用域，用它声明的变量只在let关键字所在的代码块内有效。

29.代码示例

var obj = {
 // es5
 fn1: function() {
  console.log('fn1',this)
 },
 fn2:() => {
  console.log('fn3',this)
 }
}
obj.fn1(); // obj
obj.fn2(); // window

30.super是什么

它是一个关键字，用法为super(...)或者super.xx(...)

super的语法定义和this不同，this的定义是this这个关键字会被替换成一个引用，而super则是super(...)会被替换成一个调用。除了可以在constructor里被直接调用super外，还可以使用super.xx(...)来调用父类上的某个原型方法，这同样是一种限定语法。

31.代码示例

(function(x,f=()=>x){
 var x:
 var y = x;
 x = 2;
 return [x,y,fn()];
})(1)

[2,1,1]

32.代码示例

(function(){
 console.log([
 (()=>this.x).bind({x:'inner'})(),
 (()=>this.x)()
 })
}).call({x:'outer'});
// ['outer','outer']

33.代码示例

(function(){
 let a = this?class b{} : class c{};
 console.log(typeof a, typeof b, typeof c)
})()
// function undefined undefined

34.代码示例

(typeof (new (class { class () {} })))
// object

var Test = class{
 class(){}
};
var test = new Test();
typeof test;

35.代码示例

(function(){
if(false){
let f={g()=>1};
}
return typeof f;
})()
// error

36.什么是DOM模板

dom模板是原先就写在页面上的并且能被浏览器识别的html结果，在加载的时候，就会被浏览器渲染。所以要遵循HTML结构和标签命名，不然无法被浏览器解析，也就无法获取内容了，然后用JavaScript获取DOM节点的内容，就形成了DOM模板。

37.什么是字符串模板

字符串模板可能原先放在服务器上的script标签里，作为JavaScript字符串，并且不参与页面渲染，所以它可能不在乎HTML结构和标签命名，只要最后根据模板生成对应的结构并且命名符合HTML规范。

38.请说出扩展运算符与剩余操作符之间的区别

在某种程度上，剩余操作符和扩展运算符相反。扩展运算符会使数组“展开”成多个元素，剩余操作符会收集多个元素并“压缩”成一个单一的元素。

39.var,let,const声明变量的区别

var声明的变量不支持块作用域，支持声明前置，可以重复定义，并且值可以改动。

let声明的变量支持块作用域，不支持声明前置，不能重复定义，并且值可以修改。

const定义常量，声明的常量支持作用域，不支持声明前置，不能重复定义，值无法修改，值通常是值类型的，不能用来定义循环变量。

40.解构分类

对象解构；数组解构；混合解构；参数解构。

41.es6的extends支持多重继承吗

es6不支持多重继承，但是可以通过混合等技术来模拟，一旦使用多重继承，则按声明先后顺序覆盖同名属性方法。

42.剩余参数和arguments对象的区别

剩余参数只包含那些没有对应形参的实参，而arguments对象包含了传给函数的所有实参。

arguments对象不是一个真实的数组，而剩余参数是真实的Array实例，能够在它上面直接使用所有的数组方法。

arguments对象还有一些附加的属性。

如果想在arguments对象上使用数组方法，首先要将它转换为真实的数组。

43.for..of有点是啥

有着同for...in的简洁语法，但是没有for...in的缺点

不同于forEach方法，可以与break,continue,return配合使用

提供了遍历所有数据结构的统一操作接口

44.为什么修饰器不能用于函数

修饰器只能用于类和类的方法，不能用于函数，因为存在函数提升

45.Iterator接口的目的是啥

为所有数据结构提供了一种统一的访问机制，for..of循环

当使用for...of循环遍历某种数据结构时，该循环会自动寻找Iterator接口.

46.使用外部的模块脚本需要注意哪几点

代码在模块作用域中进行，而不是在全局作用域中运行，模块内部的顶层变量，在外部不可见。

无论有没有声明use strict，模块脚本都自动采用严格模式

在模块中，可以使用import命令加载其他模块，也可以使用export命令输出对外接口

在模块中，顶层的this关键字返回undefined，而不是指向window，也就是说在模块顶层使用this，是无意义的。

同一个模块如果加载多次，将只执行一次。

47.Iterator的作用和遍历过程

第一，为各种数据结构提供一个统一的，简便的访问接口

第二，使得数据结构的成员能够按某种次序排序

第三，ES6创造了一种新的遍历命令for...of循环，Iterator接口主要提供for...of使用

过程：

创建一个指针对象，指向当前数据结构的起始位置，也就是说，遍历器对象本质上就是一个指针对象。

第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员

第二次调用指针对象的next方法，指针指向数据结构的第二个成员

不断调用指针对象的next方法，直到它指向数组结构的结束位置。每一次调用next方法，都会返回数据结构中当前成员的信息。

48.async函数有几种声明形式

函数声明

async function da(){}

表达式声明

var bar = async function () {}

通过对象声明

var obj = {
 async daFun(){}
}

通过箭头函数声明

var da = async() =>{}

49.async函数中，如何处理错误语句

try...catch

async function demo() {
 try{
  await doSomeThing();
 } catch(err){
  console.log(err)
 }
}

添加catch回调函数

async function demo() {
 await doSomeThing().cache(err=>console.log(err))
}

50.es6中，generator函数的throw方法如何使用

throw()会恢复generator的执行，且在执行点上抛出异常

throw()跟next()一样会返回{value,done}，只会抛出的异常得到处理了，generator函数体才会真正执行throw()。

点赞、收藏和评论

我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)

我们下期见！

文章持续更新，可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/#/ 已经收录

github收录，欢迎Star：https://github.com/webVueBlog/WebFamily