欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uin-app+mockjs實(shí)現(xiàn)本地?cái)?shù)據(jù)模擬

 更新時(shí)間：2020年08月26日 09:42:58   作者：胖貓-冰淇淋  
這篇文章主要為大家詳細(xì)介紹了uin-app+mockjs實(shí)現(xiàn)本地?cái)?shù)據(jù)模擬，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在開發(fā)項(xiàng)目的時(shí)候，需要用到mockjs這個(gè)包來(lái)實(shí)現(xiàn)前端本地?cái)?shù)據(jù)的模擬，下面我就來(lái)說(shuō)一下具體步驟：

前言

uni-app將自己的配置融合到了vue.config.js中，所以需要自己配置，需要在package.json的同級(jí)目錄下新建一個(gè)vue.config.js；ajax請(qǐng)求的路由，因?yàn)檫@個(gè)路由我們希望拿到模擬數(shù)據(jù)，所以用webpack的devserve來(lái)攔截。攔截之后通過mockjs，由它來(lái)生成模擬數(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)文章

最新評(píng)論