This tutorial details how to implement navigation between HTML pages in a Flask application. Render the corresponding HTML template (`render_template`) by defining different routes (`@app.route`), and use hyperlinks (` ` tags) in HTML to jump between pages. The article covers the core steps of initial page loading, navigation link creation, and target page rendering, and discusses considerations when handling different HTTP request methods, aiming to help developers build Flask web applications with clear structure and smooth interaction.

When developing Flask-based web applications, it is a basic and common need for users to navigate between different HTML pages. This usually involves a page containing a link or button that points to another page, and when the user clicks on it, the Flask backend renders and returns the corresponding HTML page based on the requested URL. This tutorial will guide you through how to achieve this process through Flask's routing mechanism and template rendering capabilities.

Core concepts: Flask routing and template rendering

The Flask framework matches incoming URL requests through Routes and maps them to specific Python functions. These functions are responsible for processing requests and returning responses. Common response types include HTML pages, JSON data, etc. When you need to return an HTML page, Flask provides the render_template function, which can load and render the HTML file located in the templates directory.

• @app.route('/path') : This is a decorator that binds the URL path/path to the function that follows it. This function will be executed when the user accesses /path.
• render_template("filename.html") : This function is used to find and render the HTML template file with the specified name. Flask will look for these files by default in the templates folder in the application root directory.

Implementation steps

We'll use a simple example to demonstrate how to navigate from one HTML page to another.

1. Project structure preparation

First, make sure your Flask project has the following basic structure:

 your_project/
├── app.py
└── templates/
    ├── index.html
    └── another_file.html

In the templates folder we will store all our HTML template files.

2. Define initial page routing

In app.py, we need to define a route that handles the root URL of the app (/) and renders our start page, index.html.

 from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    """
    Renders the home page of the application.
    """
    return render_template("index.html")

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

At this point, when you run app.py and visit http://127.0.0.1:5000/, Flask will find and render templates/index.html.

3. Create navigation links

Next, add a hyperlink in index.html that will navigate to the second page. For example, a "Sign Up" button or link.

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>


    <h1>Welcome to the home page! </h1>
    <p>Click the link below to enter the registration page:</p>
    <!-- Use the href attribute to point to the target route -->
    <a href="http://ipnx.cn/link/37e4ff186f8aafd70e86944d5501cb3e">Register</a>

Here, Register creates a link. When the user clicks "Register", the browser will send a GET request to the Flask application for the http://ipnx.cn/link/37e4ff186f8aafd70e86944d5501cb3e URL.

4. Define target page routing

Finally, define another route http://ipnx.cn/link/37e4ff186f8aafd70e86944d5501cb3e in app.py, which will handle navigation requests from index.html and render another_file.html.

 from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    """
    Renders the home page of the application.
    """
    return render_template("index.html")

@app.route('http://ipnx.cn/link/37e4ff186f8aafd70e86944d5501cb3e', methods=['GET']) # Explicitly specify that only GET requests will be processed def register():
    """
    Render the registration page.
    """
    # Ensure that the user accesses this path through a GET request, such as clicking on the link if request.method == "GET":
        return render_template("another_file.html")
    # If you need to handle POST requests in the future (such as form submissions), you can expand here # else:
    # pass # Or the logic for processing POST requests if __name__ == '__main__':
    app.run(debug=True)

At the same time, create templates/another_file.html:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration page</title>


    <h1>Welcome to the registration page! </h1>
    <p>You have successfully navigated to this page. </p>
    <a href="/">Return to homepage</a>

Now, run app.py, visit the home page, click the "Register" link, and you will be successfully navigated to the registration page.

Consider HTTP methods

In the register route, we use methods=['GET'] and if request.method == "GET" to explicitly specify that this route mainly handles GET requests. This is because simple page navigation is usually done via GET requests. However, if the http://ipnx.cn/link/37e4ff186f8aafd70e86944d5501cb3e page also contains a registration form, a POST request will usually be sent when the user submits the form. In this case, you can extend the register function to handle POST requests, for example:

 from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

# ...other routes...

@app.route('http://ipnx.cn/link/37e4ff186f8aafd70e86944d5501cb3e', methods=['GET', 'POST'])
def register():
    if request.method == "POST":
        # Process form submission logic username = request.form.get('username')
        password = request.form.get('password')
        #...save user information to database...
        print(f"User {username} tried to register")
        return redirect(url_for('index')) # Redirect to the homepage after successful registration else: # GET request return render_template("another_file.html")

In this way, the same route can perform different logic depending on the HTTP method of the request, which is useful for handling interactive operations such as form submissions.

Things to note and best practices

1. Template file location : Flask looks for templates in the templates folder in the application root directory by default. Please make sure your HTML files are placed in this directory.

2. url_for() function : In actual projects, it is recommended to use Flask's url_for() function to generate URLs instead of hard-coding paths. This improves code maintainability because even if the routing rules change, you only need to modify the @app.route decorator instead of modifying the links in all templates.

    <!-- Use url_for in index.html -->
   <a href="%7B%7B%20url_for('register')%20%7D%7D">Register</a>

   url_for('register') will generate the correct URL based on the function named register (that is, the function corresponding to @app.route('http://ipnx.cn/link/37e4ff186f8aafd70e86944d5501cb3e')).

3. Debug mode : During the development phase, setting app.run(debug=True) allows the Flask application to automatically reload after code modifications and provide detailed error information, which greatly improves development efficiency. But in a production environment, be sure to turn off debug mode.

Summarize

With Flask's @app.route decorator and render_template function, you can easily navigate between HTML pages in your web application. Understanding how to define routes, create links, and handle different HTTP methods is key to building a fully functional Flask application. Combined with best practices like url_for(), your application will be more robust and maintainable.

The above is the detailed content of Implement navigation and routing management between HTML pages in Flask applications. For more information, please follow other related articles on the PHP Chinese website!