<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <title>Document</title>
</head>
<body>
<div id="app">
    <button @click="qingjia_vue">申请请假</button>
    &nbsp;&nbsp;&nbsp;&nbsp;

    申请人：<input type="text" v-model="applicant" > <button @click="search">查询</button>

    <table border="1">
        <tr>
            <td>请假类型</td>
            <td>开始时间</td>
            <td>结束时间</td>
            <td>请假人</td>
            <td>提交时间</td>
            <td>操作</td>
        </tr>
        <tr v-for="item in leaves" :key="item.l_id">
            <td>{{item.typeText}}</td>
            <td>{{item.startDate}}</td>
            <td>{{item.endDate}}</td>
            <td>{{item.applicant}}</td>
            <td>{{item.createTime}}</td>
            <td>
                <button @click="showById(item.id)">修改</button>
                &nbsp;&nbsp;
                <button @click="del(item.id)">删除</button></td>
        </tr>
    </table>

    共 {{total}} 条记录  当前页数为：{{pageNum}}/{{pages}}  每页显示 {{pageSize}} 条记录
    <button @click="pre" v-if="hasPreviousPage" >上一页</button>

    <template v-for="item in navigatepageNums" >
        <a @click="jump(item)" href="#" v-if="pageNum != item">{{item}}</a>
        <a v-else style="color: red;">{{item}}</a>&nbsp;&nbsp;
    </template>

    <button @click="next" v-if="hasNextPage">下一页</button>
</div>
<script>
    //new Vue() 相当于java创建对象

    var app = new Vue({
        el: '#app', //el是element缩写
        data: { //是vue的配置，表示数据
            leaves: [],
            applicant:"",
            pageNum:1, //当前页数
            pageSize:3, // 每页显示记录数
            total:0, //总共记录数
            pages:0, //总共页数
            hasNextPage:false, //是否有下一页
            hasPreviousPage:false, // 是否有上一页
            navigatepageNums:[] // 导航页数，分页的数字
        },
        methods:{
            del(id){ //简写
                var b=confirm("您确定要删除该条记录吗？")
                if(!b){
                    return;
                }
                console.log("点击删除按钮，id是："+id)
                var that=this;
                axios.get('deleteById?id='+id, {
                })
                    .then(function (res) {
                        console.log("删除结果：",res.data);
                        if(res.data.code===0){//删除成功
                            that.query()
                        }
                    })
                    .catch(function (error) {// 请求失败处理
                        console.log(error);
                    });

            },
            qingjia:function(){ // 全写，更能看清是json结构
                location.href="leave2.html"
            },
            qingjia_vue:function(){ // 全写，更能看清是json结构
                location.href="add.html"
            },
            query:function(){
                console.log("点击查询按钮",this.applicant)

                let params = new URLSearchParams();
                params.append("applicant", this.applicant);
                params.append("pageNum", this.pageNum); // 使用的是上面data定义的变量
                params.append("pageSize", this.pageSize);

                var that = this
                axios.post('query', params)
                    .then(function (res) {
                        console.log(res.data);
                        // 在 axios 中，要访问 vue的leaves
                        // 在 axios 中，获取不到 vue对象，为了解决这个问题，就有了 var that = this
                        // 为什么 不这么写：  this.leaves，因为  在 axios块中，this表示axios
                        that.leaves=res.data.data.list
                        that.total=res.data.data.total // 总共记录数
                        that.pages=res.data.data.pages // 总共页数
                        that.hasNextPage=res.data.data.hasNextPage // 是否有下一页
                        that.hasPreviousPage=res.data.data.hasPreviousPage // 是否有上一页
                        that.navigatepageNums=res.data.data.navigatepageNums
                    })
                    .catch(function (error) {// 请求失败处理
                        console.log(error);
                    });

            },
            showById:function(id){
                console.log("id:",id)
                //通过url传参数
                location.href="detail.html?id="+id
            },
            pre:function(){
                console.log("点击上一页按钮")
                this.pageNum --
                this.query()
            },
            next:function () {
                console.log("点击下一页按钮")
                this.pageNum ++
                this.query()

            },
            jump:function (pageNum) { // pageNum表示要跳转的页数
                this.pageNum = pageNum
                this.query()
            },
            search:function(){
                this.pageNum=1 // 查询时，需要将页数置为1
                this.query()
            }
        },
        mounted:function(){ // vue挂载完成后，发送ajax请求
            this.query() // 挂载vue之后，显示数据之前，调用 query()
        }
    })
</script>

</body>
</html>

原文出处：/show_1IX2q4Qdahzo.html