mockjs可以生成數(shù)據(jù)，還可以攔截請(qǐng)求。
一、生成隨機(jī)數(shù)據(jù)
- 準(zhǔn)備
vue-cli腳手架 - 安裝
npm i mockjs -D
- 目錄結(jié)構(gòu)，在src目錄下新建一個(gè)mock文件夾，在其下創(chuàng)建一個(gè)index.js腳本本屆導(dǎo)入mockjs
- 在main.js中使用
import './mock/index'
-
頁面信息
mock用法
生成文本字符型
- 生成指定數(shù)據(jù)，隨機(jī)生成1-4個(gè)指定字符串
const data = Mock.mock({
'string|1-4':'學(xué)習(xí)' //管道符之間不能有空格
//公式： '鍵|規(guī)則':'值'
})
console.log(data)
- 隨機(jī)生成不定長度文本 word
import Mock from 'mockjs'
const data = Mock.mock({
'string':'@cword(3,10)' //隨機(jī)取一個(gè)3-10的范圍文本
})
console.log(data)
- 隨機(jī)生成標(biāo)題 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)
句子和段落的區(qū)別：一個(gè)是逗號(hào)，一個(gè)是句號(hào)。
生成數(shù)字number型
- 隨機(jī)生成1-100范圍內(nèi)的數(shù)字
const data = Mock.mock({
'number|1-100':1,
})
console.log(data)
- 生成增量id標(biāo)識(shí)
const data = Mock.mock({
id:'@increment()'
})
console.log(data)
- 隨機(jī)生成身份證號(hào)碼、人名、地址信息
const data = Mock.mock({
idCard:'@id()',
name:'@cname()',
address:'@city(true)' //加true顯示省級(jí)和市級(jí)，沒有則顯示市級(jí)
})
console.log(data)
生成圖片型
- 隨機(jī)生成一張指定圖片
const data = Mock.mock({
img_url:"@image('25,25','#fff','#e35ef1','png','唐時(shí)明月')"
//參數(shù)解釋：圖片寬高、背景顏色、文本顏色、圖片類型、文本信息
})
console.log(data)
返回1個(gè)url鏈接，可直接在瀏覽器打開
生成時(shí)間日期型
- 隨機(jī)生成時(shí)間日期
const data = Mock.mock({
date:'@date(yyyy-MM-dd hh:mm:ss)'
})
console.log(data)
生成數(shù)組型
- 隨機(jī)生成指定范圍的數(shù)組信息
隨機(jī)生成10-25份信息
const data = Mock.mock({
'list|10-25':[
{ idCard:'@id()',
name:'@cname()',
address:'@city(true)' }
]
})
console.log(data)
二、攔截請(qǐng)求
- 定義攔截get請(qǐng)求
import Mock from 'mockjs'
Mock.mock('/api/news','get',{ // 定義接口和請(qǐng)求方式
status: 200, //狀態(tài)碼
message: 'success'
})
頁面發(fā)起請(qǐng)求測試看看能不能攔截。
安裝axios
npm i axios
清除app.vue的所有內(nèi)容，重新定義，發(fā)起請(qǐng)求。
<template>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
}
},
created(){
axios.get('/api/news')
.then(res => {
console.log(res)
})
}
}
</script>
- 定義攔截post請(qǐng)求
Mock.mock('/api/post/news','post',{
status: 200,
msg: 'post成功'
})
發(fā)起post請(qǐng)求
<template>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
}
},
created(){
axios.post('/api/post/news')
.then(res => {
console.log(res)
})
}
}
</script>
模擬案例
傳統(tǒng)方式：
import Mock from 'mockjs'
//定義獲取新聞列表數(shù)據(jù)
Mock.mock('/api/get/news', 'get', () => {
return {
status: 200,
message: "獲取新聞列表成功",
list: [
{
"id": 1,
"title": "解憂雜貨店",
"content": "《解憂雜貨店》是日本作家東野圭吾寫作的長篇小說。2011年《小說野性時(shí)代》連載，于2012年3月由角川書店發(fā)行單行本",
"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
}
}
)
頁面發(fā)起請(qǐng)求
<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)"
}
]
})
//定義獲取新聞列表數(shù)據(jù)
Mock.mock('/api/get/news', 'get', () => {
return {
status: 200,
message: "獲取新聞列表成功",
list: newsList,
total: newsList.length
}
})
發(fā)起請(qǐng)求
created(){
axios.get('/api/get/news')
.then(res => {
console.log(res)
})
}
