本文目录一览：

• 1、vue中使用mockjs简单返回数据、包括get,post请求
• 2、mock.js的使用方法
• 3、Mock.js使用
• 4、mock.js 原生ajax多次请求
• 5、mockjs如何拦截jsonp请求
• 6、mock.js与其他有什么区别

vue中使用mockjs简单返回数据、包括get,post请求

 1、安装

    npm install mockjs

2、在src文件下

    创建mock文件夹

        在mock文件夹下创建json文件 并在json文件夹下创建index.json

        在mock文件下创建mock.js文件

3、在mian.js文件中引用mock.js        

    import "./mock/mock.js";

    mock.js文件中的内容

    ```

    import Mock from 'mockjs'

    Mock.setup({

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

     })

//格式： Mock.mock( url, post/get , 返回的数据)； Mock.mock('/getList', 'get', require('./json/index.json'))

// 通过Mock.mock函数模拟post请求

Mock.mock('/api/addgoods', 'post', function (option) {

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

var $name=JSON.parse(option.body).name;

if($name){

    return Mock.mock({

        status: 200,

        message: '提交成功！！！'

    })

}else{

    return Mock.mock({

        status: 400,

        message: '未提交参数'

    })

}

})

  ```

index.json文件中的内容

```

{

   "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.$axios.get('/getList').then((res)={

        console.log(res)

    })

    ```

    方式二：发送post请求

    ```

      var  data={

        name:"张三"

      }

  this.$axios.post("/api/addgoods",data).then(res={

        console.log(res,"MOCK __ POST")

  })

    ```

4、附上官网链接

 

5、目录结构

6、完结?

mock.js的使用方法

在开发过程中，有很多的ajax请求，前后端分离开发你肯定遇到这样的问题，后台给你的接口文档，你需要在本地模拟数据返回，可能你也用到过我之前用的蠢方法，就是新建一个test.json文件，放入接口文档中写的返回示例，这么做有个很大的问题是不够灵活，而且还需要切换url，现在学会使用mock.js拦截ajax请求，更加方便的构造你需要的假数据。

在这里我举的例子是在vue项目中如何使用mock.js。

这里我举例最常用的格式

Mock.mock(url,data);

url用正则写，这样get请求传参时，也能拦截数据了。

不设置延时很有可能遇到坑，这里需要留意，因为真实的请求是需要时间的，mock不设置延时则是马上拿到数据返回，这两个情况不同可能导致在接口联调时出现问题。所以最好要先设置延时请求到数据。

生成规则和示例：

Mock.Random 提供的完整方法（占位符）如下：

Mock.js使用

Mock.js 是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。

可以在src目录下新建mock文件夹，新建index.js文件。在index.js文件中建立虚拟数据。

如果需要使用虚拟数据，就在main.js入口文件中导入mockjs文件。

Mock.setup( settings )： 配置拦截 Ajax 请求时的行为。

Mock.mock( template )： 根据数据模板生成模拟数据。template表示数据模板，可以是对象或字符串。数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值。

'name|rule': value ： 属性名 name、生成规则 rule、属性值 value。属性名 和 生成规则 之间用竖线 | 分隔。

'name|min-max': array： 当属性值是数组 Array。通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

'name|+1': number： 当属性值是数字 Number。属性值自动加 1，初始值为 number。

占位符： 用 @ 来标识其后的字符串是 占位符。占位符 引用的是 Mock.Random 中的方法。

@cname： 随机生成一个常见的中文姓名。

@ctitle( min, max )： 随机生成一句中文标题。默认值为 3 到 7 之间的随机数。

@integer( min, max )： 返回一个随机的整数。min是最小值，max是最大值。

Mock.mock( rurl, rtype, function( options ) )： 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

此时，前台向后台发送请求，会获取到mokejs虚拟数据，而不是真实的后台数据。

mock.js 原生ajax多次请求

1. 检查Mock.mock当中的数据模板定义是否正确。如："number|+1"，Mock.mock('@date')等带有随机数据。

2. 检查数据返回部分是否根据参数不同返回不同的数据。如：pageList=mockList.filter(...)。

mockjs如何拦截jsonp请求

谈下远程字体跨域的问题。

直接了当了说，解决此类问题，最直接的方法就是，就是给被请求的服务器，添加HTTP头响应头，这里提供两种添加HTTP头的方法：

第一种，就是在程序中添加HTTP头：

如： Response.Headers.Add("Access-Control-Allow-Origin", "*");

// JSON

{

'Access-Control-Allow-Origin': '*',

}

// HTML

meta http-equiv="Access-Control-Allow-Origin" content="*"

// PHP

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

添加此段代码的目的很简单，也就是告诉浏览器，这个资源是运行远程所有域名访问的。当然，此处的*也可以替换为指定的域名，出于安全考虑，建议将*替换成指定的域名。

第二种，就是在服务器上，添加HTTP响应头。在这里，我们就以IIS6.0为例：

在被请求的网站上，设置HTTP头，添加“

//在被请求的网站上，设置HTTP头，添加

"Access-Control-Allow-Origin:*" //值为*或指定的域名。

第三种，使用JSONP格式，即在jQuery中ajax请求参数dataType:'JSONP'：

script

$.ajax({

url:";lng=113.93832783228",

type:'GET',

dataType:'JSONP',  // 处理Ajax跨域问题

success: function(data){

$('body').append( "Name: " + data );

}

});

/script

一般完成以上工作，就可以了。网上还有说在被请求服务器根目录下创建:"crossdomain.xml"的文件。内容格式如下：

?xml version="1.0"?

cross-domain-policy

allow-access-from domain="*" /

/cross-domain-policy

网页链接

mock.js与其他有什么区别

相对于其他同类的框架的实现，mock.js超出了我的意料。

基于 数据模板 生成模拟数据。

基于 HTML模板 生成模拟数据。

拦截并模拟 ajax 请求。

是的，mock.js只做上述的几件事，但做的足够出色。

解决的问题

开发时，后端还没完成数据输出，前端只好写静态模拟数据。

数据太长了，将数据写在js文件里，完成后挨个改url。

某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。

想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。

特殊的格式，例如IP,随机数，图片，地址，需要去收集。

超烂的破网速…

…

以上都不再是问题

接下来体验 拦截ajax请求并返回模拟数据。

步骤1 - 安装

安装太简单，跳过

步骤2 - 配置模拟数据

Mock.mock('', {

   'name'   : '[@name](/user/name)()',

   'age|1-100': 100,

   'color'   : '[@color](/user/color)'});

步骤3 - 发送ajax请求(jquery版)

$.ajax({

   url: '',}).done(function(data, status, xhr){

   console.log(

       JSON.stringify(data, null, 4)

   )    })

步骤4 - 查看响应的结果

// 结果1{

   "name": "Elizabeth Hall",

   "age": 91,

   "color": "#0e64ea"}// 结果2{

   "name": "Michael Taylor",

   "age": 61,

   "color": "#081086"}