vue中使用mockjs,mockjs怎么生成数据
本文主要介绍Vue使用mockjs生成仿真数据的案例的详细说明。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。
目录
在项目中安装mockjs在Vue项目中使用mockjs的基本流程Mock语法规范数据模板定义(DTD)数据占位符定义(DPD)Mock.mock()Mock。随机()
在项目中安装mockjs
在项目目录中执行以下安装命令
npm安装模拟-保存
在Vue项目中使用mockjs的基本流程
安装完成后，在项目的src/utils目录下创建一个新的mock.js(可以定义自己的目录和文件名)来生成模拟数据。
//引入mockjs
const Mock=require(mockjs )
//生成模拟数据
常量测试=function() {
return Mock.mock({
//属性列表的值是包含1到10个元素的数组。
列表1-10: [{
//属性id是一个自增数，起始值为1，每次增加1。
id 1: 1，
//通过占位符生成随机数据
姓名: @姓名，
年龄: @natural(18，100)，
电子邮件: @email
}]
});
}
//映射访问的url
//这意味着当Ajax请求/mock/test路径时，测试函数将被映射并执行。
Mock.mock(/mock/test ，test)
在项目src/api目录下，创建一个新的MockSrv.js来响应Ajax请求。
从“axios”导入axios
从“@/utils/mock”导入模拟
导出默认值{
testMock() {
返回axios.get(/mock/test )
}
}
请求组件中模拟生成的模拟数据。
脚本
从“@/api/MockSrv”导入MockSrv
导出默认值{
名称：“应用程序”，
已安装(){
MockSrv.testMock()。然后(函数(响应){
console.log(Mock:，resp . data)；
});
}
}
/脚本
执行结果
Mock语法规范
数据模板定义规范（Data Template Definition，DTD）
模板中的每个属性由三部分组成：属性名称、生成规则和属性值：
//属性名name
//生成规则rule
//属性值value
名称规则:值
数据占位符定义规范（Data Placeholder Definition，DPD）
占位符只在属性值字符串中占据一个位置，不会出现在最终的属性值中。
占位符的格式是：
@占位符
@ placeholder(参数[，参数])
Mock.mock({
名称：{
FIRST:“@ FIRST”，
中间： @FIRST ，
LAST:“@ LAST”，
完整： @first @middle @last
}
})
Mock.mock()
根据数据模板生成仿真数据
Mock.mock(rurl？rtype？模板函数(选项))
Rurl可选，表示要拦截的url，可以是URL字符串，也可以是常规URL。
Rtype是可选的，表示要拦截的Ajax请求的类型。例如获取、发布、上传、删除等。
Template是可选的，表示数据模板，可以是对象或字符串。
Function(options)是可选的，表示用于生成响应数据的函数。
Options指的是这个请求的Ajax选项集，包含三个属性：url、type和body。
Mock.Random()
嘲笑。Random是一个用来生成各种随机数据的工具类。
嘲弄的方法。Random在数据模板中称为“占位符”，其书写格式为@ placeholder (parameter [，parameter])。
var Random=Mock。随意
Random.email()
//=n.clark@miller.io
mock . mock(@ email)
//=y.lee@lewis.org
Mock.mock( { email: @email })
//={电子邮件： v.lewis@hall.gov }
模拟中的方法。随机与数据模板的@占位符一一对应。如果需要，您还可以扩展Mock的方法。Random然后通过@ extension方法在数据模板中引用它。
关于在Vue中使用mockjs生成仿真数据的案例的详细说明，本文到此为止。关于使用mockjs在Vue中生成模拟数据的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。