python 连接MySQL数据库，前端使用HTML并引用bootstrap/css 模板_python如何使用bootstrap

作者：小丑西瓜9 | 2024-06-16 04:32:55

踩

python如何使用bootstrap

python 连接数据库，前端使用HTML并引用bootstrap/css 模板

引用HTNL5
引用HTNL5并使用bootstrap/css 模板
python - 在 Flask 中使用正确引用 bootstrap/css 模板的静态资源
案例：前端录入sql,并将结果展示前端

引用HTNL5

1.要在Python中使用HTML5前端框架，可以使用一些库，如Flask、Django等。以Flask为例，展示如何使用前html5端框架。

首先，确保已经安装了Flask。如果没有安装，可以使用以下命令安装：

pip install flask
1

2.创建一个名为app.py的文件，然后在文件中编写以下代码：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10

3.在与app.py相同的目录下，创建一个名为templates的文件夹。在templates文件夹中，创建一个名为index.html的文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask HTML5示例</title>
</head>
<body>
    <h1>欢迎来到Flask HTML5示例！</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

4.运行app.py文件，然后在浏览器中访问http://127.0.0.1:5000/，你将看到渲染后的HTML页面。

引用HTNL5并使用bootstrap/css 模板

1.在 Flask 中，可以使用 Jinja2 模板引擎来渲染 HTML 页面。要在 Flask中使用 Bootstrap/CSS，需要按照以下步骤操作：
安装 Flask-Bootstrap 扩展库：

pip install flask-bootstrap
1

2.导入 Flask-Bootstrap 并初始化 Flask 应用程序：

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
1
2
3
4

在 Flask 应用程序中定义路由和视图函数：

@app.route('/')
def index():
    return render_template('index.html')
1
2
3

4.创建一个名为 index.html 的 Jinja2 模板文件，并在其中使用 Bootstrap/CSS

{% extends "bootstrap/base.html" %}
{% block content %}
<h1>Hello, World!</h1>
{% endblock %}
1
2
3
4

在这个例子中，我们首先导入了 Flask-Bootstrap 并初始化了 Flask 应用程序。然后，我们定义了一个路由和视图函数，该函数将渲染一个名为index.html 的模板文件。最后，我们在 index.html 文件中使用了 Bootstrap/CSS，包括继承自 bootstrap/base.html 的基本布局和内容块。
需要注意的是，在使用 Bootstrap/CSS 时，需要确保已经正确安装了所有必要的依赖项，并且正确地配置了 Flask 应用程序。此外，还可以根据需要自定义
Bootstrap/CSS，例如更改主题颜色、添加新的组件等。

python - 在 Flask 中使用正确引用 bootstrap/css 模板的静态资源

1.官网下载静态资源（下载地址）

2.确保静态文件夹存在并包含所需的文件。在 Flask 应用程序中，可以使用以下代码创建静态文件夹：

from flask import Flask, render_template
app = Flask(__name__, static_folder='static')
@app.route('/')
def index():
    return render_template('index.html')
if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7

在上面的示例中，我们使用 static_folder 参数指定了静态文件夹的名称。然后，我们可以在模板中使用 url_for() 函数来引用静态文件，例如：

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
</head>
<body>
    <!-- Your HTML content here -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10

案例：前端录入sql,并将结果展示前端

1.app.py

from flask import Flask, render_template, request
import pymysql
from flask_bootstrap import Bootstrap

app = Flask(__name__,static_folder="static")
bootstrap = Bootstrap(app)

# 连接到数据库
connection = pymysql.connect(host='localhost',
                             user='username',
                             password='password',
                             db='table',
                             port=3306,
                             charset='utf8mb4',
                             cursorclass=pymysql.cursors.DictCursor)

@app.route('/', methods=['GET', 'POST'])
def index():
    while True:
        if request.method == 'POST':

            # 获取用户输入的SQL语句  select * from ceshi.user
            sql_statement = request.form['sql_statement']

            if sql_statement == '':
                return render_template('app.html')
            # 执行SQL语句并获取结果
            with connection.cursor() as cursor:
                cursor.execute(sql_statement)
                result = cursor.fetchall()
                html = '<table class="table">'
                tou = result[0]
                html += '<thead>'
                html += '<tr>'
                for row in tou.keys():
                    html += f'<th>{row}</td>'
                html += '</tr>'
                html += '</thead>'
                html += '<tbody>'
                for row in result:
                    html += '<tr>'
                    for key, value in row.items():
                        html += f'<td>{value}</td>'
                    html += '</tr>'
                html += '</tbody>'
                html += '</table>'
            # 关闭数据库连接
            # connection.close()
            return render_template('app.html', html=html)
        else:
            return render_template('app.html')

if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

2.app.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-4.6.2-dist/css/bootstrap.min.css') }}">

    <title>Database Content</title>
</head>
<body>




{% extends "bootstrap/base.html" %}
{% block content %}
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
      1
  </div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      2
  </div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">
      3
  </div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">
      <form class="form-inline my-2 my-lg-0" method="POST">
          <input class="form-control mr-sm-2" type="search" aria-label="Search" name="sql_statement" placeholder="输入SQL语句">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">提交查询</button>
      </form>
      {{ html|safe }}
  </div>
</div>
{% endblock %}

<script src="{{ url_for('static', filename='jquery-3.5.1/jquery-3.5.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js') }}"></script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/725156