react projects mock data

Foreword

We all know that in the actual development stage, the back-end interface development and front-end development is carried out simultaneously, even later than the front end of the schedule, which leads straight to the front end of the wait time back-end interface.

This situation led to severe front-end development is slow, and that this time the front-end developers can write static simulation data.

Json to simulate the use of static data

This situation is in accordance with established data format (interface documentation, etc.), to provide their own static JSON data, do the interface with the tools to obtain these data. The method using only get request. Limitations still very large.

Dynamic Simulation Interface (Mock)

This situation is a web framework, in accordance with the requirements (interface documentation) established interfaces and data structures, own analog functions backend interface, so that the front end of the project up and running smoothly. This can be easily developed analog front-end business logic.

Skills introduced

The main project is to use the express + mock integrated dynamic simulation interfaces to achieve.

Directory Structure:

First you need to install express

npm install --save express

In the mock file encryption under the new server.js

code show as below:

var Express = the require ( "Express" )
 var App = Express ();
 var bodyParser the require = ( 'body-Parser' ); 

app.use (bodyParser.json ());   // body-format data Parser parses json 
app. use (bodyParser.urlencoded ({             // this must bodyParser.json below, to parameter coding 
    Extended: to true 
})); 

var Router = express.Router (); 

app.get ( '/', function (REQ, RES ) { 
    res.send ( 'Hello World' ); 
}); 

router.use ( "/test",require('./test ' )); 

app.use ( " / API ",router)

app.listen(3001)

So how to start up the service? There are two ways

First, the implementation of the project in the current directory

node mock/server.js

Second, because we are using npm Management Pack, the scripts added package.json

"mock": "node ./mock/server.js"

Only you need to do npm run mock to start the service on it oh ~ ~

This enables a simple express service, enter in the browser http: // localhost: 3001 you can see the page to load a hello world

The next step is the introduction of mockJs, first install mockjs

npm install --save-dev mockjs

New test.js join us in the following code directory of mock, mock grammar here do not say. See mock document is about, there are many knowledge points.

var Mock = the require ( "mockjs" )
 var Express = the require ( "Express" )
 var Router = express.Router (); 

router.use ( "/ Profile", function (REQ, RES) { 
    the console.log (req.body ); 
    // call the mock data sIMULATION 
    var data = Mock.mock ({
             // the attribute value is an array list, which contain 1 to 10 elements 
            'list | 1-10' : [{
                 // attribute id is a increment number, a starting value of 1, each time by 1 
                'ID | + 1'd': 1 
            }] 
        } 
    ); 
    return res.json (Data); 
}) 

module.exports= router;

Enter in the browser http: // localhost: 3001 / api / test / profile to see the list of JSON data output,

If you access the address is: HTTP: // localhost: 3001 / API / Profile only need to put in server.js

router.use("/test",require('./test')); 修改为：router.use("/",require('./test'));

React used in

Add the following code config / webpackDevServer.config.js of:

 proxy: {
      '/api/': {
        target: 'http://localhost:3001',
        secure: false
      }
    },

First run npm run mock, mock open the service, and then run the project npm run start, you can get to the mock data

Reference: https://www.jianshu.com/p/ac23664982b2

react projects mock data

React used in

Guess you like