How to build a universal data simulation framework for the front end (detailed tutorial)

The editor below will share with you a tutorial on building a common front-end data simulation framework using mockjs and json-server. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look

Whether you are doing front-end development at work or in your spare time, it is inevitable that the back-end team has not completed the development of the interface, but the front-end team needs to implement the corresponding functions , don’t ask why, it definitely exists. This article was produced for this reason. I hope it will be helpful to those who have needs in this regard.

1. Component packages used

1. mockjs: used to simulate query results

2. json-server: Build a simulation server and simulate CRUD-related operation interfaces

2. Specific implementation 1. Create a project and install the corresponding Dependencies

cnpm install --save-dev mockjs json-server

The above command is to install dependencies. The following picture shows the project results:

Instructions:

data: This folder stores the query results simulated by mockjs. The dataProvider is followed by a separate simple

lib: a jquery file included, used to simulate ajax requests.

route: The routing table of json-server is used to simulate crud operations. I don’t know how to implement multiple db.json

index.js: Simulate server entry file

test.html: Test cors

2. Build a basic json-server server

var JsonServer = require('json-server');
var path = require('path')

var Server = JsonServer.create();
var defaultMid = JsonServer.defaults({
 "noCors": false,
 "static": path.join(__dirname, "/lib")
});

var router = JsonServer.router(path.join(__dirname, '/route/db.json'));

Server.use(defaultMid);
Server.use(router);
Server.listen(8009);
console.log('start 8009.....');

This part of the content is written completely in accordance with the official instructions of json-server. It is worth noting static and noCors The setting is done as a middleware.

3. Increase the application of mockjs

Here mockjs is only used as the cornerstone of generating data, while dataProvider.js provides the ability to unify external access interfaces. That is to say, the simulation data is separated by module (equivalent to the controller in MVC) and func (equivalent to the action in MVC). I don’t know if this implementation is feasible (I am currently using this in my project.)

3.1 First, create the emp.js file in the data folder. The following content was written:

var mockjs = require('mockjs');

module.exports = {
 list: function(){ 
 var data = mockjs.mock({
 'list|3':[
 {
  'id|+1':1
 }
 ]
 });
 return data.list;
 }
}

Here is the use of mockjs

3.2 Use dataProvider to implement module collection

var emp = require('./emp');

var moduels = {
 emp: emp
}

module.exports = {
 execute: function(m, f, args){
 return moduels[m][f].call(moduels[m], args);
 }
}

3.3 Add the get method to json to obtain data

var provider = require('./data/dataProvider');

Server.get('/data',function(req,res){
 var moduleName = req.body ? req.body.moduleName : req.query.moduleName;
 var funName = req.body ? req.body.funName : req.query.funName;
 var arg = null;
 res.json(provider.execute(moduleName, funName));
 res.end();
});

If you want to access the List under emp, the address is: http://localhost:8009/data?moduleName=emp&funName=list

4. Summary

1. There can only be one db.json file of json-server. Multiple data entities can be configured here. It uses get to obtain and post to write the http protocol to realize the data. CRUD's

Seeing this, do you feel that it is so simple to build a data simulation server, of course it is only for webapi. Download sample code

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to achieve elastic effects in JavaScript

How to implement cookie cross-domain in axios

How to use JS to realize the parabolic trajectory movement of the ball

How to use JavaScript to realize binary tree traversal

The above is the detailed content of How to build a universal data simulation framework for the front end (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!