Home >Backend Development >Python Tutorial >An Introduction to Python's Flask Framework
An Introduction to Python's Flask Framework
- Joseph Gordon-LevittOriginal
- 2025-02-28 10:23:27488browse
This tutorial demonstrates building a simple two-page website using Flask, a lightweight Python web framework. It focuses on static content to establish a foundational workflow, easily expandable for more complex applications.
Flask Installation
Before starting, install Flask. If you encounter issues, consult online resources or leave a comment detailing the problem.
Virtualenv Setup
We'll use virtualenv to create an isolated Python environment for this project. This prevents conflicts with other system libraries.
Check if virtualenv is already installed:
<code class="language-bash">$ virtualenv --version</code>
If not, install it:
<code class="language-bash">$ pip install virtualenv</code>
Create and activate a virtual environment:
<code class="language-bash">$ virtualenv flaskapp $ cd flaskapp $ . bin/activate</code>
Now install Flask:
<code class="language-bash">pip install Flask</code>
Project Structure
Organize your project as follows within the flaskapp directory:
<code>flaskapp/ ├── app/ │ ├── static/ │ │ ├── css/ │ │ ├── img/ │ │ └── js/ │ ├── templates/ │ ├── routes.py │ └── README.md └── ...</code>
The diagram below illustrates the application flow:
- A user request (e.g.,
/) reaches theroutes.pyfile. -
routes.pylocates the corresponding template in thetemplatesfolder. - The template accesses static assets (images, CSS, JavaScript) from the
staticfolder. - The rendered HTML is returned to the browser via
routes.py.
Creating the Home Page
To avoid repetitive HTML boilerplate, we'll use web templates. Flask utilizes the Jinja2 template engine.
First, create a base layout template:
app/templates/layout.html
<code class="language-html"><!DOCTYPE html>
<title>Flask App</title>
<link href="%7B%7B%20url_for('static',%20filename='css/main.css')%20%7D%7D" rel="stylesheet">
<div class="container">
<h1 class="logo">Flask App</h1>
</div>
<div class="container">
{% block content %}{% endblock %}
</div>
</code>
Next, create the home page template:
app/templates/home.html
<code class="language-html">{% extends "layout.html" %}
{% block content %}
<div class="jumbo">
<h2>Welcome!</h2>
<h3>This is the home page.</h3>
</div>
{% endblock %}</code>
Now, map the URL to the template in routes.py:
app/routes.py
<code class="language-python">from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
if __name__ == '__main__':
app.run(debug=True)</code>
Add CSS styling to static/css/main.css: (Content of main.css remains the same)
Running the app and visiting http://localhost:5000/ will display the home page.
Adding an About Page and Navigation
Let's create an "About" page and add navigation links.
Create the "About" template:
app/templates/about.html
<code class="language-html">{% extends "layout.html" %}
{% block content %}
<h2>About</h2>
<p>This is the About page.</p>
{% endblock %}</code>
Update routes.py to include the about page route:
app/routes.py
<code class="language-python">from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
@app.route('/about')
def about():
return render_template('about.html')
if __name__ == '__main__':
app.run(debug=True)</code>
Add navigation links to layout.html: (Content remains the same)
Add navigation styles to main.css: (Content remains the same)
Now, you can access the about page at http://localhost:5000/about.
Conclusion
This tutorial demonstrates a basic Flask application, illustrating a scalable workflow for building more complex web applications. Flask's simplicity and power make it an excellent choice for various web development projects.
The above is the detailed content of An Introduction to Python's Flask Framework. For more information, please follow other related articles on the PHP Chinese website!