JS —— 4、递归、闭包、前后分离-数据交互、http、node

﹏ヽ暗。殇╰゛Y 2022-10-06 00:44 100阅读 0赞

**目录**

21、递归

（1）案例1：

（2）案例2：

22、闭包

（1）理解

1.如何从外部读取函数内部的局部变量？

2.闭包的概念

3.为什么需要闭包

（2）闭包案例

32、前后分离-数据交互

（1）数据接口规范流程

1.接口文档：

（2）http协议

1.理解

2.工作原理

3.HTTP请求方法

4.HTTP状态码

5.浏览器调试工具

24、HTTP

（1）三次握手

（2）四次分手

（3）协议规范

1.请求行

2.请求头

3.请求体

25、服务启动

（1）什么是Node?

（2）开发框架

（3）启动node服务

（4）留言板案例：

方式一：

方式二：axios

方式三：闭包

（5）留言板——第五期写法

1.查询数据

2.添加数据

（6）跨域：

--------------------

# 21、递归 #

## （1）案例1： ##

![20210610113354543.png][]

递归方式：5+4+3+2+1

![20210610113400332.png][]

## （2）案例2： ##

var data = [
        {
          name:'IT互联网',
          child:[
            {name:'编辑语言',child:[{name:'java'},{name:'c#/.net'},{name:'python'},
            {name:'前端开发',child:[{name:'jq'},{name:'vue'},{name:'react'}]}]},
            {name:'移动开发',child:[{name:'android开发'},{name:'IOS开发'}]},
            {name:'游戏开发',child:[{name:'phaser游戏开发'},{name:'webGL游戏开发',child:[{name:'3D游戏'},{name:'2D游戏'}]}]}
          ]
        },
        {
          name:'设计创作',
          child:[{name:'平面设计',child:[{name:'电商美工'},{name:'综合平面设计'},{name:'摄影后期'}]},
                {name:'UI设计',child:[{name:'交互设计'},{name:'webUI设计'},{name:'游戏UI设计'}]},
                {name:'软件设计'}]
        },
        {
          name:'升学考研',
          child:[{name:'考研'},{name:'大学'},{name:'高中'},{name:'初中'}]
        },
        {
          name:'职企考证',
          child:[{name:'公务员',child:[{name:'教师考试'},{name:'建筑工程'}]}]
        }];

**方式一：**

**方式二：递归**

window.onload = function(){
        //递归
        function tree(data) {
            var str = "<ul>"
            for (var i = 0; i < data.length; i++) {
                str += "<li>" + data[i].name + "</li>"
                if (data[i].child) {
    //===================================== 换成 =========================================
                    str += tree(data[i].child)
    //===================================================================================
                }
            }
            str += "</ul>"
    //===================================== 添加 =========================================
            return str
    //===================================================================================
        }
        document.querySelector(".lists").innerHTML = tree(data)

//代码量减少，目录结构更清晰

![20210610113521777.png][]![20210610113523390.png][]

# 22、闭包 #

## （1）理解 ##

javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。

function f1(){
        var a=10;
        function f2(){
            alert(a);
        }
    }

### 1.如何从外部读取函数内部的局部变量？ ###

我们有时候需要获取到函数内部的局部变量，正常情况下，这是办不到的！

只有通过变通的方法才能实现。那就是在函数内部，再定义一个函数。

### 2.闭包的概念 ###

上面代码中的f2函数，就是闭包。

各种专业文献的闭包定义都非常抽象，我的理解是: 闭包就是能够读取其他函数内部变量的函数。

由于在javascript中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成“定义在一个函数内部的函数“。

所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

**获取局部变量：**

![20210610113741954.png][]//10

### 3.为什么需要闭包 ###

闭包可以用在许多地方。它的最大用处有两个，

一个是前面提到的可以读取函数内部的变量，

另一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。

**总结：**局部变量无法共享和长久的保存，而全局变量可能造成变量污染，当我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

**=========================** **闭包 =============================**

![20210610113810648.png][]![20210610113810703.png][]

**//****闭包（**长久的保存变量又不会造成全局污染**）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][]

**//****相当于把f1执行的结果赋给了一个全局变量f**

**//****导致f2始终在内存中没有回收，f2依赖于f1，所以f1不会在调用后回收**

**========================================================**

![20210610113826661.png][]

![20210610113826664.png][]//长久保存

![20210610113842392.png][]//从而使局部变量长久保存

![20210610113849980.png][]![20210610113851706.png][]

//**把f1执行的结果赋给了一个全局变量f**

**//****但是又没长久保存**

## （2）闭包案例 ##

**利用闭包原理封装对象缓存局部变量name的值:**

**方式一：**

![2021061011391794.png][]![20210610113918675.png][]

**方式二：**

![20210610113925771.png][]![2021061011392817.png][]

使用闭包，我们可以做很多事情，比如缓存局部变量，避免污染

**总结：**闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装私有变量，这是优点也是缺点，不必要的闭包只会徒增内存消耗！

# 32、前后分离-数据交互 #

## （1）数据接口规范流程 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][]

### 1.接口文档： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5][]

**===========================================================================================**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 8][]

