Mockjs小而美的Mock数据神器

Mockjs

先放上官方地址和文档地址

mockjs

mockjs文档

正如官网介绍，它是个数据类型丰富，用法简单，方便扩展的工具。

能够让我们前端开发人员很方便使用它mock数据。

简单例子

<script src="http://mockjs.com/dist/mock.js"></script>
<script>
    
	var data = Mock.mock({
         // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
         'list|1-10': [{
             // 属性 id 是一个自增数，起始值为 1，每次增 1
             'id|+1': 1
         }]
    })
    
    console.log(JSON.stringify(data, null, 2))
    // 这里输出 1 - 10 随机数量数组数据
    // eg：
    /*
    {
   		list: [
            {
                id:1	
            },
            {
                id:2	
            },
            {
                id:3	
            },
    	]
    }
    */
</script>

使用 random

<script src="http://mockjs.com/dist/mock.js"></script>
<script>
    const random = Mock.Random
    const friends = ["zgz","zgz1","zgz2"]
    const data2 = {
      email: random.email(),
      name: random.cname(),
      // 宽高，背景颜色，字体颜色，图片格式，文字
      iimage: random.image('200x100', '#894FC4', '#FFF', 'debp', 'Mock.js'),
      // 和pick意思一样，在friends里选择一项
      firend: random.pick(friends),
      city: random.city(),
      url: random.url()
    }

    // 输出结果
    console.log(JSON.stringify(data2, null, 2))
</script>

用mock模拟get请求，用axios发送请求

<buttom type="button" id="app">button</buttom>
<script src="http://mockjs.com/dist/mock.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script>
    var obj = {
      aa:'11',
      bb:'22',
      cc:'33',
      dd:'44'
    }
    Mock.mock('http://api.yourdomain.com/getlist/',"get",{
      'user|3-10':[
        {
          "uid|+1":1,
          name: '@cname',
          "age|18-28":0,
          birthday: '@date("yyyy-MM-dd")',
          city: '@city',
          "fromObj|2": obj
        }
      ]
    })
    document.querySelector('#app').onclick = function(){
      axios.get('http://api.yourdomain.com/getlist/').then(res=>{
        // 查看输出
        console.log(res)
      }).catch(e=>{
        console.log(e)
      })
    }
  </script>

vue项目使用：

// /mock/index.js文件(mock的总引用文件)
const Mock = require('mockjs')
const mocks = require('./mocks')
/* mocks文件：
	// ....
    module.exports = [
        {
            url:'xxx/'
            type: 'get/post...',
            response:()=>{
                return {
                  code: 200,
                  data: {
                    // 这里的list可以用第一个例子的数据或者自己再定义
                    total: list.length,
                    list: list
                  },
                  status: true
                }
            }
        },
        {
			...do something get / post
        },
        ...
    ]
*/
const mocks = [
   ...mocks
]

function mockXHR() {
 for (const i of mocks) {
   // 和上面模拟get请求类似的用法，可以参考官方文档
   Mock.mock(new RegExp(i.url), i.type || 'get', i.response)
 }
}

module.exports = {
 mocks,
 mockXHR
}

// main.js (引入并初始化mock接口)
const { mockXHR } = require('./mock')
mockXHR()

// getCourseList 发送 ajax 请求
import { getCourseList } from '@/api/course'
getCourseList().then(res => {
    console.log(res.list)
});

结束

有什么错误或者不足希望大家指出，谢谢观看。