Home > Article > Web Front-end > 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!