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

阅读本文可能需要一些时间，建议通勤/蹲坑的时候观看。

回顾

上篇编写了一部分结构，还剩下表格没有编写。以及和后端接口的联调，也会在本文补充。

补充Table内容

在此之前，我们给新增环境这个按钮加一个icon，这样会更直观。

icon地址: https://ant.design/components/icon-cn/

点击复制

其实icon也是一个组件，我们把它嵌入到Button

补充Table组件

需要注意的是，这里和html有大不一样的地方了。因为我们需要用到antd的Table组件，所以我们按照规矩行事，根据它需要的参数传入对应的数据就行。

先理解一下官网的最基本的表格例子

  • dataSource

    一个json数组，里面呢，存放的是数据信息，这个数据我们从哪儿来呢？从后端接口/config/environment/list获取。

  • columns

    这个是表格的列配置信息，也是个json数组，key代表列的key，title代表表头的名字，dataIndex代表从dataSource的数据里面取什么字段，比如上图的address，代表这一列的内容是从address里面取的。

我们先copy官网的代码，看看效果

可以看到，我们实现了想要的效果

但是这样还不够，数据和内容都不是我们想要的，所以我们还需要改造。

  • 改写columns

    我们有自己需要展示的列和字段:

其实我们需要展示id，环境名，备注，创建人和更新时间就可以了。所以列就这几项，但是因为我们还需要编辑某一行和删除某一行的功能，所以我们需要再定义一列。

定义一列操作列

操作列提供了2个链接a，分别是编辑和删除，用Divider隔开，这个是分割线。

  • 暂时改变dataSource的值

    因为这里的数据都是写好了的，并不是真正的接口返回，可以说是假数据。我们为了测试列名显示的情况，我们自己给他进行一些调整。

对应上columns里面的remarks，name,create_user等等

显示效果如下

大体上我们已经完成了html结构的编写，接着我们需要补全功能。其实路还很长，我们需要改动的地方还很多，建议大家耐心看。

拿到真实数据

上述我们是造了一个假数据，那我们怎么拿到真实数据呢？首先，我们需要维护一个变量，举个例子叫: data，它默认是空数组，也就是没数据。当我们请求了/config/environment/list接口以后，更新data变量，由于react会自动判断变量的更新并update页面内容，所以我们需要做的事情就变得很简单了。

  • 维护data变量

state大家注意，这个是一个固定的写法，别换成别的，react会自动监听Environment组件的state变量里的数据内容。这么理解，state等于是一个动态变量池，你在里面放入一个data，当state里面的data发生变化，react会自动检测data是否在dom上有显示，有的话就自动更新。

同时，我们还要把原来的dataSource去掉，换成data。

  • 编写获取后端的接口

这边我们一次性把增删改查的接口都编写好，以便之后去使用。其实就是request请求，然后传入对应的请求方式和url地址+参数等。注意以下图中post和get的区别。

有同学可能注意到了，第一个listEnvironment接口method下面一行的params，怎么不是key-value的形式？有同学知道的吗？

其实这里是一个省略的写法，当key的名字和value变量名一样的时候，可以省掉key。也就是说:

{key: key}可以简写为{key}，注意：前面的key是字符串，后面的key是变量。这个大家要搞明白才能玩得转！

  • 需要维护的变量

    由于我们的环境列表获取页支持分页，所以在获取列表的时候，需要加上当前page和size2个参数。这边我们还得维护一个变量: pagination，这样当我们用户切换页码的时候，我们可以去请求对应page的环境列表。

默认current为第1页，pageSize为8，数据总数为0

由于我们的list接口还需要一个name参数，而这个name也会进行更换，所以我们也要维护一个name的变量。

  • 编写获取环境列表的方法

这个方法接受page, size和name3个参数，如果不传入的话，默认为state里面的值。为啥要设定参数，这个说来话长，因为react的修改状态不是立马生效的，是异步的。

举个例子，你在翻页的时候，想的是更新了页码的当前页从1->2，然后重新调用fetchEnvironmentList方法，可能还是取的第一页数据。所以我们需要支持参数化，这样更可控。

如果请求成功，我们就更新data的数据为response.data， pagination的total字段为res.total。

这里有个细节要值得注意:

我们更新状态，必须用this.setState，不能直接去修改它的值。比如: this.state.data = xxx，这样是不对的。

  • 思考什么时候会发生获取环境列表的调用

    其实有2个地方，第一个是我刚进来，你要给我展示第一页的数据。第二个是我搜索的时候，你也要给我展示新的数据。

我们加上一个这样的方法，componentDidMount是react的一个固定的写法，也是继承自Component的方法，代表这个组件加载后执行的方法，这个方法仅仅会被执行一次，满足了我们的需求（一进来就获取环境信息）。

看看效果

那个创建人为1的地方，大家先忽略掉，因为我存的是用户id。

编写查找的方法

首先我们需要改写搜索框，当搜索框的文本有变化的时候，我们需要去更新name，其次是用户点击搜索按钮或回车的时候，我们要去根据输入的内容搜索对应的环境。

  • 改写搜索框

注意一下，这个输入框的内容的value是this.state.name，然后onChange是antd为Input输入框提供的方法，e.target.value可以拿到用户输入的新值，接着我们根据新的值改写name即可。

onSearch方法，实际上调用了fetchEnvironmentList方法，第三个参数传入了当前用户输入的name。

编写新增/修改功能

其实新增和修改很简单，我们想象有一个对话框，里面可以填写环境名和备注，那不就o了吗？雀氏如此！

复杂的表单，antd都给我们封装好了，博主这里又进一步封装了一层，有兴趣的可以去看具体的源码。

我们想做的就是，点击新增环境按钮，给咱家弹出一个对话框，那对话框啥时候显示，是不是很明了了呢？你点的时候就显示，X掉就不显示了。

所以我们需要一个visible的变量(默认为false)，去管理我们对话框是否出现。还需要一条记录record，用于初始化表单的数据。

Modal(也就是对话框)我们已经编写好了，onFinish代表的是表单的提交动作，在这里有2种：

  • 新增环境

  • 编辑环境

    怎么区分它们呢？我们根据record里面的id是不是0来区分，如果不是0说明是编辑动作，否则则是新增动作。所以我们在点击新增环境按钮的时候，需要把record也进行下修改。

可以看到我们可以正确获取到表单的数据

接着我们来编写onFinish方法:

如果成功提交，我们需要关闭对话框！最终我们重新获取一遍数据，嘿嘿。

最后，我们需要为编辑按钮添加一个点击事件: 显示出对话框并把表单初始化为这行数据。

编写删除方法

删除很简单，只需要传入record.id给onDelete方法，并调用到后端接口即可。

你以为，这就结束了？其实还有2个地方！有没有想过，我们没有处理table翻页的情况，还有个就是上面的创建人是数字的情况。

编写翻页功能

只需要在table的onChange事件里面调用获取环境列表的方法即可。注意，pagination参数是当前你要翻的页面，比如你从第一页到第二页，那么pagination的数据是{current: 2, pageSize: 8}，这个大家可以自己console.log输出试试。还得指定pagination参数为this.state.pagination。

简单地替大家尝试一下

其实拆分不太合理，下篇花了太多时间。但是也不想花费太多篇章了。辛苦大家耐心看完了！不太完整的前端教程就到这里了~

前端代码仓库: https://github.com/wuranxu/pityWeb

后端代码仓库: https://github.com/wuranxu/pity

posted @ 2021-09-15 19:47  米洛丶  阅读(59)  评论(0)  编辑  收藏  举报