mockjs可以生成数据，还可以拦截请求。
一、生成随机数据
- 准备
vue-cli脚手架 - 安装
npm i mockjs -D
- 目录结构，在src目录下新建一个mock文件夹，在其下创建一个index.js脚本本届导入mockjs
- 在main.js中使用
import './mock/index'
-
页面信息
mock用法
生成文本字符型
- 生成指定数据，随机生成1-4个指定字符串
const data = Mock.mock({
'string|1-4':'学习' //管道符之间不能有空格
//公式： '键|规则':'值'
})
console.log(data)
- 随机生成不定长度文本 word
import Mock from 'mockjs'
const data = Mock.mock({
'string':'@cword(3,10)' //随机取一个3-10的范围文本
})
console.log(data)
- 随机生成标题 title 和句子 sentence
import Mock from 'mockjs'
const data = Mock.mock({
'title':'@ctitle(3,10)',
'sentence':'@csentence(20,30)'
})
console.log(data)
- @c的意义，生成中文，没有c则生成英文
import Mock from 'mockjs'
const data = Mock.mock({
'title':'@title(3,10)',
'sentence':'@sentence(20,30)'
})
console.log(data)
- 生成段落文本 paragraph
import Mock from 'mockjs'
const data = Mock.mock({
'paragraph':'@cparagraph',
})
console.log(data)
const data1 = Mock.mock({
'paragraph':'@cparagraph(5)',
})
console.log(data1)
句子和段落的区别：一个是逗号，一个是句号。
生成数字number型
- 随机生成1-100范围内的数字
const data = Mock.mock({
'number|1-100':1,
})
console.log(data)
- 生成增量id标识
const data = Mock.mock({
id:'@increment()'
})
console.log(data)
- 随机生成身份证号码、人名、地址信息
const data = Mock.mock({
idCard:'@id()',
name:'@cname()',
address:'@city(true)' //加true显示省级和市级，没有则显示市级
})
console.log(data)
生成图片型
- 随机生成一张指定图片
const data = Mock.mock({
img_url:"@image('25,25','#fff','#e35ef1','png','唐时明月')"
//参数解释：图片宽高、背景颜色、文本颜色、图片类型、文本信息
})
console.log(data)
返回1个url链接，可直接在浏览器打开
生成时间日期型
- 随机生成时间日期
const data = Mock.mock({
date:'@date(yyyy-MM-dd hh:mm:ss)'
})
console.log(data)
生成数组型
- 随机生成指定范围的数组信息
随机生成10-25份信息
const data = Mock.mock({
'list|10-25':[
{ idCard:'@id()',
name:'@cname()',
address:'@city(true)' }
]
})
console.log(data)
二、拦截请求
- 定义拦截get请求
import Mock from 'mockjs'
Mock.mock('/api/news','get',{ // 定义接口和请求方式
status: 200, //状态码
message: 'success'
})
页面发起请求测试看看能不能拦截。
安装axios
npm i axios
清除app.vue的所有内容，重新定义，发起请求。
<template>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
}
},
created(){
axios.get('/api/news')
.then(res => {
console.log(res)
})
}
}
</script>
- 定义拦截post请求
Mock.mock('/api/post/news','post',{
status: 200,
msg: 'post成功'
})
发起post请求
<template>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
}
},
created(){
axios.post('/api/post/news')
.then(res => {
console.log(res)
})
}
}
</script>
模拟案例
传统方式：
import Mock from 'mockjs'
//定义获取新闻列表数据
Mock.mock('/api/get/news', 'get', () => {
return {
status: 200,
message: "获取新闻列表成功",
list: [
{
"id": 1,
"title": "解忧杂货店",
"content": "《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
"img_url": "http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
"add_time": "1984-04-03 11:43:37"
}
],
total: 50
}
}
)
页面发起请求
<template>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
}
},
created(){
axios.get('/api/get/news')
.then(res => {
console.log(res)
})
}
}
</script>
<style>
</style>
mockjs改写后
import Mock from 'mockjs'
const {newsList} = Mock.mock({
'newsList|50-90':[
{
"id": "@increment()",
"title": "@ctitle()",
"content": "@cparagraph(5,15)",
"img_url": "@image('100x100','#FF83FA','#fcfcfc','png','图片信息')",
"add_time": "@date(yyyy-MM-dd hh:mm:ss)"
}
]
})
//定义获取新闻列表数据
Mock.mock('/api/get/news', 'get', () => {
return {
status: 200,
message: "获取新闻列表成功",
list: newsList,
total: newsList.length
}
})
发起请求
created(){
axios.get('/api/get/news')
.then(res => {
console.log(res)
})
}
