Writing a Postman page (3)
review
Remember in the last video we wrote the middle part of Postman, and there’s actually some form data left in the header section, so today we’re going to try to do that and try to run a little demo.
Look for editable table components
As you can see, this is relatively simple. It’s basically two pieces: a text section and an editable table
With editable forms, we can write our own, or we can use ready-made forms. To be silly, we used ant Design Pro packaged higher-order components (meaning fully functional, simple and easy to use)
Specific address: ProComponents
So this is what we need, and since we’re using JavaScript and not TypeScript, we need to be a little more complicated to find the source:
In the pop-up website can find the corresponding JS code!
Our project is already equipped with pro components, so there is no need for additional installation. (There are some issues with testing the new version)
Write an editable form prototype
First of all, our component is a Postman component, but the editable component can be reused with the headers tag, so let’s separate it out and encapsulate it.
New SRC/components/Table/EditableTable JSX
The code is basically copied, but we extract a few important parameters:
-
columns
Since each of our tables may have different fields, we cannot write to death
-
dataSource
The actual data, originally not like this, but found that this component has a bug, let me a little embarrassed
-
setDataSource
Change the dataSource method
-
title
For example, the title we need here is Query Params
Note that here, I get the real field from columns, because we have other fields such as later deletion. After getting the field, when the user clicks to add a new row of data, the value is added to the field by default.
Introduce a table component and write columns
- columns
I set three fields: KEY,VALUE, and DESCRIPTION. In keeping with Postman, I set an icon (delete) for the last column, and the delete method was written by hand (again, because he was buggy and couldn’t be deleted). Because I can not delete the official website without changing the source code.
Look at the effect:
In fact, Postman does a more elaborate job. The following data changes the content of the URL. So let’s implement this as well.
Transform the URL
Now that we have the params parameter, our URL is made up of two parts:
- url
- params
Therefore, when we change the original URL, if there is any parameter change, we need to modify the parameter item, and if the parameter item changes, we also need to modify the URL.
Because this ProTable has a little bug, the author also worked for a long time tonight, but finally successfully completed, you can pull the latest code can see the effect. Unfortunately, I wasted a lot of time today, so I’m just going to give you a brief description of the code.
The table component has some changes:
- It separates the key being edited from the method that modifies the editable key
- The extra function is used to make extra changes when the table changes, because we have to update the URL when the table changes
A method for concatenating URLS
The url rule is www.xxx.com +? Parameter 1= value & Parameter 2= value 2
So the first argument is? I’m going to separate it, and I’m going to use an &, and I’m going to make it very clear.
How to disassemble urls
I’m going to write a little bit more complicated here, so I’m going to check if there are any parameters in the URL, and if there are no parameters, I’m going to clean up the form data. The next step is to take the DATA from the URL and form a new form. But each row of the form is time distinct, here js execution is too fast, so I use array index + time +10, even if now is all the same, it doesn’t matter, because the index will be different, to avoid the problem of adding more than one row at a time (of course you can’t see this problem).
Delete the parameter
When deleting parameters, the url is also rejoined to the URL input box
Input field URL changes also change the parameter table
New methods for variables and set variables
The overall file code can go to Github to see, here limited space will not post.
The final result
Find a screenshot software, let everyone see the effect, good night.
AD time
The preview address is http://47.112.32.195/
Back-end code address: github.com/wuranxu/pit…
Front-end code address: github.com/wuranxu/pit…