**//****返回的类型result \[ \{字段\}，\{字段\} \]**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <button onclick="sendData()">发送</button>
        <div id="content"></div>
        <script>
            function sendData() {
                // var xmlhttp;
                // if(window.XMLHttpRequest) {
                //     xmlhttp = new XMLHttpRequest();  //创建对象
                // }else {
                //     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   //IE5/IE6 
                // };
                var xmlhttp = new XMLHttpRequest();	//浏览器接口
                xmlhttp.open("get", "http://localhost:3000/get");	
                //xmlhttp.send(body); //发送get请求，不用传参
                //xmlhttp.setRequestHeader("Content-Type","application/json");  //请求头
                xmlhttp.send()	//发送请求
                //onreadystatechange当前数据源的数据将要发生变化时（状态改变时）
                xmlhttp.onreadystatechange = function () {		//接收数据（初始化）
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //200是成功
                        console.log(xmlhttp.responseText) //responseText是数据返回的信息
                        //把拿到的数据展示
                        content.innerHTML = xmlhttp.responseText;
                    }
                }
            }
        </script>
    </body>
    
    </html>

## （2）http协议 ##

## 1.理解 ##

通常，由HTTP客户端发起一个请求，创建一个到服务器指定端口（默认是80端口）的TCP连接。HTTP 服务器则在那个端口监听客户端的请求。一旦收到请求，服务器会向客户端返回一个状态，比 如"HTTP/1.1 200 OK"，以及返回的内容，如请求的文件、错误消息、或者其它信息。

### 2.工作原理 ###

HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户 端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、 URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、 成功或者错误代码、服务器信息、响应头部和响应数据。

![20210610115217523.png][]

**基于 请求-响应 的模式**

HTTP协议规定,请求从客户端发出,最后服务器端响应,该请求并返回。换句话说,肯定是先从客户端开始建立通信的,服务器端在没有接收到请求之前不会发送响应

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 9][]

**无状态保存**

HTTP是一种不保存状态,即无状态(stateless)协议。HTTP协议自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个级别,协议对于发送过的请求或响应都不做持久化处理。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 10][]

### 3.HTTP请求方法 ###

HTTP协议中共定义了八种方法（也叫“动作”）来以不同方式操作指定的资源：

1.  GET

向指定的资源发出“显示”请求。使用GET方法应该只用在读取数据，而不应当被用于产生“副作用”的操作中，例如在Web Application中。其中一个原因是GET可能会被网络蜘蛛等随意访问。

1.  HEAD

与GET方法一样，都是向服务器发出指定资源的请求。只不过服务器将不传回资源的本文部分。它的好处在于，使用这个方法可以在不必传输全部内容的情况下，就可以获取其中“关于该资源的信息”（元信息或称元数据）。

1.  POST

向指定资源提交数据，请求服务器进行处理（例如提交表单或者上传文件）。数据被包含在请求本文中。这个请求可能会创建新的资源或修改现有资源，或二者皆有。

1.  PUT

向指定资源位置上传其最新内容。

1.  DELETE

请求服务器删除Request-URI所标识的资源。

1.  TRACE

回显服务器收到的请求，主要用于测试或诊断。

1.  OPTIONS

这个方法可使服务器传回该资源所支持的所有HTTP请求方法。用'\*'来代替资源名称，向Web服务器发送OPTIONS请求，可以测试服务器功能是否正常运作。

1.  CONNECT

HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。通常用于SSL加密服务器的链接（经由非加密的HTTP代理服务器）。

