大家好，我是米洛，求三連！求關注測試開發坑貨!

回顧

上一篇我們費了點功夫，將非同步程式碼改回了同步程式碼，但也不能說一無所獲，我們編寫好了線上執行sql語句的功能，並返回了想要的欄位->欄位值的列表資料。

今天我們就來完善一下頁面部分。

本文因為比較複雜而分為2節，有一定的難度，博主我也會盡量講清楚，大家還需要多理解。

怎麼查詢到資料表和具體欄位呢

這個功能我認為是一個比較大的亮點，一般來說我們線上執行測試，就拿我以前做的平臺舉例，都只是為了能讓使用者線上執行下SQL，所以對於資料表，欄位等的展示都是放棄的。

今天呢，我們就來整一整這塊的功能。

通過Engine獲取表資料

我們都知道，可以通過執行show tables

而且我們還需要把所有資料庫配置都拉出哦，沒事，看我操作就行了！

在sqlalchemy裡面，可以用engine.table_names()拿到具體的表資訊，而且是帶上欄位的，再對比一下我們的參考專案，我們就能明確到自己的方向了。

後端需要做什麼

我們既然已經看到了大概想要實現的UI，那麼我們就去ant.design官網找對應的樹元件。

那麼我們的資料該怎麼準備呢？在前端不方便處理的時候，我們後端可以儘量返回前端使用舒服的資料。先看看元件需要的資料:

const treeData = [
  {
    title: 'parent 0',
    key: '0-0',
    children: [
      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
    ],
  },
  {
    title: 'parent 1',
    key: '0-1',
    children: [
      { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
      { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
    ],
  },
];
 

我們一步一步來分析:

• 頂層

  頂層是一個列表，列表裡面是一個dict（以Python資料結構為例）。

• 列表元素

  列表元素又包括: title（展示名稱）, key(唯一標識，為了方便選中的時候知道選到了哪個元素，和css中的id接近的概念), children(是否有孩子，孩子也是一樣的列表)。

  如果一個數據巢狀比較深，那麼可能會在children裡面有很多層children, 接下來我們就要處理這塊。

構思出前端需要的資料

其實這個很像我們的資料夾的感覺，我這邊列個目錄給大家看看。

fat是環境，最大的分類，接著pity是資料庫名，pity下面還有pity_testcase（資料表）,資料表下面還有id，name等欄位。

那麼如果我們是這些資料，要給前端是怎麼展示的呢？按照他們的規則:

const treeData = [
{
  title: "fat",
  key: "env_fat",
  children: [
      {
          "title": "pity",
          "key": "database_pity",
          "children": [
              {
                  "title": "pity_testcase",
                  key: "table_pity_testcase",
                  children: [
                      {
                          "title": "id",
                          "key": "column_id"
                          // 這裡就沒有children了，因為欄位是最後一級了
                      },
                      {
                          "title": "name",
                          "key": "column_name"
                      },
                      {
                          "title": "create_time",
                          "key": "column_create_time"
                      }
                  ]
              }
          ]
      }
  
  ]
}

]

可以看到，資料是這樣一層一層的，可謂十分複雜!大家看到可能會覺得，要我手動寫還行，要我根據資料庫的資料生成，那我還是回去學習了樹之後再來吧！

其實duck不必，我們只要理清楚思路就行。

確定唯一key

大家有沒有發現，雖然fat這種env是有id的，但是它也可能和其他表的id串了，所以我們是不能以id為key的。但如果我們加上表名的字首，比如env_1，這樣是不是不會串了呢？

那如果有的資料沒有id呢？比如資料表的欄位資料，其實沒事，我們只要帶上它爸爸的id即可，比如資料表字段雖然沒有id，但是資料表的爸爸有，即我們的pity_database_info表，它是有唯一id的，所以我們帶上他父親的父親的id即可。

各個擊破

• 環境層（第一層）

  首先我們需要獲取到當前有多少環境，並拿到環境的具體id->環境名稱的對應關係，因為我們的pity_database_info存放的env
  是主鍵，而不是對應的環境名。

  假設我們拿到了環境列表，那我們可以造出第一層資料, 這裡用虛擬碼展示:

envList = [{"id": 1, "name": fat}, {"id": 2, "name": "uat"}]
result = []
for env in envList:
    result.append({
        title: env.get("name"),
        key: f"env_{env.get("id")}",
        children: []
    })

這樣我們就完成了最外層資料的編寫，result目前的結果:

[
    {
        "title": "fat",
        "key": "env_1",
        children: []
    },
    {
        "title": "uat",
        "key": "env_2",
        children: []
    }
]

可以看到，雛形已經出來了。

我們去放到樹裡面看看效果:

圖中顯示了2個目錄了，但是因為沒有children的緣故，所以目錄展開後是沒有內容的~

剩下的就交給下一節來解決了！！！

專案文件地址: https://pity.readthedocs.org