本文目录一览：
- 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"}