python+vue3内嵌html实现一个类似postman的api调试工具代码-python代码-BFW代码库

python+vue3内嵌html实现一个类似postman的api调试工具代码

代码语言：python

所属分类：其他

代码描述：python+vue3内嵌html实现一个类似postman的api调试工具代码

代码标签： python vue 内嵌 htm 类似 postman api 调试工具代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

#!/usr/local/python3/bin/python3
# -*- coding: utf-8 -*
import requests
import json
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse, JSONResponse
from pydantic import BaseModel
from typing import Any, Dict, Optional, List

# 1. FastAPI 应用实例
app = FastAPI(
    title="API Debugger Pro",
    description="A simple Postman-like API debugger built with FastAPI and Vue.js",
)

# 2. Pydantic 模型更新
# 更通用的键值对模型，可用于Header和Form
class KeyValueItem(BaseModel):
    key: str
    value: str

class ProxyRequest(BaseModel):
    method: str
    url: str
    headers: Optional[List[KeyValueItem]] = []
    # 新增字段以区分body类型
    body_type: str = 'none'  # 'none', 'json', 'form'
    json_body: Optional[str] = None
    form_body: Optional[List[KeyValueItem]] = []

# 3. HTML, CSS, 和 Vue.js 前端代码 (已更新)
HTML_TEMPLATE = """
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Debugger Pro</title>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.2.37.js"></script>
    <style>
        :root {
            --bg-color: #1a1a1a; --panel-color: #242424; --text-color: rgba(255, 255, 255, 0.87);
            --primary-color: #646cff; --border-color: #535bf2; --input-bg: #1e1e1e;
            --status-ok: #42d392; --status-error: #ff6961; --status-info: #ffc107;
        }
        *, *::before, *::after { box-sizing: border-box; }
        body {
            font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
            margin: 0; background-color: var(--bg-color); color: var(--text-color);
            font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
        }
        #app { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; height: 100vh; }
        .panel { background-color: var(--panel-color); padding: 1.5rem; border-radius: 8px; display: flex; flex-direction: column; gap: 1rem; overflow: auto; }
        h2 { margin: 0 0 1rem 0; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; }
        
        /* Request Panel Styles */
        .url-group { display: flex; gap: 0.5rem; }
        .method-select {
            padding: 0.6em 1.2em; border-radius: 8px; border: 1px solid transparent; font-weight: 500;
            background-color: var(--input-bg); cursor: pointer; transition: border-color 0.25s;
        }
        .url-input { flex-grow: 1; }
        .input, .textarea, .method-select {
            width: 100%; font-size: 1em; background-color: var(--input-bg); color: var(--text-color);
            border: 1px solid #444; border-radius: 8px; padding: 0.6em 1.2em;
        }
        .textarea { min-height: 150px; resize: vertical; font-family: 'Courier New', Courier, monospace; }
        .button {
            border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em;
            font-weight: 500; background-color: var(--primary-color); color: #fff;
            .........完整代码请登录后点击上方下载按钮下载查看