An Introduction to Python's Flask Framework-Python Tutorial-php.cn

An Introduction to Python's Flask Framework

Joseph Gordon-Levitt

Release： 2025-02-28 10:23:27

Original

485 people have browsed it

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:

$ virtualenv --version

Copy after login

If not, install it:

$ pip install virtualenv

Copy after login

Create and activate a virtual environment:

$ virtualenv flaskapp
$ cd flaskapp
$ . bin/activate

Copy after login

Now install Flask:

pip install Flask

Copy after login

Project Structure

Organize your project as follows within the flaskapp directory:

<code>flaskapp/
├── app/
│   ├── static/
│   │   ├── css/
│   │   ├── img/
│   │   └── js/
│   ├── templates/
│   ├── routes.py
│   └── README.md
└── ...</code>

Copy after login

The diagram below illustrates the application flow:

An Introduction to Python’s Flask Framework

A user request (e.g., /) reaches the routes.py file.
routes.py locates the corresponding template in the templates folder.
The template accesses static assets (images, CSS, JavaScript) from the static folder.
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

<!DOCTYPE html>
<html>
<head>
<title>Flask App</title>
<link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
  <h1 class="logo">Flask App</h1>
</div>
<div class="container">
  {% block content %}{% endblock %}
</div>
</body>
</html>

Copy after login

Next, create the home page template:

app/templates/home.html

{% extends "layout.html" %}

{% block content %}
  <div class="jumbo">
    <h2>Welcome!</h2>
    <h3>This is the home page.</h3>
  </div>
{% endblock %}

Copy after login

Now, map the URL to the template in routes.py:

app/routes.py

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)

Copy after login

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

{% extends "layout.html" %}

{% block content %}
  <h2>About</h2>
  <p>This is the About page.</p>
{% endblock %}

Copy after login

Update routes.py to include the about page route:

app/routes.py

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)

Copy after login

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!