Introduction to the

At the beginning of my contact with VUE-CLI, I found that the framework code generated by vue-CLI lacked Mock simulation, so I fumbled with it for a long time and recorded the results of my fumbling through the process, hoping to be helpful to others and avoid detdettions.

It’s not about vue-CLI, it’s about purely analog data services

Also want to get a better solution, have a better solution to share ah.

Achieve the goal

  • 1. Ajax data simulation, flexible interface configuration
  • 2. Hot update (do not restart the mock service manually, automatic restart does not count)

Set up

Process changes

  • 1. Simple mock services
  • 2. Configurable mock services
  • 3. Hot updated configurable mock services

Simple Mock service

The directory structure

project

  • node_modules
  • mockServer.js
  • package.json

code

Use node_modules

  • express
  • mockjs

The code is mockServer.js

const express = require('express'); // Introduce the Express module
const Mock = require('mockjs'); // Introduce the mock module
const app = express(); // Instantiate Express

// The route API corresponds to the simulated data
app.all('/api'.function (req, res) {
/ / mockjs attribute name '|' symbols in the back of the properties as random, array object behind the number of attributes for the random number groups at random, random rules, a regular expression said + 1 represents the increase

  res.json(Mock.mock({
    "status": 200."data|1-9": [{
      "name|5-8": /[a-zA-Z]/."id|+1": 1."value|0-500": 20}]})); });// Listen on port 8090
app.listen('8090');
Copy the code

The results

Configurable mock services

The simplest mock service is implemented, but consider the number of interfaces added later, and the code functions will grow functionally!! ∑(゚ д ゚ blue) blue. Can still be happy maintenance.

So here comes the improved version, where I simulate multiple request data through multiple JSON files and map files and interfaces through a configuration file

Modules used

  • express
  • mockjs
  • path
  • fs

The directory structure

code

mockServer.js

const express = require('express'); // Introduce the Express module
const Mock = require('mockjs'); // Introduce the mock module
const app = express(); // Instantiate Express
const path = require("path"); // Introduce path module core module does not require NPM
const fs = require('fs'); // Import fs module core module does not require NPM

// Read the configuration file to map the route to the file
fs.readFile(__dirname + '/test/conf.json'.'utf-8'.function (err, data) {
  if (err) {
    console.log(err);
  } else {
    let dataObject = JSON.parse(data);
    for (let key in dataObject) {
      app.all(dataObject[key].url, function (req, res) {
        fs.readFile(path.join(__dirname + '/test', dataObject[key].path), 'utf-8'.function (err, data) {
          if (err) {
            console.log(err);
          } else {
            res.json(Mock.mock(JSON.parse(data))); }})}); }}});// Listen on port 8090
app.listen('8090');
Copy the code

conf.json

{
  "api1": {"url":"/api1"."path":"./api1/api1.json"
  },
  "api2": {"url": "/api2"."path": "./api2/api2.json"}}Copy the code

api1.json

{
  "data":"i am api1"
}
Copy the code

api2.json

{
  "api2":"hahah"
}
Copy the code

The results

Hot updated configurable mock service

After the above modification, finally do not need to write so many lines of code O(I) is a very lazy creature, if every time change a configuration file, change a simulation data file manual restart to take effect is not very tired so we simulate hot update, there is no good lofty feeling

The directory structure

You read that right, just add a mockstart. js file

code

Nodemon is used to check the JSON file and restart the mock service

mockStart.js

var nodemon = require('nodemon'); /** * script Restart script * ext check file */ nodemon({script:'mockServer.js',
  ext: 'json'
});

nodemon.on('start'.function () {
  console.log('mockServer has started');
}).on('quit'.function () {
  console.log('mockServer has quit');
  process.exit();
}).on('restart'.function (files) {
  console.log('mockServer restarted due to: ', files);
});
Copy the code

The results

Or familiar interface, or different taste (number) channel (according to), I did not manually restart the service oh (∩_∩) ha ha ~, is not very convenient.

The resources

  • https://github.com/nuysoft/Mock/wiki
  • https://github.com/remy/nodemon/blob/master/doc/requireable.md