flask bootstrap页面json格式化

html

<!DOCTYPE html>
<html lang="en">
<head><!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="static/bootstrap-5.0.0-beta1-dist/css/bootstrap.min.css"><!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="static/bootstrap-5.0.0-beta1-dist/js/bootstrap.bundle.min.js"></script><script>function submitForm() {document.getElementById('myForm').submit();}function clearTextarea() {var textarea = document.getElementById('myTextarea');textarea.value = '';  // 清空 textarea 的内容}</script><meta charset="UTF-8"><title>Title</title><style>.form-control.input-lg {height: 500px;}</style></head>
<body><nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark bg-dark"><div class="container-fluid"><a class="navbar-brand" href="#"><img src="static/glyph-iconset-master/svg/si-glyph-desktop.svg" alt="" width="30" height="30" class="d-inline-block align-top">工具大全</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNavDropdown"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">test1</a></li><li class="nav-item"><a class="nav-link" href="#">test2</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">test3</a><ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"><li><a class="dropdown-item" href="#">1</a></li><li><a class="dropdown-item" href="#">2</a></li><li><a class="dropdown-item" href="#">3</a></li></ul></li></ul></div><!--            <ul class="nav justify-content-end">-->
<!--        <li class="nav-item">-->
<!--          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>-->
<!--          -->
<!--        </li>-->
<!--      </ul>--><div class="dropdown dropdown-menu-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">登出</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">首页</a></li><li><a class="dropdown-item" href="#">注销</a></li></ul>
</div></div>
</nav><!--容器-->
<div class="container"><!--  按钮--><div class="d-grid gap-2 d-md-block " ><button onclick="submitForm()" class="btn btn-primary" type="button" type="Submit">格式化</button><button onclick="clearTextarea()" class="btn btn-primary" type="button">清空输出框内容</button></div><h2>JSON 格式化工具</h2><div class="row align-items-start">
<!--    文本框--><div class="col-6"><h5>输入</h5><form  id="myForm" method="POST"><textarea class="form-control" id="deblock_udid" name="textarea_name" rows="30" style="min-width: 50%">{{ textarea_content }}</textarea></form></div><!--    文本框--><div class="col-6"><h5>输出</h5><textarea class="form-control" id="myTextarea" name="deblock_udid" rows="30" style="min-width: 50%">{{ processed_data }}</textarea></div></div>
</div><div class="container"><div class="alert alert-light" role="alert">{% if error_message %}<p style="color: red;">Error: {{ error_message }}</p>{% endif %}
</div></div></body>
</html>

app.py

from flask import Flask, render_template, request
import jsonapp = Flask(__name__)@app.route('/', methods=['GET', 'POST'])
def index():if request.method == 'POST':textarea_content = request.form.get('textarea_name')  # 获取提交的 textarea 内容print(textarea_content)parsed_data = Noneerror_message = Noneif textarea_content:try:parsed_data = json.loads(textarea_content)except json.decoder.JSONDecodeError as e:# 处理非法的 JSON 字符串error_message = str('格式非法')# 格式化输出 JSON 数据formatted_data = json.dumps(parsed_data, indent=4, ensure_ascii=False) if parsed_data else ''return render_template('student.html', textarea_content=textarea_content, processed_data=formatted_data,error_message=error_message)  # 将内容和错误信息传递回前端页面else:return render_template('student.html')if __name__ == '__main__':app.run()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/79425.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

纯小白安卓刷机1

文章目录 常见的英文意思刷机是什么&#xff1f;为什么要刷机&#xff1f;什么是BL锁&#xff08;BootLoader锁&#xff09;&#xff1f;我的机能够刷机吗&#xff1f;什么是Boot镜像/分区&#xff1f;什么是Recovery镜像/分区&#xff08;缩写为rec&#xff09;&#xff1f;什…

数据分析与可视化 Numpy数组

1.创建数组 import numpy as np anp.array([1,2,3,4]) aarray([1, 2, 3, 4]) print(a)[1 2 3 4] b np.array((2,4,6,8)) print(b)[2 4 6 8] cnp.array([[1,2,3,4],[5,6,7,8]]) print(c)[[1 2 3 4] [5 6 7 8]] dnp.array([1,2,3,4],dtypefloat64) print(d)[1. 2. 3. 4.] …

重磅开赛!“山东工行杯”山东省第五届数据应用创新创业大赛报名火热进行中!

为进一步调动全社会参与数据价值挖掘和应用创新积极性&#xff0c;促进数据要素高效流通&#xff0c;释放数据价值&#xff0c;赋能经济社会高质量发展&#xff0c;探索公共数据资源与公共服务、社会生活、民生改善及经济建设的数字化结合方式&#xff0c;促进公共数据和企业数…

记录一次Flink安装记录

系统Ubuntu18 1.拉取镜像 #默认拉取最新版本 docker pull flink:1.14.4-scala_2.12-java8 #检查镜像 docker images | grep flink 2.编写flink的yaml文件 注意&#xff1a;云服务器需要设置安全策略放行8081端口&#xff0c;否则访问失败 注意2&#xff1a;docker-compose 版…

创建了一个名为nums_list的vector容器,其中存储了一系列的pair<int, int>

vector<pair<int, int>> nums_list;for (int i 0; i < nums.size(); i) {nums_list.emplace_back(i, nums[i]);}这段代码创建了一个名为nums_list的vector容器&#xff0c;其中存储了一系列的pair<int, int>。代码的逻辑如下&#xff1a;1. 创建一个空的…

Linux Debian12使用git将本地项目上传到码云(gitee)远程仓库

一、注册码云gitee账号 这个可以参考其他教程&#xff0c;本文不做介绍。 gitee官网&#xff1a;https://gitee.com/ 二、Linux Debian12安装git 如果Linux系统没有安装git&#xff0c;可以使用下面命令安装git sudo apt install git 三、gitee新建仓库 我这只做测试&…

自动化构建:提高开发流程效率与质量的关键工具

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 引言 自动化构建是现代…

便捷又炸街!Mate 60的智感支付,是如何做到快速又安全的?

扫码支付已成为线下消费的主流付款方式&#xff0c;平时出门&#xff0c;手机一带&#xff0c;钱包拜拜&#xff01; 以微信支付为例&#xff0c;正常线下支付&#xff0c;手机解锁状态下&#xff1a; 第一步&#xff1a;找到微信APP&#xff1b; 第二步&#xff1a;打开右上…

centos7 安装 rabbitmq

一、windows 上下载依赖文件以及安装文件 https://d28dx6y1hfq314.cloudfront.net/828/1033/el/7/package_files/1305009.rpm?t1694767188_8bd28780066a52b94cc2edfb2b7f574333d72318https://d28dx6y1hfq314.cloudfront.net/828/1039/el/7/package_files/1038460.rpm?t16947…

考公顺序步骤

目标&#xff1a;83 判断推理&#xff08;聂佳&#xff09;资料分析&#xff08;花生十三&#xff09;言语理解&#xff08;阿里木江&#xff09;常识判断&#xff08;李m娇&#xff09;数量&#xff08;花生十三&#xff09; 第一阶段 基础课过考点&#xff0c;做好笔记和思…

前端JavaScript Error 类: 异常处理与错误管理

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 引言 1. Error 类简介 2. Error 类属性 3. Error 类的 API 4. Error 类的应用场景 5. 自定义错误类型 6. 注意…

ChatGPT与日本首相交流核废水事件-精准Prompt...

了解更多请点击&#xff1a;ChatGPT与日本首相交流核废水事件-精准Prompt...https://mp.weixin.qq.com/s?__bizMzg2NDY3NjY5NA&mid2247490070&idx1&snebdc608acd419bb3e71ca46acee04890&chksmce64e42ff9136d39743d16059e2c9509cc799a7b15e8f4d4f71caa25968554…

linux 6中4T磁盘识别并分区格式化挂接

存储端划分4T的LUN后&#xff0c;主机端操作如下 1、主机识别&#xff0c;本例中hba卡的端口是host11和host12 [rootdb1 ~]# echo "- - -" > /sys/class/scsi_host/host11/scan [rootdb1 ~]# echo "- - -" > /sys/class/scsi_host/host12/scan …

C++之unordered_map,unordered_set模拟实现

unordered_map&#xff0c;unordered_set模拟实现 哈希表源代码哈希表模板参数的控制仿函数增加正向迭代器实现*运算符重载->运算符重载运算符重载! 和 运算符重载begin()与end()实现 unordered_set实现unordered_map实现map/set 与 unordered_map/unordered_set对比哈希表…

第31章_瑞萨MCU零基础入门系列教程之WIFI蓝牙模块驱动实验

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

pdf文档怎么压缩小一点?文件方法在这里

在日常工作和生活中&#xff0c;我们经常会遇到需要上传或者发送pdf文档的情况。但是&#xff0c;有时候pdf文档的大小超出了限制&#xff0c;需要我们对其进行压缩。那么&#xff0c;如何将pdf文档压缩得更小一点呢&#xff1f;下面&#xff0c;我将介绍三种方法&#xff0c;让…

文本框粘贴时兼容Unix、Mac换行符的方法源码

本篇文章属于《518抽奖软件开发日志》系列文章的一部分。 我在开发《518抽奖软件》&#xff08;www.518cj.net&#xff09;的时候&#xff0c;要在文本框粘贴从别处复制来的名单。发现一个问题&#xff0c;就是一些Unix传过来的多行文本&#xff0c;粘贴后都变成了一行。原来&a…

vue学习之内容渲染

内容渲染 创建 demo2.html,内容如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</…

Vue自动生成二维码并可下载二维码

遇到一个需求&#xff0c;需要前端自行生成用户的个人名片分享二维码&#xff0c;并提供二维码下载功能。在网上找到很多解决方案&#xff0c;最终吭哧吭哧做完了&#xff0c;把它整理记录一下&#xff0c;方便后续学习使用&#xff01;嘿嘿O(∩_∩)O~ 这个小东西有以下功能特点…

centos下安装jenkins.war

https://get.jenkins.io/war-stable/ 下载jenkins.war包,(2.164.1 版本支持1.8&#xff0c;其他的都是jdk11),可以安装完成后更新jenkins.war的安装包启动jenkins命令 java -jar jenkins.war --httpPort8010访问http://IP:8010/jenkins &#xff08;密码在/root/.jenkins/secre…