rap2 using gestures - a front end, a rear end, the test must see (FIG multiple gif)

background

As a mother of Ali rap2 open source http interface management tool, widely used by everyone. Indeed, this tool does have some bug, but in the mainstream market, open source http interface management tool which, after all, an excellent tool. Many of its features, including team management, warehouse interfaces, plug-ins, mock data, postman export, and allows us to easily document management interface as well as the efficiency of the front and rear ends of collaboration effectively improved.

Concepts / vocabulary

• Warehouse: the interface documentation placed warehouse can contain multiple document interfaces
• Collaborative Warehouse: The warehouse Mock collaborative services, can not be matched to the interface in the current warehouse will seek collaboration from warehouse
• Team: The team may include multiple warehouses, multiple users can join the team
• Plug-: Mock generating data used to implement, real intercept I / O requests to the data replacement functions Mock plug
• Platform API: open API interface in the form of documents, Mock data and other content available to external calls
• Mock template: Mock.js rule templates for generating Mock data, the template can define rules to accommodate the wealth of data on demand randomness
• The final data generated by Mock Mock template: Mock Data

Features

Home

In the figure above, the left is the history of all the changes you belong warehouse. Let the pot back tracked. Respectively the right lists the warehouse and you have to join warehouse. Here you can jump to the appropriate warehouse, modules, interfaces by clicking on the blue word.

warehouse

Here you can see the warehouse were they belong and all of the warehouse. Compared to adding their own warehouses, for his own (created) a warehouse, in addition to have editing functions, you can delete it.

Editing warehouse

Creating a warehouse

team

It can be easily carried out by members of the management team and access control functions.

interface

Here are some of the main external interface. Interface document data can be exported via the front-end interface and mock data. About mock methods will be introduced later in the usage scenarios.

status

Through this page, we can see an overview of the use of the entire system.

Interface Management (Key)

After entering a warehouse, we will see the following interface:

To note here is that if we want to edit basic information about the interface, such as url, type, status code, click on the left side of the pencil (Edit button). Here url must use a relative path; if you want to modify the interface of the request and response information, click on the Edit button to the right of the green. Click the preview, you can show or hide the interface request or response templates, and data. Let us demonstrate how to create an interface to obtain a student's details via email. The interface uses the GET method, url is / api / v1 / students email =, the response is json?:

{
	"name": "秀兰",
	"age": 12,
	"city": "深圳",
	"province": "广东",
	"avatar": "http://dummyimage.com/200x100/4A7BF7&text=Hello123123",
	"intro": "我是一个来自深圳的朋友"
}
复制代码

Then modify the request and response template: rap2 support new or import, we take a look at the new request parameters.

It should be noted that, for the GET method using Query Params default; and for the POST method using Body Params default. Of course, in some cases, some of the parameters passed by the interface header. I suggest you best to follow http specification to select the parameter type. Let's look through the import of complete production response template.

For the back-end staff, if the debugging interface by some http client tools (such as the postman), using this approach is undoubtedly the most labor-saving kind.

---

See here seems done. This is something so simple you have to tell me? too simple, sometimes naive. If you just stop there, rap2 only implements the interface management work for the front and rear ends of collaboration to maximize efficiency gains and no. For front-end developers, they still need to manually construct false data. Thus tedious, error prone and narrow data coverage. Thus rap2 combined mockjs , it provides the functionality mock data. As long as you set up your parameter generation rule and initial values , you can generate a lot of random data conform to the rules. Front-end developers only need to plug the entire warehouse mockjs corresponding export, and references to your own project which you can totally get rid of the back-end staff happily developed. Given specific scenario will be used in the next section, this section which will demonstrate initial mock effect.

In the above image, name, age, province, city and even avatar can mock. This can be found in the development of such a text is too long leads to confusion ui bug, without begging my father made the back-end of the data.

mock template syntax: github.com/nuysoft/Moc...

mockjs official website template examples: mockjs.com/examples.ht...

scenes to be used

In this example three scenes, respectively a rear end, the front end of the tester.

rear end

For the back-end development, the preparation of the document is divided and the interface is mainly responsible for the module. As for warehouse management and mock template rules, specifically who is responsible for the front and rear end you may need to negotiate.

front end

Now to demonstrate how to combine the front end by a demo function rap2 quickly implement mock data.

1. Initiate a project through vue-cli rap2-vue-demo
2. Installation axios and mockjs;

   npm intsall axios --save
   npm intsall mockjs --save
   复制代码

3. Export rap2 warehouse template

There may be a bug rap2, open the browser will direct garbled. Preview function with console paste can solve this problem.

4. Mock create a folder in the src directory; mock folder under the new index.js, mock-template.js. code show as below:

   // src/mock/index.js
   const Mock = require('mockjs');
   require('./mock-template');
   window.Mock = Mock;
   
   (function(RAP, Mock) {
     for (let repositoryId in RAP.interfaces) {
   	for (let itf of RAP.interfaces[repositoryId]) {
   	  Mock.mock(itf.url, itf.method.toLowerCase(), settings => {
   		console.log(`Mock ${itf.method} ${itf.url} =>`, itf.response);
   		return Mock.mock(itf.response);
   	  });
   	}
     }
   })(window.RAP, window.Mock);
   复制代码

   // src/mock/mock-template.js
   (function() {
     let repositoryId = 42;
     let interfaces = [{...}] // 省略
     let RAP = window.RAP || {
   	protocol: 'http',
   	host: 'rapapi.tool.wezhuiyi.com',
   	interfaces: {}
     };
     RAP.interfaces[repositoryId] = interfaces;
     window.RAP = RAP;
   })();
   复制代码

In fact, the principle is to rap2 warehouse among corresponding mock export template, and then assign it as a parameter to Mock objects to complete the construction Mock objects. In this demo which is simple and crude to copy the template code to mock src / mock / mock-template.js them. Personally I think the best way is to introduce remote rap2 plug-js, so if there are changes in the interface, then the front end without any changes.

5. In main.js mockjs introduced, and in the object prototype axios write Vue

   import Mock from './mock';
   import axios from 'axios';
   
   Vue.config.productionTip = false;
   Vue.prototype.$http = axios;
   ...
   复制代码

6. Components used

   mounted() {
       this.$http.get("/api/v1/students").then(res => {
       console.log(res.data);
       this.student = res.data;
       });
   },   
   复制代码

7. Demonstration effect

test

For testers, use rap2 by "Export Postman Collection" feature, all Interface Repository of a key introduced into the postman. Then, based on this level interface to quickly build automated test. Specific practices can refer to this article: juejin.im/post/5c763a...