介面測試平臺-88: 全域性請求頭之新增+刪除+修改後的勾選和展示

沒有誰不是路人發表於2020-12-13

1. 儲存選中請求頭

回到P_apis.py中，找到除錯彈層的儲存js函式，將要在這裡給使用者選中的公共請求頭的id獲取到，然後組成列表，在儲存js函式中傳給後端儲存起來。

var project_headers = document.getElementById('ts_project_header_li').children;
var ts_project_headers = []
for (var i=0; i<project_headers.length; i++) {
    if (project_headers[i].children[0].checked === true) {
        ts_project_headers.push(project_headers[i].children[0].value)
    }
}

簡單解釋下上面這段程式碼：

首先用project_headers獲取這li標籤下所有 label標籤，成為一個列表。

然後建立空列表用於存放一會要傳給後端的欄位。

然後for迴圈遍歷，此時的project_headers[i]就是某個label，但是這個label內仍然有子元素，也就是要定位的input，所以還要再加.children方法來獲取它下面的所有子標籤，當然input是第一個，所以下標為[0]。然後再獲取它的選中狀態，為true就代表選中。那麼就給它的value，也就是這個請求頭的id，新增到空列表：ts_project_headers 中，等全部遍歷完，就把這個列表轉成字串，和其他介面欄位一起傳遞個後臺函式。

然後去找到後臺views.py找到儲存介面的函式。

寫到這，重啟服務重新整理頁面，選中倆個請求頭儲存。然後進入後臺，找到這個介面，看看其中的欄位是否儲存成功：

看來是成功儲存了這倆個選中的請求頭的id。

2. 展示已儲存請求頭

一開啟這個介面除錯層，點選倒三角，就看到這個介面已經選擇了哪幾個請求頭。所以要回到P_apis.html中，修改顯示這個除錯彈層的js函式。

然後遍歷所有儲存選中的id的請求頭，給他們的id的input屬性改成checked狀態。

{#  公共請求頭  #}
var project_headers = ret.public_header.split(',');
for (var i=0; i<project_headers.length; i++) {
    document.getElementById('checkbox_' + project_headers[i]).checked = 'checked';
}

然後重新整理頁面，開啟這個介面的除錯層，點選倒三角，看看效果：

可以看到確實已經選中之前儲存的。現在改變內容儲存，再次開啟看看。發現儲存和開啟都成功了。

3. 新增新的請求頭並除錯選擇

去請求頭設定彈層，新新增測試：

然後再開啟發現出現了bug。

之前選中的都變成了未選中狀態，且首先開啟console皮膚，可以很直觀看到js報錯：錯誤說checked 設定時出現了null空的元素標籤。

點開看看具體哪行：(自動標綠)

從介面的資料來看，儲存好的請求頭id一點問題都沒有：那麼它為什麼說沒找到呢，答案就是這幾個請求頭的id都變了

如上圖可見到，修改了一次請求頭之後。發現所有請求頭的id都變了，所以才會出現這個bug。那麼為什麼會變呢？

那就是因在上兩三節中，設定的儲存請求頭程式碼有問題。是刪除了之前所有的，然後重新儲存了一遍。雖然name/key/value都沒變，但id是自增的，所以每次儲存都會導致id不同。為了避免這個bug，現在去修復這個views.py層的函式吧。

先來回顧下這個函式現在的樣子：

並沒有拿到這些請求頭的id,只傳給了後端這些name/key/value，所以去P_apis.html中，給這個傳遞加上id。

上圖中，請仔細修改紅線內。都增加了id的設定。那個input用來存放id的值，只是預設隱藏了。使用者不需要去看這個id。

然後是點選新增按鈕的那個js函式，新增上那個隱藏的記錄id的input。

這裡遇到了問題，這個input，不知道新的請求頭的id應該是多少，所以這裡沒用字串new代替，然後後臺函式進行更新時。遇到為new的，就去建立即可。

然後去views.py中繼續修改：提取到了ids的列表，然後拆分。利用它做個大迴圈。對資料庫請求頭表進行更新或遇到new就新增：

# 儲存專案公共請求頭
def save_project_header(request):
    project_id = request.GET['project_id']
    req_names = request.GET['req_names']
    req_keys = request.GET['req_keys']
    req_values = request.GET['req_values']
    req_ids = request.GET['req_ids']

    names = req_names.split(',')
    keys = req_keys.split(',')
    values = req_values.split(',')
    ids = req_ids.split(',')

    for i in range(len(names)):
        if ids[i] == 'new':
            DB_project_header.objects.create(project_id=project_id, name=names[i], key=keys[i], value=values[i])
        else:
            DB_project_header.objects.filter(id=ids[i]).update(name=names[i], key=keys[i], value=values[i])
    return HttpResponse('')

然後重啟服務，重新整理頁面繼續詳細的測試。這裡為了避免有風險的髒資料，乾脆在後臺刪除了這個專案所有的已有請求頭。然後重新新增一些：

點選儲存後，再開啟，依然看得到，這說明儲存成功了。此時記下他們的id：

可以在html上看，也可以去後臺看。三個請求頭的id分別是92,94,95。然後點選儲存，再開啟，看看是否有變化：（修改）

可以看到，沒有變化，這說明儲存成功了。並且是原來上修改，而非新增新的。

這時候該去測試一下除錯彈層中選中的會不會有問題吧：

4. 補回刪除功能

之前是如果name為空，儲存後就刪除。不過js程式碼中對這個空給過濾掉了，並沒有發給後端，後端也只顧著對其它3個請求頭進行更新，全程沒理這個name為空的。

所以這裡的改法是，把這個空前端不進行過濾，就放給後臺，然後後臺遇到name空的，就刪除即可。這麼改：

然後後臺：增加這個判斷。為什麼要用try呢？因為如果使用者是新建了一個空的，那就會走到刪除分支。但是這個新的空的請求頭的id"new" 在資料庫中肯定沒有，所以就會報錯，這種try掉，不理它就是了，也不刪除，也不儲存，就相當於沒有過。

# 儲存專案公共請求頭
def save_project_header(request):
    project_id = request.GET['project_id']
    req_names = request.GET['req_names']
    req_keys = request.GET['req_keys']
    req_values = request.GET['req_values']
    req_ids = request.GET['req_ids']

    names = req_names.split(',')
    keys = req_keys.split(',')
    values = req_values.split(',')
    ids = req_ids.split(',')

    for i in range(len(names)):
        if names[i] != '':
            if ids[i] == 'new':
                DB_project_header.objects.create(project_id=project_id, name=names[i], key=keys[i], value=values[i])
            else:
                DB_project_header.objects.filter(id=ids[i]).update(name=names[i], key=keys[i], value=values[i])
        else:
            try:
                DB_project_header.objects.filter(id=ids[i]).delete()
            except:
                pass
    return HttpResponse('')

重啟服務，重新整理頁面。測試刪除3。發現3可以被刪除了：