uin-app+mockjs實現(xiàn)本地數(shù)據(jù)模擬
更新時間：2020年08月26日 09:42:58 作者：胖貓-冰淇淋
這篇文章主要為大家詳細介紹了uin-app+mockjs實現(xiàn)本地數(shù)據(jù)模擬，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近在開發(fā)項目的時候，需要用到mockjs這個包來實現(xiàn)前端本地數(shù)據(jù)的模擬，下面我就來說一下具體步驟：
前言
uni-app將自己的配置融合到了vue.config.js中，所以需要自己配置，需要在package.json的同級目錄下新建一個vue.config.js；ajax請求的路由，因為這個路由我們希望拿到模擬數(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配置項是攔截路由請求。我們把全部交給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 的值是一個數(shù)組，其中元素的數(shù)量從 1 到 10 個都有可能，隨機
'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)用接口
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript插入動態(tài)樣式實現(xiàn)代碼
能夠把CSS樣式包含到HTML頁面中的元素有兩個。其中，<link>元素用于包含來自外部的文件，而<style>元素用于指定嵌入的樣式2012-02-02
靜態(tài)頁面的值傳遞(三部曲)...2006-09-09
這篇文章主要介紹了原生JS實現(xiàn)的自動輪播圖功能,結(jié)合實例形式詳細分析了基于原生js實現(xiàn)輪播圖的原理、操作步驟及操作注意事項,需要的朋友可以參考下2018-12-12
Javascript立即執(zhí)行函數(shù)(IIFE)實例詳解
IIFE全拼Imdiately?Invoked?Function?Expression,是一個在定義的時候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細介紹了微信小程序定位當(dāng)前城市的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
javascrit中undefined和null的區(qū)別詳解
這篇文章主要介紹了javascrit中undefined和null的區(qū)別詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要給大家介紹了關(guān)于前端小程序中.env?文件夾的相關(guān)資料,.env文件夾允許開發(fā)者在不同的環(huán)境中配置不同的變量值,以便在小程序的不同階段或環(huán)境中使用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05
這篇文章為大家分享了js鼠標(biāo)點擊圖片切換效果實現(xiàn)代碼，特別炫酷的效果，具有一定的參考價值，推薦給大家，感興趣的小伙伴們可以參考一下2015-11-11
IE6已經(jīng)讓人惡心很久了, Google旗下Youtube決定在3月13日起停止對IE6的支持. 但愿能加速IE6更換的速度.2010-11-11
js 模擬實現(xiàn)類似c#下的hashtable的簡單功能代碼
越來越感覺js對集合的處理沒有c#強大。比如在實際開發(fā)中，經(jīng)常用到在一維數(shù)組或者二維數(shù)組里取某一個滿足某些條件的項，通常的處理方式就是遍歷數(shù)組，對比條件，匹配就取出，然后結(jié)束循環(huán)。2010-01-01