编写类 postman 页面 (1)
回顾
上一节我们已经编写好了 requests 请求相关的方法，那么现在我们就把它赋能到前端。
还记得之前说过对请求参数做校验的事情吗，恰好今天面试某 app 的时候面试官问到了我，哈哈我也给不出答案，面试官推荐了一款叫pydantic的工具，后面有空我去试试看。
开始编写我们的第一个页面
ps: 有条件的建议弄 2 个屏幕，这样开发效率更高，因为你在写样式，那边也跟着在更新。
这里我还没有规划好具体的页面内容，所以弄一个调试页面，专门用来发送 http 请求，后续可能会隐藏掉。
- 新建
src/pages/Request.jsx
import React from 'react';
export default () => {
return (
<div>临时用</div>
);
}
- 修改
config/routes.js目的是为了把我们刚才的页面显示出来
这段代码的意思是，加一个路径为/request 的页面，并且这个页面映射的组件是我们刚才编写的Request.jsx
。
开始编写我们的第一个组件
新建src/components/Postman/Postman.jsx文件，注意这里是jsx后缀。
咱们先引入antd里面的Card组件。
import {Card} from 'antd';
先把组件架子搭好:
import React from 'react';
import { Card } from 'antd';
export default () => {
return (
<Card></Card>
);
}
这里我们改变的是 postman 组件，还记得刚才有个 Request.jsx 吗？我们需要做一次嵌套操作，因为react是支持组件之间嵌套的。
- 调整刚才的
pages/Request.jsx
import React from 'react';
import Postman from '@/components/Postman/Postman';
export default () => {
return (
<Postman />
);
}
做的事情很简单，就是像我们引入Card一样，引入 postman，浏览器这时候已经自动渲染好了，我们来看看:
没错，上面的图片就是一个空的卡片，我们需要在卡片里面描绘出我们的 postman。
研究一下 postman 的构造
单纯看这个请求页面，他是采用的上下结构，共有四层，分别是:
url 层，标签栏，标签对应内容和 response 层。
如果让我去手动写的话呢，我确实写不出来，不过我有Ant Design这个法宝。
尝试编写第一层
我想说，刚才 postman 弹出更新，我的页面又变了，没关系，按新的来吧:
我们首先引入 Row, Col2 个组件，这 2 个组件类似于 bootstrap 的栅格系统，Col 的话会把宽度分为 24 份，我这里的意思是左侧分出 20 份用来存放url，右侧 4 份用来存放Send
其中他们之间的间距用gutter参数完成:
- 编写输入框
打开ant design网站，找到最合适的输入框:
就是你了，皮卡丘! 进去查看他的源代码:
这个按钮:
复制出这段代码:
<Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
可以看到，3 处红旗飘飘！那么我们来一个个看问题。
- Input 组件我们没有 import
- selectBefore 变量我们没有定义
- selectAfter 我们也没有定义，但是由于我们不需要后缀，所以直接删除即可
const selectBefore = (
<Select defaultValue="http://" className="select-before">
<Option value="http://">http://</Option>
<Option value="https://">https://</Option>
</Select>
);
可以看到这 2 处又飘红，其实是我们没有复制完全:
我们来看看页面的显示效果:
是不是感觉高度少了，宽度又太宽了？那我们稍作调整:
我们把占的宽度改为 18，size 改成 large，是不是看着会好一些了。
- 接着我们去编写 Send 按钮
也是类似，去 Ant design 官网找一个最合适的组件，这里我就不重复这个步骤了，因为我熟记了这些组件的 api，所以我可以直接写出来:
看看实际效果:
但是个人不是太喜欢这种方正的边框，还是习惯以前的 antd，所以我去设置里面改一下圆角:
最后我们给 Send 加一个帅气的图标:
记得图标也是需要导入的哈！看看效果:
好了，今天的内容就到这里了。主要是边截图边写还是蛮费时间的，后续会加快进度。如果想学的朋友，可以按照我之前给的 react 学习教程去看看对应的知识，还需课下多努力呀。
广告时间
后端代码地址: https://github.com/wuranxu/pity
前端代码地址: https://github.com/wuranxu/pityWeb
欢迎关注公众号测试开发油货，也欢迎加入 pity 交流群，一起讨论问题:
