今天嘗試寫乙個基於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...