1.  get与post请求的区别

GET提交的数据会放在URL之后，也就是请求行里面，以?分割URL和传输数据，参数之间以&相 连，如EditBook?name=test1&id=123456； POST方法是把提交的数据放在HTTP包的请求体中。 因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变

GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限 制.

### 4.HTTP状态码 ###

所有HTTP响应的第一行都是状态行，依次是当前HTTP版本号，3位数字组成的状态代码，以及描述状态 的短语，彼此由空格分隔。

状态代码的第一个数字代表当前响应的类型：

![20210610115307709.png][]

**常见状态码：**

200 OK                                 //客户端请求成功

400 Bad Request                //客户端请求有语法错误，不能被服务器所理解

401 Unauthorized               //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用

403 Forbidden                    //服务器收到请求，但是拒绝提供服务

404 Not Found                   //请求资源不存在，eg：输入了错误的URL

500 Internal Server Error    //服务器发生不可预期的错误

503 Server Unavailable       //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

### 5.浏览器调试工具 ###

以chrome为例

![20210610115325356.png][]

1.  箭头按钮

用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom 元素时，箭头按钮会变成选择状态

1.  设备图标

可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例

1.  Elements

该面板显示了渲染完毕后的全部HTML源代码，用来查看、修改页面上的元素，包括DOM标签，以及css 样式，方便对静态网页进行调试。

1.  Console

该面板用来显示网页加载过程中的日志信息，包括打印，警告，错误及其他可显示的信息等，同时也是 一个js交互控制台。

1.  Sources

该面板以站点为分组，存放着请求下来的所有资源(html,css,jpg,gif,js等)。正是因为该面板存放了所有的 资源，因此在调试js时，目标代码都在此处寻找，方便断点调试

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 11][]

1.  Network

网络请求标签页：可看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是 否准确，请求头，请求参数的查看

![2021061011535819.png][]

查看Network基本信息：URL，响应状态码，响应数据类型，响应数据大小，响应时间

![20210610115402576.png][]

**请求文件的具体介绍：**

![20210610115406651.png][]

*  Header：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
 *  Preview：预览面板，用于资源的预览。
 *  Response：响应信息面板包含资源还未进行格式处理的内容
 *  Timing：资源请求的详细信息花费时间

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 12][]

1.  Performance (旧版浏览器为Timeline)

时间表可以记录和运行分析应用程序所有的活动，为了使的记录页面的交互，打开时间轴面板，然后按 开始录制录制按钮

1.  Memory (旧版为Profiles):

可以查看CPU执行时间与内存占用

1.  Application(旧版为Resources)

会列出所有的资源，以及HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除

1.  Security

可以告诉你这个网站的安全性，查看有效的证书等

1.  Audits

可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告

# 24、HTTP #

HTTP协议即超文本传送协议(Hypertext Transfer Protocol )，是Web联网的基础，也是手机联网常用的协议之一，HTTP协议是建立在TCP协议之上的一种应用( TCP是传输层，而http是应用层 )。

HTTP的交互流程简单来讲就是客户端与服务器端的通信，包括客户端对服务器端的请求以及服务器端对客户端的响应。

客户端与服务器端建立一个连接，三次握手经历完成之后才能建立一个稳定可靠的连接。

## （1）三次握手 ##

第一次握手：客户端给服务器端发送一个syn的标志位；服务器端接收到syn后会返回一个ack(相当于一 个回调的机制)，同时还有一个服务器端的syn；客户端接收服务器端发送的syn后会再次给服务器端发送 一个ack，这样才算完成三次握手。

## （2）四次分手 ##

**建立连接要3次，断开为什么要4次呢**

因为tcp是全双工的，每个方向要单独断开，每个方向2次，所以4次。

## （3）协议规范 ##

HTTP协议是一个规范。一定会限制请求的格式。

http协议的请求格式分为3个部分：请求行、请求头、请求体。

### 1.请求行 ###

包括三个属性。描述对应的请求的时候，最精确的形式就是K-V键值对的格式。

请求头中也是一堆的K-V数据。包含头信息中的一些附加信息(比如客户端允许接收的信息格式)。

### 2.请求头 ###

提供了关于请求,响应或者其他的发送实体的信息

1.  Content-Type

text/plain 纯文本

application/x-www-form-urlencoded 指定内容类型为键值对

