mockjs
使用mockjs
項目安裝mock
npm install mockjs
項目中新建mock文件
//引入mock模塊
import Mock from 'mockjs'
將mock文件在main.js中導入
import Vue from 'vue'
import App FROM './App.vue'
import './mock/index.js'
Vue.config.productionTip = false
new Vue({
render:h => h(App),
}).$mount('#app')
mock語法
生成字符串
- 生成指定次數(shù)字符串
import Mock from 'mockjs'
const data = Mock.mock({
"string|4":"哈哈"
})
- 生成指定范圍長度字符串
const data = Mock.mock({
"string|1-8":"哈哈"
})
生成文本
- 生成一個隨機字符串
const data = Mock.mock({
"string":"@cword"
})
- 生成指定長度和范圍
const data = Mock.mock({
string:"@cword(1)"
str :"@cword(10,15)"
})
生成標題和句子
- 生成標題和句子
const data = Mock.mock({
title:"@ctitle(8)"
sentence:"@csentence"
})
- 生成指定長度的標題和句子
const data = Mock.mock({
title:"@ctitle(8)"
sentence:"@csentence(50)"
})
- 生成指定范圍的
const data = Mock.mock({
title:"@ctitle(5,8)"
sentence:"@csentence(50,100)"
})
生成段落
- 隨機生成段落
const data = Mock.mock({
content:"@cparagraph()"
})
生成數(shù)字
- 生成指定數(shù)字
const data = Mock.mock({
"number|80":1
})
- 生成范圍數(shù)字
const data = Mock.mock({
"number|1-99":1
})
生成自增id
- 隨機生成標識
const data = Mock.mock({
id:"@increment"
})
生成姓名-地址-身份證
- 隨機生成姓名-地址-身份證
const data = Mock.mock({
name:"@cname()"
idCard:"@id()"
address:"@city(true)"
})
隨機生成圖片
- 生成圖片：@image（“300*200”饭于，‘#ff0000','#fff','gif','坤坤'）
- 參數(shù)1：圖片大小
[
'300*250','250*250','240*400','336*280'
'180*150','720*300','468*60','234*60'
'388*31','250*250','240*400','120*40'
'125*125','250*250','240*400','336*280'
]
參數(shù)2：圖片背景色
參數(shù)3：圖片前景色
參數(shù)4：圖片格式
參數(shù)5：圖片文字
生成時間
- @Date
- 生成指定格式時間：@date(yyyy-MM-dd hh:mm:ss)
指定數(shù)組返回的參數(shù)
- 指定長度：‘date|5’
- 指定范圍:'data|5-10'
const data = Mock.mock({
'list|50-99':[
{
name:'@cname'
address:'@city(true)'
id:'@increment()'
}
]
})
mock攔截請求
定義get請求
Mock.mock('api/get/news','get',()=>{
return{
status:200,
message:"獲取數(shù)據(jù)成功"
}
})
定義post請求
Mock.mock('api/post/news','post',()=>{
return{
status:200,
message:"獲取數(shù)據(jù)成功"
}
})
實現(xiàn)新聞管理案例
獲取數(shù)據(jù)
接口地址：：/api/get/news
接口參數(shù)：
pageIndex：頁碼
pageSize:每頁的條數(shù)
請求類型：get、post
// get類型時獲取分頁參數(shù)
const getQuery = (url = '') => {
const index = url.indexOf("?")
if (index > -1) {
const query = {}
url.slice(index + 1).split('&').map(item => {
const obj = item.split('=')
query[obj[0]] = obj[1]
})
return query
}
}
// 注意get接口有參數(shù)時的寫法维蒙，需要用正則
Mock.mock(/\/api\/get\/person/, 'get', (option) => {
console.log(option);
const query = getQuery(option.url)
const list = data.list.slice(query.pageSize * (query.pageIndex - 1), query.pageIndex * query.pageSize)
return {
status: 200,
res: {
list: list,
total: data.list.length
},
message: "獲取數(shù)據(jù)成功"
}
})
// post類型時獲取參數(shù)
Mock.mock('/api/post/news', 'get', (option) => {
console.log(option);
const query = JSON.parse(option.body)
const list = data.list.slice(query.pageSize * (query.pageIndex - 1), query.pageIndex * query.pageSize)
return {
status: 200,
res: {
list: list,
total: data.list.length
},
message: "獲取數(shù)據(jù)成功"
}
})
返回的數(shù)據(jù)：
{
status:200,
message:"獲取新聞列表成功",
list:[
{
"id":1,
"title":"解憂雜貨店",
"content":"《解憂雜貨店》是日本作家東野圭吾寫作的長篇小說掰吕。2011年《小說野性時代》連載，于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
}
}
添加新聞
接口地址：：/api/add/news
接口參數(shù)：
title：'標題'
content：內(nèi)容
請求類型：post
返回的數(shù)據(jù)：
{
status:200,
message:"獲取新聞列表成功",
list:[
{
"id":1,
"title":"解憂雜貨店",
"content":"《解憂雜貨店》是日本作家東野圭吾寫作的長篇小說颅痊。2011年《小說野性時代》連載殖熟，于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
}
}
刪除新聞
接口地址：：/api/delete/news
接口參數(shù)：
id；新聞id
請求類型：post
返回的數(shù)據(jù)：
{
status:200,
message:"獲取新聞列表成功",
list:[
{
"id":1,
"title":"解憂雜貨店",
"content":"《解憂雜貨店》是日本作家東野圭吾寫作的長篇小說斑响。2011年《小說野性時代》連載菱属，于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
}
}
--語法end 分割線--
vue里面加入mock
// 開發(fā)環(huán)境下才會引入mockjs
process.env.NODE_ENV === 'development' && require('./mock')
注：import是ES6標準中的模塊化解決方案，require是node中遵循CommonJS規(guī)范的模塊化解決方案舰罚，后者（require）支持動態(tài)引入
NODEE_ENV不等于development
NODEE_ENV等于development
參考此篇
