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

• rurl 可选，表示需要拦截的 url，可以是 url 字符串或 url 正则
• rtype 可选，表示需要拦截的 ajax 请求类型。例如 get、post、put、delete 等
• template 可选，表示数据模板，可以是对象或字符串
• function(options) 可选，表示用于生成响应数据的函数
  • options 指向本次请求的 ajax 选项集，含有 url、type 和 body 三个属性

mock.random()

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

var random = mock.random
random.email()
// => "[e-mail]"
mock.mock('@email')
// => "[e-mail]"
mock.mock( { email: '@email' } )
// => { email: "[e-mail]" }

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

到此这篇关于vue之使用mockjs生成模拟数据案例详解的文章就介绍到这了,更多相关vue之使用mockjs生成模拟数据内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！