Vue操作表格进行增删改查

文章目录Vue操作表格进行增删改查查询增加删除修改Vue操作表格进行增删改查查询首先是导入依赖：<script type="text/javascript" th:src="@{/js/jquery-3.6.0.js}"></script><script type="text/javascript" th:src="@{/js/vue.js}"></scr

Keeling1720

7204人浏览 · 2021-10-06 16:10:08

Keeling1720 · 2021-10-06 16:10:08 发布

文章目录

Vue操作表格进行增删改查

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对象绑定-->
    &nbsp;&nbsp;&nbsp;&nbsp;姓 名:<input type="text" v-model="student.name"><br>
    &nbsp;&nbsp;&nbsp;&nbsp;邮 箱:<input type="text" v-model="student.email"><br>
    &nbsp;&nbsp;&nbsp;&nbsp;年 龄:<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}">
            &nbsp;&nbsp;&nbsp;&nbsp;姓 名:<input type="text" name="name" th:value="${stu.name}"><br>
            &nbsp;&nbsp;&nbsp;&nbsp;邮 箱:<input type="text" name="email" th:value="${stu.email}"><br>
            &nbsp;&nbsp;&nbsp;&nbsp;年 龄:<input type="text" name="age" th:value="${stu.age}"><br>
            <input type="submit" value="修改">
        </form>
    </div>
</body>
</html>