A solution for making JSON API simulation data

This mimics the effect of a REST-style news-list interface request, with type 1, 10 entries per page, page 2. As you can see in the figure, the id of the first item in data is 11.

Note that the extra redundant fields above were added for calculation purposes and are not business specific. Such as:

• Index is the current sequence number used to calculate the value of the ID.
• PageSize and pageIndex are placed in two separate places, and data is also used to calculate id. The outermost is used to calculate more and totalPageCount.

Let’s look at emulating a GET-style interface with the same functionality.

First you need an interface document, either one you send to the back end or one the back end sends to you.

Here is the interface to get the news list:

Returns:

{
  "errorCode": 0.//0 indicates a normal return, and other values are error codes
  "message": "success".//
  "data":[{"id": 1.//News id
      "title": "The first is the Latin type".//News headlines
      "thumb": "".//News pictured above
      "type": "1".//News category 1 Technology, 2 Entertainment, 3 Sports
      "author": "Zhang SAN".//The author name
      "publish": "1472393346".//Release time
      "abstract": "The first type of text outside the table will be the most important. Do joint MAO subject to material but flat party horse market to group of pieces of technology must be asked." //Content abstract
    },
    .]."total": 83.//The total number of article
  "totalPageCount": 28.//Total number of pages
  "more": true //Is there a next page
}Copy the code

1. Create a mock directory to place configuration files and template files.

   $ mkdir mock
   $ cd mock
   Copy the code

2. Create a mock. Json. This is the core file for configuring the interface and emulating the data template. The IP can be empty, but then you can’t proxy requests that don’t mock to the original server. Port If there are no special requirements, the default value is port 80.

   mock.json

   {
     "host": "http://api.example.com/"."ip":"192.168.8.218"."port":""."mock": [{"pathname":"/news/list"."tpl":"list.mock"."statusCode": 200."delay": 1}}]Copy the code

3. Configure the mock data template file for list. See the documentation for this tool in detail and an example of MockJS, which adds support for GET, POST, and REST parameters used in templates with @get [‘id’], @post [‘id’], and @rest [‘id’], respectively.

Here are a few examples of mockJS to give you an idea:

specification	The template	The output
‘name|min-max’: string
	{” string | 1-10 “:” u “}	{” string “, “u u u”}
‘name|count’: string
	{” string | 3 “:” painted end to end “}	{” string “, “u u u u u u u u u”}
‘name|+1′: number’
	{“number|+1”: 202}	{“number”: 201}
‘name|min-max’: number
	{“number|1-100”: 100}	{“number”: 46}
