JS —— 5、数据交互、跨域

怼烎@ 2022-10-06 00:45 169阅读 0赞

**目录**

26、数据交互

（1）原生请求

（2）参数解析

1.req.body——接收前端body的参数（下面演示：2）

2.req.query（下面演示：1）

3.req.params（下面演示：2、3）

4.formdata（下面演示：4）

5.演示：

（1）get请求

（2）post/put请求

（3）路径中的请求参数

（4）formdata参数

（5）fetch get请求

27、跨域

（1）什么是跨域

（2）为什么浏览器要限制跨域访问呢？

（3）为什么要跨域（从一个页面引用其它页面的资源）

（4）跨域解决方式

1.cors

2.nginx

3.jsonp

（5）解决跨域

1.jsonp方式

2.cors方式

3.nginx方式

# 26、数据交互 #

## （1）原生请求 ##

**Xhr****请求（下面演示：1-4）**

**Fetch****接收（下面演示：5）**

//get
    fetch('http://localhost:3000/info?name=jack')
        .then(function (response) {
            return response.json();
        })
        .then(function (myJson) {
            console.log(myJson);
    });
    
    //post
    fetch('http://localhost:3000/info4', {
        body: JSON.stringify({ "name": "joho", "age": 20 }),
        headers: {
            'content-type': 'application/json'
        },
        method: 'POST',
    })
    .then(function (response) {
        return response.json();
    })
    .then(function (myJson) {
        console.log(myJson);
    });
    
    //formdata
    var formdata = new FormData();
    formdata.append("name", "joho");
    formdata.append("age", 200)
    fetch('http://localhost:3000/info41', {
        body: formdata,
        method: 'POST',
    })
    .then(function (response) {
        return response.json();
    })
    .then(function (myJson) {
        console.log(myJson);
    });

## （2）参数解析 ##

获取请求很中的参数是每个web后台处理的必经之路，nodejs的 express框架 提供了3种方法来实现

### 1.req.body——接收前端body的参数（下面演示：2） ###

包含了提交数据的键值对在请求体中，默认是underfined,

你可以用body-parser或者multer来解析body

对应前端传入参数及内容类型如下：

application/json

\{"name"="jack"\}

req.body.name

### 2.req.query（下面演示：1） ###

包含在路由中每个查询字符串参数属性的对象。如果没有，默认为\{ \}

注：此方法多适用于GET请求，解析GET里的参数

application/x-www-form-urlencoded

// GET /search?q=tobi+ferret  //下面的案例

req.query.q

### 3.req.params（下面演示：2、3） ###

包含映射到指定的路线“参数”属性的对象。

例如，如果你有route/user/：name，那么“name”属性可作为req.params.name。

该对象默认为\{\}。

// GET /user/tj

req.params.name

// => "tj"

多适用于restful风格url中的参数的解析

### 4.formdata（下面演示：4） ###

处理formdata需要下载依赖包multiparty

cnpm i –S  multiparty

![20210610121758107.png][]

router.post("/test", function (req, res) {
        var form = new multiparty.Form();
        form.parse(req, function (err, fields, files) {
            //fields：类似post 的一些字符串，
            //files 文件
        })
    })

**req.query****与req.params区别:**

req.params包含路由参数（在URL的路径部分）

req.query包含URL的查询参数（在URL的？后的参数）

### 5.演示： ###

### （1）get请求 ###

demo.html

server.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][]

![20210610121931890.png][]

![20210610121934202.png][]

### （2）post/put请求 ###

demo.html

<!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()">get请求</button>
        <button onclick="sendData2()">post/put请求</button>
        <button onclick="sendData3()">路径中请求参数</button>
        <button onclick="sendData4()">formdata参数</button>
        <button onclick="sendData5()">fetch get请求</button>
        <div id="content"></div>
        <script>
            function sendData() {
              var xmlhttp = new XMLHttpRequest();
              xmlhttp.open("get", "http://localhost:3000/data/query?name=jack");
              xmlhttp.send(); //发送
              xmlhttp.onreadystatechange = function () { //接收数据
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        console.log(xmlhttp.responseText)
                        //把拿到的数据展示
                        content.innerHTML = xmlhttp.responseText;
                    }
              }
            }
    ===================================== 添加 =========================================
            function sendData2() {
                var xmlhttp = new XMLHttpRequest();
    ================================ 复制上面，修改 =====================================
                xmlhttp.open("post", "http://localhost:3000/data/add", true);
                //指定发送的内容格式
                xmlhttp.setRequestHeader("Content-Type", "application/json");
                xmlhttp.send(JSON.stringify({ "name": "joho", "age": 20 }));
    ===================================================================================
                xmlhttp.onreadystatechange = function () { //接收数据
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        console.log(xmlhttp.responseText)
                        //把拿到的数据展示
                        content.innerHTML = xmlhttp.responseText;
                    }
                }
            }
    ===================================================================================
        </script>
    </body>
    
    </html>

