uin-app+mockjs實(shí)現(xiàn)本地?cái)?shù)據(jù)模擬
最近在開發(fā)項(xiàng)目的時(shí)候，需要用到mockjs這個(gè)包來實(shí)現(xiàn)前端本地?cái)?shù)據(jù)的模擬，下面我就來說一下具體步驟：
前言
uni-app將自己的配置融合到了vue.config.js中，所以需要自己配置，需要在package.json的同級(jí)目錄下新建一個(gè)vue.config.js；ajax請(qǐng)求的路由，因?yàn)檫@個(gè)路由我們希望拿到模擬數(shù)據(jù)，所以用webpack的devserve來攔截。攔截之后通過mockjs，由它來生成模擬數(shù)據(jù)，然后返回模擬值。
步驟
在vue.config.js中加入下面代碼：
const Mock = require('./mock/index.js');
module.exports = {
chainWebpack: (config) => {
config.resolve.alias
.set( '@',resolve(__dirname, '/'))//設(shè)置@為src目錄的別名)
},
css: {
....
}
},
devServer: {
contentBase: path.join(__dirname, 'mock'),
compress: true,
port: 8080,
overlay: {
warnings: false,
errors: true
},
before(app){
Mock(app)
}
}
};
devserver的配置中的before配置項(xiàng)是攔截路由請(qǐng)求。我們把全部交給Mock(app)處理；然后打開mock/index.js寫入如下代碼：
const addressesMock = require('./addresses');
const attendanceMock = require('./attendance');
const attendanceListMock = require('./attendance-list');
....
function Mock(app) {
addressesMock(app)
attendanceMock(app)
attendanceListMock(app)
.....
}
module.exports = Mock;
打開addresses寫入你需要mock的數(shù)據(jù)就ok啦
var Mockjs = require('mockjs')
const { Random }= Mockjs;
const phonePrefix = ['132', '135', '189']
const index = Math.floor(Math.random() * phonePrefix.length)
var phone = phonePrefix[index] + Mockjs.mock(/\d{8}/)
const addressesMock = function (app) {
app.get('/api3/addresses', function(req, res) {
var data = Mockjs.mock({
// 屬性 list 的值是一個(gè)數(shù)組，其中元素的數(shù)量從 1 到 10 個(gè)都有可能，隨機(jī)
'list|1-10': [{
'id|+1': 0,
"accept_name": Random.cname(),
"mobile": phone,
"province_name": Random.province(),
"area": Mockjs.mock(/\d{6}/),
"city": Mockjs.mock(/\d{6}/),
"sex": parseInt(Random.boolean()),
"district": {
"districts": Random.province()+Random.city()+Random.county(),
"area": Random.county(),
"city": Random.city(),
"province": Random.province()
},
"street": "有一間公寓八棟",
"inner": false,
"lat": "",
"door_number": "AB1234",
"is_default": parseInt(Random.boolean()),
"province": Mockjs.mock(/\d{6}/),
"area_name":Random.county(),
"city_name": Random.city(),
"poiname": ""
}]
})
res.json(data);
})
}
module.exports = addressesMock;
在需要接口的地方之間用 就能得到相應(yīng)數(shù)據(jù)了
this.$ajax.get('/api3/addresses').then(res => { // 調(diào)用接口
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Nuxt.js 實(shí)戰(zhàn)集錦,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
基于Bootstrap實(shí)現(xiàn)tab標(biāo)簽切換效果
這篇文章主要為大家詳細(xì)介紹了基于Bootstrap實(shí)現(xiàn)tab標(biāo)簽切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了webpack打包多頁(yè)面的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
xmlplus組件設(shè)計(jì)系列之圖標(biāo)（ICON）(1）
這篇文章主要為大家詳細(xì)介紹了xmlplus組件設(shè)計(jì)系列之圖標(biāo)ICON的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
水仙花數(shù)是指一個(gè) n 位數(shù) ( n≥3 )，它的每個(gè)位上的數(shù)字的 n 次冪之和等于它本身。下面通過本文給大家分享JS判斷一個(gè)數(shù)是否是水仙花數(shù)，需要的朋友參考下吧2017-06-06
JavaScript讀取中文cookie時(shí)的亂碼問題的解決方法
讀取中文cookie時(shí)出現(xiàn)亂碼，下面是具體的解決方法，大家以后使用過程中，盡量不要用中文。2009-10-10
jQuery animate()實(shí)現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
這篇文章主要介紹了jQuery animate()實(shí)現(xiàn)背景色漸變效果的處理方法,結(jié)合實(shí)例形式分析了jQuery顏色插件jquery.color.js實(shí)現(xiàn)背景色漸變的簡(jiǎn)單操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了如何在JavaScript中正確處理變量，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
使用getBoundingClientRect方法實(shí)現(xiàn)簡(jiǎn)潔的sticky組件的方法
本文介紹這種組件的實(shí)現(xiàn)思路，并提供一個(gè)同時(shí)支持將sticky元素固定在頂部或底部的具體實(shí)現(xiàn)，由于這種組件在網(wǎng)站中非常常見，所以有必要掌握它的實(shí)現(xiàn)方式，以便在有需要的時(shí)候基于它的思路寫出功能更多的組件出來2016-03-03
JavaScript導(dǎo)出Excel實(shí)例詳解
這篇文章主要介紹了JavaScript導(dǎo)出Excel的方法,以實(shí)例形式詳細(xì)分析了javascript將WEB頁(yè)面導(dǎo)出為EXCEL文檔的方法及相關(guān)的技巧說明,對(duì)于深入了解javascript編程原理有一定的借鑒價(jià)值,需要的朋友可以參考下2014-11-11