發現很多同學對測試平台比較感興趣，我們這一系列教程就圍繞着測試平台的開發來展開。
本系列教程中，我們將實現一個超級簡單的接口測試平台，類似postman，只不過是web版，而不是客戶端版本。
這一節我們將實現在前端界面發送get請求並拿到響應的功能。等於是我們會實現1個調試get接口的平台小工具。
實現之后的效果是這個樣子的。
從哪里開始
你可能需要下面的一些知識以便更好的理解教程
- python基礎，能大致讀懂代碼就可以
- web服務器知識
- html知識，因為會涉及到提交表單
- 最基本的css知識，涉及到幾行css代碼
如果你完全沒有基礎那也沒關系，你可以一邊學習教程一邊學習遇到的新知識點，積少成多，堅持下去就有收獲。
技術選型
為了盡可能的簡單，我們選擇使用python來實現測試平台，畢竟python學習成本相對不高，另外python以后也應該是測試崗位的標配技能。
我們的平台主要是web應用，所以我們選擇flask框架來快速實現功能。
為了能讓我們的前端頁面稍微好看一點點，我們選擇bootstrap4作為前端組件。
為了能夠更簡單的處理http請求和響應，我們將使用requests來簡化請求處理過程。
安裝依賴
對於初學者來說這一步應該是最難的，出錯之后希望大家可以去搜索相關的解決方案，不要輕易放棄。
首先安裝python3。
然后使用pip從命令行安裝reqeusts和flask，命令如下
pip install requests
pip install Flask
實現UI
我們先寫個頁面，也就是讓我們的測試平台有個UI可以從瀏覽器中訪問。
創建文件main.py，內容如下
from flask import Flask, render_template, request
import requests
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html', resp=None)
在main.py同級目錄下創建templates文件夾，在文件夾內創建文件home.html，內容如下
<html lang="zh">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style media="screen">
.main-title {
margin-top: 2rem;
margin-bottom: 1rem;
}
</style>
<title>ETF</title>
</head>
<body>
<div class="container">
<h3 class="text text-center main-title">ETF接口測試平台</h3>
<form action="/handle_get" method="post">
<div class="form-group">
<input type="text" name="url" id="url" placeholder="請輸入URL" class="form-control" autofocus>
</div>
<div class="form-group">
<input type="submit" name="submit" value="確定" class="btn btn-primary">
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
上面的html代碼直接拷貝就好，並沒有什么技術含量。
打開命令行，cd到main.py 路徑下，linux/mac用戶運行
export FLASK_APP=main.py
export FLASK_ENV=development
flask run # 或者使用python -m flask run
windows用戶大概可以這樣運行(沒有測試過，有問題請自行搜索)
set FLASK_APP=main.py
set FLASK_ENV=development
flask run # 或者使用python -m flask run
如果沒有錯誤，結果大致如下
* Serving Flask app "main.py" (lazy loading)
* Environment: development
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 235-696-725
在瀏覽器中訪問localhost:5000，前端頁面就應該可以看到了。
代碼做了啥
main.py里面，我們定義了/路徑的處理邏輯。當瀏覽器訪問localhost:5000的時候會命中這個邏輯。因為localhost:5000與localhost:5000/是等價的，所以直接訪問localhost:5000的時候，下面的home()方法會執行
@app.route('/')
def home():
return render_template('home.html', resp=None)
return render_template('home.html', resp=None)方法表示去渲染templates目錄下的home.html文件，第2個參數我們暫時忽略。
實現表單處理邏輯
我們現在可以在前端頁面的輸入框里隨便輸入一些內容，然后點擊確定按鈕，這時候頁面會報錯，大致的意思是告訴我們/handle_get這個路徑並沒有命中任何處理方法，因此會產生404錯誤。
/handle_get這個路徑其實就是localhost:5000/handle_get路徑，我們現在要實現下面的邏輯
- 用戶從輸入框輸入一個接口地址，點擊確認按鈕后該地址被發送到服務器端的處理代碼里，也就是main.py文件中的代碼里
- 后台代碼拿到用戶輸入的接口url，發送get請求去訪問該url，拿到接口的響應
- 將響應結果在前端頁面中展示出來
服務端代碼main.py如下
@app.route('/handle_get', methods=['POST'])
def handle_get():
url = request.form['url']
try:
r = requests.get(url)
except Exception as e:
print(e)
r = None
return render_template('home.html', resp=r)
上面的代碼里我們首先定義了命中/handle_get路徑后的處理代碼，也就是handle_get()方法。注意，我們只響應POST方式的調用，這是為什么？
在handle_get()方法中，我們拿到了用戶輸入的url，並使用requests庫去發起了get請求，拿到了response對象后，將起傳到前端頁面，也就是render_template的第2個參數的作用。
這里我們用了異常處理，大家可以把異常處理去掉，看一下會發生什么?
我們修改一下home.html頁面，讓其可以展示響應的內容。
...
...
...
<div class="container">
<h3 class="text text-center main-title">ETF接口測試平台</h3>
<form action="/handle_get" method="post">
<div class="form-group">
<input type="text" name="url" id="url" placeholder="請輸入URL" class="form-control" autofocus>
</div>
<div class="form-group">
<input type="submit" name="submit" value="確定" class="btn btn-primary">
</div>
</form>
<hr>
{% if resp %}
<p>接口地址: {{resp.url}}</p>
<p>狀態碼: {{resp.status_code}}</p>
<hr>
<p>Headers</p>
{% for key, value in resp.headers.items() %}
<p> <pre><code>{{key}}: {{value}}</code></pre> </p>
{% endfor %}
<hr>
<p>Body</p>
<pre>
<code>
{{resp.text}}
</code>
</pre>
{% else %}
<p>沒有響應</p>
{% endif%}
</div>
這里我們用到了jinja模版引擎，這是一種在html中展示動態內容的方法，可以理解成是一種專用語言或者是專用套路。
這里我們展示了響應的狀態碼，headers和body。
總結
我們實現了一個看起來沒啥用的功能：輸入1個接口url，然后獲取其響應並展示。
我們使用了大概4種語言
- python
- html
- CSS
- jinja模版語言
我們涉及到了下面的一些知識點
- web服務端開發
- html前端開發的一點點，比如表單
- 如何使用python去訪問http協議的get接口
本節所有代碼可以在這里查看
下一節里我們將實現自動斷言的功能。