server.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][]

![20210610122011191.png][]

![20210610122013929.png][]

server.js

app.get("/data/query", function(req, res){
        console.log(req.body, req.query)
        res.send(JSON.stringify(arr));
    })
    ===================================== 添加 =========================================
    // 规定了data/后面就是参数
    app.get("/data/:name", function(req, res){
        console.log(req.body, req.query, req.params)
        res.send(JSON.stringify(arr));
    })
    ===================================================================================
    //post  put
    app.post("/data/add", function(req,res){
        console.log(req.body, req.query)
        res.send(JSON.stringify(arr));
    })
    
    app.listen(3000, function(){console.log("Server started on port 3000.")});

![2021061012203539.png][]

![20210610122043649.png][]

### （3）路径中的请求参数 ###

demo.html

![20210610122107205.png][]

**加参数：**

![20210610122111555.png][]

![20210610122114190.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2][]

server.js

================================== 添加-:age =======================================
    // 规定了data/后面就是参数
    app.get("/data/:name-:age", function(req, res){
        console.log(req.body, req.query, req.params)
        res.send(JSON.stringify(arr));
    })
    ===================================================================================

![20210610122132314.png][]

![20210610122137759.png][]

### （4）formdata参数 ###

处理formdata需要下载依赖包multiparty

cnpm i –S  multiparty

![2021061012215673.png][]

demo.html

server.js

var express = require("express") //加载依赖包
    var bodyParser = require('body-parser');   //body解析
    var app = express();
    var path = require("path"); //node自带
    //===================================== 添加 =========================================
    var multiparty = require('multiparty'); //从node_modules
    //===================================================================================
    .
    .
    .
    //===================================== 添加 =========================================
    //formdata数据格式
    app.post("/data/form", function(req, res) {
        var form = new multiparty.Form();
        form.parse(req, function(err, fields, files) {
               console.log(req.body, req.query, fields)
               res.send(JSON.stringify(fields));
        })
    })
    //===================================================================================

![20210610122247299.png][]

![20210610122249441.png][]

### （5）fetch get请求 ###

demo.html **绿色是一样的**

![20210610122311174.png][]

![20210610122313540.png][]

//三种请求

# 27、跨域 #

**跨域**：协议、域名、端口号         有一个不同

**同源策略：**协议、域名、端口号  都相同

## （1）什么是跨域 ##

![20210610122343350.png][]

**跨域**：协议、域名、端口号         有一个不同

**同源策略：**协议、域名、端口号  都相同

![20210610122354318.png][]

//协议、     域名、                 端口号

## （2）为什么浏览器要限制跨域访问呢？ ##

原因就是安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知 情的情况下出现安全问题。

## （3）为什么要跨域（从一个页面引用其它页面的资源） ##

既然有安全问题，那为什么又要跨域呢？有时公司内部有多个不同的子域，比如一个是 location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域

## （4）跨域解决方式 ##

### 1.cors ###

![20210610122433668.png][]//打包之后就没了（一次性？）

server {
        listen 8089;
        server_name localhost;
        root html; #根目录
        # cors
        add_header Access - Control - Allow - Origin $http_origin always; # '*'
        add_header Access - Control - Allow - Credentials true always;
        add_header Access - Control - Allow - Methods 'GET, POST, OPTIONS' always;
        add_header Access - Control - Allow - Headers 'DNT,X-Mx-ReqToken,KeepAlive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,ContentType,Authorization' always;
        #请求http://localhost:8080/api，将该请求转发到http://localhost:3000/api
        location / api {
            proxy_pass http://localhost:3000/api;
        }
    }

### 2.nginx ###

![20210610122534550.png][]//中间nginx代理

Windows: 在nginx目录查找nginx.conf文件并添加以下内容

Mac: open -t /usr/local/etc/nginx/nginx.conf

**mac****默认ng端口8080**

