uin app+mockjs Implementation of Local Data Simulation

Recently, when developing the project, we need to use mockjs package to realize the simulation of front-end local data. Let me talk about the following specific steps:

Preface

uni-app integrates its own configuration into vue. config. js, so it needs to be configured by itself. It is necessary to create a new vue. config. js under the peer directory of package. json; The route of ajax request, because we want to get analog data on this route, we use devserve of webpack to intercept it. After interception, it passes through mockjs, which generates analog data and then returns analog values.

Steps

Add the following code to vue. config. js:

const Mock = require('./mock/index.js');
module.exports = {
 chainWebpack: (config) => {  
  config.resolve.alias
  .set( '@',resolve(__dirname, '/'))// Settings @ For src Alias of directory )
 },
 css: {
  ....
  }

 },
 devServer: {
  contentBase: path.join(__dirname, 'mock'),
  compress: true,
  port: 8080,
  overlay: {
   warnings: false,
   errors: true
  },
  before(app){
   Mock(app)
  }
}
};

The before configuration entry in the configuration of devserver is to intercept routing requests. We handed it all over to Mock (app) for processing; Then open mock/index. js and write the following code:

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;

Turn on addresses and write the data you need mock to 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({
    //  Attribute  list  The value of is 1 An array of elements, in which the number of elements is derived from the  1  To  10  It's possible, random 
    '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": " Have 1 Apartments 8 Dong ",
     "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;

You can get the corresponding data by using it between places where you need interfaces

this.$ajax.get('/api3/addresses').then(res => { //  Calling interface 
      })