您的位置:首页 > Web前端 > Vue.js

带你轻松掌握mockjs,结合vue-cli高效开发企业项目

2020-06-28 05:03 267 查看

为什么使用mockJs(任何框架都可使用,不仅限于vue)
在工作开发中,如果后端接口还未开发完成,难道我们就只能写静态页面了吗?所以前端为了不影响工作效率,我们自己手动模拟后端接口返回随机数据。

采用json数据模拟,生成数据比较繁琐,也比较有局限性,没办法达到增删改查
采用mockJs进行模拟数据,可以模拟各种场景(get、post)生成接口,并且随机生成所需数据,还可以对数据进行增删改查

使用mockjs

1.首先我们通过vue-cli搭建基本项目
2.在项目中安装mock

npm i mockjs

3.新建mock.js在项目中引入mock文件

import Mock from "mockjs"

4.将创建的mock.js在main.js中导入这样就能使用mockjs了

mock语法

1.生成指定次数的字符串

import Mock from "mockjs"const data = Mock.mock({
"string|4":"哎呦"//这样打印会生成四个哎呦如果要指定范围把4改成几到几即可
})

生成文本

const data=Mock.mock({
s:"@cword"//生成一个随机字符串
str:"@cword(1)"//生成一个指定长度的字符串
string:"@cword(1,15)"//生成一个指定范围的字符串
})

生成标题和句子

const data=Mock.mock({
title:"@ctitle",
sentence:"@csentence"
//如果要指定长度和范围可按生成文本的操作即可
})

生成段落

const data = Mock.mock({
content: '@cparagraph()'
})

生成数字

const data = Mock.mock({
"number|80": 1,//生成指定数字
"number|1-999": 1//生成范围内的数字
})

生成增量id

const data = Mock.mock({
id: '@increment()'
})

随机生成姓名-地址-身份证号

const data = Mock.mock({
name: '@cname()',
idCard: '@id()',
address: '@city(true)'
})

随机生成图片

const data = Mock.mock({
image_url: '@image("300x250","#ff0000","#fff","gif","坤坤")'
})
  • 参数1:图片大小

    [
    '300x250', '250x250', '240x400', '336x280',
    '180x150', '720x300', '468x60', '234x60',
    '88x31', '120x90', '120x60', '120x240',
    '125x125', '728x90', '160x600', '120x600',
    '300x600'
    ]
  • 参数2:图片背景色

  • 参数3:图片前景色

  • 参数4:图片格式

  • 参数5:图片文字

生成时间

const data = Mock.mock({
date: '@date(yyyy-MM-dd hh:mm:ss)'
})

生成数组

const data = Mock.mock({
'list|50-99':[
{
name: '@cname()',
address: '@city(true)',
id: '@increment()'
}
]
//数组范围可以自己改
})

mock拦截请求

定义get请求

Mock.mock('/api/get/news','get',()=>{
return {
status: 200,
message: '获取新闻列表数据成功'
}
})

定义post请求

Mock.mock('/api/post/news','post',()=>{
return {
status: 200,
message: '添加新闻列表数据成功'
}
})

以上就是mockjs的基本语法,不明白的可以私信我,能带你详细解答

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