• flask bootstrap页面json格式化

    html

    1. html>
    2. <html lang="en">
    3. <head>
    4.  
    6. <link rel="stylesheet" href="static/bootstrap-5.0.0-beta1-dist/css/bootstrap.min.css">
    7.  
    9. <script src="static/bootstrap-5.0.0-beta1-dist/js/bootstrap.bundle.min.js">script>
    10.  
    11.     <script>
    12.         function submitForm() {
    13.             document.getElementById('myForm').submit();
    14.         }
    15.  
    16.         function clearTextarea() {
    17.             var textarea = document.getElementById('myTextarea');
    18.             textarea.value = '';  // 清空 textarea 的内容
    19.         }
    20.     script>
    21.  
    22.  
    23.  
    24.   <meta charset="UTF-8">
    25.     <title>Titletitle>
    26.  
    27.   <style>
    28.     .form-control.input-lg {
    29.       height: 500px;
    30.     }
    31.   style>
    32.  
    33.  
    34.  
    35.  
    36. head>
    37. <body>
    38.  
    39.  
    40.  
    41. <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark bg-dark">
    42.   <div class="container-fluid">
    43.  
    44.     <a class="navbar-brand" href="#">
    45.       <img src="static/glyph-iconset-master/svg/si-glyph-desktop.svg" alt="" width="30" height="30" class="d-inline-block align-top">
    46.       工具大全
    47.     a>
    48.  
    49.  
    50.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    51.       <span class="navbar-toggler-icon">span>
    52.     button>
    53.  
    54.     <div class="collapse navbar-collapse" id="navbarNavDropdown">
    55.  
    56.       <ul class="navbar-nav">
    57.  
    58.         <li class="nav-item">
    59.           <a class="nav-link active" aria-current="page" href="#">首页a>
    60.         li>
    61.  
    62.         <li class="nav-item">
    63.           <a class="nav-link" href="#">test1a>
    64.         li>
    65.  
    66.         <li class="nav-item">
    67.           <a class="nav-link" href="#">test2a>
    68.         li>
    69.  
    70.  
    71.         <li class="nav-item dropdown">
    72.           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    73.             test3
    74.           a>
    75.  
    76.           <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    77.             <li><a class="dropdown-item" href="#">1a>li>
    78.             <li><a class="dropdown-item" href="#">2a>li>
    79.             <li><a class="dropdown-item" href="#">3a>li>
    80.           ul>
    81.         li>
    82.  
    83.  
    84.       ul>
    85.  
    86.  
    87.  
    88.     div>
    89.  
    90.  
    91.  
    98.  
    99.  
    100. <div class="dropdown dropdown-menu-end">
    101. <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    102.   登出
    103.   button>
    104.   <ul class="dropdown-menu">
    105.     <li><a class="dropdown-item" href="#">首页a>li>
    106.     <li><a class="dropdown-item" href="#">注销a>li>
    107.   ul>
    108. div>
    109.  
    110.  
    111.  
    112.  
    113.   div>
    114. nav>
    115.  
    116.  
    117.  
    119. <div class="container">
    120.  
    122.  
    123.   <div class="d-grid gap-2 d-md-block " >
    124.  
    125.     <button onclick="submitForm()" class="btn btn-primary" type="button" type="Submit">格式化button>
    126.     <button onclick="clearTextarea()" class="btn btn-primary" type="button">清空输出框内容button>
    127.  
    128.   div>
    129.  
    130. <h2>JSON 格式化工具h2>
    131.  
    132.  
    133.  
    134.   <div class="row align-items-start">
    136.     <div class="col-6">
    137.       <h5>输入h5>
    138.  
    139.     <form  id="myForm" method="POST">
    140.      <textarea class="form-control" id="deblock_udid" name="textarea_name" rows="30" style="min-width: 50%">{{ textarea_content }}textarea>
    141.     form>
    142.  
    143.     div>
    144.   
    145.     <div class="col-6">
    146.       <h5>输出h5>
    147.       <textarea class="form-control" id="myTextarea" name="deblock_udid" rows="30" style="min-width: 50%">{{ processed_data }}textarea>
    148.     div>
    149.  
    150.  
    151.   div>
    152. div>
    153.  
    154. <div class="container">
    155.   <div class="alert alert-light" role="alert">
    156.       {% if error_message %}
    157.         <p style="color: red;">Error: {{ error_message }}p>
    158.     {% endif %}
    159. div>
    160.  
    161. div>
    162.  
    163.  
    164.  
    165.  
    166.  
    167.  
    168. body>
    169. html>

    app.py

    1. from flask import Flask, render_template, request
    2. import json
    3.  
    4. app = Flask(__name__)
    5.  
    6.  
    7. @app.route('/', methods=['GET', 'POST'])
    8. def index():
    9.     if request.method == 'POST':
    10.         textarea_content = request.form.get('textarea_name')  # 获取提交的 textarea 内容
    11.  
    12.         print(textarea_content)
    13.  
    14.         parsed_data = None
    15.         error_message = None
    16.         if textarea_content:
    17.             try:
    18.                 parsed_data = json.loads(textarea_content)
    19.             except json.decoder.JSONDecodeError as e:
    20.                 # 处理非法的 JSON 字符串
    21.                 error_message = str('格式非法')
    22.  
    23.         # 格式化输出 JSON 数据
    24.         formatted_data = json.dumps(parsed_data, indent=4, ensure_ascii=False) if parsed_data else ''
    25.  
    26.         return render_template('student.html', textarea_content=textarea_content, processed_data=formatted_data,
    27.                                error_message=error_message)  # 将内容和错误信息传递回前端页面
    28.     else:
    29.         return render_template('student.html')
    30.  
    31.  
    32. if __name__ == '__main__':
    33.     app.run()

  • 相关阅读:
    hadoop
    没域名也可以frp实现内网穿透 SSH，个人搭建内网穿透 7月6日
    Python PDF转化wolrd代码怎么写
    【Java 进阶篇】JDBC DriverManager 详解
    Educational Codeforces Round 134 (Rated for Div. 2)
    vue2使用 relation-graph 展示关系图谱
    未来已来：探索5G技术如何改变我们的生活和工作
    【nlp】2.3 LSTM模型
    【Oculus Interaction SDK】（十）在 VR 中使用手势识别
    Deno vs. Bun vs. Node.js功能比较
  • 原文地址：https://blog.csdn.net/qq_26086231/article/details/132764068