Following the development in the previous section, we still need a request body, and we will optimize the interaction after we develop the core functionality. Input is faster.

Open the P_apis. HTML. Add ul inside the div debugger layer to put our request body selection button group:

There are five buttons, one of which is a drop-down list.

None, form-data, X-www-form-urlencoded,raw, return body

Raw himself drop down list, include: text, javascript, json, HTML, XML

These buttons. Write according to the code to see the effect oh ~ pure bootstrap3

<br><br><br> <ul id="myTab" class="nav nav-tabs" > <li class="active"><a href="#None" data-toggle="tab" >None</a></li> <li ><a href="#form-data" data-toggle="tab" >form-data</a></li> <li ><a href="#x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencoded</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#Text" tabindex="-1" data-toggle="tab">Text</a></li> <li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li> <li><a href="#Json" tabindex="-1" data-toggle="tab">Json</a></li> <li><a href="#Html" tabindex="-1" data-toggle="tab">Html</a></li> <li><a href="#Xml" tabindex="-1" Xml data - toggle = "TAB" > < / a > < / li > < / ul > < / li > < li > < a href = "# home" data - toggle = "TAB" > return body < / a > < / li > < / ul >Copy the code

The effect is as follows:

The large white space in the bottom half of the debug form is reserved for these buttons, which is a common area. Each button leads to a small div of its own interface but is almost always hidden from view at first. When you click on a button, it quickly switches to that div and hides the others.

Of course, the first button None is displayed by default, and the small div led by None is displayed in the empty space below.

So how do you map each little div to which button?

It’s actually the href property of those buttons that I just wrote down, so using anchor point technique, href= “#None” then the ID of that little div that you’re going to create is None, and you can connect those two things together.

How does it work on the inside? In fact, it is already written in bootstrap3, we just need to write their class property correctly, so you must not write wrong words when copying, it is best to copy.

These small divs need to be placed in a large div to be effective:

Below the ul we just wrote, add the big div and the small div inside:

Or give the source code:

<div id="myTabContent" class="tab-content"> <div class="tab-content"> <div class="tab-pane fade in active" ID ="None"> Enter None </div> <div Class ="tab-pane fade" id="form-data"> Form-data </div> <div class="tab-pane fade" ID ="x-www-form-urlencoded"> X-www-form-urlencoded </div> <div class="tab-pane fade" ID ="Text"> Text </div> <div class="tab-pane fade" Id ="JavaScript"> JavaScript </div> <div class="tab-pane fade" ID ="Json"> Json </div> <div class="tab-pane fade" Id ="Html"> goes to Html </div> <div class="tab-pane fade" ID ="Xml"> goes to Xml </div> </div>Copy the code

Currently, each small div contains only one copy, which tells you exactly which small div you successfully entered.

Only the first small div with id=None has more classes in active.

This is the default display

Good to see the effect:

Okay, so once we’re done testing it, we’re fine, and then we’re going to start developing the content of each of the little divs, and we’re going to delete the little copy that we wrote. Change into something else:

The first is the simplest None: (Passes no request body)

Design: When the user clicks on this, we display a message: this request does not carry any request body. Both Chinese and English! Don’t be too bright! Copy to center!

The effect is as follows:

Ok, that’s it, let’s start designing form-data:

According to Postman’s rules of interaction, this should look like a table, with keys on the left and values on the right, all in string format. Quantity can be added/deleted at any time. It seems difficult. When faced with this emptying, we can do two things:

  1. Soil method, with a large number of JS code to achieve.

  2. Bootstrap3 to find the corresponding table, but does not support the addition and deletion, the need for secondary development, more difficult

  3. Directly find third-party components that support addition and deletion. The effect is stable, but cost is needed to try.

We choose the third option and go straight to the ready-made one. The author has found the best of several methods to save us all the trouble.

But I’ll leave that to the next class. Welcome to keep watching