欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

mock模拟增删改查操作

程序员文章站 2022-03-18 17:08:26
...

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>

效果

mock模拟增删改查操作

相关标签: mock vue