如何在html页面上执行python代码

要在HTML页面上执行Python代码，可以使用Web框架（如Flask、Django）、使用Python编译器（如 Brython、Skulpt）或通过WebAssembly。 其中，使用Web框架是最常见和实用的方法，因为它可以处理复杂的应用逻辑并与前端无缝集成。下面我们将详细讨论如何使用Flask框架在HTML页面上执行Python代码。

一、使用Flask框架

Flask是一个轻量级的Web框架，适合快速开发和原型设计。它非常灵活，可以轻松地将Python代码嵌入到HTML页面中。

1、安装Flask

首先，你需要安装Flask。如果你还没有安装，可以使用pip进行安装：

pip install Flask

2、创建Flask应用

接下来，创建一个基本的Flask应用。创建一个名为app.py的文件，并添加以下代码：

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/execute', methods=['POST'])
def execute():
    code = request.form['code']
    try:
        exec_globals = {}
        exec(code, exec_globals)
        return str(exec_globals.get('result', 'No result'))
    except Exception as e:
        return str(e)
if __name__ == '__main__':
    app.run(debug=True)

在这个示例中，我们创建了一个基本的Flask应用，并定义了两个路由：一个用于显示HTML页面，另一个用于执行从前端传递的Python代码。

3、创建HTML页面

创建一个名为templates的文件夹，并在其中创建一个名为index.html的文件。添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Execute Python Code</title>
</head>
<body>
    <h1>Execute Python Code</h1>
    <form action="/execute" method="post">
        <textarea name="code" rows="10" cols="30"></textarea><br>
        <input type="submit" value="Run">
    </form>
    <p>Result: {{ result }}</p>
</body>
</html>

这个HTML页面包含一个表单，用户可以在其中输入Python代码并提交。提交的代码将发送到/execute路由进行处理。

4、运行Flask应用

在终端中，导航到包含app.py的目录，并运行以下命令：

python app.py

打开浏览器，访问http://127.0.0.1:5000/，你将看到一个页面，允许你输入Python代码并执行。

二、使用Brython

Brython是一个将Python代码编译为JavaScript的编译器，可以直接在浏览器中运行Python代码。

1、引入Brython库

在你的HTML文件中，引入Brython库：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Execute Python Code with Brython</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.9.5/brython.min.js"></script>
</head>
<body onload="brython()">
    <h1>Execute Python Code with Brython</h1>
    <textarea id="code" rows="10" cols="30"></textarea><br>
    <button onclick="execute()">Run</button>
    <p>Result: <span id="result"></span></p>
    <script type="text/python">
        from browser import document
        def execute():
            code = document["code"].value
            exec(code)
    </script>
</body>
</html>

在这个示例中，我们使用Brython库将Python代码嵌入到HTML页面中，并在浏览器中执行。

三、使用WebAssembly

WebAssembly是一个高效的、低级别的字节码格式，可以在浏览器中运行。你可以使用WebAssembly将Python代码编译为WebAssembly模块，并在HTML页面上执行。

1、安装Emscripten

首先，你需要安装Emscripten，这是一个将C/C++代码编译为WebAssembly的工具。你可以按照官方文档进行安装：https://emscripten.org/docs/getting_started/downloads.html

2、编写Python代码

创建一个名为script.py的文件，并添加以下代码：

def main():
    print("Hello, WebAssembly!")

3、编译为WebAssembly

使用Emscripten将Python代码编译为WebAssembly：

emcc script.py -o script.js

4、引入WebAssembly模块

在你的HTML文件中，引入编译生成的WebAssembly模块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Execute Python Code with WebAssembly</title>
</head>
<body>
    <h1>Execute Python Code with WebAssembly</h1>
    <button onclick="execute()">Run</button>
    <p>Result: <span id="result"></span></p>
    <script src="script.js"></script>
    <script>
        function execute() {
            Module.onRuntimeInitialized = function() {
                Module.cwrap('main', 'void', [])();
            };
        }
    </script>
</body>
</html>