在vue vuecli webpack中使用mockjs模拟后端数据的示例

序

使用mockjs可以提前模拟数据，前提是数据接口和什么样的数据与后端一致。通过mock，可以生成自己想要的数据，从而实现开发过程中前端和后端的分离。

其主要功能是：

基于数据模板生成仿真数据。基于HTML模板生成仿真数据。拦截和模拟ajax请求。语法规范

Mock.js的语法规范包括两部分：

1.数据模板定义2。数据占位符定义(DPD)

数据模板定义规范

数据模板中的每个属性由三部分组成：属性名称、生成规则和属性值；

//属性名//生成规则规则//属性值“name | rule”:值注意：

属性名和生成规则由竖线|分隔。生成规则是可选的。生成规则有七种格式：名称|最小-最大' :值'名称|计数' :值'名称|最小-最大. dmin-dmax' 3360值'名称|最小-最大. dcount' :值'名称|计数的含义。dmin-dmax' :Value '名称|计数。dcount“: value”名称| step“: value”生成规则取决于属性值的类型。属性值可以包含@占位符。属性值还指定了初始值和最终值的类型。例1:

mock . mock({ ' number 1 | 1-100.1-10 ' : 1，' number2|123.1-10': 1，' number3|123.3': 1，' number 4 | 123.10 ' : 1.123 })/={ ' number 1 ' : 12.92，Number2' : 123.51，' Number3 ' :用于生成自定义格式的字符串：

mock . mock({ ' regex P1 ' :/[a-z][a-z][0-9]/，' regexp2' :/\ w \ w \ s \ d \ d/，' regexp3' 3360)

//字符串表示属性名//3表示下列属性值的重复次数Mock.mock({ 'string|3': ''})结果：

//星星数为3{ 'string': ''}

例4:

//num为属性名//生成一个大于等于1且小于等于100的整数，属性值100仅用于确定类型mock . mock({ ' num | 1-100 ' : 100 })结果：

{ 'number': 8}

DPD数据占位符定义规范

占位符仅占据属性值字符串中的位置，不会出现在最终属性值中。

占位符的格式是：

@ placeholder @ placeholder(参数[，参数])

注意：

使用@将以下字符串标识为占位符。占位符指的是Mock中的方法。通过模拟随机扩展自定义占位符。Random.extend()。占位符也可以引用数据模板中的属性。占位符优先考虑数据模板中的属性。占位符支持相对和绝对路径。mock . mock({ name : { FIRST : ' @ FIRST '，middle: '@FIRST '，last: '@LAST '，Full : ' @ FIRST @ middle @ LAST ' })/={ ' name ' : { ' FIRST ' : ' Charles '，' middle' :' Brenda '，' last' 3360' Lopez '，' full ' :

1.首先，介绍mockjs和jquery(这里，用jq封装的ajax发送请求)

脚本类型=' text/JavaScript ' src=' http : js/jquery-1 . 11 . 3 . min . js '/script script src=' http:3358mockjs.com/dist/mock.js'/script2.使用mock生成数据模板

//这里的第一个参数是ajax请求的url，被mock拦截。//这里的第二个参数是模板数据模板，mock将返回模板生成的数据mock . mock(' http://API . cn '，{'name' 3360' @ name '，' age | 1-100' 33366) 3.ajax发送请求和结果

$.ajax({ url: 'http://api.cn '，dataType: 'json'})。done(函数(数据、状态、xhr){ console . log(JSON . stringify(数据))；//{ '姓名' : '马克李'，'年龄' :4，'城市' : '辽阳市' } })；在vuecli中使用mockjs

先安装

我的项目src下npm install mockjs的结构如下：

我在脚本中创建了一个新的mockdata.js

内容如下：

从“莫克js”导入Mockconst数据=Mock.mock({ //属性目录的值是一个数组，其中含有一到10 个元素foods | 10-50 ' : [{ ' name ' : ' @ ctitle(2，10)'，' img': '@image('600x600 '，#b7ef7c)'，' brief': '@csentence(1，50)'，' price|0-20.0-2': 1，' num':' minusFlag ' : true，' time ' :属性编号是一个自增数，起始值为1,每次增1 'name': '@ctitle(2，10)'，' img': '@image('600x600 '，#b7ef7c)'，' brief': '@csentence(1，50)'，' price|0-100.0-2': 1，' num':' minusFlag ' : true，' time': '@time '，' peisongfei | 0导出默认{数据}接下来，在需要用到的模拟的数据的某视频剪辑软件组件页面中，这样写

从" @/scripts/mockdata.js "导入模拟数据引用数据，在你方法里面直接引用刚刚的模拟数据即可。例如：

新承诺(解决，拒绝)={那个。食物=模拟数据。数据。食物；//直接点出你生成的假数据对象即可那个。食物很滑。食物。长度；}).catch(err={ console.log(err) })参考

官网地址：https://github。com/nuy soft/Mock/wiki

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。