本文開發內容
現在正式進入測試相關功能開發。teprunner測試平臺底層是pytest，中間層是tep，還沒了解的朋友可以先看看tep的文章，整個平臺的設計思路和後面用例的執行都會基於這個工具。tep的測試用例是放在.py檔案裡面的，全域性變數或者說環境變數是引用的env_vars，公共函式和複用介面是引用的fixtures，在做成平臺後，需要把這兩個部分獨立為兩個功能模組。多個專案的介面自動化資料需要隔離開來，要有個專案管理功能。本文將開發四個用例前置模組：
- 後臺管理--專案管理
- 介面自動化--語法說明
- 介面自動化--環境變數
- 介面自動化--fixtures
語法說明給出了環境變數、fixtures、用例示例（單個介面、多個介面--增刪改查）、請求方法（get、post、put、delete）的使用方法。
編寫後端程式碼
先建立名為teprunner的app：
django-admin startapp teprunner
在settings的INSTALLED_APPS中新增配置讓app生效：
並在urls.py新增路由：
編輯user/fixtures/user.json，新增一個介面自動化的選單：
截圖只截了管理員，測試和開發角色，也需要新增上。access均為true，這三個角色都可以訪問。新增後把資料同步到資料庫：
python manage.py loaddata user
編輯teprunner/models.py，新增模型：
包括了專案、環境變數和fixture三張表。Project.env_config用於給專案配置多個環境。不同專案不同環境的環境變數不一樣，在EnvVar中新增了project_id和env_name，並按("project_id", "env_name", "name")作為唯一鍵，不允許重複。不同專案的fixtures不同，不關心環境，在Fixture中只新增了project_id。
Fixture.code用於存放程式碼，欄位型別為models.TextField，容納更多字元。
models編寫好後，遷移到資料庫：
python manage.py makemigrations
python manage.py migrate
新建teprunner/serializers.py檔案，新增序列化器：
資料庫欄位的命名是用的下劃線，介面返回前端和前端傳參是用的駝峰，所以這裡通過source這種方式給env_config、project_id、env_name、creator_nickname進行了序列化器的重新命名。為了前端更方便處理，使用serializers.CharField把int轉化為了str，由於請求時id非必須，增加引數required=False。
teprunner會有很多檢視，寫在一個檔案裡面有點臃腫，這裡建立views資料夾，新增views/project.py專案檢視：
Django REST framework的ModelViewSet檢視類能節省很多程式碼，只需要三行就把專案增刪改查介面做了。project_env是函式檢視，請求方法為GET，它的作用是返回專案環境列表，當前專案和當前環境，預設為第一個專案和第一個環境。
前端需要切換不同專案和不同環境，下拉框資料來源於這個介面。
新建views/envvar.py新增環境變數檢視：
環境變數跟專案和環境是強關聯的，需要根據專案環境進行過濾，所以重寫了list方法，從前端請求拿到curProjectId和curEnvName，通過EnvVar.objects.filter進行過濾。from django.db.models import Q支援多種過濾條件，這在後面的程式碼中還能看到，比如模糊匹配。
新建views/fixture.py新增fixture檢視：
fixture跟專案是強關聯的，需要根據專案進行過濾，所以重寫了list方法，從前端請求拿到curProjectId，通過Fixture.objects.filter進行過濾。Fixture有個creatorNickname欄位，新增fixture時使用的是當前登入使用者的暱稱，修改fixture時需要用已儲存的建立者，重寫update方法來實現這個處理。
最後，新建teprunner/urls.py檔案，把檢視新增到路由中：
編寫前端程式碼
編輯package.json，新增依賴：
fixtures是程式碼形式的，這是測試平臺第一次使用程式碼編輯元件。新增依賴後記得執行npm install進行安裝。
編輯router/index.js：
新增介面自動化的路由，並把home重定向改為語法說明路由。children表示子路由。path是路由地址。meta.title用於顯示選單名。
編輯views/console/index.vue：
新增專案管理選單。新建ProjectManagement.vue和AddProject.vue，新增專案管理增刪改查程式碼，跟使用者管理類似，不再另加贅述。值得注意的是環境配置placeholder="請輸入環境英文名（多個環境英文逗號分隔）"，因為tep.env_vars.mapping會用到環境名作為key，所以只能用英文名！
編輯components/WrapComponent.vue，新增一個插槽：
用於切換專案和環境。新建components/ProjectEnv.vue檔案：
定義了兩個下拉框：專案和環境。v-if判斷是否需要顯示。@change在切換下拉選項時呼叫對應方法。@click.native指在點選開啟時獲取資料。然後用v-for遍歷列表展示下拉選項。環境和專案資料是從localStorage中讀取的：
可以開啟F12切換到Application，點選左側Storage/Local Storage檢查是否有資料：
資料寫入的地方稍後會講到，先接著講ProjectEnv.vue檔案：
切換專案會更新環境列表和當前環境資料，這樣就把這兩個下拉框關聯了起來。切換環境會更新當前環境資料。圖中框起來的this.$emit是個重要知識點。ProjectEnv.vue是個子元件，它是要巢狀到其他元件去的，比如EnvVar.vue，它們是父子元件的關係。有這麼個需求，切換專案時，執行一次查詢操作，把查詢結果更新一下。切換專案的程式碼是ProjectEnv.vue子元件提供的，執行查詢操作的程式碼是EnvVar.vue父元件提供的，子元件就是通過this.$emit把這個訊息通知給父元件的。
新建views/teprunner/index.vue檔案，新增介面自動化選單：
剛才說的專案環境資料的寫入就是在這裡進行的：
每次載入時，如果localStorage沒有projectEnvList的話，就請求/teprunner/projects/env去拿。
新建Grammar.vue，語法說明是個硬編碼的靜態檔案，純展示，無互動。接著新建EnvVar.vue和AddEnvVar.vue，編寫環境變數的增刪改查，新建Fixture.vue和AddFixture.vue，編寫fixtures的增刪改查，比較類似，不再另加贅述。通過fixtures模組的程式碼，看看ProjectEnv.vue是如何用的：
:showEnv與ProjectEnv.vue子元件的屬性對應，用來控制是否顯示環境，Fxiture不需要顯示。@changeProject與ProjectEnv.vue的this.$emit對應，接收子元件訊息，執行查詢列表操作：
AddFixture.vue用到了程式碼編輯器：
@init指定了初始化方法：
離程式碼完美顯示還差最後一步：程式碼高亮。在assets/js新增highlight.js，並在main.js中匯入：
小結
經過本文的開發，如何新增選單，前後端如何完成基本的增刪改查開發已經進行了很充分的展示。遇到不會寫的程式碼，也都能從已公開原始碼中找到參考。行動起來吧！邊學邊練，動手試試把用例管理的增刪改查寫出來，等我把下一篇寫出來後，比較比較，可能會有更深刻的印象。CRUD會了，定製化開發還會遠麼。
參考資料：