mockjs的概念与使用

一、为何使用mockjs

1、程序

前端：访问后端接口，展示数据

后端： 后端，主要负责处理业务逻辑，访问数据的数据

数据库：存储数据

     很多公司，后端还没有写好接口，写好接口文档（前端就不需要等待后端实现接口再写代码），前端可以通过mock.js参考接口文档自己先模拟数据写业务代码，等待后端准备好，在用后端接口替换自己写模拟数据，实现前后端同时开发。

二、mock.js的安装

生成随机数据，拦截ajax

安装mock.js

npm i mockjs -D

 mock.js的用法

• 使用 import Mock from ‘mock.js'
• Mock.mock(url,data)

三、mock的用法

• mock（url，data）
• mock（url，method，function（option）
  { 
        r​eturn data
  }）

• url：可以是正则，也可以是字符串
• methods：post，get，put，delete
• option
  • url 请求地址
  • method 请求方法
  • body 请求参数

       1、导入mock.js

• //导入mock
  import Mock from 'mockjs'
  //拦截ajax，生成伪数据，拦截地址“/v5/list”
  

  2、模拟数据

• //导入mock
  import Mock from 'mockjs'
  //拦截ajax，生成伪数据，拦截地址“/v5/list”
  Mock.mock(/\/v5\/list/, {
      name: 'mumu',
      age: 18
  })

  result

• 

   

• 3、post请求

• //post请求成功
  Mock.mock(/\/v5\/item/, "post", {
      code: 0,
      msg: "成功",
      data: [1, 2, 3, 4]
  })
  

  result

• 

   4、参数

• 
  Mock.mock(/\/v5\/jok/, "post", function (option) {
      return {
          code: 0,
          msg: "参数成功",
          data: {
              title: "信息标题",
              content: "内容",
              ...JSON.parse(option.body)
          }
      }
  })

  result

• 

   

• 四、随机

              1、 数字：整数、小数点、递增

              2、 字符串随机：文字中文本标题中文段落星期

              3、布尔值

              4、数组

              5、对象

//随机
Mock.mock(/\/v5\/user/, {
    code: 0,
    msg: "成功",
    "data|10": [
        {
            "id|+1": 1024,
            "name": "@cname",
            "age|1-100": 1,
            "price|25-50.2-5": 1,
            "score|1-5": "♥",
            "title": "@ctitle(8,14)",
            "desciotion": "@cparagraph",
            "isLog|1": true,
            "friend|2-10": ["小红", "小绿", "小蓝"],
            "des|2": { "eye": 1, "hand": 2, "job": "teacher" },
            "tel": /1\d{10}/,
            "email": /[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,
            "canMerry": function () {
                if (this.age > 22) {
                    return true;
                } else {
                    return false;
                }
            },
            "day": "@date('yyyy-MM-dd)",
            "time": "@time('HH:mm:ss')",
            "add": "@country(ture)",
            "avatar": "@dataImage('200x100','小猴')"
        }
    ]
}

result