npm install -S axios

// 引用axios依賴
import axios from 'axios'

// 掛在到vue中，這里將axios掛載為request，在組件中就可以使用this.request來調(diào)用axios了
Vue.prototype.request = axios;

@RestController
@RequestMapping("/user")
public class UserController {
    @GetMapping("/list")
    public R list() {
        return R.success("用戶列表查詢成功！");
    }
}

<template>
    <div id="index">
        <button @click="selectList">查詢用戶</button>
    </div>
</template>
<script>
export default {
    name: "index",
    methods: {
        selectList() {
            // 簡單GET請求只需要傳入URL就可以實現(xiàn)
            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("用戶獲取成功！");
    }
}

selectOne() {
    let config = {
        params: {id: "1"}
    }
    // url后面跟上config對象，config對象中的params屬性對應(yīng)的就是請求參數(shù)
    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("用戶添加成功！");
    }
}

save() {
    // 發(fā)送簡單POST請求與簡單GET請求雷同，只需要將get方法修改為post方法即可
    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 {
    /**
     * 一般發(fā)起POST請求都是將參數(shù)放在請求體中，然后在通過@RequestBody進(jìn)行解析的
     * 這里我就不創(chuàng)建實體類了，直接使用Map集合來接收一下
     */
    @PostMapping("/save")
    public R save(@RequestBody Map<String, String> data) {
        return R.success("用戶添加成功！")
                .setAttribute("name", data.get("username"))
                .setAttribute("pwd", data.get("password"));
    }
}

save() {
    let data = {
        username: "Java小學(xué)生丶",
        password: "123456789"
    }
    // 當(dāng)看到參數(shù)列表的時候應(yīng)該就能猜出來，直接將對象放在第二個參數(shù)上就可以
    // 需要注意的是這種方法攜帶的參數(shù)是放在請求體中的
    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("用戶添加成功！")
                .setAttribute("name", username)
                .setAttribute("pwd", password);
    }
}

save() {
    let config = {
        params: {
            username: "Java小學(xué)生丶",
            password: "123456789"
        }
    }
    // 這里不使用data，改用config進(jìn)行傳參，還是將對象封裝為params進(jìn)行傳遞
    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) {
        // file對象就是接收到的文件，針對文件的處理邏輯省略不寫...
        return R.success("文件上傳成功！")
                .setAttribute("fileName", fileName);
    }

<template>
    <div id="index">
        <!-- input:file 用于選擇文件，選擇文件后觸發(fā)change事件調(diào)用fileChange方法 -->
        <input type="file" id="file" @change="fileChange" />
        <!-- 執(zhí)行上傳文件的方法 -->
        <button @click="upload">點擊上傳</button>
    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            file: null
        }
    },
    methods: {
        fileChange(event) {
            // 當(dāng)選擇了某個文件后會觸發(fā)該方法，將文件對象存放到file中
            this.file = event.target.files[0];
        },
        upload() {
            // 創(chuàng)建一個FormData對象，將file放進(jìn)去，也可以放一些其他參數(shù)
            let data = new FormData();
            data.append('file', this.file);
            data.append('fileName', "11223344.txt");
            // 創(chuàng)建config對象，設(shè)置請求頭類型為multipart/form-data
            let config = {
                headers: {'Content-Type': 'multipart/form-data'}
            }
            // 發(fā)起請求攜帶剛剛創(chuàng)建的對象
            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小學(xué)生丶"};
            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: "張涵哲"};
            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",
                // 需要服務(wù)端進(jìn)行配合
                withCredentials: true,
                timeout: 5000
            }
        }
    },
    methods: {
        test() {
            let data = {name: "Java小學(xué)生丶"};
            this.request.post("/user/save", data, this.config).then(res => {
                console.log("res", res);
            });
        },
    }
}
</script>