首页写一个 flask 前后端的demo

写一个 flask 前后端的demo

时间: 2023-11-02 22:09:19 浏览: 78

好的，我可以为您提供一个简单的 Flask 前后端 demo。后端 Flask 代码如下： ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/api', methods=['POST']) def api(): input_data = request.json['input'] output_data = "Hello " + input_data response = jsonify({'output': output_data}) response.headers.add('Access-Control-Allow-Origin', '*') return response if __name__ == '__main__': app.run(port=5000) ``` 前端代码如下： ```html <!DOCTYPE html> <html> <head> <title>Flask Demo</title> </head> <body> <input type="text" id="input" placeholder="Enter your name"> <button onclick="getOutput()">Get Output</button> <br><br> <label>Output: </label> <div id="output"></div> <script> function getOutput() { var input = document.getElementById("input").value; fetch('http://localhost:5000/api', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ input: input }) }) .then(response => response.json()) .then(data => document.getElementById("output").innerHTML = data.output); } </script> </body> </html> ``` 这个 demo 实现了一个简单的前端页面，用户可以在页面上输入一个字符串，然后点击按钮获取后端处理后的输出结果。后端通过 Flask 提供的路由来接收请求，并通过 jsonify 方法将处理结果转化为 JSON 格式的数据返回给前端页面。前端页面通过 JavaScript 中的 fetch 方法将用户输入的数据以 JSON 格式的数据发送给后端，然后通过 JavaScript 解析返回的 JSON 格式数据，将处理结果展示给用户。

阅读全文