Mock.js在Vue項目中的使用小結
寫在前面
本篇博客收錄于我的github前端筆記倉庫中，持續(xù)更新中，歡迎star~
??https://github.com/mengqiuleo/myNote
Mock.js 初體驗
安裝：
npm install mockjs
導入：
var Mock = require('mockjs')
導入：
var data = Mock.mock({....})Mock.js語法規(guī)范
Mock.js語法規(guī)范: https://github.com/nuysoft/Mock/wiki/Syntax-Specification
這里只是說明了一些最常用的語法規(guī)范
另外，我們可以直接參考官方給出的示例：http://mockjs.com/examples.html
1.數據模板定義規(guī)范
數據模板中的每個屬性由 3 部分構成：屬性名(name)、生成規(guī)則(rule)、屬性值(value)：
'name|rule': value
屬性值是字符串 String
‘name|min-max’: string
通過重復 string 生成一個字符串，重復次數大于等于 min，小于等于 max。
‘name|count’: string
通過重復 string 生成一個字符串，重復次數等于 count。
屬性值是數字 Number
‘name|min-max’: string
通過重復 string 生成一個字符串，重復次數大于等于 min，小于等于 max。‘name|count’: string
通過重復 string 生成一個字符串，重復次數等于 count。‘name|min-max’: number
生成一個大于等于 min、小于等于 max 的整數，屬性值 number 只是用來確定類型。
demo
我們在根目錄下新建一個mock的文件夾，并且在該文件夾下新建一個 test.js 文件，用來存放我們要生成的mock數據
注意，首先需要導入mock
// ！??！導入mockjs
const Mock = require('mockjs')
// 調用Mock的方法，生成模擬的數據
// 生成一個用戶名，*出現1-10次,是隨機的
var data1 = Mock.mock({ 'username|1-10': '*' })
//{ username: '****' }
//{ username: '*********' }
// 生成一個用戶名，*出現5次
var data2 = Mock.mock({ 'username|5': '*' })
//{ username: '*****' }
// 生成一個年齡，年齡18-40歲中間
var data3 = Mock.mock({ 'age|18-40': 0 })
//{ age: 25 }
// { age: 28 }
// 隨機生成一個id
var data4 = Mock.mock('@id')
//450000198502099849
//640000201404227659
// 隨機生成一個中文名稱
var data5 = Mock.mock('@cname()')
//唐剛
//姜霞
//范磊
console.log(data)2.數據占位符定義規(guī)范
占位符 只是在屬性值字符串中占個位置，并不出現在最終的屬性值中
@占位符 @占位符(參數 [, 參數])
@id() : 得到隨機的id
@cname(): 隨機生成中文名字
@date(‘yyyy-MM-dd’): 隨機生成日期
@paragraph(): 描述
@email(): 郵箱地址
demo
// ?。。雖ockjs
const Mock = require('mockjs')
// 隨機生成一個id
var data4 = Mock.mock('@id')
//450000198502099849
//640000201404227659
// 隨機生成一個中文名稱
var data5 = Mock.mock('@cname()')
//唐剛
//姜霞
//范磊
console.log(data)3.一個實際開發(fā)中會用到的案例：生成個人信息
Mock.mock({
id: "@id()",//得到隨機的id,對象
username: "@cname()",//隨機生成中文名字
date: "@date()",//隨機生成日期
description: "@paragraph()",//描述
email: "@email()", //email
'age|18-38': 0
})
我們新建一個 userInfo.js
// ?。?！導入mockjs
const Mock = require('mockjs')
// 隨機生成一個對象
var data = Mock.mock({
id: '@id()',
username: '@cname()',
date: '@date(yyyy-MM-dd)',
description: '@paragraph()',
email: '@email()',
'age|18-40': 0
})
/**
{
id: '140000198202057935',
username: '蔡秀英',
date: '1989-05-22',
description: 'Dyskicwleb weqosmtu pkqjpcl jtdlcmu rmrurqzw dqsqu lhfbkbg zlcwcczyl pig nivxsa fknxxfv wqqdr acyl. Mpdqrkal fkysogt chie bqmwqbx cbncedxa lzwtv kpecxzs kscg jkutrm rjzbsp loixqslowr twdxdagm lici. Icsmti cmfmby amr enswma bwre nqmywt ikr nsguv siwsbd bsejuotzf xgorcicfjq kwksvnr gfc ttgutrb xmhiwtyo. Kvrhy vhejf iix cgpjhk adehu twa mucee muign bxiaxmxamt ucpuvvg tclw crr uyafxorjs qdyu uunk vjic evmbimfsxz. Wnrxxnkxwn vvwl ahatqd kqoju qdgixcl lmywjtbc ghvexo wjdecdpelz remhft ykjxftxshc jvtjvv grcgxl jnjzfbnq igzpxmy fqpmn.',
email: 'q.njvudb@hqijwlrsev.om',
age: 20
}
*/
console.log(data)
Mock.js在Vue中的使用
步驟：
- 定義接口路由，在接口中并返回mock模擬的數據
- 在vue.config.js中配置devServer，在before屬性中引入接口路由函數
- 使用axios調用該接口，獲取數據
1.定義接口路由，在接口中并返回mock模擬的數據
這里就相當于你在寫服務器端的代碼
我們在mock文件夾下新建一個index.js文件，在這個文件中定義接口
const Mock = require('mockjs')
// 隨機生成一個對象
var data = Mock.mock({
id: '@id()',
username: '@cname()',
date: '@date(yyyy-MM-dd)',
description: '@paragraph()',
email: '@email()',
'age|18-40': 0
})
// console.log(data)
module.exports = function (app) {
if (process.env.MOCK == 'true') {//判斷是否使用mock
// node中的express框架
// 參數1： 接口地址；參數2：服務器處理函數
app.use('/api/userinfo', (req, res) => {
// 將模擬的數據轉成json格式返回給瀏覽器
res.json(data)
})
}
}
在上面的代碼中，我們定義的接口為：/api/userinfo
2.在vue.config.js中配置devServer，在before屬性中引入接口路由函數
module.exports = {
devServer: {
// devServer在發(fā)送請求時，會先走到before指定的函數中進行處理，如果before中沒有對應的接口路由，才會請求外網等
before: require('./mock/index.js')
}
}
3.使用axios調用該接口，獲取數據
這里我們直接在APP.vue中使用axios
<template>
<div>Hello</div>
</template>
<script>
import axios from 'axios'
export default {
created() {
axios.get('/api/userinfo').then(result=>{
console.log(result);
console.log(result.data);//其實 result.data 才是我們定義的數據，它會自動在外面包一層，我們可以打印出來進行對比
})
}
}
</script>如何控制Mock接口的開關？
我們只是希望在開發(fā)環(huán)境下使用mock數據。
新建.env.development，定義環(huán)境變量
# 控制是否需要使用mock模擬的數據 MOCK = true
定義接口路由前，判斷當前MOCK環(huán)境變量是否為true
module.exports = function (app) {
if (process.env.MOCK == 'true') {
app.use('/api/userinfo', (req, res) => {
res.json(obj)
})
}
}到此這篇關于Mock.js在Vue項目中的使用的文章就介紹到這了,更多相關Mock.js Vue使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇vue 解決computed修改data數據的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了實現一個VUE響應式屬性裝飾器詳析，文章通過圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了vue項目查看vue版本及cli版本的實現方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue中$on和$emit的實現原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家介紹了vue?請求攔截器的配置方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了解決vue項目axios每次請求session不一致的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue路由第二次進入頁面created和mounted不執(zhí)行問題及解決
這篇文章主要介紹了vue路由第二次進入頁面created和mounted不執(zhí)行問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
利用Vue.js+Node.js+MongoDB實現一個博客系統(tǒng)（附源碼）
本文主要介紹了利用Vue.js+Node.js+MongoDB實現一個博客系統(tǒng)，這個博客使用Vue做前端框架，Node+express做后端，數據庫使用的是MongoDB。實現了用戶注冊、用戶登錄、博客管理、文章編輯、標簽分類等功能，需要的朋友可以參考學習。2017-04-04
這篇文章主要介紹了?Vue?子組件內的??props?對象里的?default?參數是如何定義Array、?Object?、或?Function?默認值的正確寫法說明，感興趣的朋友跟隨小編一起看看吧2022-08-08
vue-preview動態(tài)獲取圖片寬高并增加旋轉功能的實現
這篇文章主要介紹了vue-preview動態(tài)獲取圖片寬高并增加旋轉功能的實現，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07