【基础】一整套分页获取数据，整删改查

一整套获取数据，增删改查

• 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>