一步一步教你打造接口測試平臺(1)

發現不少同窗對測試平臺比較感興趣，咱們這一系列教程就圍繞着測試平臺的開發來展開。css

本系列教程中，咱們將實現一個超級簡單的接口測試平臺，相似postman，只不過是web版，而不是客戶端版本。html

這一節咱們將實如今前端界面發送get請求並拿到響應的功能。等因而咱們會實現1個調試get接口的平臺小工具。前端

實現以後的效果是這個樣子的。python

從哪裏開始

你可能須要下面的一些知識以便更好的理解教程jquery

python基礎，能大體讀懂代碼就能夠
web服務器知識
html知識，由於會涉及到提交表單
最基本的css知識，涉及到幾行css代碼

若是你徹底沒有基礎那也不要緊，你能夠一邊學習教程一邊學習遇到的新知識點，聚沙成塔，堅持下去就有收穫。linux

技術選型

爲了儘量的簡單，咱們選擇使用python來實現測試平臺，畢竟python學習成本相對不高，另外python之後也應該是測試崗位的標配技能。git

咱們的平臺主要是web應用，因此咱們選擇flask框架來快速實現功能。github

爲了能讓咱們的前端頁面稍微好看一點點，咱們選擇bootstrap4做爲前端組件。web

爲了可以更簡單的處理http請求和響應，咱們將使用requests來簡化請求處理過程。flask

安裝依賴

對於初學者來講這一步應該是最難的，出錯以後但願你們能夠去搜索相關的解決方案，不要輕易放棄。

首先安裝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接口

本節全部代碼能夠在這裏查看

下一節裏咱們將實現自動斷言的功能。