回顾
上一节我们编写好了添加用例的接口，并且采用了jsonschema进行参数校验，当然不是很好的方式，起码解决了字段校验的问题。
那这一节我们就来做2个事情，一个是完成新增用例的页面，另一个呢，是展示我们已经添加好的用例。
思考新增用例页面
image
上一节我们已经提供了这样一个用例树的页面，注意这里有个+的按钮，但是之前呢，他是没有任何效果的。
我这里解释一下，为什么点击+不直接弹出新增用例的表单呢，那是因为后续我们可能会把用例的目录给放开，而不是像现在这样只有目录/用例，所以后续可能是添加目录用。
好了，我们现在要编写的就是用例的表单。按照鄙人的设计，里面就是填入一些核心数据，也就是一个用例的必备字段。
这里我把用例的setup+teardown会抽出来，作为单独的模块，一个最基础的用例不包含setUp和tearDown。又由于我们暂时只支持了HTTP请求，所以核心字段如下:
- 用例名称
- 用例目录
- 优先级
- 状态
- 请求类型
- tag
- 请求方式
- 请求地址
其他的作为可选性，如果需要的话可以自行添加，比如headers等等。笔者考虑的是把这些信息放入Drawer组件里面，供用户填写并提交表单的形式。
一些想法
之前笔者是边做边想，可能有很多东西在做的时候并不合理，不会是一个很完善的版本。所以笔者现在改变了打法，是先做完一部分，然后针对这部分内容讲解。所以如下是笔者编写的初版页面:
image
大致的页面分为2个部分吧，分别是用例信息和请求信息。
改造之前的postman页面
之前的postman.jsx是没有包装表单组件的，啥意思呢？也就是说，没有如下这种效果:
image
Form组件是antd中比较重要的一种，专门用于表单的校验。
但是因为我们之前的Postman页面需要开放给用户调试，所以我们需要编写一个新的组件，叫PostmanForm.jsx。
由于后面我们需要获取到headers的值，所以我们把headers/body和setHeaders/setBody方法抽离出来。
其实这里我要补充说明一下，因为对于react的hooks笔者不是很熟悉，可能存在状态管理混乱的问题，但是考虑到之前熟悉的DVA和Reducers相关的知识较为晦涩，所以我这边就不通俗地讲了，毕竟我们也不是专业的前端，有些东西要先去解决，再去优化才行。当然，如果有大佬有更好的处理方式，笔者也愿意虚心学习。
image
注意，我在url和请求方式都套上了Form.Item这个组件，这个组件可以将之变为表单的一项，所以就出现了上面gif的效果。但是却不得不拆分这2个控件，不然显示会有问题。
headers由于是列表，不好支持form，body又是第三方组件，所以我们就此别过。其他的代码基本上差别不大，与postman.jsx类似。
编写添加用例表单
- 效果图
image
- 代码部分
image
- onOk
提交表单触发的方法，这边新添加body和header2个参数。 - translateHeaders
因为我们的headers是list，所以我们要转换它为字符串。
image
Drawer也就是图中的抽屉组件，它和modal很像。里面的footer是它底部的"提交"和"取消"按钮，分别对应onOk和onCancel方法。
image
接着就是Form嵌套的2个大模块: 用例信息和请求信息。
可以看到用例信息和请求信息都是H3标签，并且编写了border-left，看着就有图中的效果了。
中间的fields.map就是自定义的表单组件了，通过解析json完成表单组件的填写。
其实这么讲起来，如果不懂React的人，好像白讲了。。感觉不是很适合入门！！！ε=(´ο｀*)))唉
总之呢，就是实现了gif的效果，后面接着讲展示页面。如果大家有兴趣的话，可以多多课下熟悉熟悉React和ant design，测开的话虽然做的是内部工具，但是如果涉及到团队协作，大家很多人用类似的技术栈完成不同的功能模块，我个人觉得测开还是要学一些vue/react的，不然纯粹做后端的话，前端真的很难找到合适的伙伴帮你做。
后端也有改动
- 新的models/TestCase.py
from app.models import db from datetime import datetime class TestCase(db.Model): id = db.Column(db.INT, primary_key=True) name = db.Column(db.String(32), unique=True, index=True) request_type = db.Column(db.INT, default=1, comment="请求类型 1: http 2: grpc 3: dubbo") url = db.Column(db.TEXT, nullable=False, comment="请求url") request_method = db.Column(db.String(12), nullable=True, comment="请求方式, 如果非http可为空") request_header = db.Column(db.TEXT, comment="请求头，可为空") # params = db.Column(db.TEXT, comment="请求params") body = db.Column(db.TEXT, comment="请求body") project_id = db.Column(db.INT, comment="所属项目") tag = db.Column(db.String(64), comment="用例标签") status = db.Column(db.INT, comment="用例状态: 1: 调试中 2: 暂时关闭 3: 正常运作") priority = db.Column(db.String(3), comment="用例优先级: p0-p3") catalogue = db.Column(db.String(12), comment="用例目录") # expected = db.Column(db.TEXT, comment="预期结果, 支持el表达式", nullable=False) created_at = db.Column(db.DATETIME, nullable=False) updated_at = db.Column(db.DATETIME, nullable=False) deleted_at = db.Column(db.DATETIME) create_user = db.Column(db.INT, nullable=False) update_user = db.Column(db.INT, nullable=False) def __init__(self, name, request_type, url, project_id, status, priority, create_user, catalogue, tag=None, request_header=None, body=None, request_method=None): self.name = name self.request_type = request_type self.url = url self.priority = priority self.project_id = project_id self.tag = tag self.catalogue = catalogue self.status = status # self.expected = expected self.body = body self.create_user = create_user self.update_user = create_user self.request_header = request_header self.request_method = request_method self.created_at = datetime.now() self.updated_at = datetime.now()
去掉了expected和params字段，因为params咱们目前会带入url，所以不需要这个字段了。
今天的内容，也只能到这里了，啰嗦了老半天了。下一节展示用例详情页。
