背景

最近在接口测试的过程中，由于请求报文需要先进行加密再发起请求，响应报文也需要先解密才能提取指定字段的返回值传递给下一个接口，每次都要通过代码运行相应的加/解密方法进行解析，操作起来特别麻烦，所以我就萌生了实现一个页面工具的想法。但我的时间有限，如果把时间都浪费在开发工具上面，那么测试时间必然被压缩，这是不被接受的。

因此，我需要快速构建这个工具，满足我最核心的需求。

还记得之前写过一篇文章《用PyWebio编写一个简易造数平台》，里面提到过Python的第三方库Pywebio，这个库的特点就是小而精，可以用来快速构建web应用。刚好可以满足我的需求。因此本次依然基于它来实现。

一、“产品”逻辑设计

我的需求是：

• 从F12把接口返回报文中的密文复制粘贴到工具输入框，点击提交就自动解密，展示明文；
• 我不需要多么高大上的功能，也不用花里胡哨的界面，只需要实现“解密”即可；
• 后续如果有时间，并且实现起来不复杂，再慢慢进行优化。

这个思路刚好和MVP（minimum viable product）最小可用产品的思想不谋而合。所以，这个工具的实现过程也可以看作是一次MVP最小可用产品实践。

二、编码实现

1.安装Pywebio库

pip install pywebio

2.解密函数

解密函数是我事先编写好的，至于什么加解密逻辑，不在本次讨论范围，在此略过。后续调用时直接将密文，也就是encrypt_text参数传给它即可。

def decrypt_aes(encrypt_text, aes_key):
    """
    使用 AES 解密密文
    :param encrypt_text: 密文（Base64 编码字符串）
    :param aes_key: AES 密钥
    :return: 解密后的字符串
    """
    try:
        pass
    except Exception as e:
        print(f"解密失败: {e}")
        return None

3.main函数

也就是Pywebio的实现部分。

from pywebio import input, output, start_server, session

def main():
    session.set_env(title="会议报文加解密")
    text = input.input(label="请输入要解密的内容（密文）:")
    decrypted_text = decrypt_aes(text, aes_key="6eE0dED1a7207CA4")
    output.put_text(decrypted_text)

if __name__ == '__main__':
    start_server(main, port=8081)

代码解释：

• session.set_env：设置页面标题，也就是标签页顶部的标题，也可以省略；
• input.input：收集用户输入的密文text，括号里的内容是输入框的提示语；
• decrypt_aes方法：将密文text传递给解密函数decrypt_aes，返回并展示明文内容
• start_server：启动服务，端口号可以自定义，默认8080；

三、调试运行

1.启动服务

直接运行Python文件，没有报错的话，控制台会给出页面地址，点击会自动在浏览器中打开：

可以看到我们前面定义的页面标题和设置的输入框提示语都正常生效显示。

2.粘贴密文

从F12控制台复制要解密的密文，粘贴到输入框中（密文内容：
Jj7fg2wBKYF1DOGg4e0EA68u8cHyvg/pnGmY2i5D1JH1Y4wTs5IJ3Sj07xeMX5LDxjvLoNXK5T2qF6QkJP4eXQ==）。

3.点击提交，解密

可以看到，已经页面已经成功返回解密后的内容。

至此，我们的小工具已经实现了最核心的需求了。看起来是不是很简单？

四、优化一下

1.输出内容加上边框

虽然我不要求页面多么花里胡哨，但是这个输出界面确实太丑了，我给它加一个边框吧。修改一下main函数，加入CSS样式。

def main():
    session.set_env(title="会议报文加解密")
    text = input.input(label="请输入要解密的内容（密文）:")
    decrypted_text = decrypt_aes(text, aes_key="6eE0dED1a7207CA4")

    # 生成包含复制按钮的 HTML 代码
    html_code = f"""
    <style>
       .copy-content {{
            border: 2px solid #007BFF; /* 设置边框宽度、样式和颜色 */
            border-radius: 5px; /* 设置边框圆角 */
            padding: 10px; /* 设置内边距 */
            margin-bottom: 10px; /* 设置底部外边距 */
            background-color: #f8f9fa; /* 设置背景颜色 */
        }}
    </style>
        <div>
            <p class="copy-content" id="copy-text">{decrypted_text}</p>

        </div>
        """
    # 将 HTML 代码添加到页面
    put_html(html_code)