server {
        listen 8089; #服务监听端口
        server_name localhost; #主机ip
        root html; #根目录
        # cors
        add_header Access - Control - Allow - Origin $http_origin always; # '*'
        add_header Access - Control - Allow - Credentials true always;
        add_header Access - Control - Allow - Methods 'GET, POST, OPTIONS' always;
    add_header Access - Control - Allow - Headers 'DNT,X-Mx-ReqToken,KeepAlive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,ContentType,Authorization' always;
    
        #请求http://localhost:8080/api，将该请求转发到http://localhost:3000/api
        location / api {
            proxy_pass http://localhost:3000/api;
        }
    }

**关于Mac下操作：**

brew services start nginx

brew services stop nginx

### 3.jsonp ###

app.get("/api/jsonp", function (req, res) {
        var data = { name: "jsonp数据" }
        data = JSON.stringify(data); //转字符串
        var callback = `${req.query.callback}(${data})`; //函数名+数据
        console.log(callback)
        res.send(callback);
    })
    function getJsonp() {
        $.ajax({
            url: "http://localhost:3000/api/jsonp",
            data: { name: "xxxx" },
            dataType: "jsonp",
            jsonpCallback: "handleResponse"
        })
    };
    function handleResponse(data) {
        console.log(data);
    }

## （5）解决跨域 ##

**代理服务器用XXX方式，让前端请求，然后在代理到后段地址上去**

跨域解决办法
    
    
    
    1. 前端和后端的解决方案 jsonp
    
    前端解决                            后端解决
    
    需要前端和后端都处理
    
    jsonp===本质上用的是<script>
    
    
    
    还不如一起交给后端处理
    
    
    
    2. cors 纯后端配置跨域处理
    
    最简单 后端配置 前端无需处理
    
    
    
    3. 代理方式proxy----nginx
    
    比如存在一些老旧的系统，后端的实在不愿意改的情况下

**简单后端接口服务：**

![20210610122714120.png][]

![20210610122714122.png][]

![20210610122714121.png][]

![20210610122714127.png][]

**后端3000服务：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3][]//源头是5000

![20210610122729538.png][]

**前端5000服务:**

index.html

<button onclick="getReq()">发起get请求</button>
        
        <script>
            function getReq() {
                var xmlhttp = new XMLHttpRequest()
                xmlhttp.open('get', 'http://localhost:3000/api/data')
                xmlhttp.send()
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 & xmlhttp.status == 200) {
                        console.log("结果：" + xmlhttp.readyState);
                    }
                }
            }
    
        </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4][]

npm i -g serve
    
    serve

![20210610122759126.png][]** //vs code软件内输入**

![20210610122804744.png][]

//跨域

//端口不同（前端是5000，而后端是3000）

### 1.jsonp方式 ###

1.	前端和后端的解决方案 jsonp
    
    前端解决                  后端解决
    需要前端和后端都处理
    jsonp===本质上用的是<script>

（1）方式一：ajax框架

index.html

![20210610122915762.png][]

// 处理jsonp的全局函数
            function handleResponse(data) {
                console.log(data)
            }
    
            function jsonp () {
                $.ajax({
                    url: 'http://localhost:3000/api/data2',
                    data: {name: 'jack'},
                    dataType: 'jsonp',
                    jsonpCallback: "handleResponse"
                })
            }

![20210610122929131.png][]

![20210610122931341.png][]

server.js

// Access-Control-Allow-Origin
    // 访问    控制    允许   源头
    var express = require('express')
    var app = express();
    ==================================== 添加 ==========================================
    app.get('/api/data2', function(req, res){
        var data = {name: '从db取的数据'}   //模拟数据库数据
        data = JSON.stringify(data);    //转字符串
        // req.query.callback===handleResponse
        var callback = `${req.query.callback}(${data})` //拼接成前端回调参数
        res.send(callback)
    })
    ===================================================================================

![20210610122947904.png][]

**jsonp****方式**前后端都要处理，还不如直接交给后端处理

![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][]

//左边等于前端传过来的函数

（2）方式二：通过script前端标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 7][]

index.html

// 处理jsonp的全局函数
            function handleResponse(data) {
                console.log(data)
            }
    
            function jsonp () {
    ===================================== 添加 =========================================
                // 参数是明文
                const script = document.createElement("script");
                script.setAttribute('src', 'http://localhost:3000/api/data2?callback=handleResponse&name=jack&_=1623158312657')
                document.body.appendChild(script)
    ===================================== 关掉 =========================================
                // $.ajax({
                //     url: 'http://localhost:3000/api/data2',
                //     data: {name: 'jack'},
                //     dataType: 'jsonp',
                //     jsonpCallback: "handleResponse"
                // })
    ===================================================================================
            }

