<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
    <thead>
    <tr>
        <th class="" style="padding-right:0px;">
            <input id="selall" type="checkbox" class="icheckbox_square-blue">
        </th>
        <th class="sorting_asc">ID</th>
        <th class="sorting_desc">用户名</th>
        <th class="sorting_asc sorting_asc_disabled">密码</th>
        <th class="sorting_desc sorting_desc_disabled">性别</th>
        <th class="sorting">年龄</th>
        <th class="text-center sorting">邮箱</th>
        <th class="text-center">操作</th>
    </tr>
    </thead>
    <tbody>

    <tr v-for="u in userList">
        <td><input name="ids" type="checkbox"></td>
        <td>{{u.id}}</td>
        <td>{{u.username}}
        </td>
        <td>{{u.password}}</td>
        <td>{{u.sex}}</td>
        <td>{{u.age}}</td>
        <td class="text-center">{{u.email}}</td>
        <td class="text-center">
            <button type="button" class="btn bg-olive btn-xs">详情</button>
            <button type="button" class="btn bg-olive btn-xs" @click="findById(u.id)">编辑</button>
        </td>
    </tr>

    </tbody>
</table>

<script>
    new Vue({
        el:"#app",
        data:{
            user:{
                id:"",
                username:"",
                password:"",
                email:"",
                age:"",
                sex:""
            },
            userList:[]
        },
        methods:{
            findAll:function(){
                //在当前方法中定义一个变量，表明是vue对象
                var _this = this;
                axios.get('/day01_eesy_vuejsdemo/user/findAll.do')
                    .then(function (response) {
                        _this.userList = response.data;//响应数据给userList赋值
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            findById:function (userid) {
                //在当前方法中定义一个变量，表明是vue对象
                var _this = this;
                axios.get('/day01_eesy_vuejsdemo/user/findById.do',{params:{id:userid}})
                    .then(function (response) {
                        _this.user = response.data;//响应数据给userList赋值
                        $("#myModal").modal("show");
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            update:function (user) {//post请求
                //在当前方法中定义一个变量，表明是vue对象
                var _this = this;
                axios.post('/day01_eesy_vuejsdemo/user/updateUser.do', _this.user)
                    .then(function (response) {
                        _this.findAll();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        created:function() {//当我们页面加载的时候触发请求，查询所有
            this.findAll();
        }
    });
</script>