测试平台系列(32) 编写环境配置页面(中).md

米洛 2022/6/13 测试平台接口测试FastApiPythonReact

# 回顾

大家好呀，又见面了！上期我们已经完整地编写了环境管理CRUD的接口，但是光有接口是不行的，我们需要为之编写一个web页面，使用户能够在页面上管理环境数据。

这是前端系列文章的第一篇，包含了部分教程在里面，所以本来是下篇的它，变成了中篇。

我们在实现某个功能的时候，就算不画出原型，心中也一定设计好大概的结构。以我们的环境管理为例子，用户可以通过table查看当前已有的环境，也提供input输入框去搜索对应的环境，table的数据随着搜索的结果进行切换。功能点很简单，我们设计一下具体的页面。

由于我不是专业的设计，所以我打算采用手绘的方式来给大家描述一下要做个啥玩意儿。下面是我用手写板画的一个草图(美术功底较差):

这里只画出了具体页面的内容，我们把这个页面拆成3个部分。

代码很简单，一个大盒子下面嵌入3个小盒子，第一个盒子里面包含一个button和一个input，第二个盒子本应该是个表格，但是由于我对html的表格不太熟悉，所以我放了个空气在那。第三个就是分页，为了偷懒，我也只是写个名字。大体的效果如下:

这一步主要是为了让大家能够明白页面的布局，相信有html基础的同学都能够看懂。

也许用类的方式大家会比较熟悉，我们今天就用类来编写一个环境管理的组件。

先来讲解一下这个过程，定义一个Environment类，集成自React的Component类，重写里面的render方法。

讲一下这个render方法，render里面我们一般直接return了，render()这个方法会在组件的各个生命周期都调用到，我们这里不细究。

简单的说，render就是为了把你的页面给渲染出来而执行的操作，渲染什么页面呢？

你需要给它return一个html的组件，我们先看看效果:

最后的export default，就是导出这个类，为了给别人import的时候使用。不然别人并不知道引入文件里的什么类，因为一个文件可能包含多个类。

有没有觉得这个return里面的内容很熟悉，没错，里面其实是html的写法，和html差不多, 但是有些许差别。

我们复制刚才的html代码到此处:

可以发现页面报错了，因为这里写法和html有些许不一致。主要体现在style里面，我们对它进行调整:

效果:

解释: 这并不是纯粹的html，而是React定义的一套jsx的语法。想必大家有注意到几个区别:

{{name: "榜一大哥"}}

所以当我们写

style={{color: "#ffffff"}}

就等价于html里面的

style="color:#ffffff"

有部分字段被改名了

react估计是为了统一规范，采用的都是驼峰式字段。比如上文中有的marginTop，其实在html里面是margin-top。这个其实大家不用太在意，ide会给你提示:

当然，如果你单独编写css文件的时候，是没有区别的哈，这是行内样式的区别。

除此之外，好像差别并不太大？所以其实学习成本并不算太高。

为啥要用antd，你没看到这个页面奇丑无比吗？antd就是你的美图秀秀，一键美颜，你爱不爱？

代码改动如上，实际效果：

我们在Card最外层也套上PageContainer:

效果:

如果title传入false的话，就会显示成项目列表的页面了。

ps: 有没有觉得页面渐渐美化了一点？？

改造新增环境按钮和输入框

学过bootstrap的都明白栅格系统吧？大体是说，把一个页面分为12份，你一个盒子占6份就是6/12 = 一半儿宽，其实antd也有类似的实现，只不过它是按照24份切割宽度的。

我现在指定新增按钮占6份，中间留白12份，搜索框占据6份。那么怎么写呢？
求求了，换个按钮和输入框吧

我们用上antd的按钮和输入框。因为button和input是html默认自带的组件，所以我们为了区别，自定义的组件都用大写字母开头哦，比如Button和Input。

type=primary指的是确定类按钮，一般是高贵的蓝色。其他的与普通的html并无区别吧，Input.Search代表我们用antd封装好的搜索组件，而不是普通的输入框。