Introduction of Axios Back to Front in Java

最新推荐文章于 2024-06-14 15:02:13 发布

BananaCode

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量394

点赞数 2

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/chengducoder/article/details/126448123

版权

1. Abstract

According to Axios-HTTP's official definition, "Axios is a promise-based HTTP Client for node.js and the browser. " This may sound difficult to understand. So let's assume that we want to sign up for an online game, and the system needs us to create a unique nickname. Once we type into the nickname's input area, the system will send back our information through Axios. Then, the database in the server will give feedback back to users. One crucial point is that the system will not refresh the whole page but the warning message only. The technology we used is called Axios. This tutorial will briefly introduce how to implement Axios in our Java program.

There are two common methods in Axios for retrieving data, so we will use the same online game scenario as an example:

2. Real Example Demonstration

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../axios.min.js"></script>
</head>
<body>
<h1>Welcome to bananaCodeWorld Game</h1>
<form action="#" th:action="@{/users/addUser}" th:object="${user}" method="post">
    <input type="hidden" th:field="*{id}">
    username：<input id="nameTag" type="text" th:field="*{name}" onchange="checkName()"><span id="repeat" style="color: red"></span><br>
    password：<input type="text" th:field="*{password}"><br>
    birthday：<input type="date" th:field="*{birthday}"><br>
    <input id="sub" type="submit" th:value="Sign up">
</form>

The first step is to create a simple sign-up page that needs users to enter their username, password and birthday. Within the header section, we must import our config file of the Axios (axios.min.js).

Besides, we need to create a controller in our Java file to access this HTML.

@GetMapping("/add")
    public String deleteUser(Model model){
        UserBean userBean = new UserBean();
        model.addAttribute("user",userBean);
        return "users/addForm";
    }

The next step is the most important one. We have to send back information from our HTML file to our Java database.

<script>
    let nameTag = document.getElementById("nameTag")
    let repeatWarn = document.getElementById("repeat")
    let subbutton = document.getElementById("sub")
    function checkName(){
        let nameEnter = nameTag.value;
        //the nameEnter is the user's name entering
        axios.get("check",{
            /*first parameter is url in our controller system,
            second one is the parameter
            we have to send back
             */
            params:{
                name:nameEnter
                //the Jave Program will intercept this params
            }
        }).then(response=>{
            /* The server will send back a
            JSON file for confirmation
             */
            console.log(response.data)
            let checked = response.data;
            if(checked == "no"){
                repeatWarn.innerText="This name is good!"
                subbutton.disabled=false
            }else {
                repeatWarn.innerText="Sorry name repeated!"
                subbutton.disabled=true
            }
        })
    }
</script>

As we can see, the Java server needs to send back a JSON for Axios to handle the feedback. Therefore, we need to create a Restful controller in our Java code.

@GetMapping("users/check")
    public String checkName(String name){
        return service.checkName(name);
    }
    //This controller has @RestController annotation

This URL direction is as same as the one in our Axios code.

@Override
    public String checkName(String name) {
        UserBean userBean = userDao.checkName(name);
        if(userBean == null){
            return "no";
        }else {
            return "yes";
        }
    }

In the background, this is how we check the username in our database. Return yes if it is repeated and no to Axios if not. Remember, the yes or no feedback is also in JSON form.

3. Conclusion

Axios is a promise-based HTTP Client for node.js and the browser and it is convenient for us to exchange information between front and end. JSON is the format we use in this exchange progress.

BananaCode

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Introduction of Axios Back to Front in Java

This tutorial will briefly introduce how to implement Axios in our Java program.
复制链接

扫一扫