编写类postman页面(1)

回顾

上一节我们已经编写好了requests请求相关的方法,那么现在我们就把它赋能到前端。

还记得之前说过对请求参数做校验的事情吗,恰好今天面试某潮鞋app的时候面试官问到了我,哈哈我也给不出答案,面试官推荐了一款叫pydantic的工具,后面有空我去试试看。

开始编写我们的第一个页面

ps: 有条件的建议弄2个屏幕,这样开发效率更高,因为你在写样式,那边也跟着在更新。

这里我还没有规划好具体的页面内容,所以弄一个调试页面,专门用来发送http请求,后续可能会隐藏掉。

  • 新建src/pages/Request.jsx
  1. import React from 'react';
  2. export default () => {
  3. return (
  4. <div>临时用</div>
  5. );
  6. }
  • 修改config/routes.js 目的是为了把我们刚才的页面显示出来

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

这段代码的意思是,加一个路径为/request的页面,并且这个页面映射的组件是我们刚才编写的Request.jsx

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

开始编写我们的第一个组件

新建src/components/Postman/Postman.jsx文件,注意这里是jsx后缀。

咱们先引入antd里面的Card组件。

  1. import {Card} from 'antd';

先把组件架子搭好:

  1. import React from 'react';
  2. import { Card } from 'antd';
  3. export default () => {
  4. return (
  5. <Card></Card>
  6. );
  7. }

这里我们改变的是postman组件,还记得刚才有个Request.jsx吗?我们需要做一次嵌套操作,因为react是支持组件之间嵌套的。

  • 调整刚才的pages/Request.jsx
  1. import React from 'react';
  2. import Postman from '@/components/Postman/Postman';
  3. export default () => {
  4. return (
  5. <Postman />
  6. );
  7. }

做的事情很简单,就是像我们引入Card一样,引入postman,浏览器这时候已经自动渲染好了,我们来看看:

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

没错,上面的图片就是一个空的卡片,我们需要在卡片里面描绘出我们的postman。

研究一下postman的构造

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

单纯看这个请求页面,他是采用的上下结构,共有四层,分别是:

url层,标签栏,标签对应内容和response层。

如果让我去手动写的话呢,我确实写不出来,不过我有Ant Design这个法宝。

尝试编写第一层

我想说,刚才postman弹出更新,我的页面又变了,没关系,按新的来吧:

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

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

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

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

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

  • 编写输入框
    打开ant design网站,找到最合适的输入框:

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

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

这个按钮:

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

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

复制出这段代码:

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

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

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

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

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

  1. const selectBefore = (
  2. <Select defaultValue="http://" className="select-before">
  3. <Option value="http://">http://</Option>
  4. <Option value="https://">https://</Option>
  5. </Select>
  6. );

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

可以看到这2处又飘红,其实是我们没有复制完全:

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

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

我们来看看页面的显示效果:

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

是不是感觉高度少了,宽度又太宽了?那我们稍作调整:

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

我们把占的宽度改为18,size改成large,是不是看着会好一些了。

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

  • 接着我们去编写Send按钮
    也是类似,去Ant design官网找一个最合适的组件,这里我就不重复这个步骤了,因为我熟记了这些组件的api,所以我可以直接写出来:

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

看看实际效果:

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

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

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

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

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

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

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

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

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

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

广告时间

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

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

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

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

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