axios发送get和post请求，前后端如何进行数据交互

方法其实有很多，这里我就各说一种好用的方法。

前端：vue

后端：express

get请求

比方说前端发送了一条这样的get请求

axios.
    .get("/URL", {
      params: {
        username: this.username,
        password: this.password,
      },
    })
    .then(function (response) {
      console.log(response.data);
    })
    .catch(function (error) {
      console.log(error);
    });

对于后端 function(req, res, next)，

那么就可以用query接收到params中的数据，可以用类似于

let value = req.query.username;

的语句获取到。

而后端发送的数据则通过res.send();语句发送到前端，前端可以用response的data属性获取数据。

post请求

类似于get请求，前端发送了这样一条post请求

axios.
    .post("/URL", {
      username: this.username,
      password: this.password,
    })
    .then(function (response) {
      console.log(response.data);
    })
    .catch(function (error) {
      console.log(error);
    });

首先我们要在后端express文件的app.js文件中引入

var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

这样我们才能使用请求的body属性获取前端的数据。

那么同get请求，可以用类似于

let value = req.body.password;

的语句获取数据。

而post请求同样也可以使用res.send();语句发送数据回前端。

那么这两者之间的区别在哪呢。

GET数据容易泄露，POST较为安全。get请求转递的数据一般作为参数来获取后端的数据，它提交的数据是有上限的，一般为2KB，返回值就是请求的数据；而post请求是向指定路径提交数据进行处理，通常用于提交表单或者上传文件，返回值则作为处理结果。