node前后端数据交互&post参数发送方式URLSearchParams、qs

拼搏现实的明天。 2022-11-27 15:56 412阅读 0赞

来看看前端向后端发送数据的操作，以及后端接收前端传递过来的数据，返回一些信息的过程。

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

先看下前端向后端是怎么发送数据的。

### 1、axios拦截器 请求封装 url封装 调用封装的请求 ###

（1）创建util文件夹，来编写vue的拦截器，命名比如request.js。

import axios from "axios"
    // 创建axios 赋值给常量service 
    const service = axios.create();
    
    // 添加请求拦截器（Interceptors）
    service.interceptors.request.use(function (config) { 
      // 发送请求之前做写什么
      return config;
    }, function (error) { 
      // 请求错误的时候做些什么
      return Promise.reject(error);
    });
    
    // 添加响应拦截器
    service.interceptors.response.use(function (response) { 
      // 对响应数据做点什么
      return response;
    }, function (error) { 
      // 对响应错误做点什么
      return Promise.reject(error);
    });
    export default service

（2）封装axios请求。  
比如命名为aboutapi.js。先来看下**get请求**的封装以及用**params:\{key：val\}** 进行参数传递。

// 引用封装的拦截器
    import service from "@/util"
    
    export function one(){ 
        return new Promise((resolve,reject)=>{ 
            service.request({ 
                url:"xxxx",//url 还需要进行封装？？？需要，这样当url的域名变化时，可以直接修改一次就OK
                method:"get",
                // 发送数据 get发送数据的方式是 params:{key：val}
                params:{ name:"xixi"}
            }).then((ok)=>{ 
                resolve(ok)
            }).catch((err)=>{ 
                reject(err)
            })
        })
    }

（3）封装请求的url  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener]

（4）在封装好的数据请求中使用封装的url  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 1]

（5）开始在页面中进行咱们封装好的数据请求的使用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter]

### 2、后台服务的编写 ###

（1）编写express 路由。  
先下载express插件，然后在路由文件夹中使用express创建路由，然后配置get请求，然后在server.js主服务文件里面通过中间件的方式加载刚定义好的路由。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cente]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_left]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 2]  
（8）测试  
前台服务开启：因为是vue编写的前台，所以需要在该vue项目根目录下，开启命令行，然后输入npm run serve；  
后台服务开启：在当前项目server目录下，开启命令行，输入 node server 运行后台服务程序，开启服务。

然后在前台点击button发送get请求，后台接收前台发送的数据进行数据处理，如果需要写回数据，只需在路由方法里面通过res.send等方法返回，比如 res.send(\{msg:“成功”,data:\{info:“向前端返回的数据”\}\})。

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

刚才演示了get请求数据的发送与接收，然后返回信息。现在看一下post请求是通过怎样的一种方式发送数据的。常用的post参数发送我总结了两种**URLSearchParams**与**qs**。

### 3、前台向后台发送post ###

（1）封装请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cente 1]

（2）封装url  
![在这里插入图片描述][20200816131716408.png_pic_centr]

（3）在封装的请求中使用封装的url  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 3]

（4）在页面中调用封装的请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 4]

###### （5）**URLSearchParams 方式**。 ######

由于是post发送数据， 所以前台不能直接发送，需要处理。之前使用的都是URLSearchParams ，来看看这种方式是怎么传递数据的。  
![在这里插入图片描述][20200816132909784.png_pic_centr]

###### （6）**qs方式**，前台向后台传递数据 。 ######

首先下载qs：`cnpm install --save qs`

然后在页面中引用qs。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 5]

然后获取要发送的数据，通过qs转换成query参数，然后传递参数给封装的请求中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 6]

需要在封装的数据请求中接收这个参数，并且使用data发送。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 7]

### 4、后台接收前台发过来的post参数数据 ###

（1）新建路由，由于要接受post请求，所以要下载 body-parser 模块并使用，使用req.body.xxx来接收数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_centr]

（2）使用路由  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter 1]

（3）测试

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

### 总结 ###

前台向后台发送请求及数据：

*  get 方式，params:\{key:val\}
 *  post 方式， URLSearchParams
    
        var params = new URLSearchParams();
        params.append("name", this.formLabelAlign.name);
        params.append("pwd", this.formLabelAlign.region);
 *  post 方式， qs
    
        import Qs from "qs"
        let newobj=Qs.stringify(obj)

参考博文：[axios 发 post 请求，后端接收不到参数的解决方案][axios _ post]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener]: /images/20221124/b48f5eb97dd8417785534894e3892144.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 1]: /images/20221124/40ebde28db7849eab8315906c8d9efff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter]: /images/20221124/22a2b9090eb8451c83b4b727366b98b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cente]: /images/20221124/5489582a88984741aeafd91fd407d7b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_left]: /images/20221124/3df1da1e8c71470db8b73d9c9d57729e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 2]: /images/20221124/faed5feaadda41fab6a5f333e8e120c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cente 1]: /images/20221124/7db7fabd32854377819bd3b0c387e46f.png
[20200816131716408.png_pic_centr]: /images/20221124/cb5b64ed3d944a2eace7230d08b73aea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 3]: /images/20221124/3a5c9621368740bb99aceb28a5bf15f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 4]: /images/20221124/46c14739292f408e87825f1650053396.png
[20200816132909784.png_pic_centr]: /images/20221124/a7f728889dcc46a48f6e12c3b1a3e014.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 5]: /images/20221124/4ee39fa8c65546b796faa0dfe37c3a23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 6]: /images/20221124/2bd72fc44a78474ea5c18666968463e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 7]: /images/20221124/7ac3c6285dd9432fbbe63493e390c8cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_centr]: /images/20221124/a57123bad01d4f9083cb81106baec6c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter 1]: /images/20221124/bc3b1f703750420983fb39ffa57b630b.png
[axios _ post]: https://www.cnblogs.com/yiyi17/p/9409249.html