??Java大聯盟

? 致力于最高效的Java學習

關注

Spring Boot + Vue 前后端分離最核心的操作就是通過異步請求完成數據同步，這其中又可以分為很多種不同的情況，比如是 GET 請求還是 POST 請求？參數是普通變量還是 JSON？基于 RESTful 架構如何操作等等，今天楠哥就把這些不同的請求方式做了一個匯總，一次性寫清楚，以后需要用的時候直接來查這篇文章即可。前后端分離異步請求共包含以下?12 種情況：1、GET 請求 + 普遍變量傳參2、GET?請求 + JSON 傳參3、PSOT?請求 + 普遍變量傳參4、POST?請求 + JSON?傳參5、基于 RESTful 的 GET?請求 + 普遍變量傳參6、基于 RESTful 的?GET?請求 + JSON?傳參7、基于 RESTful 的?PSOT?請求 + 普遍變量傳參8、基于 RESTful 的?POST?請求 + JSON?傳參9、基于 RESTful 的 PUT?請求 + 普遍變量傳參10、基于 RESTful 的?PUT?請求 + JSON?傳參11、基于 RESTful 的?DELETE?請求 + 普遍變量傳參12、基于 RESTful 的?DELETE?請求 + JSON?傳參Vue 中異步請求使用 axios 組件來完成，axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，可以用在瀏覽器和 node.js 中。Vue 工程中使用 axios，首先要安裝 axios，命令如下所示。npm install axios然后創建 Vue 工程，手動導入 axios 組件，命令如下所示。vue add axiosVue 環境搭建好之后，創建 Spring Boot 工程，之后就可以分別完成前后端代碼的開發。1、GET 請求 + 普遍變量傳參axios 異步 GET 請求的方法為?axios.get(url,params).then()url：請求的 URL。params：參數，格式為?{params:{name:value,name:value}}then()：請求成功的回調函數。Vue 代碼如下所示。<template> <div> <button type="button" @click="getData()">getDatabutton><br/> div>template><script> export default { methods: { getData(){ const _this = this????????????????axios.get('http://localhost:8181/getData',{params:{id:1,name:'張三'}}).then(function?(resp)?{ console.log(resp.data) }) } } }script>Spring Boot 代碼如下所示。@RestControllerpublic?class?DataHandler?{ @GetMapping("/getData") public String getData(Integer id,String name){ System.out.println(id); System.out.println(name); return id+name; }}分別啟動 Vue 和 Spring Boot，點擊?getData按鈕，結果如下圖所示。

這是前后端分離開發最常見的錯誤：跨域。當請求不在同一域名下的資源文件時，瀏覽器限制了此類請求，導致報錯，這就是跨域問題，如何解決呢？可以在前端應用中處理，也可以在后端應用中進行處理，這里我們選擇在 Spring Boot 中處理，方法非常簡單，只需要添加一個 Configuration 即可，具體代碼如下所示。@Configurationpublic?class?CorsConfig?implements?WebMvcConfigurer?{ @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); }}再次啟動 Spring Boot，點擊?getData按鈕，結果如下圖所示。

點擊 getData按鈕之后，客戶端輸出了后端服務返回的數據，axios 請求調用成功。2、GET?請求 + JSON?傳參Vue 代碼如下所示。<template> <div>????????<button?type="button"?@click="getJSON()">getJSONbutton><br/> div>template><script> export default { methods: {????????????getJSON(){ const _this = this var user = { id:1, name:'張三' } axios.get('http://localhost:8181/getJSON',{params:user}).then(function (resp) { console.log(resp.data) }) } } }script>Spring Boot 代碼如下所示。@Datapublic class User { private Integer id; private String name;}@GetMapping("/getJSON")public User getJSON(User user){ System.out.println(user); return user;}分別啟動 Vue 和?Spring Boot，點擊?getJSON按鈕，結果如下圖所示。

3、PSOT?請求 + 普遍變量傳參axios 異步 POST 請求的方法為?axios.post(url,params).then()url：請求的 URLparams：參數，POST 請求中，參數格式不再是??{params:{name:value,name:value}} ，而需要將參數封裝到URLSearchParams 對象中。then()：請求成功的回調函數。Vue 代碼如下所示。<template> <div> <button type="button" @click="postData()">postDatabutton><br/> div>template><script> export default { methods: { postData(){ const _this = this var params = new URLSearchParams() params.append('id', '1') params.append('name', '張三') axios.post('http://localhost:8181/postData',params).then(function (resp) { console.log(resp.data) }) } } }script>Spring Boot 代碼如下所示。@PostMapping("/postData")public User postData(Integer id,String name){ System.out.println(id); System.out.println(name); return new User(id,name);}?分別啟動 Vue 和?Spring Boot，點擊?postData按鈕，結果如下圖所示。

4、PSOT?請求 + JSON 傳參params 同樣需要將 JSON 對象封裝到?URLSearchParams?中，Vue 代碼如下所示。<template> <div> <button type="button" @click="postJSON()">postJSONbutton><br/> div>template><script> export default { methods: { postJSON(){ const _this = this var params = new URLSearchParams() params.append('id', '1') params.append('name', '張三') axios.post('http://localhost:8181/postJSON',params).then(function (resp) { console.log(resp.data)????????????????}) } } }script>Spring Boot 代碼如下所示。@PostMapping("/postJSON")public User postJSON(User user){ System.out.println(user); return new User(1,"張三");}分別啟動 Vue 和?Spring Boot，點擊?postJSON按鈕，結果如下圖所示。

5、基于 RESTful?GET?請求 + 普遍變量傳參基于 RESTful 的 axios 異步 GET 請求的方法為?axios.gett(url).then()url：請求的 URL，直接追加參數。then()：請求成功的回調函數。Vue 代碼如下所示。<template> <div> <button type="button" @click="restGetData()">restGetDatabutton><br/> div>template><script> export default { methods: { restGetData(){ const _this = this axios.get('http://localhost:8181/restGetData/1').then(function (resp) { console.log(resp.data) }) } } }script>Spring Boot 代碼如下所示。@GetMapping("/restGetData/{id}")public User restGetData(@PathVariable("id") Integer id){ System.out.println(id); return new User(1,"張三");}分別啟動 Vue 和?Spring Boot，點擊?restGetData按鈕，結果如下圖所示。

6、基于 RESTful?GET?請求 + JSON 傳參基于 RESTful 的 axios 異步 GET 請求的方法為?axios.get(url,params).then()url：請求的 URL。params：參數，格式為??{params:{name:value,name:value}}?。then()：請求成功的回調函數。Vue 代碼如下所示。<template> <div> <button type="button" @click="restGetJSON()">restGetJSONbutton><br/> div>template><script> export default { methods: { restGetJSON(){ const _this = this axios.get('http://localhost:8181/restGetJSON',{params:{id:1,name:'張三'}}).then(function (resp) { console.log(resp.data) }) } } }script>?Spring Boot 代碼如下所示。@GetMapping("/restGetJSON")public User restGetJSON(User user){ System.out.println(user); return new User(1,"張三");}分別啟動 Vue 和?Spring Boot，點擊 restGetJSON按鈕，結果如下圖所示。

?以上就是 axios 異步請求數據的 6 種形式，你都學會了嗎？?

推薦閱讀

1、快速上手Spring Boot+Vue前后端分離

2、Vue+Element UI搭建后臺管理系統界面

3、一文搞懂前后端分離

4、徒手擼一個Spring MVC框架

總結

以上是生活随笔為你收集整理的json请求 post vue_Spring Boot+Vueaxios异步请求数据的12种操作（上篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。