</tbody>
</table>

<script src="./jquery-1.12.4.js"></script>
<script>
     let url = "http://timemeetyou.com:8889/api/private/v1/";
    /* 登录功能 */
    $('#login').click(function () {
        $.post(url+'login',{username:'admin',password:'123456'},function(res){
            localStorage.token = res.data.token;
            $('#login').slideUp('slow')
            /* 得到token之后调用获取用户列表数据 */
            getUsers();
        })
    })
    /* 获取用户列表数据 */
    function getUsers(){
        $.ajax({
            url:url+'users',
            headers:{
                Authorization:localStorage.token
            },
            data:{
                pagenum:1,
                pagesize:50
            },
            success:function(res){
                /* 插入最新的数据之前 
                先清空之前的数据 */
                $('tbody').html('');
                for(var i in res.data.users){
                    $('tbody').append(
                        `
                            <tr>
                                <td>${res.data.users[i].username}</td>
                                <td>${res.data.users[i].mobile}</td>
                                <td>${res.data.users[i].email}</td>
                                <td><button onclick="del(${res.data.users[i].id})">删除</button></td>
                            </tr>
                        `
                    )
                }
                
            }
        })
    }
    $('#query').click(function(){
        $.ajax({
            url:url+'users/'+$('#userid').val(),
            headers:{
                Authorization:localStorage.token
            },
            success:function(res){
                /* 出现提示 */
                $('#msg').html(res.meta.msg)
                /* 过三秒 提示消失 */
                setTimeout(function(){
                    $('#msg').html('')
                },3000)
                /* 更新最新的表格信息 */
                // getUsers();
                $('tbody').html('');
                $('tbody').append(
                    `
                        <tr>
                            <td>${res.data.username}</td>
                            <td>${res.data.mobile}</td>
                            <td>${res.data.email}</td>
                            <td><button onclick="del(${res.data.id})">删除</button></td>
                        </tr>
                    `
                )
               
            }
        })
    })
    function del(id){
        console.log(id);
        $.ajax({
            url:url+'users/'+id,
            method:'delete',
            headers:{
                Authorization:localStorage.token
            },
            success:function(res){
                /* 出现提示 */
                $('#msg').html(res.meta.msg)
                /* 过三秒 提示消失 */
                setTimeout(function(){
                    $('#msg').html('')
                },3000)
                /* 更新最新的表格信息 */
                getUsers();
            }
        })
    }

    $('#submit').click(function(){
        $.ajax({
            url:url+'users',
            method:"post",
            headers:{
                Authorization:localStorage.token
            },
            data:{
                username:$('#username').val(),
                password:$('#password').val(),
                email:$('#email').val(),
                mobile:$('#mobile').val(),
            },
            success:function(res){
                /* 出现提示 */
                $('#msg').html(res.meta.msg)
                /* 过三秒 提示消失 */
                setTimeout(function(){
                    $('#msg').html('')
                },3000)
                $('#username').val('')
                $('#password').val('')
                $('#email').val('')
                $('#mobile').val('')
                /* 更新最新的表格信息 */
                getUsers();
            }
        })
    })
</script>