25 简易的 WEB 应用

简易的 WEB 应用

在之前的章节中我们介绍了如何使用 Flask 实现低延时图传，用于将摄像头画面传递到 WEB 应用界面上，在这里我们介绍如何将 WEB 应用界面输入的信息，传递到 WEB 应用的后端，这个功能用于使用 WEB 应用来控制机器人。

from flask import Flask, request # 从 flask 包导入 Flask 类和 request 对象

app = Flask(__name__) # 创建 Flask 应用实例

@app.route('/', methods=['GET', 'POST']) # 定义根路由，并允许 GET 和 POST 方法
def index():
    if request.method == 'POST': # 检查当前请求是否为 POST
        # 获取表单数据
        form_data = request.form
        # 打印表单数据
        print(form_data)
        # 返回一个简单的响应
        return 'Received data: {}'.format(form_data)
    else:
        # 如果是 GET 请求，返回一个简单的表单页面
        return '''
        <form method="post">
            <label for="input_data">Input data:</label><br>
            <input type="text" id="input_data" name="input_data"><br>
            <input type="submit" value="Submit">
        </form>
        '''

if __name__ == '__main__':
    app.run(host='0.0.0.0')

你可以选中上面的代码块，按 Ctrl + Enter 来运行该代码块，如果提是端口已经被占用说明你之前已经运行过该代码块。你需要点击 jupyterLab 上方的 Kernel -> Shut Down All Kernel ,这样会释放之前运行代码块所占用的资源（包含网络端口资源），然后你可以重新运行该代码块来运行这个 Flask 应用。

当你运行这个代码块后，你可以看到 Running on http://127.0.0.1:5000, Running on http://[IP]:5000 的字样，通常这个 [IP] 是你的路由给你的树莓派分配的 IP 地址，你可以在同一局域网内的设备上打开浏览器，访问 [IP]:5000 这个地址，注意这里的 ':' 符号一定要是英文的冒号，它指代你要访问这个IP地址的5000端口号，访问这个页面后，你可以看到页面上有一个输入框，下面还有一个 Submit 按键，你可以在输入框中输入一些内容，然后点击 Submit 按键，之后你可以在 JupyterLab 的代码块下方看到你在网页上输入的内容，且网页也会显示出后端所接收到的内容。