4.5. Handling Requests#

Flask makes it easy to manage HTTP requests by allowing us to define routes, which are specific URLs that trigger functions in our code. These functions process the requests and generate HTTP responses, which are then sent back to the user’s browser.

4.5.1. Route Decorator#

In Flask, we use the @ symbol (called a decorator) to associate a function with a specific URL, also known as a route. A decorator is a special function in Python that modifies or extends the behavior of the function it is applied to. Decorators allow us to add extra functionality to functions in a clean and simple way, without changing the function’s core code.

When you use a decorator like @app.route("/"), it associates the URL / and the function directly below with each other inside the Flask app object’s routing directory.

4.5.2. Flask Routing System#

Flask’s routing system is designed to be both powerful and flexible. Here’s how it works:

  • You declare routes using the @app.route() decorator.

  • Each route corresponds to a different URL in your web application.

  • Flask automatically matches incoming requests to the right route and runs the associated function.

Hint

You can define your routes in any order in your code, and Flask will handle them correctly. This means even if you declare a route at the bottom of your file, Flask will still know how to route requests to that URL.

4.5.3. Two Routes Example#

Below is an example with two routes: one for the home page (/) and another for the “about” page (/about):

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return """
    Welcome to the home page!

    <a href="/about">Go to About page</a>
    """"

@app.route("/about")
def about():
    return "This is the about page!"

if __name__ == "__main__":
    app.run(debug=True, port=5000)

In this example:

  • The first route (@app.route("/")) maps to the function home(), which returns a simple message for the home page.

  • The second route (@app.route("/about")`) maps to the function about(), which handles the “about” page.

  • When you visit http://127.0.0.1:5000/, the home page will show, and when you visit http://127.0.0.1:5000/about, the about page will appear.

4.5.4. Variables in Routes#

Sometimes, you may want to pass information in the URL itself. Flask allows you to include variables in a route and then use them in your function.

Here’s an example where the URL includes a person’s name:

from flask import Flask

app = Flask(__name__)

@app.route("/hello/<name>")  # Route with a variable 'name'
def hello(name):
    return f"Hello, {name}!"

if __name__ == "__main__":
    app.run(debug=True, port=5000)

Let’s understand the hello decorator and function:

  • The <name> part of the URL is a placeholder for any name that a user types in the URL.

  • The value provided in the URL is passed to the hello()` function as a parameter, and Flask will embed that value in the response.

For example, if you go to http://127.0.0.1:5000/hello/Alice, the page will display "Hello, Alice!". If you visit http://127.0.0.1:5000/hello/Bob, it will display "Hello, Bob!".

4.5.5. A Complete Example#

Now, let’s bring everything together and build a small personal web page with multiple routes.

In this example, we have:

  • A home page (/) that contains links to the “About” and “Contact” pages.

  • An “About” page (/about) that gives some information about yourself.

  • A “Contact” page (/contact) that displays a fictional email address.

  • A custom greeting page (/hello/<name>) where users can type their name in the URL and get a personalized greeting.

from flask import Flask

app = Flask(__name__)

# Home page
@app.route("/")
def home():
    return """
    <h1>Welcome to My Personal Webpage</h1>
    <p>This is the home page.</p>
    <p><a href="/about">About Me</a> | <a href="/contact">Contact</a></p>
    """

# About page
@app.route("/about")
def about():
    return """
    <h1>About Me</h1>
    <p>Hello! I'm a high school student learning web development with Flask.</p>
    <p><a href="/">Back to Home</a></p>
    """

# Contact page
@app.route("/contact")
def contact():
    return """
    <h1>Contact Me</h1>
    <p>You can reach me via email at student@example.com.</p>
    <p><a href="/">Back to Home</a></p>
    """

# Route that takes a name as input
@app.route("/hello/<name>")
def hello(name):
    return f"<h1>Hello, {name}!</h1> <p>Welcome to my personal webpage.</p>"

if __name__ == "__main__":
    app.run(debug=True)