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

回顾

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

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

image

原型设计

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

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

image

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

• 新增/搜索

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

• 表格

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

• 分页

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

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

编写传统的HTML

image

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

image

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

试试React的写法

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

image

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

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

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

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

image

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

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

编写html结构

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

image

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

image

效果:

image

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

• style的写法不一样

  是的，其实可以理解，react中的style是由{{}}组成的，实际上，他是由{}嵌套一层字典{}实现的。比如{{name: "榜一大哥"}}，所以当我们写style={{color: "#ffffff"}}就等价于html里面的style="color:#ffffff"

• 有部分字段被改名了

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

image

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

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

使用antd改造结构

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

• 改造最外层div

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

image

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

image

• 加入PageContainer豪华套餐

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

image

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

image

效果:

image

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

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

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

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

  我现在指定新增按钮占6份，中间留白12份，搜索框占据6份。那么怎么写呢？

image 效果图

• 求求了，换个按钮和输入框吧

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

image

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

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

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

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