application/octet-stream 二进制流数据

application/json json数据格式

multipart/form-data formdata表单数据格式

### 3.请求体 ###

当发送某一个请求的时候，请求后面可以加一些用户定义的参数(比如表单)。以K=V的形式发送给后台。

# 25、服务启动 #

## （1）什么是Node? ##

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时

## （2）开发框架 ##

*  express 快速、开放、极简的 Web 开发框架。
 *  koa 下一代 web 开发框架
 *  egg 为企业级框架和应用而生

## （3）启动node服务 ##

创建包文件： npm init 
    安装所有依赖：npm install
    安装依赖：cnpm i express 或者 npm install express –save 或者 npm i -S express body-parser
    启动： node xxx.js 
    停止： ctrl+c

## （4）留言板案例： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 13][]

**1****、查看留言信息：**

<table style="width:528px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#8db3e2;border-color:#000000;width:396pt;"> <p style="margin-left:0cm;"><strong><em>资源</em></strong><strong><em><span style="color:#000000;">URL</span></em></strong><strong><em><span style="color:#000000;">：</span></em></strong><em><span style="color:#000000;">http://localhost:3000/data/query</span></em></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#8db3e2;border-color:#000000;width:396pt;"> <p style="margin-left:0cm;"><strong><em><span style="color:#000000;">HTTP</span></em></strong><strong><em><span style="color:#000000;">协议：</span></em></strong><strong><span style="color:#ff0000;">GET</span></strong></p> </td> 
  </tr> 
 </tbody> 
</table>

data:\[\{各字段\},\{各字段\}\]    **//****返回的类型**data

<table style="width:528px;"> 
 <tbody> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:132pt;"> <p style="margin-left:0cm;"><strong>参数名</strong></p> </td> 
   <td style="border-color:#000000;vertical-align:top;width:197.25pt;"> <p style="margin-left:0cm;"><strong>说明</strong></p> </td> 
   <td style="border-color:#000000;vertical-align:top;width:66.75pt;"> <p style="margin-left:0cm;"><strong>是否必须</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:132pt;"> <p style="margin-left:0cm;">name</p> </td> 
   <td style="vertical-align:top;width:197.25pt;"> <p style="margin-left:0cm;">名称 String 最大255字符</p> </td> 
   <td style="vertical-align:top;width:66.75pt;"> <p style="margin-left:0cm;"></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:132pt;"> <p style="margin-left:0cm;">message</p> </td> 
   <td style="vertical-align:top;width:197.25pt;"> <p style="margin-left:0cm;">内容String</p> </td> 
   <td style="vertical-align:top;width:66.75pt;"> <p style="margin-left:0cm;"></p> </td> 
  </tr> 
 </tbody> 
</table>

**2****、提交留言信息：**

<table style="width:528px;"> 
 <tbody> 
  <tr> 
   <td colspan="3" style="background-color:#8db3e2;border-color:#000000;width:396pt;"> <p style="margin-left:0cm;"><strong><em>资源</em></strong><strong><em><span style="color:#000000;">URL</span></em></strong><strong><em><span style="color:#000000;">：</span></em></strong><em><span style="color:#000000;">http://localhost:3000/data/add</span></em></p> </td> 
  </tr> 
  <tr> 
   <td colspan="3" style="background-color:#8db3e2;border-color:#000000;width:396pt;"> <p style="margin-left:0cm;"><strong><em><span style="color:#000000;">HTTP</span></em></strong><strong><em><span style="color:#000000;">协议：</span></em></strong><strong><span style="color:#ff0000;">POST</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:132pt;"> <p style="margin-left:0cm;"><strong>参数名</strong></p> </td> 
   <td style="vertical-align:top;width:197.25pt;"> <p style="margin-left:0cm;"><strong>说明</strong></p> </td> 
   <td style="vertical-align:top;width:66.75pt;"> <p style="margin-left:0cm;"><strong>是否必须</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:132pt;"> <p style="margin-left:0cm;">name</p> </td> 
   <td style="vertical-align:top;width:197.25pt;"> <p style="margin-left:0cm;">名称最大255字符</p> </td> 
   <td style="vertical-align:top;width:66.75pt;"> <p style="margin-left:0cm;">必须</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:132pt;"> <p style="margin-left:0cm;">&nbsp;message</p> </td> 
   <td style="vertical-align:top;width:197.25pt;"> <p style="margin-left:0cm;">类型 String</p> </td> 
   <td style="vertical-align:top;width:66.75pt;"> <p style="margin-left:0cm;">必须</p> </td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE>
    <html lang="zh-en">
    
    <head>
        <title>js实现简单留言板</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/demo.css" rel="stylesheet" />
        <script type="text/javascript" src="js/axios.js"></script>
        <script type="text/javascript" src="js/request.js"></script>
        <script type="text/javascript" src="js/index3.js"></script>
    </head>
    
    <body>
        <div class="container">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-1 control-label">昵称：</label>
                    <div class="col-sm-11">
                        <input type="email" class="form-control name" placeholder="请输入昵称">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">留言：</label>
                    <div class="col-sm-11">
                        <textarea class="form-control message" rows="5" placeholder="请输入内容"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-11">
                        <button type="submit" class="btn btn-success submit">提交留言</button>
                        <button type="submit" class="btn btn-success query">查看留言</button>
                    </div>
                </div>
            </div>
    
            <div class="panel panel-primary">
                <div class="panel-heading">留言列表</div>
                <div class="panel-body">
                    <ul class="list-group messageList">
                        
                    </ul>
                </div>
            </div>
        </div>
    </body>
    
    </html>

