most of the time, the front and back-end developed at the same time, in the end we developed page, it may also not immediately enter the debug stage, this time, in order to ensure the effectiveness of our interface and functionality of the code integrity, we may need to simulate data.

1. JS by the method of simulation data variable simulation background data

server

advantages: no disadvantages: need to build a lot of variables, but also the effective variables used in our code, and finally had to delete the

2. by Ajax JSON

file request advantages: only the configuration path, you can access, enter the debug stage without modification of JS code in

Ajax has disadvantages: cross domain problem, usually cannot request the local file, even if Firefox there can not access different file directory of the JSON file, usually via ide or

3. service manual start with nodejs to write a used to send the requested service, does not contain business logic

: The front end of the code into the debug stage only need to modify a basePath interface name all the paths and agreed to remain the same, you can test the post request,

network simulation environment: their shortcomings to write a background

1, 2 of two simulated data type for demo, but if do the on-line project, we recommend the use of their own to build a node

1. node for background environment, npm/cnpm

express, mockjs

2. to install the "text-align: center" >></p>
<p>

3. to create server.js file server,

 let express introduced the related module ('express'); / / = require the introduction of express module let Mock = require ('mockjs'); / / mock let AP module is introduced P = Express (

4.); / / instantiate the express

configuration interface routing,

 

/ * * * set port test.action routing {[type]} req * @param [the client sent the request with {[type]} [res] * @param data server of the corresponding object, you can use the res.send res.json to return to return the data, JSON data, res.down returns the download file] * / app.all ('/test.action', function (req, RES) {res.send ('Hello world');}); / * * * * app.listen listen on port 8090 ('8090');

http://localhost:8090/test.action", you can see the'Hello world'

5. mockjs to return the text format JSON

 data app.all in the interface ('/test.action', function (req, RES) {/ * * * mockjs attribute The attribute name "|'symbol behind the random attribute, attribute random array object behind the random array number, regular expressions of random rules, +1 represents the increment / res.json (Mock.mock ({" status ": 200, data|1-9: [{" name|5-8 ": /[a-zA-Z]/" id|+1 ": 1," value|0-500 "20:}]}));}); 

at this time we'll visit the page data, we can get a random JSON

6. to create data simulation data folder testData, create the simulation data of JSON files (Note: regular, you cannot use the JSON file and the object attribute must be a string in double quotes)

7. traversal the simulated data file, generate the corresponding

routing

 /*readdir read the directory of all files ('./testData' / fs.readdir, function (err, files) {if (ERR) {console.log} (ERR); Else {/ * successfully read the file, get the file name, corresponding to the formation of action splicing, monitor the corresponding interface and returns the corresponding data file (function / files.forEach (V, I) {app.all (`/${v.replace (/json/,'action')}`, function (req, RES) {fs.readFile (`./testData/${v}`,'utf-8', function (err, data) {if (ERR) {console.log (ERR);} else {res.json (Mock.mock (JSON.parse (data)));}})}}}}))) 

at this point, our node server has been successfully built, using the node server.js server running, we can directly access the interface at the front end, but only if the background generated by the background, the front page is not access, there is cross domain problem, if you need to solve, you can add

 / * for cross domain requests in the background Add app middleware handles cross domain requests (function / app.use (req, res, next) {res.header ("Access-Control-Allow-Origin", "*"); res.header ('Access-Control-Allow-Methods','PUT, GET, POST, DELETE, OPTIONS'); res.header ("Access-Control-Allow-Headers", "X-Requested-With"); res.header ('Access-Control-Allow-Headers','Content-Type'); next (

ps:);}); if you need to use regular mock, please separate routing configuration for processing, express and mockjs more instructions, please refer to the official website of api

summarized above is Xiaobian to introduce the express+mockjs simulation data transmission function, we want to help, if you have any questions welcome message to me, Xiao Bian will reply you in time!


This concludes the body part