测试平台系列(12) 编写类postman页面(1)

编写类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弹出更新，我的页面又变了，没关系，按新的来吧:

新版postman

我们首先引入Row, Col2个组件，这2个组件类似于bootstrap的栅格系统，Col的话会把宽度分为24份，我这里的意思是左侧分出20份用来存放url，右侧4份用来存放Send

其中他们之间的间距用gutter参数完成:

上下左右间距8px

• 编写输入框

  打开ant design网站，找到最合适的输入框:

就是你了，皮卡丘!进去查看他的源代码:

这个按钮:

复制出这段代码:

<Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />

可以看到，3处红旗飘飘！那么我们来一个个看问题。

1. Input组件我们没有import
2. selectBefore变量我们没有定义
3. selectAfter我们也没有定义，但是由于我们不需要后缀，所以直接删除即可

1和3都已经解决，接着我们继续去复制selectBefore

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，所以我可以直接写出来:

看看实际效果:

第一层的UI基本上就编写完成了

但是个人不是太喜欢这种方正的边框，还是习惯以前的antd，所以我去设置里面改一下圆角:

最后我们给Send加一个帅气的图标:

记得图标也是需要导入的哈！看看效果:

好了，今天的内容就到这里了。主要是边截图边写还是蛮费时间的，后续会加快进度。如果想学的朋友，可以按照我之前给的react学习教程去看看对应的知识，还需课下多努力呀。

广告时间

后端代码地址: https://github.com/wuranxu/pity

前端代码地址: https://github.com/wuranxu/pityWeb

欢迎关注公众号「测试开发入坑」，还有加群一起讨论相关问题呀！如果群二维码过期了，可以加我个人微信: wuranxu 我拉你进群~