![202106101230520.png][] //JQ

![20210610123057958.png][]

![20210610123101332.png][]//也不受同源策略影响，所以能实现

1. 前端和后端的解决方案 jsonp
    前端解决                            后端解决
    需要前端和后端都处理
    jsonp===本质上用的是<script>

### 2.cors方式   ###

2. cors   纯后端配置跨域处理
    
    
    
    最简单 后端配置 前端无需处理

server.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 8][]

// Access-Control-Allow-Origin
    // 访问    控制    允许   源头
    var express = require('express')
    var app = express();
    ===================================== 添加 =========================================
    // cors处理跨域
    var cors = function(req, res, next) {
        // 允许访问的请求源头
        res.setHeader('Access-Control-Allow-Origin', '*'); 
        // 允许访问的请求方法 get post
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE'); 
        // 允许访问的请求头 content-type  token
        // 后端规定需要哪些请求头  前端就必须要传
        res.setHeader('Access-Control-Allow-Headers', 'content-type, x-token'); 
        next();
    }
    app.use(cors)
    ===================================================================================
    
    app.get('/api/data2', function(req, res){
        var data = {name: '从db取的数据'}   //模拟数据库数据
        data = JSON.stringify(data);    //转字符串
        // req.query.callback===handleResponse
        var callback = `${req.query.callback}(${data})` //拼接成前端回调参数
        res.send(callback);
    })

![20210610123230632.png][]

![20210610123233643.png][]

### 3.nginx方式 ###

3. 代理方式proxy----nginx
    
    比如，存在一些老旧的系统，后端的实在不愿意改的情况下

![20210610123254888.png][]

![20210610123257156.png][]

![2021061012330066.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 9][]//停掉（因为两个80端口冲突）

![20210610123308958.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 10][]

![20210610123314257.png][]

![20210610123317782.png][]//从这里返回页面

**//****复制**

# 另一个服务
    	server {
    		listen 8089; 
    		server_name localhost; 
    		# 没有/api开头就走这里
    		location / {
                root   html;  # 根目录===html目录 
                index  index.html index.htm;
            }
    		add_header Access-Control-Allow-Origin $http_origin always;
    		add_header Access-Control-Allow-Credentials true always; 
    		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always; 
    		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep- Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content- Type,Authorization' always; 
    		
    		# 有/api开头就走这里
    		location /api { proxy_pass http://localhost:3000/api; }
    	}

//粘贴

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 11][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 12][]

![20210610123353672.png][]//复制

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 13][]

![20210610123402362.png][]![20210610123414479.png][]

//再关掉，重启

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 14][]  
![2021061012342454.png][]