### 方式一： ###

Index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 15][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 16][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 17][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 18][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 19][]

Index.js

![20210610115939432.png][]//展示

Index.js

Index.js

![20210610120104490.png][]

### 方式二：axios ###

**对其封装处理：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 20][]

Index2.js

复制一遍index.js

![2021061012015736.png][]

![20210610120204488.png][]//一样

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 21][]

### 方式三：闭包 ###

request.js（请求）

Index3.js

复制一遍index.js

![20210610120254941.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 22][]

## （5）留言板——第五期写法 ##

**这是一个简单的 web 服务器的示例:**

**Serve****.js**

![20210610120353921.png][]

1、先引入express模块

2、使用该模块来创建 HTTP 服务器。

3、服务器被设置为在指定的 3000 端口上进行监听。 当服务器就绪时，则 listen 回调函数会被调

用。

4、传入的回调函数会在每次接收到请求时被执行。 每当接收到新的请求时，request事件会被调用，并提供两个对象：一个请求 对象和一个响应对象。

request提供了请求的详细信息。 通过它可以访问请求头和请求的数据。

response用于构造要返回给客户端的数据。

**1****、查看留言信息：**

data:\[\{各字段\},\{各字段\}\]    **//****返回的类型**data

<table style="width:528px;"> 
 <tbody> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:132pt;"> <p style="margin-left:0cm;"><strong>参数名</strong></p> </td> 
   <td style="border-color:#000000;vertical-align:top;width:197.25pt;"> <p style="margin-left:0cm;"><strong>说明</strong></p> </td> 
   <td style="border-color:#000000;vertical-align:top;width:66.75pt;"> <p style="margin-left:0cm;"><strong>是否必须</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:132pt;"> <p style="margin-left:0cm;">name</p> </td> 
   <td style="vertical-align:top;width:197.25pt;"> <p style="margin-left:0cm;">名称 String 最大255字符</p> </td> 
   <td style="vertical-align:top;width:66.75pt;"> <p style="margin-left:0cm;">否</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:132pt;"> <p style="margin-left:0cm;">message</p> </td> 
   <td style="vertical-align:top;width:197.25pt;"> <p style="margin-left:0cm;">内容String</p> </td> 
   <td style="vertical-align:top;width:66.75pt;"> <p style="margin-left:0cm;">必须</p> </td> 
  </tr> 
 </tbody> 
</table>

**2****、提交留言信息：**

### 1.查询数据 ###

**Serve****.js**

const express = require('express')   //引入express  加载依赖包
    const app = express()    //创建服务器
    const port = 3000  //定义一个端口
    
    app.get('/', (req, res) => {   //req==request 请求   res==response响应
      res.send('Hello World!')
    })
    ==================================== 添加 ==========================================
    //添加接口
    
    //查询接口
    app.get('/get_list', (req, res) => {   //req==request 请求   res==response响应
      var obj = [1,2,3,4,5];
      res.send(JSON.stringify(obj));
    })
    ===================================================================================
    
    app.listen(port, () => {   //监听3000端口
      console.log(`Example app listening at http://localhost:${port}`)
    })

