首页实现功能前端点击按钮button后端服务器发出hello的response到web浏览器当中前端使用html语言后端使用flask架构并告诉我怎么运行这些这些代码

实现功能前端点击按钮button后端服务器发出hello的response到web浏览器当中前端使用html语言后端使用flask架构并告诉我怎么运行这些这些代码

时间: 2024-10-21 22:05:38 浏览: 33

当你想要创建一个简单的Web应用，前端用户通过点击按钮发送请求，后端Flask服务器响应"Hello"，可以按照以下步骤操作：前端部分 (HTML + JavaScript) (假设在index.html文件中): ```html <!DOCTYPE html> <html lang="zh"> <head> <title>Flask Hello World</title> </head> <body> <button id="sendButton">点击发送</button> <p id="response"></p> <script> document.getElementById('sendButton').addEventListener('click', function() { fetch('/hello', {method: 'GET'}) .then(response => response.text()) .then(data => document.getElementById('response').innerText = data); }); </script> </body> </html> ``` 这里我们使用了`fetch` API来发送GET请求到'/hello'这个URL。后端部分 (Python with Flask): ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/hello') def hello(): return jsonify({'message': 'Hello from Flask!'}) if __name__ == '__main__': app.run(host='0.0.0.0', port=5000) # 运行在本地主机上，监听5000端口 ``` 在Flask应用中，我们创建了一个路由`/hello`，当收到GET请求时，返回一个JSON对象，包含键值对'message'和'value'，显示为'Hello from Flask!'. 运行代码步骤： 1. 确保已安装Flask：`pip install flask` 2. 将上述前端代码保存到index.html文件，后端代码保存到app.py文件。 3. 打开命令行终端，进入存放app.py的目录。 4. 输入 `python app.py` 启动Flask应用，此时将在终端看到类似`* Running on http://0.0.0.0:5000/`的信息，表示应用正在运行。 5. 双击index.html文件或在浏览器地址栏输入`http://localhost:5000`访问页面，点击“点击发送”按钮，应该能看到"Hello from Flask!"的响应。

阅读全文