操作步骤
1) 安装mockjs和axios:
2)创建mock.js文件(以与main.js同级为例子)
3)main.js中引用mock.js
4)页面中发送axios请求,获取数据
在做前后分离的项目时候,比如制作VUE项目,很多时候后端没有提供接口,前端人员可以自己通过mock来造一个接口,返回数据
操作步骤
1) 安装mockjs和axios:
npm install mockjs -S
npm install axios -S (用于页面调用接口数据)
2)创建 mock.js 文件(以与main.js同级为例子)
var Mock = require(‘mockjs’)
Mock.mock(“/getNewsList”, () => {
return [1,12,3,5,4,45,“nihao”];
})
3)main.js 中引用 mock.js
require(“./mock.js”)
or
import “./mock.js”
4)页面中发送 axios 请求,获取数据
import axios from “axios”
export default {
mounted() {
axios.get(“/getNewsList”).then(res => {
console.log(res)
})
}
}
mock/index.js 代码
//mock/index.js
import Mock from 'mockjs' //引入mockjs,npm已安装
import { Random,toJSONSchema } from 'mockjs' // 引入random对象,随机生成数据的对象,(与占位符@一样)
Mock.setup({
timeout:500 //设置请求延时时间
})
const produceData = function (opt) {
console.log("opt",opt);
let articles = [];
for(let i=0;i<10;i++){
let newArticleObject = {
title:Random.csentence(5,30),
thumbnail_pic_s:Random.dataImage('100x50','zjcopy.com'),
date:Random.date()+''+Random.time(),
email:Random.email(),
name:Random.cname()
}
articles.push(newArticleObject)
}
return {
data:articles
}
}
Mock.mock('/name',/post|get/i,produceData)//当post 或者get 请求到news路由时MOCK会拦截请求并返回
home.vue代码
<template>
<div class="home">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="email"
label="地址">
</el-table-column>
<el-table-column
prop="title"
label="标题">
</el-table-column>
<el-table-column
prop="title"
label="图片">
<template slot-scope="scope">
<el-image :src="scope.row.thumbnail_pic_s"></el-image>
</template>
</el-table-column>
</el-table>
</template>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
return{
tableData:[],
}
},
mounted(){
this.getdata()
},
methods:{
getdata(){
let url="/name" //调用Mock接口地址
this.$request(url, {}, "GET") //使用的是封装的axios方法
.then((res) => {
this.tableData=res.data.data
console.log(this.tableData)
})
},
}
}
</script>
项目示例地址:
https://github.com/dajianshi/vue-mock-demo链接:
=======================================
在做前端项目时,如果没有测试数据,可以通过mock来生成模拟数据。
Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
Mock.mock( template )
根据数据模板生成模拟数据。
Mock.mock( rurl, template )
记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
Mock.mock( rurl, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
参数如下:
rurl
可选。
表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、‘/domian/list.json’。
rtype
可选。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template
可选。
表示数据模板,可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、‘@EMAIL’。
function(options)
可选。
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性,参见 XMLHttpRequest 规范。
REF
=======================================
mock方法里面一些参数的含义
Mock.mock( rurl?, rtype?, template|function( options ) )
rurl : url 表示要拦截的接口,可以是绝对地址或者正则表达式
rtype:表示请求类型 get / post 等等
template|function( options ) :处理的函数
=======================================
一、mock解决的问题
开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据太长了,将数据写在js文件里,完成后挨个改url。某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。特殊的格式,例如IP,随机数,图片,地址,需要去收集
二、mock优点
1、前后端分离
让前端工程师独立于后端进行开发。
2、增加单元测试的真实性
通过随机数据,模拟各种场景。
3、开发无侵入
不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。
4、用法简单
符合直觉的接口。
5、数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6、方便扩展
支持支持扩展更多数据类型,支持自定义函数和正则。
7、在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。
三、mock的基本使用
1、安装mockJS
cnpm install mockjs -S
2、使用mockJS(mock/index.js)
import Mock from "mock";
3、官方文档
https://github.com/nuysoft/Mock/wiki/Syntax-Specification
4、Mock.mock
Mock.mock([rurl],[rtype],[template|function(options)])
这里的参数都是可选:
rurl(可选)。
表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /shoopList
rtype(可选)。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template(可选)。
表示数据模板,可以是对象或字符串。例如 { ‘data|1-10’:[{}] }
function(options)(可选)。
表示用于生成响应数据的函数。
options:指向本次请求的 Ajax 选项集
=======================================
=======================================