[20210610121758107.png]: /images/20221005/7cb6d8ffbb2140faaeb30d1913b9af70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/f2956c248e19467c8a5d746231a5c131.png
[20210610121931890.png]: /images/20221005/a1e58c434a884e398e19189dc89fa54e.png
[20210610121934202.png]: /images/20221005/83873c04b4eb4b2699e2915ee5b68d73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/7d5e171e676e4585be9f19e9c298e93f.png
[20210610122011191.png]: /images/20221005/537f4d4d459c4be6a8d275ea136ee645.png
[20210610122013929.png]: /images/20221005/d70ad8058d254d9db8ddef6cadda476f.png
[2021061012203539.png]: /images/20221005/b637fe1683434d528a401c1e8db30161.png
[20210610122043649.png]: /images/20221005/1640dbe099da4a2580aab9995d6e9f30.png
[20210610122107205.png]: /images/20221005/cbe40acd593f49a9b1cc193ae70441aa.png
[20210610122111555.png]: /images/20221005/6ed15ca68ce841189edbbd3b1d3b600e.png
[20210610122114190.png]: /images/20221005/5f2fbccecc1f4449af2f3baae4b8b891.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/216507b27ddb4785a35f3321a9b5c2b7.png
[20210610122132314.png]: /images/20221005/89e96ee1adc64664a2d218a4d84ef9d0.png
[20210610122137759.png]: /images/20221005/357d8093d478457295e0694ad46c3381.png
[2021061012215673.png]: /images/20221005/26602794efa44d15b6b2ae0450a0c73f.png
[20210610122247299.png]: /images/20221005/246bb37a1596483fa9bd5367b82896ff.png
[20210610122249441.png]: /images/20221005/5799d16aa9084e5f916d2e812c46740a.png
[20210610122311174.png]: /images/20221005/2add7c28ddcc44b09577586a1fda22a0.png
[20210610122313540.png]: /images/20221005/54fc37fbd8514093bb47d6e843be13ce.png
[20210610122343350.png]: /images/20221005/4c181d0544894ab18ce8de0a75f6bb35.png
[20210610122354318.png]: /images/20221005/6b6ad5853e4741dca09388ba8a171592.png
[20210610122433668.png]: /images/20221005/64e84c535cb14547af098cc58bd49f45.png
[20210610122534550.png]: /images/20221005/499d794d7e424378a128e17b1db1cd65.png
[20210610122714120.png]: /images/20221005/f88563a588234e3988e63e7d3f15a3f2.png
[20210610122714122.png]: /images/20221005/288155b0d7c04106bbba8974a7fe7388.png
[20210610122714121.png]: /images/20221005/87e4482a6aee4c23a27483d4e611616e.png
[20210610122714127.png]: /images/20221005/b70e27d2b7b64fe784c3664614106fd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/d78085157a9e4eeca423a8cd0110cbf1.png
[20210610122729538.png]: /images/20221005/90622a578b864e6581bccda1370775f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/3a81dfc6a9ab49579aa838e45eeb1717.png
[20210610122759126.png]: /images/20221005/59c89588097f444ba47c26f1b43c8861.png
[20210610122804744.png]: /images/20221005/fd786a813886418082ac10361ae4a75b.png
[20210610122915762.png]: /images/20221005/d048794424434621b5e3b45b56454c71.png
[20210610122929131.png]: /images/20221005/d11be9c1c8b74479a4c0a18672972b58.png
[20210610122931341.png]: /images/20221005/7deb1fb53c7e434197a72d7ef477ec26.png
[20210610122947904.png]: /images/20221005/40bdfb5f0de047da844b8a9cc55bae90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/7f9241de596d4cafb4cdc3644eb26434.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/0232bfc88d214818a7595ae622b0548b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 7]: /images/20221005/b4612752e7584f178376ef0b3025968a.png
[202106101230520.png]: /images/20221005/ad26332243c94bb099f52e141a53e8e9.png
[20210610123057958.png]: /images/20221005/1047609d47a641e0875e080245d69eb5.png
[20210610123101332.png]: /images/20221005/925ad722bfb94dcb8d66178ea19de32a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 8]: /images/20221005/48946695ea08401c9c14594c39ffd7eb.png
[20210610123230632.png]: /images/20221005/95a80ba28755458e9ffd73224d425718.png
[20210610123233643.png]: /images/20221005/ba0a68b782ba40ceb39ea3966d1d0003.png
[20210610123254888.png]: /images/20221005/93e8f1f5b9354ef59e25b7f8a0d325ac.png
[20210610123257156.png]: /images/20221005/dbde1d905e2a409cb0acf06a38d39a9a.png
[2021061012330066.png]: /images/20221005/cdea73cf55e74d368e242d27d69ce6f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 9]: /images/20221005/32fc85b632454b2c90fba1e3fb696f73.png
[20210610123308958.png]: /images/20221005/46fe0c8e60404ef08e66b5142f075401.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 10]: /images/20221005/1432e0e4b1dc45889915ab81d471ede8.png
[20210610123314257.png]: /images/20221005/96818500ebdb415f9733d3dc784ef0f2.png
[20210610123317782.png]: /images/20221005/8a2b9f1749c14fa191f220b5b162562f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 11]: /images/20221005/6bff23b269d74a28938e49271bde9d18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 12]: /images/20221005/a68381f5efc240d48cd402c7eabe79c8.png
[20210610123353672.png]: /images/20221005/c7d11c4201a0409e9df0bcce57337fbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 13]: /images/20221005/c567758fbee046afb3e558f6d595c284.png
[20210610123402362.png]: https://img-blog.csdnimg.cn/20210610123402362.png
[20210610123414479.png]: /images/20221005/9760104360444e76857c6e439eba28db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 14]: /images/20221005/74d0d979545b492d9d51e078d4eab8f8.png
[2021061012342454.png]: /images/20221005/22ecefb74dbc4101ad8841bae8556412.png