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的同級目錄下新建一個(gè)vue.config.js；ajax請求的路由，因?yàn)檫@個(gè)路由我們希望拿到模擬數(shù)據(jù)，所以用webpack的devserve來攔截。愛掏網(wǎng) - it200.com攔截之后通過mockjs，由它來生成模擬數(shù)據(jù)，然后返回模擬值。愛掏網(wǎng) - it200.com

步驟

在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)是攔截路由請求。愛掏網(wǎng) - it200.com我們把全部交給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)用接口
      })

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持。愛掏網(wǎng) - it200.com