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

为什么使用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的基本语法，不明白的可以私信我，能带你详细解答