Detailed process record of Vue2 initiating requests using Axios

npm install -S axios

// Reference axios dependency import axios from 'axios'

//Hang it in vue, here we mount axios as request, and we can use this.request to call axios in the component Vue.prototype.request = axios;

@RestController
@RequestMapping("/user")
public class UserController {
    @GetMapping("/list")
    public R list() {
        return R.success("User list query successful!");
    }
}

<template>
    <div id="index">
        <button @click="selectList">Query user</button>
    </div>
</template>
<script>
export default {
    name: "index",
    methods: {
        selectList() {
            // A simple GET request can be implemented by just passing in the URL this.request.get("http://localhost:8000/user/list").then(res => {
                console.log("res", res);
            }).catch(e => {
                console.log("e", e);
            })
        }
    }
}
</script>
<style></style> 

@RestController
@RequestMapping("/user")
public class UserController {
    @GetMapping("/get")
    public R get(String id) {
        return R.success("User acquisition successful!");
    }
}

selectOne() {
    let config = {
        params: {id: "1"}
    }
    // The url is followed by the config object. The params attribute in the config object corresponds to the request parameters this.request.get("http://localhost:8000/user/get", config).then(res => {
        console.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
},

@RestController
@RequestMapping("/user")
public class UserController {
    @PostMapping("/save")
    public R save() {
        return R.success("User added successfully!");
    }
}

save() {
    // Sending a simple POST request is similar to a simple GET request. You only need to change the get method to the post method this.request.post("http://localhost:8000/user/save").then(res => {
        console.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
}, 

@RestController
@RequestMapping("/user")
public class UserController {
    /**
     * Generally, when initiating a POST request, the parameters are placed in the request body, and then parsed through @RequestBody* I will not create an entity class here, but directly use the Map collection to receive it*/
    @PostMapping("/save")
    public R save(@RequestBody Map<String, String> data) {
        return R.success("User added successfully!")
                .setAttribute("name", data.get("username"))
                .setAttribute("pwd", data.get("password"));
    }
}

save() {
    let data = {
        Username: "Java primary school student丶",
        password: "123456789"
    }
    // When you see the parameter list, you should be able to guess it. Just put the object in the second parameter. // Note that the parameters carried by this method are placed in the request body this.request.post("http://localhost:8000/user/save", data).then(res => {
        console.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
},

@RestController
@RequestMapping("/user")
public class UserController {
    @PostMapping("/save")
    public R save(String username, String password) {
        return R.success("User added successfully!")
                .setAttribute("name", username)
                .setAttribute("pwd", password);
    }
}

save() {
    let config = {
        params: {
            Username: "Java primary school student丶",
            password: "123456789"
        }
    }
    // Data is not used here, config is used instead for parameter passing, or the object is encapsulated as params for passing this.request.post("http://localhost:8000/user/save", null, config).then(res => {
        console.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
},

@RestController
@RequestMapping("/user")
public class UserController {
    @PostMapping("/upload")
    public R upload(MultipartFile file, String fileName) {
        // The file object is the received file, and the processing logic for the file is omitted...
        return R.success("File upload successful!")
                .setAttribute("fileName", fileName);
    }

<template>
    <div id="index">
        <!-- input:file is used to select a file. After selecting a file, the change event is triggered to call the fileChange method-->
        <input type="file" id="file" @change="fileChange" />
        <!-- Execute the method of uploading files-->
        <button @click="upload">Click to upload</button>
    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            file: null
        }
    },
    methods: {
        fileChange(event) {
            // This method will be triggered when a file is selected, and the file object will be stored in file this.file = event.target.files[0];
        },
        upload() {
            // Create a FormData object, put the file in it, and you can also put some other parameters let data = new FormData();
            data.append('file', this.file);
            data.append('fileName', "11223344.txt");
            // Create a config object and set the request header type to multipart/form-data
            let config = {
                headers: {'Content-Type': 'multipart/form-data'}
            }
            // Initiate a request with the object just created this.request.post('http://localhost:8000/user/upload', data, config).then(res => {
                console.log("res", res);
            })
        }
    }
}
</script> 

<script>
export default {
    name: "index",
    data() {
        return {
            config: {
                baseURL: "http://localhost:8000"
            }
        }
    },
    methods: {
        test() {
            let data = {name: "Java primary school student"};
            this.request.post("/user/save", data, this.config).then(res => {
                console.log("res", res);
            });
        },
    }
}
</script>

<script>
export default {
    name: "index",
    data() {
        return {
            config: {
                baseURL: "http://localhost:8000",
                timeout: 5000
            }
        }
    },
    methods: {
        test() {
            let data = {name: "Zhang Hanzhe"};
            this.request.post("/user/save", data, this.config).then(res => {
                console.log("res", res);
            });
        },
    }
}
</script> 

<script>
export default {
    name: "index",
    data() {
        return {
            config: {
                baseURL: "http://localhost:8000",
                // Requires server to cooperate withCredentials: true,
                timeout: 5000
            }
        }
    },
    methods: {
        test() {
            let data = {name: "Java primary school student"};
            this.request.post("/user/save", data, this.config).then(res => {
                console.log("res", res);
            });
        },
    }
}
</script>