Axios在前后端的使用

Posted haichuangdianzi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Axios在前后端的使用相关的知识，希望对你有一定的参考价值。

Axios在前后端的使用

1、后端平台搭建

关于后端平台搭建，参考博文

https://blog.csdn.net/daniaoxp/article/details/119295619

在搭建过程中需要用到lombok插件，该插件的安装参考下面博文

https://blog.csdn.net/daniaoxp/article/details/119592904

在该博文中提到了使用该插件后可以使用@DATA注释，该注释提供类的get、set、equals、hashCode、canEqual、toString方法，非常方便，这里介绍该插件的另外一个注释**@Log4j2**，该注释可以实现打印功能。

完成后实验效果

同时在控制台看到OK的打印信息

由于要跟前端结合，要解决跨域问题，添加**@CrossOrigin**注释

2、前端平台搭建

2.1 前端页面搭建

由于前端比较简单，也采用idea搭建，先搭建一个空项目，空项目搭建过程可参看博文

https://blog.csdn.net/daniaoxp/article/details/119295619

空项目搭建完成后新建子模块，如下操作即可。


  • 在main文件夹下新建webapp文件夹

  • 在webapp文件夹下新建vue文件夹

  • 在vue文件夹下新建js文件夹

  • 在vue文件夹下新建html文件，命名为first.html，注意此时该文件与js文件夹平行

2.2 引入axios

打开axios网页

http://www.axios-js.com/zh-cn/docs/

找到下图的网址，复制粘贴到浏览器

https://unpkg.com/axios/dist/axios.min.js
  • 出现axios源码

  • 右键，页面另存为指定位置

  • 保存

  • 将该问件复制到js文件夹下

  • 打开first.html文件，根据下图方式引入axios

<script src="js/axios.min.js"></script>

3、实例演示

3.1 执行 GET 请求

3.1.1 前端操作

在first.html页面中完成以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios在前后端的使用</title>
</head>
<body>
    <div>
        <h1>Axios应用</h1>
    </div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    axios.get("http://localhost:8080/hello?id=1&name=jack")
        .then(function (response) 
            console.log(response);
        )
        .catch(function (error) 
            console.log(error);
        );
</script>

第15行：“http://localhost:8080/hello?id=1&name=jack” 中的"http://localhost:8080/hello"一定要跟后端对应，该语句可向后端发送**“id=1&name=jack”** 信息。把前端运行起来，建议使用谷歌浏览器。（在运行前端前，先把后端运行起来）

  • 打开谷歌浏览器后，按F12，出现如下图

  • 刷新，出现后端信息

  • 同时看下后端控制台，说明也运行了

前端怎么样得取出后端中**“Hello Springboot demo01!”**的信息呢？在前端中加入这么一句。

再刷新浏览器，在浏览器控制台中出现后端的信息了。

3.1.2 后端操作

在first.html页面第15行：“http://localhost:8080/hello?id=1&name=jack” 中，"id=1&name=jack"就是要发给后端的信息，前端已经发送了，后端怎么接收呢，在后端程序中修改这两行。

public class HelloController 
    @RequestMapping("/hello")
    public String sayHello01(@RequestParam("id") String id,@RequestParam("name") String name)
        log.info("OK");
        log.info("id:,name:",id,name);
        return "Hello Springboot demo01!";

后端重新部署运行，刷新浏览器，看下后端的控制台，得到了前端信息。

3.2 执行 POST 请求

3.2.1 前端操作

在前端的html页面中完成以下内容，主要是第14行到第26行，第15行的地址注意一下，是"http://localhost:8080/test01"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios在前后端的使用</title>
</head>
<body>
    <div>
        <h1>Axios应用</h1>
    </div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    axios.post("http://localhost:8080/test01", 
        firstName: 'Fred',
        lastName: 'Flintstone'
    )
        .then(function (response) 
            console.log(response);
            console.log(response.data);
        )
        .catch(function (error) 
            console.log(error);
        );
</script>

post请求发送信息的格式是采用json格式，例如


     firstName: 'Fred',
     lastName: 'Flintstone'

接下去看后端怎么接收

3.2.2 后端操作

后端接收采用实体类方式接收，所以新建User类，在新建该类前先新建entity包。

可以采用这种方式一下子完成新建包和类的过程

在类中完成以下代码，使用@DATA注解，非常方便

@Data
public class User 
    private String firstName;
    private String lastName;

回到HelloController类，完成以下代码

 @PostMapping("/test01")
    public String test01(@RequestBody User user)
        log.info("firstName:,lastName:",user.getFirstName(),user.getLastName());
        return "Hello Springboot demo02!";

运行后端，再运行前端，刷下浏览器，在浏览器控制台中出现了后端发送的信息

在后端出现前端发来的信息

3.3 执行 PUT 请求

put请求跟post请求比较相似。

3.3.1 前端操作

在前端的html页面中完成以下内容，主要是第14行到第26行，第15行的地址注意一下，是"http://localhost:8080/test02"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios在前后端的使用</title>
</head>
<body>
    <div>
        <h1>Axios应用</h1>
    </div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    axios.put("http://localhost:8080/test02", 
        firstName: 'Fred',
        lastName: 'Flintstone'
    )
        .then(function (response) 
            console.log(response);
            console.log(response.data);
        )
        .catch(function (error) 
            console.log(error);
        );
</script>

put请求发送信息的格式是采用json格式，例如


     firstName: 'Fred',
     lastName: 'Flintstone'

接下去看后端怎么接收

3.3.2 后端操作

 @PutMapping("/test02")
    public String test02(@RequestBody User user)
        log.info("firstName:,lastName:",user.getFirstName(),user.getLastName());
        return "Hello Springboot demo03!";

运行后端，再运行前端，刷下浏览器，在浏览器控制台中出现了后端发送的信息

4、补充说明

在前端中一起发送三个请求，如图。

在后端看下响应

确实都收到响应信息，回看前端代码，有很多冗余，比如"http://localhost:8080"，都要用到。因此可在前端进行优化。

<script>  
var instance=axios.create(
        baseURL:"http://localhost:8080"
    );

    instance.get("/hello?id=1&name=jack")
        .then(function (response) 
            console.log(response);
            console.log(response.data);
        )
        .catch(function (error) 
            console.log(error);
        );
    instance.post("/test01", 
        firstName: 'Fred',
        lastName: 'Flintstone'
    )
        .then(function (response) 
            console.log(response);
            console.log(response.data);
        )
        .catch(function (error) 
            console.log(error);
        );
    instance.put("http://localhost:8080/test02", 
        firstName: 'TOM',
        lastName: 'Stone'
    )
        .then(function (response) 
            console.log(response);
            console.log(response.data);
        )
        .catch(function (error) 
            console.log(error);
        );
</script>

实验效果跟原来一样。

以上是关于Axios在前后端的使用的主要内容，如果未能解决你的问题，请参考以下文章

Vue小项目二手书商城：axios前后端数据交互

axios异步提交表单数据的不同形式

SpringMVC前后端分离交互传参详细教程-

自学前后端分离（vue+express+axios+mysql+node.js）

web前端和后端怎么进行数据交互？

axios插件：完成前后台ajax交互