Recently doing a background project, because the background also began to develop, therefore, need the current front end group, after all can’t have been waiting for them, then, at the beginning of the project we can write their own data, but in order to effective development, also hope to be able to directly generate the API documentation, then chose yapi, this is very good, I use is a network deployment, There is a need to build their own set, the document is very detailed.

Now note the mock data writing and the interface specification:

1. The mock data

/ * * * interface data returned sample * / {" current ": 1," MSG ":" success ", "code" : 0, "pageSize" : 10, "total" : null, "data | 1-100" : [{" id | + 1 ": 1, "code | + 1" : 1, / / active code "activityName" : "@ ctitle", / / name "activityType | 1" : [" reduce ", "timeLimit"], / / the activity type "activityDescription" : "@ csentence (10, 20)", / / activity description "status | 1" : [" create ", "issue", "end"], / / state "startTime" : "@ datetime", / / start time "endTime" : "@datetime", // End time}]}Copy the code

The basic syntax is the same as mock.js, except that you can’t write functions. Advanced mocks can be used to modify write configurations, such as dynamically fetching current and pageSize parameters.

As shown in figure:

2. Interface specifications

First of all, there are several types of HTTP operations:

  • GET (SELECT) : Retrieves one or more resources from the server.
  • POST (CREATE) : Creates a resource on the server.
  • PUT (UPDATE) : Updates the resource on the server (the client provides the full resource after the change).
  • PATCH (UPDATE) : Updates resources on the server (the client provides the changed properties).
  • DELETE (DELETE) : deletes resources from the server.

The specific scenario is as follows

Where ID means dynamic, can be an active ID, according to this ID to delete and modify operations, so that one looks much clearer.

// Delete the activity
export function query (params) {
  return request({
    url: `/Api/activity/reduce/${params.id}`.method: 'delete'.// data: params,})}Copy the code

The writing is also very clear

There is time to update.