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">×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>
                
            div>

            
        div>
        
    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();
    }
});