What is a Mock

In software development, we understand this as “Mock data” or “fake data”.

The benefits of mocks

The benefits are numerous, but in a word, with Mock, the front and back end personnel can start working in parallel without affecting each other by defining interface documents.

Implement Mock

Local directory structure

How can we develop without a real interface?

Step 1: Build a Web service locally

Install nodejs locally and configure package.json:

{
  "name": "mock"."scripts": {
    "dev": "node server.js"
  },
  "dependencies": {},
  "devDependencies": {
    "express": "^ 4.14.1." "}}Copy the code

The configuration server. Js:

Var express = require(NPM I express = require('express'); var app = express(); // specify HTML app.get('/index.html'.function(req, res) { res.sendFile(__dirname + req.path); }); // Listen to port app.listen('3737'.function () {
  console.log('localhost:3737/index.html');
});
Copy the code

Command-line execution node serser. Js, the browser open localhost: 3737 / index. HTML, you can access the page. Step 2: Configure the Mock data

Modify server. Js

var express = require('express'); var app = express(); // specify HTML app.get('/index.html'.function(req, res) { res.sendFile(__dirname + req.path); }); Var fs = require('fs');
app.post('/home'.function(req, res) {
  res.setHeader('Content-Type'.'application/json; charset=utf-8');
  fs.readFile('./mock/home.json'.function(err, data) {
    if(err) throw err; res.json(JSON.parse(data)); }); }); // Listen to port app.listen('3737'.function () {
  console.log('localhost:3737/index.html');
});
Copy the code

Re-executing node serser.js from the command line, we find that the page can access the ‘/home’ interface; Step 3: Optimize

It is not possible to have only one interface in a project. In order to facilitate the configuration, we added mock.js to the mock file for unified configuration

/**
 * @note   setOnline Interface configuration * @param name Local interface name *type/ var fs = require('fs');
var setOnline = [
  {
    name: 'home'.type: 'post',
    url: '/home'} // The second interface... Third interface]; // exports.setonline =setOnline; // Iterate over the output JSON datafor (var i = 0, len = setOnline.length; i < len; i++) {
  (function() {
    var name = setOnline[i].name;

    exports[name] = function(req, res) {
      res.setHeader('Content-Type'.'application/json; charset=utf-8');
      fs.readFile('./mock/' + name + '.json'.function(err, data) {
        if (err) throw err;

        res.json(JSON.parse(data));
      });
    };
  })(i);
}
Copy the code

Modify server. Js

var express = require('express');
var app = express();

app.get('/index.html'.function(req, res) { res.sendFile(__dirname + req.path); }); Var Mock = require('./mock/mock.js');
var setOnline = mock.setOnline;

setOnline.forEach(function(m) {
  app[m.type](m.url, mock[m.name]);
});

app.listen('3737'.function () {
  console.log('localhost:3737/index.html');
});

Copy the code

Restart the Web service and you’re done

Four,

There are many other ways to implement Mock data, such as MockJS, easyMock, RAP2, and more.

Native Mock features don’t depend on MockJS, easyMock, etc., and can be implemented quickly and easily.