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

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

---

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

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

（4）在封装好的数据请求中使用封装的url

（5）开始在页面中进行咱们封装好的数据请求的使用。

2、后台服务的编写

（1）编写express 路由。
先下载express插件，然后在路由文件夹中使用express创建路由，然后配置get请求，然后在server.js主服务文件里面通过中间件的方式加载刚定义好的路由。



（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）封装请求

（2）封装url

（3）在封装的请求中使用封装的url

（4）在页面中调用封装的请求

（5）URLSearchParams 方式。

由于是post发送数据， 所以前台不能直接发送，需要处理。之前使用的都是URLSearchParams ，来看看这种方式是怎么传递数据的。

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

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

然后在页面中引用qs。

然后获取要发送的数据，通过qs转换成query参数，然后传递参数给封装的请求中。

需要在封装的数据请求中接收这个参数，并且使用data发送。

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

（1）新建路由，由于要接受post请求，所以要下载 body-parser 模块并使用，使用req.body.xxx来接收数据。

（2）使用路由

（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 请求，后端接收不到参数的解决方案