devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用python的flask框架做一个本地mysql服务器的webui！_flask ui

作者：小桥流水78 | 2024-07-15 10:22:20

赞

踩

flask ui

该webui的主要作用是作为一个数据库管理系统对本地mysql数据库进行管理。这里会手把手教学如何实现的，并在文末给出初代完整flask数据库管理系统的完整代码！希望能帮助到有需要的同学。本来是想用来干点其他的，但是想了一下决定还是完整开源出来，各位看官，用的话记得给个鸣谢或者引用呗！Thanks♪(･ω･)ﾉ

注：本人软工部分也是刚学习不久，代码规范和代码维护上存在欠缺，还需看官多多包涵，恳请批评指正！

这是我的界面截图（背景随便找的）

登录界面：

数据库选择界面：

数据库管理界面：

搜索结果：

现在我们开始

首先，先安装mysql数据库，这里给出一个windows的下载链接，我选择的是mysql8.4.0.lts版本，MySQL :: Download MySQL Community Server

以及mysql workbench-mysql的可视化界面

MySQL :: Download MySQL Workbench

下载后根据安装指引安装即可，记得先给设置一个从用户账户和密码，该账户用来给flask连接数据库。记住保存路径，并勾选world数据库（方便后期调试）

然后设置系统环境变量，右键此电脑→高级系统设置→系统变量设置→系统变量→path→新建→粘贴刚才的保存路径（默认是C:\Program Files\MySQL\MySQL Server 8.4\bin，需要查看该目录下是否存在mysql.exe）

mysql安装好后按道理理论上会自动启动，不过也可以通过win+r输入services.msc查询，找到mysql开头的，我的是MySQL84，右键属性可以看到

这样就可以了。

然后试一下，找一个空白的地方shift+右键，打开powershell，然后键入 mysql -u root账户名 -p，然后输入密码验证。显示<mysql>即成功安装。

然后就是python，python的安装自行搜索，不做过多停留，安装完python后给pip换为国内源，

windows环境下： 比如windows账号是 admin

那么建立 admin主目录下的 pip子目录，在此pip子目录下建立pip的配置文件：pip.ini

位于c:\users\admin\pip\pip.ini

# coding: GBK

[global]

index-url = https://pypi.tuna.tsinghua.edu.cn/simple

[install]

trusted-host = https://pypi.tuna.tsinghua.edu.cn

#清华大学：https://pypi.tuna.tsinghua.edu.cn/simple

#阿里云：http://mirrors.aliyun.com/pypi/simple/

#豆瓣：http://pypi.douban.com/simple/

=================================================================

推荐采用python虚拟环境中执行该系统环境配置

创建一个工程目录，并在该目录下执行powershell（shift + 右键）或者终端（ctrl+alt+T）

python -m venv venv

venv/script/activate

安装flask框架（mysql）：
pip install flask
pip install mysql-connector-python
pip install Flask mysql-connector-python
pip install Flask-Session

这样环境就配置好了

然后就是执行python文件，python app.py

如果终端显示

则表示运行成功，并可在浏览器输入http://127.0.0.1:5000访问。