‘name|count’: object
	{” object | 2 “: {” 310000″, “Shanghai”, “320000”, “jiangsu province”, “330000”, “zhejiang province”, “340000”, “anhui province”}}	{“object”: {“330000”: “zhejiang “,” 330000″:” Anhui “}
‘name|min-max’: object
	{” object | 2-4 “: {” 110000″, “Beijing”, “120000”, “tianjin”, “130000”, “hebei province”, “140000”, “Shanxi Province”}}	{” object “: {” 110000″, “Beijing”, “120000”, “tianjin”, “130000”, “hebei province”, “140000”, “Shanxi Province”}}
‘name|1’: array
	{“array|1”: [“AMD”, “CMD”, “UMD”]}	{“array”: “AMD”}
‘name|min-max’: array
	{“array|1-10”: [{“name|+1”: [“Hello”, “Mock.js”, “!”]}]}	{“array”: [{“name”: “Hello”}, {“name”: “Mock.js”}]}
‘name’: function
	{‘foo’: ‘Syntax Demo’,’name’: function() {return this.foo + “!” }}	{“foo”: “Syntax Demo”,”name”: “Syntax Demo!” }
‘name’: regexp
	{‘regexp’: /[a-z][A-Z][0-9]/}	{“regexp”: “sX4”}
	{‘ regexp | 3 ‘: / \ d {5, 10} – /}	{“regexp”: “334446-21842199-96012570-220061301-“}
Data placeholder definition
	@boolean(1, 9, true)	false
	@natural(60, 100)	76
	@integer(60, 100)	98
	@float(60, 100, 3, 5)	77.52119
	@date(“yyyy yy y MM M dd d”)	“2001 01 01 09 9 18 18”
	@ time (” H Ⓜ ️ s “)	“4:3:12”
	@image(‘200×100’, ‘#894FC4’, ‘#FFF’, ‘png’, ‘! ‘)
	@title()	“Ysb Trjpvu Dvmduq Xhtxguajk”
	@ctitle()	“Old Dragon classics and counting”
	@name()	“Daniel Lewis”
	@cname()	“Seith”

list.mock

{ "errorCode":0, "message":"success", "data|@GET['pageSize']":[{ "pageIndex":"@GET['pageIndex']", "pageSize":"@GET['pageSize']", "index|+1":1, "id": function(){ return (this.pageIndex - 1) * this.pageSize + this.index; }, "title": "@ctitle(3, 15)", "thumb": "@ image (' 200 x100)", "type" : "@ $_get [' type ']", "author" : "@ cname", / / the author name "publish" : 14 \ d {8} / /, "abstract" : "@cparagraph(2)" }], "total": 83, "pageIndex":"@GET['pageIndex']", "pageSize":"@GET['pageSize']", "totalPageCount": function(){ return Math.ceil(this.total / this.pageSize); }, "more": function(){ return this.totalPageCount - this.pageIndex > 0; }}Copy the code

1. Start the mock service to see the effect.

$HTTP - mock is starting the HTTP - mock - json - sever simulation data server... Start successfully, listening port: 7071Copy the code

Access this interface in a browser to see the effect.

Is displayed on the command line when requested

The REQ: http://api.example.com/news/list the REQ: http://api.example.com/favicon.ico Proxy to 192.168.8.218:80 ERROR {[ERROR: Syscall: 'connect', syscall: 'connect', syscall: 'connect', address: '192.168.8.218, port: 80}Copy the code

The mock service processed two requests, one is the news/list we configured, and the other is the favicon.ico file that the browser automatically requested. Since there is no corresponding configuration in mock.

At this point, a simple mock is done.

Jsoncallback and callback are supported as parameter names for JSONP.

1. The second exception is the return of incorrect data. If the type of the news list is incorrect and the errorCode is -1000, you need to modify the template file:

   {
     "errorCode": "- 1000."."message": "wrong type"
   }Copy the code

2. Delay, change delay to 5000 ms, refresh the request.

{
  "pathname":"/news/list/{type}/{pageSize}/{pageIndex}"."tpl":"list.rest.mock"."statusCode": 200."delay": 5000
}Copy the code

You can see that the Wating time for this request is 5s:

In addition, the IP address and port of the proxy can also be changed dynamically, but the use scenario should be small.

1. Simple and fast: data simulation itself is to improve efficiency. If it cannot be simple and fast, it takes a lot of time to do it. It is better to wait for the interface provider to develop data-related business after completing the interface.
2. The simulated data should be close to the real data, and the data should cover the limiting cases. For example, generate strings of different lengths, values, and so on.
3. You have to be able to simulate an anomaly at any point in time. For example, when the list data is pulled, there may be an exception reported on the second screen. At this time, the simulation tool should be able to simulate this abnormal state.
4. Be able to support request parameter processing. Request parameter processing is divided into two categories, one is business parameters, such as ID, pageSize, pageIndex and so on. Another type of parameter is used to distinguish business, such as a REST parameter in the URL to distinguish which interface is requested in a RESTFUL style request.
5. Support for cookies and sessions.
6. Only part of the interface needs to be simulated, and the rest still calls the original service.
7. Supports jSONP and CORS across domains.
8. HTTPS and socket support.

At number 5 and 8, cookies, sessions, HTTPS and sockets are currently not supported in the tool. Point 6 is observed in the request for favicon.ico. Everything else will support it.