Python connects to the database, the front end uses HTML and references bootstrap/css templates
- Quote HTNL5
- Reference HTNL5 and use bootstrap/css templates
- Using static resources that correctly reference bootstrap/css templates in Flask
- Case: input sql on the front end and display the results on the front end
Quote HTNL5
1. To use the HTML5 front-end framework in Python, you can use some libraries, such as Flask, Django, etc. Take Flask as an example to show how to use the front-end html5 framework.
First, make sure you have Flask installed. If it is not installed, you can install it using the following command:
pip install flask
2. Create a file named app.py and write the following code in the file:
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)
3. In the same directory as app.py, create a folder named templates. In the templates folder, create a file called index.html and add the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask HTML5 Example</title>
</head>
<body>
<h1>Welcome to the Flask HTML5 sample! </h1>
</body>
</html>
4. Run the app.py file, and then visit http://127.0.0.1:5000/ in the browser, you will see the rendered HTML page.
Reference HTNL5 and use bootstrap/css template
1. In Flask, you can use the Jinja2 template engine to render HTML pages. To use Bootstrap/CSS with Flask, you need to follow these steps:
Install the Flask-Bootstrap extension library:
pip install flask-bootstrap
2. Import Flask-Bootstrap and initialize the Flask application:
from flask import Flask, render_template from flask_bootstrap import Bootstrap app = Flask(__name__) bootstrap = Bootstrap(app)
- Define routing and view functions in your Flask application:
@app.route('/')
def index():
return render_template('index.html')
4. Create a Jinja2 template file named index.html and use Bootstrap/CSS in it
{% extends "bootstrap/base.html" %}
{% block content %}
<h1>Hello, World!</h1>
{% endblock %}
In this example, we first import Flask-Bootstrap and initialize the Flask application. We then define a route and view function that will render a template file named index.html. Finally, we are using Bootstrap/CSS in the index.html file, including the basic layout and content blocks inherited from bootstrap/base.html.
It is important to note that when using Bootstrap/CSS, you need to ensure that all necessary dependencies have been installed correctly and that the Flask application has been configured correctly. Additionally, you can customize it as needed
Bootstrap/CSS, such as changing theme colors, adding new components, etc.
python – Using static resources that correctly reference bootstrap/css templates in Flask
1. Download static resources from the official website (download address)
2. Make sure the static folder exists and contains the required files. In a Flask application, you can create a static folder using the following code:
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)
- In the above example, we specified the name of the static folder using the static_folder parameter. We can then use the url_for() function in the template to reference the static file, for example:
<!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>
Case: input sql on the front end and display the results on the front end
1.app.py
from flask import Flask, render_template, request
importpymysql
from flask_bootstrap import Bootstrap
app = Flask(__name__,static_folder="static")
bootstrap = Bootstrap(app)
# Connect to database
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':
# Get the SQL statement entered by the user select * from ceshi.user
sql_statement = request.form['sql_statement']
if sql_statement == '':
return render_template('app.html')
#Execute SQL statements and obtain results
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>'
#Close database connection
# connection.close()
return render_template('app.html', html=html)
else:
return render_template('app.html')
if __name__ == '__main__':
app.run(debug=True)
2.app.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tag -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS file -->
<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="Input SQL statement">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Submit query</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>