VUE+axios渲染数据

Vue

1 Vue ajax渲染数据

查询所有，按ID查询，修改实例

CSS

[v-cloak] {
    display: none;
}

HTML

<div id="app">
    <tr v-for="u in userList" v-cloak>
        <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>
    <!--模态窗口-->
    <div class="tab-pane" id="tab-model">
        <div id="myModal" class="modal modal-primary" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">用户信息</h4>
                    </div>
                    <div class="modal-body">

                        <div class="box-body">
                            <div class="form-horizontal">


                                <div class="form-group">
                                    <label class="col-sm-2 control-label">用户名:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control"
                                               v-model="user.username">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">密码:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control"
                                               v-model="user.password">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">性别:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control"
                                               v-model="user.sex">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">年龄:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control"
                                               v-model="user.age">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">邮箱:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control"
                                               v-model="user.email">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-outline" data-dismiss="modal"
                                @click="update">修改
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>

            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
    <!--模态窗口/-->
</div> 

JS

var vm = new Vue({
    el: app,
    data: {
        user: {
            id: "",
            username: "",
            password: "",
            email: "",
            age: "",
            sex: ""
        },
        userList: []
    }, methods: {
        findAll: function () {
            axios.get("/vuedemo/user/findAll.do")
                .then(function (response) {
                    vm.userList = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                })
        }, findById: function (userId) {
            axios.get('/vuedemo/user/findUserById.do',
                {
                    params: {
                        id: userId
                    }
                })
                .then(function (response) {
                    vm.user = response.data;
                    $("#myModal").modal("show");
                })
                .catch(function (error) {
                    console.log(error);
                });
        }, update: function (user) {
            axios.post("/vuedemo/user/updateUser.do", vm.user)
                .then(function (response) {
                    vm.findAll();
                })
                .catch(function (error) {
                    console.log(error);
                })
        }
    },
    created: function () {//当页面加载时触发查询所有方法
        this.findAll();
    }
});