利用Vue技术实现的查询所有和添加功能
就是根据Vue本身的特性，对之前写过的JSON等进行页面代码的简化。
其中，有俩点，需要明白一下：
在body标签里面，使用div标签，将列表数据包住，并设置一个id，便于vue对其的引用
在使用vue时，一定要导入包！
查询所有(这里仅展示.html界面的代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<!--显示所有结果界面-->
<div id="app">
<table id="userTable">
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr v-for="(user,i) in users">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.password}}</td>
</tr>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
users:[]
}
},
mounted(){
//页面加载完成后，进行异步请求
var _this=this;
axios({
method:"get",
url:"http://localhost:8080/ttCookieLogin_war_exploded/selectAllServlet"
}).then(function(resp){
_this.users=resp.data;
})
}
})
</script>
</body>
</html>
添加功能(这里仅展示.html界面的代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加界面</title>
</head>
<body>
<div id="app">
<center>
<form action="" method="post">
<tr>
<td>序号：</td>
<input type="text" id="id" v-model="user.id" name="id">
</tr>
<p>
<tr>
<td>用户名：</td>
<input text="text" id="username" v-model="user.username" name="username">
</tr>
<p>
<tr>
<td>密码：</td>
<input text="text" id="password" v-model="user.password" name="password">
</tr>
<p>
<tr>
<input type="button" id="btn" @click="submitForm" value="提交">
</tr>
</form>
</center>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
user:{}
}
},
methods:{
submitForm(){
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/ttCookieLogin_war_exploded/addServlet",
data:_this.user
}).then(function(resp){
if(resp.data=="success"){
location.href="http://localhost:8080/ttCookieLogin_war_exploded/Vue.html"
}
})
}
}
})
</script>
</body>
</html>
