Vue中使用mock来模拟数据

Vue中使用mock来模拟数据

1. 安装

详情点击

npm install mockjs -D

2. 使用

2.1 mock.js

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

我们主要使用它暴露出来的Mock.mock()函数，一级一些随机的语法

• 对于函数的使用，详情点击

Mock.mock( rurl?, rtype?, template|function( options ) )

• rurl需要拦截的url(相当于接口)
• rtype需要拦截的类型（GET,POST等）
• template 生成模拟数据
• function(options) 当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回

2.2 使用步骤

1. 在src/mock/data.json按照路径新建文件，我们首先来设计json数据
   • 外面必须有一个大括号{}然后我们就可以用对象和数组来保存一些数据
   • 不能使用单引号，用双引号

json数据如下

• 需要注意的是我们在年龄的地方使用了使用了一个随机语法
• 属性|范围：默认值 详情点击

{
    "male":["孙悟空","猪八戒","沙和尚",{"name":"唐僧","age|18-100":20}],
    "female":["女儿国国王","蜘蛛精","玉兔精",{"name":"观音菩萨","age|18-100":18}],
    "animal":{
        "家庭犬":["贵宾犬","松狮","柴犬"],
        "玩具犬":["吉娃娃","蝴蝶犬","八哥犬"],
        "工作犬":["哈士奇","藏獒","秋田犬"]
    }
}

2. 在src/mock/新建sever.js,暴露接口，写上如下代码

import Mock from 'mock'
//引入设计的json数据
import Data from './data.json'

//使用Mock创建接口
Mock.mock('/male', Data.male)
//我们还可以添加额外的结构
Mock.mock('/female', { code: 0, data: Data.female })
Mock.mock('/animal', { code: 1, data: Data.animal })
Mock.mock('/animal/gongzuoquan',Data.animal.工作犬)

3. 在main.js中运行

import './mock/server'

4. 我们新建一个文件MockTest.vue,写上如下代码

<template>
    <div>
        <ul>
            <li>{{male}}</li>
            <li>{{female}}</li>
            <li>{{animal}}</li>
            <li>{{gongzuoquan}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            male: [],
            female: [],
            animal: {},
            gongzuoquan: []
        };
    },
    methods: {
    //定义发送请求的函数
        getMale() {
            return this.$axios("/male");
        },
        getFemale() {
            return this.$axios("/female");
        },
        getAnimal() {
            return this.$axios.get("/animal");
        },
        getGongzuoquan() {
            return this.$axios.get("/animal/gongzuoquan");
        }
    },
    created() {
        this.$axios
            .all([
                this.getMale(),
                this.getFemale(),
                this.getAnimal(),
                this.getGongzuoquan()
            ])
            .then(
                this.$axios.spread(
                    (maleData, femaleData, animalData, gongzuoquanData) => {
                        /* 一定注意axios默认返回的结构 */
                        this.male = maleData.data;
                        this.female = femaleData.data.data;
                        this.animal = animalData.data.data;
                        this.gongzuoquan = gongzuoquanData.data;
                    }
                )
            );
    }
};
</script>

• 我们用了axios.all()与axios.spread()来一次性发送请求得到数据
  我们发现已经能过去到数据了
  
• 然后我们刷新网页，就会发现随机数据的改变