本文選擇首頁做成介面快速除錯功能

首先開啟首頁：home.html，這次改版相當於完全重構了，所以刪除掉body 的css屬性和一切子內容

現在主頁已經是一片空白了。我們要重新設計了。

首先依從postman的風格，整個首頁大概分為左右倆部分，左邊是請求歷史記錄，右邊是介面除錯的具體模版。

當點選左側的任意請求記錄時，右側則迅速把各個輸入框的值變為這次記錄儲存的資料即可。當然每次請求無論是否成功，左側的請求記錄都會儲存好本次請求的請求資料。

另一個功能是當右側的除錯功能啟動，獲取了介面的返回值後，使用者可以看到已有的專案列表和新建專案功能，點選即可把本次請求儲存到對應專案中。

1. 用div來做一條完全可控的豎線，來分割開左右。

<div id="shu" style="width: 2px; background-color: #c7e9e9; position: absolute; top: 70px; left: 340px">
    &nbsp;
</div>

這個div內部必須有個空格  ，否則是沒有高度的，注意空格用 表示，後面必須寫分號。

豎線並不高，那是因沒有設定高度，當然為了設定成一個動態高度，只能在寫一個js來自動控制高度，高度受瀏覽器高度決定。

<script>
    var h = document.documentElement.clientHeight;
    document.getElementById('shu').style.height = (h-85).toString() + 'px'
</script>

看看效果：

當然顏色的話，可以改成深灰色顯眼一點,262c2c：

好，目前左側應該是一個div，div下面應該是當前登陸使用者的請求記錄的列表，每行其實就是一個超連結。程式碼如下：

<!--  豎線左側  -->
<h3>&nbsp;您的請求記錄：</h3>
<div id="home_log_plan" style="padding-left: 20px; overflow-y: scroll; width: 320px">

</div>

左側div程式碼位置必須在豎線上，高度也要用最下面那段js來控制住，並且要設定豎滾動條-overfloow-y：scrooll

document.getElementById('home_log_plan').style.height = (h-85).toString() + 'px'

當前這個高度設定並不一定是最好的，所以之後真的有資料顯示後，再除錯這個動態高度。然後這個div內部應是一個迴圈，迴圈主體是超連結。具體資料由使用者進入首頁時由後端帶進來。

{% for i in home_log %}
<a href="javascript:home_log_show('{{ i.id }}')" class="log">
    <span>{{ i.method }}</span> {{ i.url }}
</a> <br>

如上圖程式碼所示：這個超連結，點選的話定義了一個js函式，用來把請求資料顯示到右側。並且a標籤的text文字簡單顯示為這個請求的請求方式和url。不過目前並沒有資料，所以暫時告一段落。

接下來繼續完善這個左面部分，考慮到需要儲存使用者的請求記錄，所以少不了要做一個新的資料庫表了。

這個表存放的基本和介面倉庫的介面表一樣，但是不需要專案id,因為首頁除錯的介面不屬於任何專案，但是額外需要使用者id，因為這些介面屬於使用者，平臺也是靠使用者id來區分開。而諸如上次請求體/格式,名字描述，專案緯度全域性公共變數等欄位均不要了。

具體class程式碼複製介面的然後稍加改動即可：

# 首頁除錯介面log
class DB_apis_log(models.Model):
    user_id = models.CharField(max_length=10,null=True)  # 所屬使用者id

    api_method = models.CharField(max_length=10,null=True)  # 請求方式
    api_url = models.CharField(max_length=1000,null=True)  # url
    api_header = models.CharField(max_length=1000,null=True)  # 請求頭
    api_login = models.CharField(max_length=10,null=True)  # 是否帶登陸態
    api_host = models.CharField(max_length=100,null=True)  # 域名

    body_method = models.CharField(max_length=20,null=True)  # 請求體編碼格式
    api_body = models.CharField(max_length=1000,null=True)  # 請求體
    sign = models.CharField(max_length=10,null=True)  # 是否驗籤
    file_key = models.CharField(max_length=50,null=True)  # 檔案key
    file_name = models.CharField(max_length=50,null=True)  # 檔名

    def __str__(self):
        return self.api_url

雖然裡面很多還沒用上，但是作為預留也要寫上。同步並生效

然後去admin.py中註冊：

admin.site.register(DB_apis_log)

重啟服務後進入後臺，找到這個表：

隨便增加兩條請求記錄，作為後續除錯設計前端的demo。注意userid寫自己的哦！檢視自己userid方法很多，

比如進入後臺使用者表，進入自己的使用者記錄中，看看url裡的這個數字，就是了。

添加了倆條內容不相同的介面請求記錄

建立完成後，接下來就是負責前端的左側的請求記錄開發了。