玩转 Mockjs，前端也能跑的很溜

mockjs作用就是，生成随机模拟数据，拦截 ajax 请求，可以对数据进行增删改查。在生成数据时，我们就需要能够熟练使用 mockjs 的语法。

Mockjs 的语法规范包括两部分：数据模板定义规范和数据占位符定义规范。

数据模板中的每个属性组成有：属性名、生成规则、属性值。

使用语法为：

值得注意的有：

生成规则的格式分别有：

11、属性值是类型 String

变量的重复次数是一个随机值。

直接指定重复次数。

12、属性值是 Number

生成不断累加的数字。

生成一个区间数值。

生成带有小数点的数字。

13、属性值是 Boolean

14、属性值是对象 Object

生成一个指定属性个数的对象。

生成一个属性个数随机的对象。

15、属性值是数组 Array

取数组中某个元素作为结果。

生成新数组。

16、属性值是函数 Function

在数据占位符中，属性值是函数有重要的意义。待会会重点解释。

17、属性值是正则 RegExp

数据占位符只是在属性字符串中占个位置，并不会出现在最终的属性值中。

使用格式：

注意：

创建一个 api 接口，返回一个随机生成的数组：

占位符引用的都是 Mockrandom 内的方法，所以我们可以把上述代码更改为：

此时我们再查阅的时候，就发现生成的数组内，名字都是一模一样的。如果我们想生成不一样的姓名，该如何解决呢？

解决办法：把属性值更改为函数，将函数的返回值作为最终结果。

好了我今天的文章就到此结束了，喜欢我的可以点个关注哦！

 1、安装

    npm install mockjs

2、在src文件下

    创建mock文件夹

        在mock文件夹下创建json文件 并在json文件夹下创建indexjson

        在mock文件下创建mockjs文件

3、在mianjs文件中引用mockjs        

    import "/mock/mockjs";

    mockjs文件中的内容

    ```

    import Mock from 'mockjs'

    Mocksetup({

         timeout: 500 //设置一个延迟时间虚拟服务器响应效果

     })

//格式： Mockmock( url, post/get , 返回的数据)； Mockmock('/getList', 'get', require('/json/indexjson'))

// 通过Mockmock函数模拟post请求

Mockmock('/api/addgoods', 'post', function (option) {

 // 这里的option是请求的相关参数

var $name=JSONparse(optionbody)name;

if($name){

    return Mockmock({

        status: 200,

        message: '提交成功！！！'

    })

}else{

    return Mockmock({

        status: 400,

        message: '未提交参数'

    })

}

})

  ```

indexjson文件中的内容

```

{

   "retcode": "0000",

  "retmsg": "成功",

  "data": [

    {

      "tabId": 1,

      "tabShowName": "推荐",

      "tabName": "recommend"

    },

    {

      "tabId": 2,

      "tabShowName": "7×24",

      "tabName": "7x24"

    },

    {

      "tabId": 3,

      "tabShowName": "观点",

      "tabName": "opinion"

    }

  ]

```    

3、发送请求并获取数据此处用的是axios

    方式一：发送get请求

    ```

    this$axiosget('/getList')then((res)=>{

        consolelog(res)

    })

    ```

    方式二：发送post请求

    ```

      var  data={

        name:"张三"

      }

  this$axiospost("/api/addgoods",data)then(res=>{

        consolelog(res,"MOCK __ POST")

  })

    ```

4、附上官网链接

  >

首先我们搞清啥叫 Mock ，英文翻译 Mock 是虚假的，虚设的

从技术层面来讲，就是 虚假数据

那怎么解释 Mock 比较好呢，即 生成随机数据，拦截 Ajax 请求 ( 官网 )。

好了，到此简单的应用就实现了( 可能会用到的json5 ），赶紧试试吧~~

以上就是关于玩转 Mockjs，前端也能跑的很溜全部的内容，包括:玩转 Mockjs，前端也能跑的很溜、vue中使用mockjs简单返回数据、包括get,post请求、Vue 中如何使用 Mock.js 模拟数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！