一整套獲取數據，增刪改查

• html

<div id="app">
    <form @submit.prevent="saveData()">
        <label>姓名：
            <input type="text" placeholder="姓名" v-model="form.name">
        </label>
        <label>手機號：
            <input type="text" placeholder="手機號" v-model="form.phone">
        </label>
        <button>保存</button>
    </form>
    <table>
        <thead>
            <tr>
                <th>標號</th>
                <th>姓名</th>
                <th>手機號</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in list">
                <td>
                    <span v-text="item.id"></span>
                </td>
                <td>
                    <span v-text="item.name"></span>
                </td>
                <td>
                    <span v-text="item.phone"></span>
                </td>
                <td>
                    <button @click="deleteData(item.id)">刪除{{item.id}}</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

• js

<script>
    window.onload = function () {
        currentPage = parseInt(getQueryString('page')) > 0 ? parseInt(getQueryString('page')) : 1;
        new Vue({
            el: '#app',
            data: {
                // 初始化數據
                list: [],
                // 表單數據
                form: {},
            },
            computed: {},
            created: function () {
                // 創建實例之后，編譯數據之前
                this.getData();
            },
            methods: {
                /**
                 * 獲取初始化數據
                 */
                getData: function () {
                    this.$http.get('/api/index/readList', {
                        params: {
                            page: currentPage
                        }
                    }).then(function (res) {
                        // 填充數據
                        this.list = res.body.data;
                        console.log(this.list);
                    }, function (err) {
                        console.log(err.body);
                    });
                },
                /*
                 * 保存數據
                 */
                saveData: function () {
                    this.$http.post('/api/index/save',
                        this.form, {
                            eumlateJSON: true
                        }).then(function (res) {
                        if (res.body.result == 'success') {
                            alert('保存成功！');
                        } else {
                            alert('保存失敗！');
                        }
                        // 刷新數據
                        this.getData();
                        // console.log(res);
                    }, function (err) {
                        console.log(err.body);
                    });
                },
                /*
                 * 刪除條目
                 */
                deleteData: function (id) {
                    this.$http.post('/api/index/delete', {
                        id: id
                    }, {
                        eumlateJSON: true
                    }).then(function (res) {
                        if (res.body.result == 'success') {
                            alert(res.body.msg);
                        } else {
                            alert(res.body.msg);
                        }
                        // 刷新數據
                        this.getData();
                        // console.log(res.body);
                    }, function (err) {
                        console.log(err);
                    });
                }
            }
        });
    };
</script>