Python+Flask+Html做一個簡單的測試聯調工具

一、場景：

當與外部聯調或者內部需要走一些固定流程，且重復的事情，往往需要測試經常性的配合且做重復的工作的聯調，這時候需要一些工具作為輔助，或者提供給外部

二、框架：

可以通過Python+Flask+Html做一個簡單的測試聯調工具

三、原理

通過app.py調用我們原有接口進行登錄獲取token并保存后傳給內部接口，并通過Flask框架獲取前端傳值并傳給我們內部接口進行內部接口的調用起到一個web頁面操作進行調用內部接口的作用

四、源碼：

1、框架結構：

app.py：后端代碼
templates ：前端代碼

2、后端代碼：


from flask import Flask, request, session, redirect, url_for, render_template
import requestsapp = Flask(__name__)
app.secret_key = 'your_very_secure_secret_key_2024!'  # 生產環境需使用強密鑰# 基礎配置
app.config.from_mapping(BASE_URL="https://XXXX.com",LOGIN_URL="/login",APP_URL="https://XXXX.com",
)@app.before_first_request
def debug_routes():print("\n=== 已注冊的路由清單 ===")for rule in app.url_map.iter_rules():print(f"端點: {rule.endpoint}, 路徑: {rule.rule}")
def get_api_headers():"""管理端請求頭（使用 Bearer 認證）"""return {"Authorization": f"Bearer {session.get('auth_token', '')}","Content-Type": "application/json"}def get_app_headers():"""APP端動態請求頭（使用 token 字段）"""return {"host": "XXXX.com","clienttype": "WORKER_APP","gxd-client": "WORKER_APP_CLIENT","platformtype": "iOS","token": session.get('auth_token', '')  # 統一使用相同 token}def login_required(f):"""增強版登錄校驗裝飾器"""def wrapper(*args, **kwargs):if not session.get('logged_in'):return redirect(url_for('login'))return f(*args, **kwargs)return wrapper@app.route('/', methods=['GET', 'POST'], endpoint='index')  # 根路徑
@login_required  # 裝飾器在 @app.route 下方
def index():  # 函數名即端點名稱 'index'result = Noneerrors = []if request.method == 'POST':session['last_form'] = request.form.to_dict()action = request.form.get('action')order_no = request.form.get('order_no', '').strip()raise_fee = request.form.get('raise_fee', '0')# 操作映射表action_handlers = {'raise': lambda: add_raise_price(order_no, raise_fee),'query': lambda: get_order_detail(order_no),'complete': lambda: complete_order(order_no),'upload': lambda: upload_location(),'take': lambda: take_order(order_no),'picking': lambda: picking_order(order_no),'pickup': lambda: pickup_order(order_no),'worker_complete': lambda: worker_complete_order(order_no)}if action in action_handlers:handler_result = action_handlers[action]()if 'error' in handler_result:errors.append(handler_result['error'])else:result = handler_resultelse:errors.append("無效的操作類型")return render_template('index.html', errors=errors, result=result)
@app.route('/login', methods=['GET', 'POST'])
def login():if request.method == 'POST':# 獲取登錄憑證username = request.form.get('username')password = request.form.get('password')# 構造登錄請求login_url = f"{app.config['BASE_URL']}{app.config['LOGIN_URL']}"try:response = requests.post(login_url,json={"password": password,"phone": username},timeout=10)login_data = response.json()print(login_data)print(login_data.get('code'))print(login_data["data"]["token"])# 處理登錄響應if login_data.get('code') == 0:  # 根據實際文檔調整# 統一存儲 token 到 auth_tokensession['auth_token'] = login_data["data"]["token"]session['logged_in'] = Truesession.modified = True  # 強制保存 Sessionprint("DEBUG - 當前 Session 內容:", dict(session))  # 輸出 Session 內容return redirect(url_for('index'))else:error_msg = login_data.get('message', '登錄失敗')return render_template('login.html', error=error_msg)except Exception as e:return render_template('login.html', error=str(e))return render_template('login.html')@app.route('/logout')
def logout():session.clear()return redirect(url_for('login'))def handle_api_request(method, url, headers_type='app', payload=None, params=None):"""統一處理 API 請求（增強版）"""try:headers = get_app_headers() if headers_type == 'app' else get_api_headers()response = requests.request(method=method,url=url,headers=headers,json=payload,params=params,timeout=15)# 處理認證失效情況if response.status_code in (401, 403):session.clear()return {"error": "會話已過期，請重新登錄"}response_data = response.json()return response_dataexcept requests.exceptions.RequestException as e:return {"error": f"網絡請求失敗: {str(e)}"}# API 操作函數（統一使用 handle_api_request）
def get_order_detail(order_no):"""查詢訂單（管理端接口）"""url = f"{app.config['BASE_URL']}/admin/XXXXX/{order_no}"return handle_api_request('GET', url, 'api')def add_raise_price(order_no, raise_fee):"""加價接口（管理端接口）"""url = f"{app.config['BASE_URL']}/admin/CCCCCC"payload = {"orderNo": order_no, "raiseFee": float(raise_fee)}return handle_api_request('POST', url, 'api', payload)def upload_location():"""上傳位置信息"""url = f"{app.config['APP_URL']}/api/XXXXXX"payload  = {"location": "113.941204,22.527776"}return handle_api_request('POST', url, 'app',payload)def take_order(order_no):"""騎手搶單"""url = f"{app.config['APP_URL']}/api/XXXXXX"payload = {"signAgreement": 1, "orderNo": order_no, "workerLocation": ""}return handle_api_request('POST', url, 'app', payload)def picking_order(order_no):"""騎手已就位"""url = f"{app.config['APP_URL']}/api/XXXXXXX"payload = {"workerLocation": "113.941204,22.527776", "orderNo": order_no}return handle_api_request('POST', url, 'app', payload)def pickup_order(order_no):"""騎手確認取件"""url = f"{app.config['APP_URL']}/api/XXXXXXX"payload = {"workerLocation": "113.941204,22.527776", "orderNo": order_no}return handle_api_request('POST', url, 'app', payload)def worker_complete_order(order_no):"""騎手完成訂單"""url = f"{app.config['APP_URL']}/api/XXXXXXX"payload = {"workerLocation": "113.941204,22.527776", "orderNo": order_no}return handle_api_request('POST', url, 'app', payload)def complete_order(order_no):"""強制簽收（管理端接口）"""url = f"{app.config['BASE_URL']}/api/XXXXXXX/{order_no}"return handle_api_request('POST', url, 'api')if __name__ == '__main__':# 調試時可啟用詳細日志：app.run(host='0.0.0.0', port=5001, debug=True)

3、前端登錄代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>騎手登錄 | 即時配送系統</title><style>:root {--primary-color: #409EFF;--success-color: #67C23A;--error-color: #F56C6C;--bg-color: #f5f7fa;--text-primary: #303133;--text-secondary: #909399;}* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB","Microsoft YaHei", sans-serif;background-color: var(--bg-color);display: flex;justify-content: center;align-items: center;min-height: 100vh;}.login-container {background: white;padding: 2.5rem;border-radius: 12px;box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);width: 100%;max-width: 400px;transition: transform 0.3s ease;}.login-container:hover {transform: translateY(-2px);}h2 {color: var(--text-primary);font-size: 1.8rem;margin-bottom: 2rem;text-align: center;position: relative;}h2::after {content: '';display: block;width: 50px;height: 3px;background: var(--primary-color);margin: 0.8rem auto;border-radius: 2px;}.form-group {margin-bottom: 1.5rem;position: relative;}label {display: block;margin-bottom: 0.8rem;color: var(--text-secondary);font-size: 0.9rem;font-weight: 500;}input {width: 100%;padding: 0.9rem 1.2rem;border: 2px solid #e4e7ed;border-radius: 8px;font-size: 1rem;transition: all 0.3s ease;}input:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);}input::placeholder {color: #c0c4cc;}.error {background: #fef0f0;color: var(--error-color);padding: 1rem;border-radius: 8px;margin: 1.5rem 0;display: flex;align-items: center;gap: 0.8rem;border: 1px solid #fbc4c4;}.error::before {content: "!";display: flex;align-items: center;justify-content: center;width: 20px;height: 20px;background: var(--error-color);color: white;border-radius: 50%;font-weight: bold;}button {width: 100%;padding: 1rem;background: var(--primary-color);color: white;border: none;border-radius: 8px;font-size: 1rem;font-weight: 500;cursor: pointer;transition: all 0.3s ease;margin-top: 1rem;}button:hover {background: #66b1ff;box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);}@media (max-width: 480px) {.login-container {margin: 1rem;padding: 1.5rem;}h2 {font-size: 1.5rem;}}</style>
</head>
<body><div class="login-container"><h2>🚴 騎手登錄</h2>{% if error %}<div class="error">{{ error }}</div>{% endif %}<form method="post"><div class="form-group"><label>📱 手機號碼</label><inputtype="text"name="username"requiredplaceholder="請輸入騎手手機號碼"pattern="1[3-9]\d{9}"inputmode="numeric"></div><div class="form-group"><label>🔒 登錄密碼</label><inputtype="password"name="password"requiredplaceholder="請輸入密碼"minlength="6"maxlength="20"></div><button type="submit">騎手登錄 →</button></form></div>
</body>
</html>

4、前端index頁面

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>訂單調試工具</title><style>:root {--primary-color: #409EFF;--success-color: #67C23A;--warning-color: #E6A23C;--danger-color: #F56C6C;--text-primary: #303133;--text-regular: #606266;--border-color: #DCDFE6;--background-base: #f5f7fa;}body {font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;background-color: var(--background-base);color: var(--text-primary);line-height: 1.5;margin: 0;padding: 20px;}.container {max-width: 800px;margin: 0 auto;background: white;border-radius: 8px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);padding: 24px;}.header {display: flex;justify-content: flex-end;margin-bottom: 24px;}.header a {color: var(--primary-color);text-decoration: none;padding: 8px 12px;border-radius: 4px;transition: all 0.3s;}.header a:hover {background-color: rgba(64,158,255,.1);}h1 {font-size: 24px;color: var(--text-primary);margin-bottom: 24px;padding-bottom: 16px;border-bottom: 1px solid var(--border-color);}.form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 8px;font-weight: 500;color: var(--text-regular);}select, input {width: 100%;padding: 10px 12px;border: 1px solid var(--border-color);border-radius: 4px;font-size: 14px;transition: border-color 0.3s;}select:focus, input:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(64,158,255,.2);}button {background-color: var(--primary-color);color: white;border: none;padding: 10px 24px;border-radius: 4px;cursor: pointer;font-size: 14px;transition: all 0.3s;}button:hover {background-color: #66b1ff;transform: translateY(-1px);}.error {background-color: #fef0f0;color: var(--danger-color);padding: 16px;border-radius: 4px;margin: 20px 0;border: 1px solid #fbc4c4;}pre {background: #f8f8f8;padding: 16px;border-radius: 4px;border: 1px solid var(--border-color);overflow-x: auto;font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;}.transition {transition: all 0.3s ease;}.hidden-field {height: 0;opacity: 0;overflow: hidden;margin: 0;padding: 0;border: none;}</style>
</head>
<body><div class="container"><div class="header"><a href="{{ url_for('logout') }}">退出登錄</a></div><h1>📦 訂單調試工具</h1><form method="POST"><div class="form-group"><label>📌 操作類型</label><select name="action" id="actionSelector" required class="transition"><option value="upload" {% if request.form.get('action') == 'upload' %}selected{% endif %}>📍 上傳定位</option><option value="take" {% if request.form.get('action') == 'take' %}selected{% endif %}>🚴 騎手搶單</option><option value="picking" {% if request.form.get('action') == 'picking' %}selected{% endif %}>🛵 騎手已就位</option><option value="pickup" {% if request.form.get('action') == 'pickup' %}selected{% endif %}>📦 騎手確認取件</option><option value="worker_complete" {% if request.form.get('action') == 'worker_complete' %}selected{% endif %}>? 騎手確認送達</option></select></div><div class="form-group transition" id="orderNoField"><label>🔢 訂單號</label><input type="text" name="order_no" id="orderNoInput"value="{{ request.form.get('order_no', '') }}"placeholder="請輸入訂單號（上傳定位不需要）"></div><div class="form-group transition" id="raiseFeeField"><label>💰 加價金額</label><input type="number" step="0.01" name="raise_fee"value="{{ request.form.get('raise_fee', '') }}"placeholder="請輸入大于0的數字"></div><button type="submit" class="transition">🚀 提交操作</button></form>{% if errors %}<div class="error"><h3>? 操作異常</h3><ul>{% for error in errors %}<li>{{ error }}</li>{% endfor %}</ul></div>{% endif %}{% if result %}<div class="result"><h3>📄 接口響應</h3><pre>{{ result|tojson(indent=2,ensure_ascii=False) }}</pre></div>{% endif %}</div><script>// 動態字段控制const actionSelector = document.getElementById('actionSelector');const fields = {orderNo: {element: document.getElementById('orderNoField'),requiredActions: ['take', 'picking', 'pickup', 'worker_complete']},raiseFee: {element: document.getElementById('raiseFeeField'),requiredActions: ['raise']}};function toggleField(field, show) {field.element.style.height = show ? 'auto' : '0';field.element.style.opacity = show ? '1' : '0';field.element.style.margin = show ? '0 0 20px' : '0';const inputs = field.element.querySelectorAll('input');inputs.forEach(input => input.required = show);}function updateForm() {const action = actionSelector.value;// 處理訂單號字段toggleField(fields.orderNo, fields.orderNo.requiredActions.includes(action));// 處理加價字段toggleField(fields.raiseFee, fields.raiseFee.requiredActions.includes(action));}// 初始化updateForm();actionSelector.addEventListener('change', updateForm);// 提交后自動滾動到結果{% if result %}window.scrollTo({top: document.body.scrollHeight,behavior: 'smooth'});{% endif %}</script>
</body>
</html>