## 提示词采用大模型：通义千问（代码模式） ``` 实现一个格式化JSON数据的Flask项目，要求： ## 功能 - 输入原始JSON字符串，输出格式化后的JSON结果，具有良好的缩进和换行，易于理解与阅读 ## UI框架 - 采用bootstrap 5.3.x版本 ## 页面布局页面从上到下依次放置以下元素： - 原始JSON字符串输入框，textarea组件 - 格式化的按钮 - 使用带边框的div块显示格式化后的JSON结果 ## 其它 - 使用模板渲染 - 页面屏幕居中 - 采用响应式页面设计 ``` ## 输出为了实现这个功能，我们需要创建一个简单的Flask应用，并使用Bootstrap 5.3.x来设计前端页面。以下是完整的代码： ### app.py ```python from flask import Flask, render_template, request, json, jsonify app = Flask(__name__) @app.route('/', methods=['GET', 'POST']) def index(): formatted_json = None if request.method == 'POST': try: json_input = request.form['jsonInput'] parsed_json = json.loads(json_input) formatted_json = json.dumps(parsed_json, indent=4) except Exception as e: formatted_json = f"Error: {str(e)}" return render_template('index.html', formatted_json=formatted_json) if __name__ == '__main__': app.run(debug=True) ``` ### templates/index.html ``` JSON Formatter

JSON Formatter

{% if formatted_json %}

{{ formatted_json|safe }}

{% endif %}

``` ### 说明 1. **前端部分**：使用了Bootstrap 5.3.x版本，并通过CSS样式使页面居中和响应式。 2. **表单处理**：用户提交原始JSON字符串后，通过POST方法发送到服务器。 3. **JSON解析与格式化**：在后端接收到JSON字符串后，尝试将其解析为Python字典并转换回JSON格式字符串，然后返回给前端显示。 4. **错误处理**：如果输入的JSON字符串无法解析，则显示错误信息。 ### 运行步骤 1. 安装Flask：`pip install Flask` 2. 将上述HTML代码保存为`templates/index.html` 3. 将上述Python代码保存为`app.py` 4. 运行Flask应用：`python app.py` 5. 打开浏览器访问`http://127.0.0.1:5000/` 这样就完成了一个简单的JSON格式化工具。 ## 效果图 ![image](https://gitee.com/HelloLearning/resources/raw/master/blog-images/flask-ui-formatjson.png)

用Flask框架实现JSON字符串格式化工具