vue+vuecli+webpack中使用mockjs模拟后端数据的示例
发布时间:2020-12-17 02:45:05 所属栏目:百科 来源:网络整理
导读:前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据。使用mock就可以生成你要的数据了,从而实现开发时前后端分离。 其主要功能是: 基于数据模板生成模拟数据。 基于HTML模板生成模拟数据。 拦截并模拟 ajax 请求。 语法规范 Mock
前言使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据。使用mock就可以生成你要的数据了,从而实现开发时前后端分离。 其主要功能是:
语法规范Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) 数据模板定义规范 DTD数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值: 注意:
例1:
{
"number1": 12.92,"number2": 123.51,"number3": 123.777,"number4": 123.1231091814
}
例2:根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串:
{
"regexp1": "pJ7","regexp2": "F)fp1G","regexp3": "561659409"
}
例3: 结果: //星星数量为3 { "string": "★★★" } 例4: 结果: { "number": 8 } 数据占位符定义规范 DPD占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。 占位符 的格式为: @占位符 @占位符(参数 [,参数]) 注意:
{
"name": {
"first": "Charles","middle": "Brenda","last": "Lopez","full": "Charles Brenda Lopez"
}
}
通过jQuery ajax请求假数据例子1.首先,引入mockjs,引入jquery(此处用jq封装好的ajax发送请求) 相关内容
|