以下是app.py的示例代码：

  1. ################################app.py############################
  2. from flask import Flask, request, jsonify, render_template, redirect, url_for, session
  3. from flask_session import Session
  4. import mysql.connector
  5.  
  6. app = Flask(__name__)
  7. app.secret_key = 'root'  # 用于会话管理
  8. app.config['SESSION_TYPE'] = 'filesystem'  # 使用文件系统存储会话
  9. Session(app)
  10.  
  11. # 预定义账号和密码
  12. USERS = {
  13.     'admin': 'admin',
  14.     '旅馆管理系统': '123456'
  15. }
  16.  
  17. # 数据库连接配置
  18. db_config = {
  19.     'host': 'localhost',
  20.     'user': '旅馆管理系统',
  21.     'password': '123456'
  22. }
  23.  
  24. def get_db_connection():
  25.     conn = mysql.connector.connect(
  26.         host=db_config['host'],
  27.         user=db_config['user'],
  28.         password=db_config['password']
  29.     )
  30.     return conn
  31.  
  32. def get_databases():
  33.     conn = get_db_connection()
  34.     cursor = conn.cursor()
  35.     cursor.execute("SHOW DATABASES")
  36.     databases = [database[0] for database in cursor.fetchall() if database[0] != 'information_schema']  # 排除系统数据库
  37.     cursor.close()
  38.     conn.close()
  39.     return databases
  40.  
  41. def get_tables(database):
  42.     conn = get_db_connection()
  43.     cursor = conn.cursor()
  44.     cursor.execute(f"USE {database}")
  45.     cursor.execute("SHOW TABLES")
  46.     tables = [table[0] for table in cursor.fetchall()]
  47.     cursor.close()
  48.     conn.close()
  49.     return tables
  50.  
  51. def get_table_fields(database, table):
  52.     conn = get_db_connection()
  53.     cursor = conn.cursor()
  54.     cursor.execute(f"USE {database}")
  55.     cursor.execute(f"SHOW COLUMNS FROM {table}")
  56.     fields = [field[0] for field in cursor.fetchall()]
  57.     cursor.close()
  58.     conn.close()
  59.     return fields
  60.  
  61. def get_table_records(database, table):
  62.     conn = get_db_connection()
  63.     cursor = conn.cursor(dictionary=True)
  64.     cursor.execute(f"USE {database}")
  65.     cursor.execute(f"SELECT * FROM {table}")
  66.     records = cursor.fetchall()
  67.     cursor.close()
  68.     conn.close()
  69.     return records
  70.  
  71. # 获取表的主键字段
  72. def get_table_primary_key(database, table):
  73.     conn = get_db_connection()
  74.     cursor = conn.cursor()
  75.     cursor.execute(f"USE {database}")
  76.     cursor.execute(f"SHOW KEYS FROM {table} WHERE Key_name = 'PRIMARY'")
  77.     primary_key = cursor.fetchone()
  78.     cursor.close()
  79.     conn.close()
  80.     return primary_key[4] if primary_key else None
  81.  
  82. # 用户登录页
  83. @app.route('/', methods=['GET', 'POST'])
  84. def login():
  85.     if request.method == 'POST':
  86.         username = request.form['username']
  87.         password = request.form['password']
  88.         
  89.         if username in USERS and USERS[username] == password:
  90.             session['username'] = username  # 将用户名存储在session中
  91.             return redirect(url_for('home'))
  92.         else:
  93.             return 'Invalid username or password', 401
  94.     
  95.     return render_template('login.html')
  96.  
  97. # 用户登出页
  98. @app.route('/logout')
  99. def logout():
  100.     session.pop('username', None)  # 清除会话数据
  101.     return redirect(url_for('login'))
  102.  
  103. # 用户管理页
  104. @app.route('/home')
  105. def home():
  106.     if 'username' not in session:
  107.         return redirect(url_for('login'))
  108.     return render_template('index.html', databases=get_databases())
  109.  
  110. # 进入数据库
  111. @app.route('/enter-database', methods=['POST'])
  112. def enter_database():
  113.     if 'username' not in session:
  114.         return redirect(url_for('login'))
  115.  
  116.     selected_database = request.form.get('database')
  117.     session['selected_database'] = selected_database
  118.     return redirect(url_for('database_home'))
  119.  
  120. # 数据库主页
  121. @app.route('/database_home')
  122. def database_home():
  123.     if 'username' not in session or 'selected_database' not in session:
  124.         return redirect(url_for('login'))
  125.  
  126.     selected_database = session['selected_database']
  127.     tables = get_tables(selected_database)
  128.     selected_table = request.args.get('table', tables[0] if tables else None)
  129.     fields = get_table_fields(selected_database, selected_table) if selected_table else []
  130.     records = get_table_records(selected_database, selected_table) if selected_table else []
  131.     primary_key = get_table_primary_key(selected_database, selected_table)
  132.  
  133.     return render_template('database_home.html', 
  134.                            database=selected_database, 
  135.                            tables=tables, 
  136.                            selected_table=selected_table, 
  137.                            fields=fields,
  138.                            records=records,
  139.                            field_names=fields,
  140.                            primary_key=primary_key)  # 将主键字段传递给模板
  141.  
  142. # 获取表的字段
  143. @app.route('/get_table_fields', methods=['POST'])
  144. def get_table_fields_route():
  145.     if 'username' not in session or 'selected_database' not in session:
  146.         return redirect(url_for('login'))
  147.  
  148.     database = session['selected_database']
  149.     table = request.form.get('table')
  150.     fields = get_table_fields(database, table)
  151.     return jsonify(fields)
  152.  
  153. # 保存记录
  154. @app.route('/save_record', methods=['POST'])
  155. def save_record():
  156.     if 'username' not in session or 'selected_database' not in session:
  157.         return jsonify({'success': False, 'error': 'Unauthorized'}), 403
  158.  
  159.     data = request.get_json()
  160.     database = data['database']
  161.     table = data['table']
  162.     record = data['record']
  163.  
  164.     print("Saving record:", record)  # 添加调试输出
  165.  
  166.     if 'id' not in record:
  167.         return jsonify({'success': False, 'error': 'Missing id'}), 400
  168.  
  169.     conn = get_db_connection()
  170.     cursor = conn.cursor()
  171.  
  172.     update_query = f"UPDATE {database}.{table} SET "
  173.     update_query += ", ".join([f"{field} = %s" for field in record.keys() if field != 'id'])
  174.     update_query += " WHERE id = %s"
  175.     params = [record[field] for field in record.keys() if field != 'id'] + [record['id']]
  176.  
  177.     try:
  178.         cursor.execute(update_query, params)
  179.         conn.commit()
  180.         success = True
  181.     except Exception as e:
  182.         print(e)
  183.         success = False
  184.  
  185.     cursor.close()
  186.     conn.close()
  187.  
  188.     return jsonify({'success': success})
  189.  
  190. # 删除记录
  191. @app.route('/delete_record', methods=['POST'])
  192. def delete_record():
  193.     if 'username' not in session or 'selected_database' not in session:
  194.         return jsonify({'success': False, 'error': 'Unauthorized'}), 403
  195.  
  196.     data = request.get_json()
  197.     database = data['database']
  198.     table = data['table']
  199.     record_name = data['name']  # 修改为 'name' 字段
  200.  
  201.     print("Deleting record with name:", record_name)  # 添加调试输出
  202.  
  203.     conn = get_db_connection()
  204.     cursor = conn.cursor()
  205.  
  206.     delete_query = f"DELETE FROM {database}.{table} WHERE Name = %s"  # 使用 'Name' 字段作为唯一标识
  207.  
  208.     try:
  209.         cursor.execute(delete_query, (record_name,))
  210.         conn.commit()
  211.         success = True
  212.     except Exception as e:
  213.         print(e)
  214.         success = False
  215.  
  216.     cursor.close()
  217.     conn.close()
  218.  
  219.     return jsonify({'success': success})
  220.  
  221. # 保存新记录
  222. @app.route('/save_new_record', methods=['POST'])
  223. def save_new_record():
  224.     if 'username' not in session or 'selected_database' not in session:
  225.         return jsonify({'success': False, 'error': 'Unauthorized'}), 403
  226.  
  227.     data = request.get_json()
  228.     database = data['database']
  229.     table = data['table']
  230.     record = data['record']
  231.  
  232.     print("Saving new record:", record)  # 添加调试输出
  233.  
  234.     # 构造插入记录的 SQL 查询语句
  235.     insert_query = f"INSERT INTO {database}.{table} ({', '.join(record.keys())}) VALUES ({', '.join(['%s']*len(record))})"
  236.     params = tuple(record.values())  # 将记录的值转换为元组形式
  237.  
  238.     conn = get_db_connection()
  239.     cursor = conn.cursor()
  240.  
  241.     try:
  242.         cursor.execute(insert_query, params)
  243.         conn.commit()
  244.         success = True
  245.     except Exception as e:
  246.         print(e)
  247.         success = False
  248.  
  249.     cursor.close()
  250.     conn.close()
  251.  
  252.     return jsonify({'success': success})
  253.  
  254. # 执行搜索并返回结果
  255. def search_records(database, table, keyword):
  256.     conn = get_db_connection()
  257.     cursor = conn.cursor(dictionary=True)
  258.  
  259.     # 构造模糊搜索的 SQL 查询语句
  260.     search_query = f"SELECT * FROM {database}.{table} WHERE "
  261.     search_query += " OR ".join([f"{field} LIKE %s" for field in get_table_fields(database, table)])
  262.     params = ['%' + keyword + '%'] * len(get_table_fields(database, table))
  263.  
  264.     cursor.execute(search_query, params)
  265.     records = cursor.fetchall()
  266.  
  267.     cursor.close()
  268.     conn.close()
  269.  
  270.     return records
  271.  
  272. # 搜索页面
  273. @app.route('/search_results')
  274. def search_results():
  275.     if 'username' not in session or 'selected_database' not in session:
  276.         return redirect(url_for('login'))
  277.  
  278.     selected_database = session['selected_database']
  279.     selected_table = request.args.get('table')
  280.     keyword = request.args.get('keyword')
  281.  
  282.     records = search_records(selected_database, selected_table, keyword)
  283.     fields = get_table_fields(selected_database, selected_table)
  284.  
  285.     return render_template('search_results.html',
  286.                            keyword=keyword,
  287.                            database=selected_database,
  288.                            selected_table=selected_table,
  289.                            fields=fields,
  290.                            records=records)
  291.  
  292. if __name__ == '__main__':
  293.     app.run(debug=True)

