mock简单使用：vue简单使用mock模拟后台数据

使用

1、新建mock.js

import Mock from 'mockjs'
// 模拟数据列表
var arr = [];
for (let i = 0; i < 10; i++) {
    let newArticleObject = {
        name: '小明',
        content: '内容',
        id: i
    }
    arr.push(newArticleObject); //将模拟的数据放到数组中
}

// 数据的删除操作
let list = function (options) {
    // console.log(options.type);
    let rtype = options.type.toLowerCase(); //获取请求的类型并转换为小写
    switch (rtype) {
        case 'get':
            break;
        case 'post':
            let id = parseInt(JSON.parse(options.body).params.id); // 获取请求的id，将options.body转换为JSON对象
            arr = arr.filter(function (val) {
                return val.id != id; // 过滤掉前台传过来的id对应的相应数据，并重新返回
            });
            break;
        default:
            break;
    }
    return {
        data: arr
    }
}
Mock.mock('/list', /get|post/i, list);

// 数据的添加操作
let listAdd = function (options) {
    //  console.log("传过来的数据"+JSON.parse(options.body).params.obj);
    let obj = JSON.parse(options.body).params.obj;
    // console.log("数据获取"+ obj);
    arr = arr.concat(obj); // 将前台返回来的数据，拼接到数组中。
    return {
        data: arr
    }
}
Mock.mock('/listAdd', /get|post/i, listAdd);

// 数据的修改操作
let listUpdate = function (options) {
    let obj = JSON.parse(options.body).params.obj;
    // console.log(JSON.parse(options.body).params);
    // let id = parseInt(JSON.parse(options.body).params.obj.id);
    arr = arr.map(val => { // 将需要替换的数据替换掉
        // console.log(val)
        return val.id == obj.id ? obj : val;
    });
    return {
        data: arr
    }
}
Mock.mock('/listUpdate', /get|post/i, listUpdate);

2、新建vue文件

<template>
    <div>
        <div class="add">
            <input type="number" v-model="obj.id">
            <input type="text" v-model="obj.name">
            <input type="text" v-model="obj.content">
            <button @click="addList">添加</button>
            <button @click="updateList">修改</button>
        </div>
        <ul>
            <li v-for="item in list">{{item.id}}:{{item.name}}:{{item.content}}--------
                <button @click="deleteList(item.id)">删除</button>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                obj: {
                    //将添加的数据存到obj对象中
                    id: 0,
                    name: "",
                    content: ""
                }
            };
        },
        created() {
            this.getData();
        },
        methods: {
            // 查询列表数据
            getData() {
                this.$axios.get("/list").then(res => {
                    this.list = res.data.data;
                });
            },

            // 删除列表数据
            deleteList(id) {
                this.$axios
                    .post("/list", {
                        params: {
                            id: id
                        }
                    })
                    .then(res => {
                        this.list = res.data.data;
                    });
            },

            // 增加列表数据
            addList() {
                // console.log("****"+this.obj);
                this.$axios
                    .post("/listAdd", {
                        params: {
                            obj: this.obj
                        }
                    })
                    .then(res => {
                        // console.log("请求成功"+res.data.data);
                        this.list = res.data.data;
                    });
            },

            // 修改列表数据
            updateList() {
                var that = this;
                // console.log(this.obj)
                this.$axios
                    .post("/listUpdate", {
                        params: {
                            obj: this.obj
                        }
                    })
                    .then(function (res) {
                        // console.log("请求的数据"+res.data.data);
                        that.list = res.data.data;
                    });
            }
        }
    };

</script>

<style>
    * {
        padding: 0;
        margin: 0;
    }

    li {
        list-style: none;
        padding: 10px;
        border: 1px solid rgba(0, 0, 0, 0.2);
    }

</style>

效果