回顧

上一節我們編寫好了新增用例的介面，並且採用了jsonschema進行引數校驗，當然不是很好的方式，起碼解決了欄位校驗的問題。

那這一節我們就來做2個事情，一個是完成新增用例的頁面，另一個呢，是展示我們已經新增好的用例。

思考新增用例頁面

上一節我們已經提供了這樣一個用例樹的頁面，注意這裡有個+的按鈕，但是之前呢，他是沒有任何效果的。

我這裡解釋一下，為什麼點選+不直接彈出新增用例的表單呢，那是因為後續我們可能會把用例的目錄給放開，而不是像現在這樣只有目錄/用例，所以後續可能是新增目錄用。

好了，我們現在要編寫的就是用例的表單。按照鄙人的設計，裡面就是填入一些核心資料，也就是一個用例的必備欄位。

這裡我把用例的setup+teardown會抽出來，作為單獨的模組，一個最基礎的用例不包含setUp和tearDown。又由於我們暫時只支援了HTTP請求，所以核心欄位如下:

• 用例名稱

• 用例目錄

• 優先順序

• 狀態

• 請求型別

• tag

• 請求方式

• 請求地址

  其他的作為可選性，如果需要的話可以自行新增，比如headers等等。筆者考慮的是把這些資訊放入Drawer元件裡面，供使用者填寫並提交表單的形式。

一些想法

之前筆者是邊做邊想，可能有很多東西在做的時候並不合理，不會是一個很完善的版本。所以筆者現在改變了打法，是先做完一部分，然後針對這部分內容講解。所以如下是筆者編寫的初版頁面:

大致的頁面分為2個部分吧，分別是用例資訊和請求資訊。

改造之前的postman頁面

之前的postman.jsx是沒有包裝表單元件的，啥意思呢？也就是說，沒有如下這種效果:

Form元件是antd中比較重要的一種，專門用於表單的校驗。

但是因為我們之前的Postman頁面需要開放給使用者除錯，所以我們需要編寫一個新的元件，叫PostmanForm.jsx。

由於後面我們需要獲取到headers的值，所以我們把headers/body和setHeaders/setBody方法抽離出來。

其實這裡我要補充說明一下，因為對於react的hooks筆者不是很熟悉，可能存在狀態管理混亂的問題，但是考慮到之前熟悉的DVA和Reducers相關的知識較為晦澀，所以我這邊就不通俗地講了，畢竟我們也不是專業的前端，有些東西要先去解決，再去優化才行。當然，如果有大佬有更好的處理方式，筆者也願意虛心學習。

注意，我在url和請求方式都套上了Form.Item這個元件，這個元件可以將之變為表單的一項，所以就出現了上面gif的效果。但是卻不得不拆分這2個控制元件，不然顯示會有問題。

headers由於是列表，不好支援form，body又是第三方元件，所以我們就此別過。其他的程式碼基本上差別不大，與postman.jsx類似。

編寫新增用例表單

• 效果圖

• 程式碼部分

• onOk

  提交表單觸發的方法，這邊新新增body和header2個引數。

• translateHeaders

  因為我們的headers是list，所以我們要轉換它為字串。

Drawer也就是圖中的抽屜元件，它和modal很像。裡面的footer是它底部的"提交"和"取消"按鈕，分別對應onOk和onCancel方法。

接著就是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，所以不需要這個欄位了。

今天的內容，也只能到這裡了，囉嗦了老半天了。下一節展示用例詳情頁。