Simple Flask Web Application with MySQL and Bootstrap Templates

First install the required dependency: pip install flask The main application code ( app.py) creates a Flask instance, initializes Flask‑Bootstrap, connects to a MySQL database using pymysql, executes a simple SELECT * FROM user query, and passes the result set u to the index.html template.

from flask import Flask
from flask import render_template
from flask_bootstrap import Bootstrap
import pymysql
app = Flask(__name__)
bootstrap = Bootstrap(app)

@app.route('/')
def index():
    conn = pymysql.connect(host='*.*.*.*', user='root', password='root', db='mydb', charset='utf8')
    cur = conn.cursor()
    sql = "SELECT * FROM user"
    cur.execute(sql)
    u = cur.fetchall()
    conn.close()
    return render_template('index.html', u=u)

if __name__ == '__main__':
    app.run()

The base template ( base.html) extends the Bootstrap base layout, defines a navigation bar with a brand name "PMSystem", and provides a content block for child templates.

{% extends "bootstrap/base.html" %}
{% block title %}Flask{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">PMSystem</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">首页</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
  {% block page_content %}{% endblock %}
</div>
{% endblock %}

The page template ( index.html) extends base.html, sets the page title to "首页", and iterates over the rows in u to generate an HTML table displaying user information.

{% extends "base.html" %}
{% block title %}首页{% endblock %}
{% block page_content %}
    <table class="table table-bordered">
    <tr>
        <th>用户ID</th>
        <th>公司ID</th>
        <th>公司名称</th>
        <th>联系电话</th>
        <th>联系邮箱</th>
        <th>用户姓名</th>
        <th>所属公司</th>
    </tr>
        {% for i in u %}
            <tr>
                <td>{{ i[0] }}</td>
                <td>{{ i[1] }}</td>
                <td>{{ i[2] }}</td>
                <td>{{ i[3] }}</td>
                <td>{{ i[4] }}</td>
                <td>{{ i[5] }}</td>
                <td>{{ i[6] }}</td>
            </tr>
    {% endfor %}
    </table>
{% endblock %}

Run the application with: python app.py runserver -p 5000 The resulting page displays the data table as shown in the screenshot.

Extended command to start the Flask server on port 8000 with debug mode, auto‑reload, and multithreading: python app.py runserver -p 8000 -d -r --thread Finally, the author asks readers to share the QR code.