在 Flask 中无法在 html 页面之间导航

Question

首先，我对 Flask 很陌生。我创建了一个模板文件夹并将所有 html 文件移到那里。现在我创建了一个静态文件夹并将我所有的 js 文件、图像和 css 文件移到那里。现在在我的 index.html 中，我有如下导航链接，

<div class="collapse navbar-collapse tm-nav" id="navbar-nav">
                            <ul class="navbar-nav ml-auto">
                                <li class="nav-item active">
                                    <a class="nav-link tm-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link tm-nav-link" href="/services.html">Services</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link tm-nav-link" href="/about.html">About</a>
                                </li>
                            </ul>                            
                        </div>

现在在我的 app.py 中进行页面导航，我正在执行如下操作。当我在浏览器中打开http://127.0.0.1:5000/ 时，我只能看到 index.html。但是当我点击服务或它说“404 未找到。请求的 URL 未在服务器上找到”。请帮助我做错了什么。

from flask import Flask, render_template, Response, request, redirect, url_for
app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html')

@app.route("/services")
def services():
    return render_template('services.html')

@app.route("/about")
def about():
    return render_template('about.html')

我在命令提示符中看到以下内容。

Answer 1

你需要阅读烧瓶中的路由here

您需要使用url_for 调用附加到URL 的函数，或者您也可以将直接URL 放在那里。例如/services。

<div class="collapse navbar-collapse tm-nav" id="navbar-nav">
                            <ul class="navbar-nav ml-auto">
                                <li class="nav-item active">
                                    <a class="nav-link tm-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link tm-nav-link" href="{{url_for('services')}}">Services</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link tm-nav-link" href="{{url_for('about')}}">About</a>
                                </li>
                            </ul>                            
                        </div>