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

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

# 回顾

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

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

# 原型设计

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

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

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

  • 新增/搜索

    新增代表新增一个环境,这样会弹出一个环境对话框。最右侧是搜索框,根据环境名去搜索对应的环境。

  • 表格

    表格是为了展示目前已有的环境数据,注意这里我漏画了,表格最后一列还需要一个操作列,包含"修改"和"删除"2个功能。

  • 分页

    当数据较多的时候,我们需要分页。

    大概的一个页面就绘制好了,接着就是把它变现!

# 编写传统的HTML

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

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

# 试试React的写法

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

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

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

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

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

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

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

# 编写html结构

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

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

效果:

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

  • style的写法不一样

    是的,其实可以理解,react中的style是由{{}}组成的,实际上,他是由{}嵌套一层字典{}实现的。比如

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

所以当我们写

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

就等价于html里面的

style="color:#ffffff"
1
  • 有部分字段被改名了

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

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

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

# 使用antd改造结构

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

  • 改造最外层div

    首先,我们用Card组件,包裹我们的内容,Card默认带了一个卡片的样式,我们来试试看:

代码改动如上,实际效果:

  • 加入PageContainer豪华套餐

    我们之前的页面都会有个PageContainer的组件包裹,这样的话会能够显示当前页面的名字等信息,例如:

我们在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封装好的搜索组件,而不是普通的输入框。

效果图,就问你是不是美图秀秀

今天的内容就到这儿了,其实咱们测试能写这种页面就已经很不错了,虽然比不上专业的前端,但是也能够独当一面了!

下一篇也会是教程类的文章,这2篇过后,前端的细节部分就不再赘述了。