此时再来看一下样式，是不是美观一些了。

2.输出框加个复制按钮

上面我们用鼠标选择要复制的内容也是可以复制的，只是要拖动鼠标从左到右选择。如果明文内容如上面那样比较少，我们选择起来还是比较方便的；如果明文内容是一堆，那我们就不好复制了。那么，是不是可以给它加个一键复制的按钮呢？再次修改main函数，加入复制按钮，定义copyText方法，实现复制功能。

def main():
    session.set_env(title="会议报文加解密")
    text = input.input(label="请输入要解密的内容（密文）:")
    decrypted_text = decrypt_aes(text, aes_key="6eE0dED1a7207CA4")

    # 生成包含复制按钮的 HTML 代码
    html_code = f"""
    <style>
       .copy-content {{
            border: 2px solid #007BFF; /* 设置边框宽度、样式和颜色 */
            border-radius: 5px; /* 设置边框圆角 */
            padding: 10px; /* 设置内边距 */
            margin-bottom: 10px; /* 设置底部外边距 */
            background-color: #f8f9fa; /* 设置背景颜色 */
        }}
    </style>
        <div>
            <p class="copy-content" id="copy-text">{decrypted_text}</p>
            <button onclick="copyText()">复制</button>
            <script>
                function copyText() {{
                    var text = document.getElementById('copy-text').innerText;
                    var textarea = document.createElement('textarea');
                    textarea.value = text;
                    document.body.appendChild(textarea);
                    textarea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textarea);
                }}
            </script>
        </div>
        """
    # 将 HTML 代码添加到页面
    put_html(html_code)

重启服务，提交密文，可以看到复制按钮已经出来了，此时我点击后也是可以复制的，但总感觉少了点什么。对，就是复制效果，最好能点击“复制”按钮后，给个提示！

3.加个复制提示

实现起来也很简单，只需要在copyText方法的最后加一行“alert('复制成功');”的代码即可。

def main():
    session.set_env(title="会议报文加解密")
    text = input.input(label="请输入要解密的内容（密文）:")
    decrypted_text = decrypt_aes(text, aes_key="6eE0dED1a7207CA4")

    # 生成包含复制按钮的 HTML 代码
    html_code = f"""
    <style>
       .copy-content {{
            border: 2px solid #007BFF; /* 设置边框宽度、样式和颜色 */
            border-radius: 5px; /* 设置边框圆角 */
            padding: 10px; /* 设置内边距 */
            margin-bottom: 10px; /* 设置底部外边距 */
            background-color: #f8f9fa; /* 设置背景颜色 */
        }}
    </style>
        <div>
            <p class="copy-content" id="copy-text">{decrypted_text}</p>
            <button onclick="copyText()">复制</button>
            <script>
                function copyText() {{
                    var text = document.getElementById('copy-text').innerText;
                    var textarea = document.createElement('textarea');
                    textarea.value = text;
                    document.body.appendChild(textarea);
                    textarea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textarea);
                    alert('复制成功')
                }}
            </script>
        </div>
        """
    # 将 HTML 代码添加到页面
    put_html(html_code)

再次来看效果，成功实现。

小结

以上就是结合MVP（minimum viable product）的思想，来设计实现一个最小可用产品的整个过程。它首先满足了我最核心的“解密并展示”的需求，后续空下来了以后我又对它稍加进行了优化。

以上对代码的要求也不高，只需要稍微懂一些Python、Pywebio库的使用以及前端HTML即可。前前后后一共花了差不多1小时的时间，但为我后续的工作带来了很大便利。

我觉得，不一定需要多么高大上的工具/系统，只要能为工作带来便捷，就是“好用”的工具！