![20210610120433989.png][]

request.js  //闭包文件

index.js

![20210610120505628.png][]

**Serve****.js**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 23][]

//成功

**Serve****.js**

![2021061012061011.png][]

==================================== 换成 ==========================================
    //查询接口
     
    ===================================================================================
    
    app.listen(port, () => {   //监听3000端口
      console.log(`Example app listening at http://localhost:${port}`)
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 24][]

![20210610120630898.png][]

index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 25][]

//数据展示

### 2.添加数据 ###

**Serve****.js**

==================================== 添加 ==========================================
    var bodyParser = require('body-parser'); //body解析
    ===================================================================================
    const express = require('express')   //引入express  加载依赖包
    const app = express()    //创建服务器
    const port = 3000  //定义一个端口
    
    //req==request请求   res==response响应   next
    var allowCrossDomain = function (req, res, next) {  
    	//自定义中间件，设置跨域需要的响应头
    res.header('Access-Control-Allow-Origin', '*');
    //允许任何方法
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');   
    //允许任何类型
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token');    
    next(); //下一步
    };
    
    //运用跨域的中间件
    app.use(allowCrossDomain);	
    ==================================== 添加 ==========================================
    //创建 application/json 解析  不添加这个req.body拿不到值
    app.use(bodyParser.json())   
    //创建 application/x-www-form-urlencoded 解析
    app.use(bodyParser.urlencoded({extended: true})) 
    ===================================================================================
    
    app.get('/', (req, res) => {   //req==request 请求   res==response响应
      res.send('Hello World!')
    })
    ==================================== 添加 ==========================================
    //添加接口
    app.post("/add_list", function(req, res){ 
      console.log(req.body);  //获取前端传入的参数 
      res.send(JSON.stringify({code:'200',msg:'success'})); 
    })
    ===================================================================================
    //查询接口
     
    
    app.listen(port, () => {   //监听3000端口
      console.log(`Example app listening at http://localhost:${port}`)
    })

![20210610120737183.png][]

![20210610120740631.png][]

index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 26][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 27][]

//只要提交，下面就直接展示

## （6）跨域： ##

![20210610120833591.png][]

//需要跨域
     
    var bodyParser = require('body-parser');   //body解析
    
    var allowCrossDomain = function (req, res, next) {  //req==request请求   res==response响应   next
      res.header('Access-Control-Allow-Origin', '*');//自定义中间件，设置跨域需要的响应头。
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');  //允许任何方法
      res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token');   //允许任何类型
      next(); //下一步
     };
    
    //运用跨域的中间件
    app.use(allowCrossDomain);	
    //创建 application/json 解析  不添加这个req.body拿不到值
    //app.use(bodyParser.json())   
    // 创建 application/x-www-form-urlencoded 解析
    //app.use(bodyParser.urlencoded({extended: true}))

