mock.js的使用

mockjs是一个方便前端工程师独立于后端开发的插件，能够在不修改既有代码的情况下，拦截ajax/axios请求，返回模拟的响应数据，支持生成多种类型的随机数据。也就是说它能够在后端接口开发落后于前端页面开发时提供假数据供我们测试页面的效果。

官网 Mock.js

项目安装并引入mockjs

npm install mockjs

项目中新建mock.js文件

//引入mock模块
import Mock from 'mockjs'

将mock文件在main.js中导入

import Vue from 'vue'
import App FROM './App.vue'
import './util/mock.js'Vue.config.productionTip = falsenew Vue({render:h => h(App),
}).$mount('#app')

mock语法

生成指定次数或指定范围次数字符串

import Mock from 'mockjs'
const data = Mock.mock({
"string|4":"哈哈" //生成4个哈哈字符串
//"string|1-8":"哈哈"  随机生成1-8个哈哈字符串
})

生成指定长度和范围的随机字符串

const data = Mock.mock({s:"@cword"//随机生成字符串string:"@cword(5)"//生成指定长度字符串str :"@cword(10,15)"//随机生成10-15长度字符串
})

生成指定长度或指定范围的的标题和句子

const data = Mock.mock({//title:"@ctitle(8)"//sentence:"@csentence(50)"title:"@ctitle(5,8)"sentence:"@csentence(50,100)"
})

生成段落

const data = Mock.mock({//content:"@cparagraph()",content: '@cparagraph(5,15)'//随机生成 5-15行段落
})

生成指定数字和生成范围数字

const data = Mock.mock({//"number|80":1 //生成数字80"number|1-99":1 //生成1-99的随机数字
})

生成自增id

const data = Mock.mock({//id:"@increment"//随机生成id数值id:"@increment(1)" //生成id起始值为1 且自增的id
})

随机生成姓名-地址-身份证

const data = Mock.mock({name:"@cname()"idCard:"@id()"address:"@city(true)"
})

随机生成图片

const data = Mock.mock({img_url: "@image('250X250','#FFA07A','#FFBBFF','png','hh')"
})

• 参数1：图片大小

  ['300X250','250X250','240X400','336X280''180X150','720X300','468X60','234X60''388X31','250X250','240X400','120X40''125X125','250X250','240X400','336X280'
  ]

  注意使用大写X 不要用*

• 参数2：图片背景色

• 参数3：图片前景色

• 参数4：图片格式

• 参数5：图片文字

生成时间

const data = Mock.mock({date: "@date('yyyy-MM-dd hh:mm:ss')"
})

生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)

生成数组

• 指定长度：‘date|5’
• 指定范围:'data|5-10'

const data = Mock.mock({
'list|50-99':[{name:'@cname'address:'@city(true)'id:'@increment(1)'}	]
})

mock拦截请求和axios组合使用

定义get请求

Mock.mock('api/get','get',()=>{return{status:200,message:"获取数据成功"}
})

