Finally started the interface debugging module, no more nonsense, directly start:

First we are going to do a simple shell layer, and last class remarks shell layer the same way, here is to give you a quick paste source code using the technology are learned before. Note that after opening the cartridge layer, the interface ID must be put somewhere in the cartridge layer, so that we can know which interface is opened by the current user in the request when debugging and saving later.

First open P_apis. HTML and add this shell: id=ts

Pay attention to specific attributes such as long money. Hidden attributes are still added later.

Then we design two buttons for it: Save/cancel

In our design, the display/save functionality of the various attributes of the interface should be completed first, followed by debugging.

Add a button group to the div as follows:

The advantage of the button group is that two buttons can be pressed together in a very simple style.

It looks like this, in the upper right corner, float:right so that two buttons don’t take up an entire row. But all subsequent controls must be placed under the pair of buttons.

What we need to do first is the display of all attributes, no matter what input box, button, static copy, we will not add ID for the time being, until the final positioning needs to be added.

Next we put a header, both to let the user know which interface is debug interface, and also to secretly save our interface ID for future requests.

Note that the div’s background color is too black to be visible to the text, so we need to add color=white to the div, and for aesthetic purposes, we don’t want to top the div, so we add padding-left = 10px inside the div

In the title OF H3, I wrote two pairs of small labels. Small labels can put text with smaller size. There are two labels, the first one contains the interface ID and the second one the interface name. It’s nice to have a line in the middle. Now this is empty, and it will depend on the debug panel function we write later to fill it automatically, so we will also add different ids to the two small tags.

Next we write the interface: request method and URL, domain name we will write a separate line later, because in most cases, the URL of our debugging interface does not change, and the domain name will change frequently, different test environment.

Request mode and URL, including the send button, are better written on one line

Continue to add:

There is a big UL in the code, and there are three little Li’s inside. The style property was also simply optimized.

The source code can be copied as follows:

<ul class="nav navbar-nav" style="width: 98%"> <li> <select style="height: 40px;" Class ="form-control"> <option value="none"> Request mode </option> <option value="post" > POST</option> <option value="get" > GET</option> <option value="put" > PUT</option> <option value="delete"> DELETE</option> </select> </li> <li style="width: -webkit-calc(100% - 225px)"> <input style="; padding-left: 10px; width: 100%; height: 40px;" Color =" green "; color =" green "; color =" green "; color =" green "; color =" green "; width: 120px;" class="btn btn-default"><span style="font-size: large">Send</span></button> </li> </ul>Copy the code

The effect is as follows:

Next we develop the host input box:

In the figure above, we need to add 3 line breaks to get the perfect effect. The basic format is the same as the above line, with a large UL and a small LI tag, only this time there is only one Li. Set the width and default prompt text to look at the effect:

Next we put in the request header. As you know, the request header, although we see a row by row table in f12, postman, but actually send the request, it is a large JSON. So let’s simplify this a little bit and just put a big input box with json for the request header. Of course, we will optimize the interaction immediately in the next class, and the global public header and the global public domain are the topics that we will study later, so we won’t add them here, but we will change them later.

Use the previous format to continue with a line called header:

Note the default copy.

What we can do here is simply add two little buttons to reset the input, which means the user makes a mistake and wants to clear the input field. The size corresponds to the Send button above, so it looks better:

Add a new li tag to the host and header input fields. Insert a button similar to Send but with a smaller font and width. Note that the width of each LI should change accordingly, as follows:

Try to follow my width Settings, I’ve debugged it well:

The effect is as follows:

We can implement it later.

That concludes this section, which is more, but no more difficult. Be careful and don’t make mistakes.

Ps: I’ve been chasing fewer friends lately. So you are really good to see this section. That’s not beta. That’s not beta.