以下是一些示例html

  1. ####################database_home.html#########################
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Database Home</title>
  9.     <style>
  10.         body {
  11.             margin: 0;
  12.             padding: 0;
  13.             font-family: Arial, sans-serif;
  14.             background-image: url('/static/background.jpg');
  15.             background-size: cover;
  16.             background-position: center;
  17.             background-attachment: fixed;
  18.             height: 100vh;
  19.             overflow: auto;
  20.         }
  21.  
  22.         .container {
  23.             background-color: rgba(255, 255, 255, 0.8);
  24.             padding: 20px;
  25.             border-radius: 10px;
  26.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  27.             margin: 20px;
  28.         }
  29.  
  30.         h2 {
  31.             margin-bottom: 10px;
  32.             font-size: 24px;
  33.         }
  34.  
  35.         button {
  36.             padding: 12px 24px;
  37.             cursor: pointer;
  38.             border: none;
  39.             border-radius: 5px;
  40.             font-size: 18px;
  41.             outline: none;
  42.             transition: background-color 0.3s ease;
  43.         }
  44.  
  45.         .go-back-button {
  46.             background-color: #dc3545;
  47.             color: #fff;
  48.             margin-bottom: 20px;
  49.             text-align: right;
  50.             font-size: 18px;
  51.         }
  52.  
  53.         .go-back-button:hover {
  54.             background-color: #c82333;
  55.             text-align: right;
  56.         }
  57.  
  58.         .search-form-container,
  59.         .table-select-container {
  60.             text-align: left;
  61.             margin-bottom: 50px;
  62.         }
  63.  
  64.         input[type="text"],
  65.         select {
  66.             width: calc(100% - 120px);
  67.             padding: 10px;
  68.             margin-bottom: 10px;
  69.             box-sizing: border-box;
  70.             border: 1px solid #ccc;
  71.             border-radius: 5px;
  72.             background-color: #f8f8f8;
  73.             font-size: 18px;
  74.             outline: none;
  75.         }
  76.  
  77.         button[type="submit"] {
  78.             padding: 12px 24px;
  79.             cursor: pointer;
  80.             border: none;
  81.             border-radius: 5px;
  82.             background-color: #007bff;
  83.             color: #fff;
  84.             font-size: 18px;
  85.             outline: none;
  86.             transition: background-color 0.3s ease;
  87.         }
  88.  
  89.         button[type="submit"]:hover {
  90.             background-color: #0056b3;
  91.         }
  92.  
  93.         table {
  94.             width: 100%;
  95.             border-collapse: collapse;
  96.             margin-top: 10px;
  97.         }
  98.  
  99.         th,
  100.         td {
  101.             border: 1px solid black;
  102.             padding: 8px;
  103.             text-align: left;
  104.         }
  105.  
  106.         th {
  107.             background-color: #f2f2f2;
  108.         }
  109.  
  110.         .editable {
  111.             background-color: #e8f0fe;
  112.         }
  113.  
  114.         #new-record-table {
  115.             display: none;
  116.             margin-top: 20px;
  117.         }
  118.  
  119.         #new-record-table td {
  120.             width: 150px;
  121.             padding: 5px;
  122.         }
  123.  
  124.         .icon-button {
  125.             background: none;
  126.             border: none;
  127.             cursor: pointer;
  128.             padding: 0;
  129.             outline: none;
  130.         }
  131.  
  132.         .icon-button img {
  133.             width: 48px;
  134.             /* 调整SVG图标的尺寸 */
  135.             height: 48px;
  136.             /* 调整SVG图标的尺寸 */
  137.         }
  138.  
  139.         .divider {
  140.             border-top: 2px solid #ccc;
  141.             margin-top: 20px;
  142.             margin-bottom: 20px;
  143.         }
  144.  
  145.         .footer {
  146.             position: fixed;
  147.             bottom: 0;
  148.             width: 100%;
  149.             background-color: #d6dce1;
  150.             padding: 10px 0;
  151.             text-align: center;
  152.             font-size: 14px;
  153.             color: #6c757d;
  154.         }
  155.     </style>
  156. </head>
  157.  
  158. <body>
  159.     <div class="footer">
  160.         Version 1.0.0
  161.     </div>
  162.  
  163.     <div id="user-info"
  164.         style="position: absolute; top: 10px; right: 10px; padding: 10px; background-color: #3ec83e; border: 1px solid #007bff; border-radius: 5px;">
  165.         <span style="color: #0b0808; font-weight: bold;">你好！{{ session['username'] }}</span>
  166.     </div>
  167.  
  168.     <div class="container">
  169.         <h2 style="font-size: 50px; font-weight: bold;">当前数据库：{{ database }}</h2>
  170.         <button class="go-back-button" style="float: right; background-color:#d05d63;"
  171.             onclick="goBack()">退出当前数据库</button>
  172.         <div class="search-form-container">
  173.             <form id="search-form" onsubmit="search(event)">
  174.                 <input type="text" id="keyword" name="keyword" placeholder="搜索..."
  175.                     style="height=45px; padding: 10px; border: 2px solid #ccc; border-radius: 10px; font-size: 16px;">
  176.                 <input type="hidden" name="table" value="{{ selected_table }}">
  177.                 <button type="submit" style="background-color:#a099dd;">搜索</button>
  178.             </form>
  179.         </div>
  180.  
  181.         <div class="table-select-container" style="display: flex; align-items: center; margin-top: 20px;">
  182.             <label for="table-select" style="font-size: 20px; margin-right: 10px;"><strong>当前访问的表：</strong></label>
  183.             <select id="table-select" name="table" onchange="updateTable(this.value)"
  184.                 style="font-size: 20px; width: 200px;">
  185.                 {% for table in tables %}
  186.                 <option value="{{ table }}" {% if table==selected_table %}selected{% endif %}>{{ table }}</option>
  187.                 {% endfor %}
  188.             </select>
  189.         </div>
  190.  
  191.         <button class="icon-button" onclick="toggleNewRecordForm()" style="text-align: center;">
  192.             <img src="/static/svg/档案.svg" alt="添加记录" style="vertical-align: middle;">
  193.             <br>
  194.             <span id="toggle-text" style="font-size: 20px; font-weight: bold;">{{ '添加记录明细' if button_new_record_activate
  195.                 else '添加记录' }}</span>
  196.         </button>
  197.  
  198.  
  199.         <div id="new-record-table">
  200.             <h3>添加记录</h3>
  201.             <table id="new-record-form">
  202.                 <tbody>
  203.                     {% for field in field_names %}
  204.                     <tr>
  205.                         <td>{{ '*' if field == primary_key else '' }}{{ field }}</td>
  206.                         <td><input type="text" id="new-{{ field }}" name="{{ field }}"></td>
  207.                     </tr>
  208.                     {% endfor %}
  209.                     <tr>
  210.                         <td colspan="2" style="text-align: center;"><button class="icon-button"
  211.                                 onclick="saveNewRecord()"><img src="/static/svg/上传.svg" alt="保存"></button></td>
  212.                     </tr>
  213.                 </tbody>
  214.             </table>
  215.         </div>
  216.  
  217.         <div class="divider"></div>
  218.  
  219.         <h3>记录列表</h3>
  220.         <table id="record-list">
  221.             <thead>
  222.                 <tr>
  223.                     {% for field in fields %}
  224.                     <th>{{ field }}</th>
  225.                     {% endfor %}
  226.                     <th>保存修改</th>
  227.                     <th>删除</th>
  228.                 </tr>
  229.             </thead>
  230.             <tbody>
  231.                 {% for record in records %}
  232.                 <tr>
  233.                     {% for field in fields %}
  234.                     <td contenteditable="true" data-field="{{ field }}">{{ record[field] }}</td>
  235.                     {% endfor %}
  236.                     <td><button class="icon-button" onclick="saveRecord(this)"><img src="/static/svg/编辑.svg"
  237.                                 alt="保存"></button></td>
  238.                     <td><button class="icon-button" onclick="confirmDelete(this)"><img src="/static/svg/删除.svg"
  239.                                 alt="删除"></button></td>
  240.                 </tr>
  241.                 {% endfor %}
  242.             </tbody>
  243.         </table>
  244.     </div>
  245.  
  246.     <script>
  247.         let button_new_record_activate = false;
  248.  
  249.         function toggleNewRecordForm() {
  250.             button_new_record_activate = !button_new_record_activate;
  251.             document.getElementById('new-record-table').style.display = button_new_record_activate ? 'block' : 'none';
  252.         }
  253.  
  254.         function updateTable(table) {
  255.             const urlParams = new URLSearchParams(window.location.search);
  256.             urlParams.set('table', table);
  257.             window.location.search = urlParams.toString();
  258.         }
  259.  
  260.         function saveRecord(button) {
  261.             const row = button.closest('tr');
  262.             const fields = {};
  263.             row.querySelectorAll('td[data-field]').forEach(td => {
  264.                 const fieldName = td.getAttribute('data-field');
  265.                 fields[fieldName.toLowerCase()] = td.innerText;
  266.             });
  267.  
  268.             fetch('/save_record', {
  269.                 method: 'POST',
  270.                 headers: {
  271.                     'Content-Type': 'application/json'
  272.                 },
  273.                 body: JSON.stringify({
  274.                     database: '{{ database }}',
  275.                     table: '{{ selected_table }}',
  276.                     record: fields
  277.                 })
  278.             })
  279.                 .then(response => response.json())
  280.                 .then(data => {
  281.                     if (data.success) {
  282.                         alert('记录保存成功');
  283.                     } else {
  284.                         alert('记录保存失败');
  285.                     }
  286.                 });
  287.         }
  288.  
  289.         function confirmDelete(button) {
  290.             if (confirm("确定要删除吗？")) {
  291.                 deleteRecord(button);
  292.             } else {
  293.                 // 用户取消删除操作
  294.             }
  295.         }
  296.  
  297.         function deleteRecord(button) {
  298.             const row = button.closest('tr');
  299.             const recordName = row.querySelector('td[data-field="Name"]').innerText;
  300.  
  301.             fetch('/delete_record', {
  302.                 method: 'POST',
  303.                 headers: {
  304.                     'Content-Type': 'application/json'
  305.                 },
  306.                 body: JSON.stringify({
  307.                     database: '{{ database }}',
  308.                     table: '{{ selected_table }}',
  309.                     name: recordName
  310.                 })
  311.             })
  312.                 .then(response => response.json())
  313.                 .then(data => {
  314.                     if (data.success) {
  315.                         alert('记录删除成功');
  316.                         row.remove();
  317.                     } else {
  318.                         alert('记录删除失败');
  319.                     }
  320.                 });
  321.         }
  322.  
  323.         function search(event) {
  324.             event.preventDefault();
  325.  
  326.             const keyword = document.getElementById('keyword').value.trim();
  327.             if (keyword === '') {
  328.                 alert('请输入搜索关键字');
  329.                 return;
  330.             }
  331.  
  332.             const formData = new FormData(document.getElementById('search-form'));
  333.             const searchParams = new URLSearchParams(formData).toString();
  334.             window.location.href = `/search_results?${searchParams}`;
  335.         }
  336.  
  337.         function showNewRecordForm() {
  338.             document.getElementById('new-record-table').style.display = 'block';
  339.         }
  340.  
  341.         function saveNewRecord() {
  342.             const record = {};
  343.             {% for field in field_names %}
  344.             record['{{ field }}'] = document.getElementById('new-{{ field }}').value;
  345.             {% endfor %}
  346.  
  347.             fetch('/save_new_record', {
  348.                 method: 'POST',
  349.                 headers: {
  350.                     'Content-Type': 'application/json'
  351.                 },
  352.                 body: JSON.stringify({
  353.                     database: '{{ database }}',
  354.                     table: '{{ selected_table }}',
  355.                     record: record
  356.                 })
  357.             })
  358.                 .then(response => response.json())
  359.                 .then(data => {
  360.                     if (data.success) {
  361.                         alert('数据保存成功');
  362.                         window.location.href = `/database_home?table={{ selected_table }}`;
  363.                     } else {
  364.                         alert('数据保存失败，请检查填写的数据格式或关键字错误');
  365.                     }
  366.                 });
  367.         }
  368.  
  369.         function goBack() {
  370.             window.location.href = '/home';
  371.         }
  372.  
  373.         function toggleNewRecordForm() {
  374.             button_new_record_activate = !button_new_record_activate;
  375.             document.getElementById('new-record-table').style.display = button_new_record_activate ? 'block' : 'none';
  376.             document.getElementById('toggle-text').innerText = button_new_record_activate ? '收起添加记录明细' : '添加记录';
  377.         }
  378.  
  379.     </script>
  380. </body>
  381.  
  382. </html>
  1. ##############################index.html#################################
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>数据库选择</title>
  9.     <style>
  10.         body {
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.             height: 100vh;
  15.             margin: 0;
  16.             background-image: url('/static/background.jpg');
  17.             background-size: cover;
  18.             background-position: center;
  19.             background-repeat: no-repeat;
  20.         }
  21.  
  22.         .container {
  23.             background-color: rgba(255, 255, 255, 0.8);
  24.             padding: 20px;
  25.             border-radius: 10px;
  26.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  27.             margin: 20px;
  28.             width: 50%;
  29.             /* 设置容器的宽度为页面宽度的 80% */
  30.         }
  31.  
  32.  
  33.         form {
  34.             display: inline-block;
  35.             text-align: left;
  36.             width: 100%;
  37.         }
  38.  
  39.         label {
  40.             display: block;
  41.             margin-bottom: 5px;
  42.             font-weight: bold;
  43.         }
  44.  
  45.         input[type="text"],
  46.         input[type="password"],
  47.         select {
  48.             width: 100%;
  49.             padding: 10px;
  50.             margin-bottom: 20px;
  51.             box-sizing: border-box;
  52.             border: 1px solid #ccc;
  53.             border-radius: 5px;
  54.             background-color: #f8f8f8;
  55.             font-size: 16px;
  56.             outline: none;
  57.         }
  58.  
  59.         .button-container {
  60.             display: flex;
  61.             justify-content: space-between;
  62.         }
  63.  
  64.         button[type="submit"],
  65.         .logout-button {
  66.             padding: 10px 40px;
  67.             cursor: pointer;
  68.             border: none;
  69.             border-radius: 5px;
  70.             font-size: 16px;
  71.             outline: none;
  72.             transition: background-color 0.3s ease;
  73.             width: 48%;
  74.             /* 设置按钮宽度为48% */
  75.             text-align: center;
  76.         }
  77.  
  78.         button[type="submit"] {
  79.             background-color: #007bff;
  80.             color: #fff;
  81.         }
  82.  
  83.         button[type="submit"]:hover {
  84.             background-color: #0056b3;
  85.         }
  86.  
  87.         .logout-button {
  88.             background-color: #dc3545;
  89.             color: #fff;
  90.             text-decoration: none;
  91.             display: inline-block;
  92.             line-height: 1.5;
  93.         }
  94.  
  95.         .logout-button:hover {
  96.             background-color: #c82333;
  97.         }
  98.  
  99.         h2 {
  100.             margin-bottom: 10px;
  101.             color: white;
  102.         }
  103.  
  104.         h4 {
  105.             margin-bottom: 20px;
  106.             font-size: 14px;
  107.             text-align: right;
  108.             color: white;
  109.         }
  110.  
  111.         .footer {
  112.             position: fixed;
  113.             bottom: 0;
  114.             width: 100%;
  115.             background-color: #d5dee7;
  116.             padding: 10px 0;
  117.             text-align: center;
  118.             font-size: 14px;
  119.             color: #6c757d;
  120.         }
  121.     </style>
  122. </head>
  123.  
  124. <body>
  125.     <div id="user-info"
  126.         style="position: absolute; top: 10px; right: 10px; padding: 10px; background-color: #3ec83e; border: 1px solid #007bff; border-radius: 5px;">
  127.         <span style="color: #0b0808; font-weight: bold;">你好！{{ session['username'] }}</span>
  128.     </div>
  129.  
  130.     <div class="container">
  131.         <h2>数据库信息管理系统</h2>
  132.         <h4>——buid by 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/828860
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。