亲宝软件园·资讯

展开

Vue之使用mockjs生成模拟数据 Vue之使用mockjs生成模拟数据案例详解

般若Neo 人气:0
想了解Vue之使用mockjs生成模拟数据案例详解的相关内容吗,般若Neo在本文为您仔细讲解Vue之使用mockjs生成模拟数据的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue使用mockjs生成模拟数据,vue使用mockjs生成模拟数据详解,下面大家一起来学习吧。

在项目中安装mockjs

在项目目录下执行以下安装命令

npm install mockjs --save

在Vue项目中使用mockjs的基本流程

安装完成后,在项目src/utils目录下新建mock.js(可自行定义所在目录及文件名),用于生成模拟数据。

// 引入mockjs
const Mock = require('mockjs')

// 生成模拟数据
const test = function() {
    return Mock.mock({
        // 属性list的值是一个数组,其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性id是一个自增数,起始值为 1,每次增 1
            'id|+1': 1,
            // 通过占位符生成随机数据
            'name': '@name',
            'age': '@natural(18, 100)',
            'email': '@email'
        }]
    });
}

// 映射访问的url
// 此处表示当Ajax请求/mock/test路径时,会映射执行test函数
Mock.mock('/mock/test', test)

在项目src/api目录下,新建MockSrv.js,用于响应Ajax请求。

import axios from 'axios'
import mock from '@/utils/mock'

export default {
    testMock() {
        return axios.get('/mock/test')
    }
}

在组件中请求Mock生成的模拟数据。

<script>
import MockSrv from '@/api/MockSrv'

export default {
    name: 'App',
    mounted() {
        MockSrv.testMock().then(function(resp) {
            console.log("Mock:", resp.data);
        });
    }
}
</script>

执行结果

在这里插入图片描述

Mock语法规范

数据模板定义规范(Data Template Definition,DTD)

数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

数据占位符定义规范(Data Placeholder Definition,DPD)

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。
占位符 的格式为:

@占位符
@占位符(参数 [, 参数])

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})

Mock.mock()

根据数据模板生成模拟数据
Mock.mock(rurl?, rtype?, template | function(options))

Mock.Random()

Mock.Random 是一个工具类,用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) 。

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

Mock.Random 中的方法与数据模板的 @占位符 一一对应,在需要时还可以为 Mock.Random 扩展方法,然后在数据模板中通过 @扩展方法 引用。

加载全部内容

相关教程
猜你喜欢
用户评论