今天嘗試寫一個基于SpringBoot+Vue的前后端分離的簡單登陸的例子。
django 前后端分離。SpringBoot采用IDEA集成環境開發
Vue采用Vscode集成環境開發
PHP 前后端分離,這個簡單的例子,基本上把前面幾周研究的技術都復習了一遍。例如
數據庫,RestFul接口,注解,Vue等等。也算對一周工作的總結吧。http通信采用axios這個庫。
先上一個效果圖:
?html頁面如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue前后端示例</title>
</head>
<body><h1>登陸測試</h1><div ><label>用戶名</label><input id="user" v-model ="user"></input></div><div id="psw"><label>密碼</label><input v-model ="psw" type="password"></input></div><div><button id="login" v-on:click ="handleLogin">登陸</button></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="axios.min.js"></script><script type="text/javascript" src="main.js"></script>
</body>
</html>
js如下:
var user_Vue =new Vue({el:'#user',data: {user: '111'}
})var psw_Vue =new Vue({el:'#psw',data: {psw: '111'}
})
var app =new Vue({el:'#login',methods:{handleLogin:function(){var data = {user,psw};data.user =user_Vue.user;data.psw = psw_Vue.psw;axios.defaults.baseURL = 'http://127.0.0.1:8080/'axios.post('/app/login', data).then(function (res) {alert(JSON.stringify(res.data));}).catch(function (err) {alert(err.message);});}}})
?
后端就實現了一個login接口。
現在又突發奇想,能不能把前后端都給tomcat托管呢?
進行嘗試中。。。
嘗試了一下,把war文件和前端的index.html都放在webapps/ROOT下面 記得是大寫的ROOT
就可以完美使用了
?測試結果
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态