Mock.js在Vue項目中的使用小結(jié)
寫在前面
本篇博客收錄于我的github前端筆記倉庫中，持續(xù)更新中，歡迎star~
??https://github.com/mengqiuleo/myNote
Mock.js 初體驗
安裝：
npm install mockjs
導(dǎo)入：
var Mock = require('mockjs')
導(dǎo)入：
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.數(shù)據(jù)模板定義規(guī)范
數(shù)據(jù)模板中的每個屬性由 3 部分構(gòu)成：屬性名(name)、生成規(guī)則(rule)、屬性值(value)：
'name|rule': value
屬性值是字符串 String
‘name|min-max’: string
通過重復(fù) string 生成一個字符串，重復(fù)次數(shù)大于等于 min，小于等于 max。
‘name|count’: string
通過重復(fù) string 生成一個字符串，重復(fù)次數(shù)等于 count。
屬性值是數(shù)字 Number
‘name|min-max’: string
通過重復(fù) string 生成一個字符串，重復(fù)次數(shù)大于等于 min，小于等于 max。‘name|count’: string
通過重復(fù) string 生成一個字符串，重復(fù)次數(shù)等于 count。‘name|min-max’: number
生成一個大于等于 min、小于等于 max 的整數(shù)，屬性值 number 只是用來確定類型。
demo
我們在根目錄下新建一個mock的文件夾，并且在該文件夾下新建一個 test.js 文件，用來存放我們要生成的mock數(shù)據(jù)
注意，首先需要導(dǎo)入mock
// ?。?！導(dǎo)入mockjs
const Mock = require('mockjs')
// 調(diào)用Mock的方法，生成模擬的數(shù)據(jù)
// 生成一個用戶名，*出現(xiàn)1-10次,是隨機的
var data1 = Mock.mock({ 'username|1-10': '*' })
//{ username: '****' }
//{ username: '*********' }
// 生成一個用戶名，*出現(xiàn)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.數(shù)據(jù)占位符定義規(guī)范
占位符 只是在屬性值字符串中占個位置，并不出現(xiàn)在最終的屬性值中
@占位符 @占位符(參數(shù) [, 參數(shù)])
@id() : 得到隨機的id
@cname(): 隨機生成中文名字
@date(‘yyyy-MM-dd’): 隨機生成日期
@paragraph(): 描述
@email(): 郵箱地址
demo
// ！??！導(dǎo)入mockjs
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
// ！??！導(dǎo)入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模擬的數(shù)據(jù)
- 在vue.config.js中配置devServer，在before屬性中引入接口路由函數(shù)
- 使用axios調(diào)用該接口，獲取數(shù)據(jù)
1.定義接口路由，在接口中并返回mock模擬的數(shù)據(jù)
這里就相當(dāng)于你在寫服務(wù)器端的代碼
我們在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框架
// 參數(shù)1： 接口地址；參數(shù)2：服務(wù)器處理函數(shù)
app.use('/api/userinfo', (req, res) => {
// 將模擬的數(shù)據(jù)轉(zhuǎn)成json格式返回給瀏覽器
res.json(data)
})
}
}
在上面的代碼中，我們定義的接口為：/api/userinfo
2.在vue.config.js中配置devServer，在before屬性中引入接口路由函數(shù)
module.exports = {
devServer: {
// devServer在發(fā)送請求時，會先走到before指定的函數(shù)中進行處理，如果before中沒有對應(yīng)的接口路由，才會請求外網(wǎng)等
before: require('./mock/index.js')
}
}
3.使用axios調(diào)用該接口，獲取數(shù)據(jù)
這里我們直接在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 才是我們定義的數(shù)據(jù)，它會自動在外面包一層，我們可以打印出來進行對比
})
}
}
</script>如何控制Mock接口的開關(guān)？
我們只是希望在開發(fā)環(huán)境下使用mock數(shù)據(jù)。
新建.env.development，定義環(huán)境變量
# 控制是否需要使用mock模擬的數(shù)據(jù) MOCK = true
定義接口路由前，判斷當(dāng)前MOCK環(huán)境變量是否為true
module.exports = function (app) {
if (process.env.MOCK == 'true') {
app.use('/api/userinfo', (req, res) => {
res.json(obj)
})
}
}到此這篇關(guān)于Mock.js在Vue項目中的使用的文章就介紹到這了,更多相關(guān)Mock.js Vue使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue3和ts封裝axios以及使用mock.js詳解
- vite+vue3中使用mock模擬數(shù)據(jù)問題
- Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù)
- vue3安裝vant實現(xiàn)按需引入和全局引入
- vue3獲取元素并且修改元素樣式的實戰(zhàn)操作
- vue3使用canvas的詳細(xì)指南
- vue3組合式API中setup()概念和reactive()函數(shù)的用法
- vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的方法
- Mock.js的安裝與使用教程(擺脫后端同學(xué)的束縛)
- vue的axios和mock.js你了解嗎
- Vue項目中使用mock.js的完整步驟
- Vue3中簡單使用Mock.js方法實例分析
相關(guān)文章
Vue3嵌套路由中使用keep-alive緩存多層的實現(xiàn)
本文介紹了Vue3 嵌套路由中使用?keep-alive緩存多層的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
本文主要介紹了el-form-renderer使用教程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue3如何自定義message彈窗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue+element+cookie記住密碼功能的簡單實現(xiàn)方法
這篇文章主要給大家介紹了Vue+element+cookie記住密碼功能的簡單實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue通過krpano.js實現(xiàn)360全景圖的實例代碼
這篇文章主要介紹了vue上通過krpano.js實現(xiàn)360全景圖,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue el-upload上傳文件的示例代碼，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本文主要介紹了vue限制實現(xiàn)不登錄無法進入其他頁面,vue限制不登錄,通過url進入其他頁面強制回到登錄頁面；已經(jīng)登錄的情況下,不可以再進入登錄界面,感興趣的可以了解一下2024-01-01
VUE中的export default和export使用方法解析
export default和export都能導(dǎo)出一個模塊里面的常量，函數(shù)，文件，模塊等，在其它文件或模塊中通過import來導(dǎo)入常量，函數(shù)，文件或模塊。但是，在一個文件或模塊中export,import可以有多個，export default卻只能有一個。2022-12-12
vue 使用html2canvas將DOM轉(zhuǎn)化為圖片的方法
這篇文章主要介紹了vue 使用html2canvas將DOM轉(zhuǎn)化為圖片的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09