SpringBoot之前後端分離

2021-09-25 05:01:40 字數 883 閱讀 5923

今天嘗試寫乙個基於springboot+vue的前後端分離的簡單登陸的例子。

springboot採用idea整合環境開發

vue採用vscode整合環境開發

這個簡單的例子,基本上把前面幾周研究的技術都複習了一遍。例如

資料庫,restful介面,註解,vue等等。也算對一周工作的總結吧。http通訊採用axios這個庫。

html頁面如下:

使用者名稱    密碼

登陸

js如下:

var user_vue =new vue(

})var psw_vue =new vue(

}) el:'#login',

methods:;

data.user =user_vue.user;

data.psw = psw_vue.psw;

axios.defaults.baseurl = ''

.then(function (res) )

.catch(function (err) );}}

})

後端就實現了乙個login介面。

現在又突發奇想,能不能把前後端都給tomcat託管呢?

進行嘗試中。。。

就可以完美使用了

測試結果

框架之 前後端分離

解決前後端開發技術不同,耦合出現的困難性 前端不再需要向後台提供模板或是後台在前端html中嵌入後台 提高工作效率,分工更加明確 前後端分離的工作流程可以使前端只關注前端的事,後台只關心後台的活,兩者開發可以同時進行,在後台還沒有時間提供介面的時候,前端可以先將資料寫死或者呼叫本地的json檔案即可...

SpringBoot 前後端資料互動

本系列主要講解前後端資料的傳輸 html springboot form 提交 ajax 非同步傳輸 websocket 提交 本文主要講解 from 的傳遞 get請求的資料會存在url中,比如http localhost 8080 get?x1 9 x2 10 我們的任務就是從後台接受到x1,x...

SPRINGBOOT 和 VUE CLI前後端配置

以防忘記,把前後端配置方法記錄在案。springboot和vue cli安裝基礎知識不在此列 一 前端vue配置 1.在main.js檔案中加入 new vue 為 changeorigin true,支援跨域 pathrewrite api 3.vue 中直接 this.axios post us...