如果axios发送请求携带query

  /api/get/news?id=1$age=18

      axios.get('/api/get/news', {params: {id:this.id,age:this.age}}).then(res => {// console.log(res)})

通过mock回调函数参数 option.url获取

Mock.mock('api/get','get',(option)=>{console.log(option)console.log(option.url)
})

定义getQuery函数获取指定数组的值

// 根据url获取query参数
const getQuery = (url, name) => {const index = url.indexOf('?')if (index !== -1) {const queryStrArr = url.substr(index + 1).split('&')for (let i = 0; i < queryStrArr.length; i++) {const itemArr = queryStrArr[i].split('=')if (itemArr[0] === name) {return itemArr[1]}}}
}

Mock.mock(/\/api\/get\/news/, 'get', (option) => {// 获取传递的参数const pageindex = getQuery(option.url, 'id')// 获取数据后对List进行处理后返回......return {status: 200,message: '获取新闻列表成功',list: List,total: newsList.length}
})

定义post请求

Mock.mock('api/post/news','post',()=>{return{status:200,message:"获取数据成功"}
})

如果axios发送请求携带data数据

      axios.post('/api/add/news', {id:this.id,age;this.age}).then((res) => {// console.log(res)})

通过mock回调函数参数 options.body获取

Mock.mock('/api/add/news', 'post', (options) => {const body = JSON.parse(options.body)// console.log(body);//拿到数据后进行处理......return {status: 200,message: '添加成功'}
})

mock.js的使用

mockjs是一个方便前端工程师独立于后端开发的插件，能够在不修改既有代码的情况下，拦截ajax/axios请求，返回模拟的响应数据，支持生成多种类型的随机数据。也就是说它能够在后端接口开发落后于前端页面开发时提供假数据供我们测试页面的效果。

官网 Mock.js

项目安装并引入mockjs

npm install mockjs

项目中新建mock.js文件

//引入mock模块
import Mock from 'mockjs'

将mock文件在main.js中导入

import Vue from 'vue'
import App FROM './App.vue'
import './util/mock.js'Vue.config.productionTip = falsenew Vue({render:h => h(App),
}).$mount('#app')

mock语法

生成指定次数或指定范围次数字符串

import Mock from 'mockjs'
const data = Mock.mock({
"string|4":"哈哈" //生成4个哈哈字符串
//"string|1-8":"哈哈"  随机生成1-8个哈哈字符串
})

生成指定长度和范围的随机字符串

const data = Mock.mock({s:"@cword"//随机生成字符串string:"@cword(5)"//生成指定长度字符串str :"@cword(10,15)"//随机生成10-15长度字符串
})

生成指定长度或指定范围的的标题和句子

const data = Mock.mock({//title:"@ctitle(8)"//sentence:"@csentence(50)"title:"@ctitle(5,8)"sentence:"@csentence(50,100)"
})

生成段落

const data = Mock.mock({//content:"@cparagraph()",content: '@cparagraph(5,15)'//随机生成 5-15行段落
})

生成指定数字和生成范围数字

const data = Mock.mock({//"number|80":1 //生成数字80"number|1-99":1 //生成1-99的随机数字
})

生成自增id

const data = Mock.mock({//id:"@increment"//随机生成id数值id:"@increment(1)" //生成id起始值为1 且自增的id
})

随机生成姓名-地址-身份证

const data = Mock.mock({name:"@cname()"idCard:"@id()"address:"@city(true)"
})

随机生成图片

const data = Mock.mock({img_url: "@image('250X250','#FFA07A','#FFBBFF','png','hh')"
})

• 参数1：图片大小

  ['300X250','250X250','240X400','336X280''180X150','720X300','468X60','234X60''388X31','250X250','240X400','120X40''125X125','250X250','240X400','336X280'
  ]

  注意使用大写X 不要用*

• 参数2：图片背景色

• 参数3：图片前景色

• 参数4：图片格式

• 参数5：图片文字

生成时间

const data = Mock.mock({date: "@date('yyyy-MM-dd hh:mm:ss')"
})

生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)

生成数组

• 指定长度：‘date|5’
• 指定范围:'data|5-10'

const data = Mock.mock({
'list|50-99':[{name:'@cname'address:'@city(true)'id:'@increment(1)'}	]
})

mock拦截请求和axios组合使用

定义get请求

Mock.mock('api/get','get',()=>{return{status:200,message:"获取数据成功"}
})

如果axios发送请求携带query

  /api/get/news?id=1$age=18

      axios.get('/api/get/news', {params: {id:this.id,age:this.age}}).then(res => {// console.log(res)})

通过mock回调函数参数 option.url获取

Mock.mock('api/get','get',(option)=>{console.log(option)console.log(option.url)
})

定义getQuery函数获取指定数组的值

// 根据url获取query参数
const getQuery = (url, name) => {const index = url.indexOf('?')if (index !== -1) {const queryStrArr = url.substr(index + 1).split('&')for (let i = 0; i < queryStrArr.length; i++) {const itemArr = queryStrArr[i].split('=')if (itemArr[0] === name) {return itemArr[1]}}}
}

Mock.mock(/\/api\/get\/news/, 'get', (option) => {// 获取传递的参数const pageindex = getQuery(option.url, 'id')// 获取数据后对List进行处理后返回......return {status: 200,message: '获取新闻列表成功',list: List,total: newsList.length}
})

定义post请求

Mock.mock('api/post/news','post',()=>{return{status:200,message:"获取数据成功"}
})

如果axios发送请求携带data数据

      axios.post('/api/add/news', {id:this.id,age;this.age}).then((res) => {// console.log(res)})

通过mock回调函数参数 options.body获取

Mock.mock('/api/add/news', 'post', (options) => {const body = JSON.parse(options.body)// console.log(body);//拿到数据后进行处理......return {status: 200,message: '添加成功'}
})