Axios在前后端的使用

Axios在前后端的使用1、后端平台搭建关于后端平台搭建，参考博文https://blog.csdn.net/daniaoxp/article/details/119295619在搭建过程中需要用到lombok插件，该插件的安装参考下面博文https://blog.csdn.net/daniaoxp/article/details/119592904在该博文中提到了使用该插件后可以使用@DATA注

haichuangdianzi

1106人浏览 · 2021-08-17 14:19:30

haichuangdianzi · 2021-08-17 14:19:30 发布

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>