django 前后端分離，SpringBoot之前后端分離

2023-11-30 阅读 31 评论 0

摘要：今天嘗試寫一個基于SpringBoot+Vue的前后端分離的簡單登陸的例子。 django 前后端分離。SpringBoot采用IDEA集成環境開發 Vue采用Vscode集成環境開發 PHP 前后端分離，這個簡單的例子，基本上把前面幾周研究的技術都復習了一遍。例如數據庫，RestFul接口

今天嘗試寫一個基于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

就可以完美使用了