Vue操作表格进行增删改查
查询
首先是导入依赖:
<script type="text/javascript" th:src="@{/js/jquery-3.6.0.js}"></script>
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
然后我们在渲染页面的时候直接请求我们的JSON数据。
<table border="1" width="80%" align="center" id="studentList">
<tr>
<th colspan="5">学生信息列表</th>
</tr>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<tr v-for="item in students">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.email}}</td>
</tr>
</table>
最后写我们的axios实现异步请求:
<script type="text/javascript">
stuLists = new Vue({
el:"#studentList",
data:{
//读取后的数据保存到列表中,供H5遍历
students: []
},
mounted(){
//填充
axios.get("http://localhost:8080/list")
.then(res => {
this.students = res.data;
})
.catch(function (err) {
console.log(err)
});
},
});
</script>
增加
引入依赖:
<script type="text/javascript" th:src="@{/js/jquery-3.6.0.js}"></script>
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
写我们的页面:
<form id="addForm">
<!--让这三个input的值跟data下的student对象绑定-->
姓 名:<input type="text" v-model="student.name"><br>
邮 箱:<input type="text" v-model="student.email"><br>
年 龄:<input type="number" v-model="student.age"><br>
<!--点击按钮触发addStudent方法-->
<input type="submit" value="提交" @click="addStudent">
</form>
我们的js代码如下:
<script type="text/javascript">
let addForm = new Vue({
el:"#addForm",
data:{
student: {
name: '',
email: '',
age: 0
}
},
methods:{
addStudent(){
axios({
method: 'post',
url: 'http://localhost:8080/list',
data:{
name: this.student.name,
email: this.student.email,
age: this.student.age
},
//固定写法
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
},
//固定写法
transformRequest: function(obj) {
var str = [];
for(var p in obj){
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
}).then( res =>{
alert("插入数据成功"+res);
//更新表格数据
axios.get("http://localhost:8080/list")
.then(res => {
this.students = res.data;
})
.catch(function (err) {
console.log(err)
});
}).catch( err =>{
alert("插入数据失败"+err);
});
}
}
})
</script>
删除
首先我们需要导入vue和axios的依赖。
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
然后我们写我们页面上的表格:
<table border="1" width="80%" align="center" id="studentList">
<tr>
<th colspan="5">学生信息列表</th>
</tr>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<!--遍历Vue对象的data下的students-->
<tr v-for="item in students">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.email}}</td>
<td>
<!--
v-bind:href="item.removeUrl"表示href绑定每个item各自的removeUrl和updateUrl
@click.prevent="del(i)"用来取消超链接的默认行为
@click="removeIt(item.removeUrl)表示点击事件绑定Vue的methods下的removeIt方法"
-->
<a class="removeBtn" v-bind:href="item.removeUrl" @click.prevent="del(i)" @click="removeIt(item.removeUrl)">删除</a>
<!--修改的我们直接获取每个item对象的updateUrl值然后跳转到对应页面即可-->
<a class="updateBtn" v-bind:href="item.updateUrl">修改</a>
</td>
</tr>
<my-show v-for="item in students" v-bind:item="item"></my-show>
</table>
接下来是我们的重头戏:
<script type="text/javascript">
//页面加载填充
stuLists = new Vue({
el:"#studentList",
data:{
//这个对象用来获取数据库的信息
students: []
},
mounted(){
//这个链接是我用来放响应的JSON的网址
axios.get("http://localhost:8080/list")
//成功的话执行then
.then(res => {
//我们就把得到数据(res.data)返回给students(上面tr有遍历students)
this.students = res.data;
//这是我们自己给他分配的removeUrl和updateUrl需要跳转的链接
for(let i = this.students.length - 1; i >= 0; i--){
this.students[i].removeUrl = 'http://localhost:8080/student/'+this.students[i].id;
this.students[i].updateUrl = 'http://localhost:8080/student/update/'+this.students[i].id;
}
})
.catch(function (err) {
console.log(err)
});
},
methods:{
//点击删除选项执行该方法
removeIt: function (removeUrl){
//发送post请求典型样式
axios({
method: 'post',
url: removeUrl,
data:{
//使用的是rest风格,所以要记得开启传输一个_method属性,并赋值为delete
_method: 'delete'
},
//这个头是固定的
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
},
//这个也是固定的
transformRequest: function(obj) {
var str = [];
for(var p in obj){
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
}).then( res =>{
alert("删除数据成功"+res);
//重新获取数据(因为是使用asiox是异步的,所以最好是把数据的重新获取放在删除成功后执行)
axios.get("http://localhost:8080/list")
.then(res => {
this.students = res.data;
for(let i = this.students.length - 1; i >= 0; i--){
this.students[i].removeUrl = 'http://localhost:8080/student/'+this.students[i].id;
this.students[i].updateUrl = 'http://localhost:8080/student/update/'+this.students[i].id;
}
})
.catch(function (err) {
console.log(err)
});
}).catch( err =>{
alert("删除数据失败"+err);
});
}
}
});
</script>
修改
引入依赖:
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
写页面代码:
<table border="1" width="80%" align="center" id="studentList">
<tr>
<th colspan="5">学生信息列表</th>
</tr>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<!--遍历Vue对象的data下的students-->
<tr v-for="item in students">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.email}}</td>
<td>
<!--
v-bind:href="item.removeUrl"表示href绑定每个item各自的removeUrl和updateUrl
@click.prevent="del(i)"用来取消超链接的默认行为
@click="removeIt(item.removeUrl)表示点击事件绑定Vue的methods下的removeIt方法"
-->
<a class="removeBtn" v-bind:href="item.removeUrl" @click.prevent="del(i)" @click="removeIt(item.removeUrl)">删除</a>
<!--修改的我们直接获取每个item对象的updateUrl值然后跳转到对应页面即可-->
<a class="updateBtn" v-bind:href="item.updateUrl">修改</a>
</td>
</tr>
<my-show v-for="item in students" v-bind:item="item"></my-show>
</table>
这里修改的超链接点击后是要正常跳转的,跟删除不一样。
跳转后的update.html页面如下:(可以用thymeleaf直接这么写)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>修改学生信息</title>
</head>
<body>
<h2>修改学生信息</h2>
<div class="updateStudent">
<form th:action="@{/student}" method="post">
<input type="hidden" name="_method" value="put">
<input type="hidden" name="id" th:value="${stu.id}">
姓 名:<input type="text" name="name" th:value="${stu.name}"><br>
邮 箱:<input type="text" name="email" th:value="${stu.email}"><br>
年 龄:<input type="text" name="age" th:value="${stu.age}"><br>
<input type="submit" value="修改">
</form>
</div>
</body>
</html>