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


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

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参数发送我总结了两种URLSearchParamsqs

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

Logo

前往低代码交流专区

更多推荐