[20210610113354543.png]: /images/20221005/f516548356fb4cd4b19c55ad5bdeb0c2.png
[20210610113400332.png]: /images/20221005/6b477ab8d3a94dc5b1e8ee7d85f0ad48.png
[20210610113521777.png]: https://img-blog.csdnimg.cn/20210610113521777.png
[20210610113523390.png]: /images/20221005/ef25ee5ed45e4c40ad37f907052c836d.png
[20210610113741954.png]: /images/20221005/a627917836674d23b53b6da817f8b9a1.png
[20210610113810648.png]: https://img-blog.csdnimg.cn/20210610113810648.png
[20210610113810703.png]: /images/20221005/8571afe08aba49c88169b133e4107773.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/2be20dc962754f89a8cd5ac42a1b3012.png
[20210610113826661.png]: /images/20221005/2a2457bc11cd43f982189b8833f11424.png
[20210610113826664.png]: /images/20221005/84042a64f2114c79973439c1b899ea43.png
[20210610113842392.png]: /images/20221005/d105db3969de44299b3df8984daca488.png
[20210610113849980.png]: https://img-blog.csdnimg.cn/20210610113849980.png
[20210610113851706.png]: /images/20221005/db96846d07b945faaa13c94210718e77.png
[2021061011391794.png]: https://img-blog.csdnimg.cn/2021061011391794.png
[20210610113918675.png]: /images/20221005/4eb22d75b13e430b9f4bf3a9f61fd441.png
[20210610113925771.png]: https://img-blog.csdnimg.cn/20210610113925771.png
[2021061011392817.png]: /images/20221005/cbc81a944005448c8c87647678ab30af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/93d45ec2ad2148b5846343b292bcedbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/546c0cc894784b2690d9698b7bcb943c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/95c0f66e96e745ce85b433b7c71a2e30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/9a416cc991cd463385355601e2bbd5ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/7ca5d29cb9dc4fe596276a50baab7800.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/e20017ae5f41420ca9e8acaeef256035.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 7]: /images/20221005/54b72751b9474541b7ca429c82fe1d28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 8]: /images/20221005/d71f904533ad4c899e43f14904a5f172.png
[20210610115217523.png]: /images/20221005/f06d6e704a9a43f5b757e365ddb70d13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 9]: /images/20221005/bd66d717024e4a42a064d4ef01f71419.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 10]: /images/20221005/b037e13ca70a44c68e79ae6221d77048.png
[20210610115307709.png]: /images/20221005/b8b402a97a4a4937b02d6a1a75623e23.png
[20210610115325356.png]: /images/20221005/2e28310539094f129e98b632b3359138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 11]: /images/20221005/8dd97818a3dc4f38866c4552ff7f9ec4.png
[2021061011535819.png]: /images/20221005/1aaa8099d91742688aab0fbca72e675b.png
[20210610115402576.png]: /images/20221005/4c709d4cc49e4237bd20b4023ea030fd.png
[20210610115406651.png]: /images/20221005/f4493a72cbba4adb858f2fda1de670e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 12]: /images/20221005/399b302d7599497688cd32543cce7a5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 13]: /images/20221005/ef35ad381db7463bb07c4e06f0574929.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 14]: /images/20221005/d98b8cd85eb34900961b21c7b68334ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 15]: /images/20221005/9c3300560fe8479fb9b15bdaae401d65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 16]: /images/20221005/afa59e4b866e4a898efec58cfbdd8067.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 17]: /images/20221005/66b4dcec1dc0444d8db2e8732683068b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 18]: /images/20221005/9408b43ab236469d89b5089b4b5db0fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 19]: /images/20221005/f6aa2fa5ba7049a19524ff8cc4a2cc8e.png
[20210610115939432.png]: /images/20221005/dc13962cf9624ef08622eb024c505986.png
[20210610120104490.png]: /images/20221005/560df7f204e445cdbe14658a0549b56a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 20]: /images/20221005/c10a07239d084f04aad78687e73c30e3.png
[2021061012015736.png]: /images/20221005/5713aae07568453ba639bc4283c17554.png
[20210610120204488.png]: /images/20221005/e77f59acbbd64ee3ad7ba0403f4414a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 21]: /images/20221005/e14cc9b2674e40f38815551a06f83610.png
[20210610120254941.png]: /images/20221005/11941866f6584b43aac49262f787f6c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 22]: /images/20221005/09301ea0fb9b465dbd27b230d172b54a.png
[20210610120353921.png]: /images/20221005/f5eac4bba1ea48429ec1f96049d6224b.png
[20210610120433989.png]: /images/20221005/30ec4fd79d7c41989a797b4bb22642f5.png
[20210610120505628.png]: /images/20221005/dfd1dac3d45a4c388f28d8c9a4c2bf5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 23]: /images/20221005/889d359fa8204607849b03f08f884b00.png
[2021061012061011.png]: /images/20221005/f977623608d94e2c90f9cabd6bd0ef62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 24]: /images/20221005/a2cd12c499234f4395a1d04cb5a2e7cb.png
[20210610120630898.png]: /images/20221005/9c4789f22baf4e78acd1de69279b328c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 25]: /images/20221005/06a6aab6a78241f2bf854034e20fcc83.png
[20210610120737183.png]: /images/20221005/fc2644969adb4baa88f6a5cfceb468e1.png
[20210610120740631.png]: /images/20221005/5ec0e58f410e45d5a87177ee6d50f286.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 26]: /images/20221005/8078ab5d04f8487dbee69ab6005e4e95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 27]: /images/20221005/cd2c7942eed044a7a7a9cfea0bb55e79.png
[20210610120833591.png]: /images/20221005/02fef37de4214165b2bc28d16493cd86.png