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


    聲明:所有內(nèi)容來自互聯(lián)網(wǎng)搜索結(jié)果,不保證100%準(zhǔn)確性,僅供參考。如若本站內(nèi)容侵犯了原著者的合法權(quán)益,可聯(lián)系我們進(jìn)行處理。
    發(fā)表評論
    更多 網(wǎng)友評論0 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 爆乳无码AV一区二区三区 | 国产精品视频一区麻豆| 亚洲一区AV无码少妇电影| 亚洲一区二区无码偷拍| 日韩精品人妻一区二区中文八零| 亚洲AV无码一区二区三区电影 | 黑巨人与欧美精品一区| 国产精品揄拍一区二区久久| 日韩好片一区二区在线看| 亚洲av无码片区一区二区三区| 国产精品视频一区| 国语对白一区二区三区| 国产凹凸在线一区二区| 精品香蕉一区二区三区| 亚洲AV无码一区东京热久久 | 变态调教一区二区三区| 日本视频一区在线观看免费| 精品国产亚洲一区二区三区| 国产99精品一区二区三区免费 | 精品不卡一区中文字幕| 99精品国产一区二区三区不卡| 免费精品一区二区三区在线观看| 精品福利一区二区三| 综合久久一区二区三区| 伊人精品视频一区二区三区| 日韩精品一区在线| 国产伦精品一区二区| 视频一区二区三区免费观看| 日韩精品电影一区| 影院无码人妻精品一区二区| 国产成人精品无人区一区| 亚洲欧洲∨国产一区二区三区| 一区二区三区四区免费视频| 中文无码一区二区不卡αv| 中文字幕乱码亚洲精品一区| 国产成人综合亚洲一区| 日韩人妻无码一区二区三区久久99| 国产午夜三级一区二区三| 亚洲国产av一区二区三区丶| 日韩视频一区二区| 久久免费国产精品一区二区|