python - 带有参数flask的应用程序路由时的资产404

问题描述

我正在开发一个个人网络应用程序，其中前端是在第 3 方（引导程序）软件中创建的。

我的asset目录在template/asset目录下。

app = Flask(__name__, static_folder="templates/assets")

watch如果我在没有任何参数的情况下路由到它可以正常HTML工作并渲染所有css元素

@app.route("/watch")
def watch():
    link = "https://www.youtube.com/watch?v=Uh2ebFW8OYM"
    return render_template('watch.html', link=link)

（工作正常）路线的图像http://localhost:5000/watch

当我添加参数时，我开始收到404错误，我只得到HTML

@app.route("/watch/<youtuber>")
def watch_video(youtuber):
    link = "https://www.youtube.com/watch?v=Uh2ebFW8OYM"
    return render_template('watch.html', author = youtuber, link=link)

（错误）路线的图像http://localhost:5000/watch/Coreyms

终端抛出404错误

127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/Coreyms HTTP/1.1" 200 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/fonts/fontawesome-all.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/fonts/font-awesome.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/fonts/fontawesome5-overrides.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/css/Contact-Form-Clean.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/css/Data-Table.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/css/Article-List.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/css/Data-Table-1.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/css/simple-footer.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/css/style.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/js/agency.js HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/fonts/fontawesome-all.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Article-List.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/fonts/font-awesome.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/fonts/fontawesome5-overrides.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Contact-Form-Clean.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Data-Table-1.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Data-Table.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/css/style.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/css/simple-footer.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/js/agency.js HTTP/1.1" 404 -

我尝试放置asset directory into the root 静态directory and also I tried adding the监视directory into资产目录，但没有任何效果。

我尝试在网上寻找解决方案，但特别解决了这样的问题。

这就是我的内心watch_template.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Home - Brand</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
    <link rel="stylesheet" href="assets/css/Article-List.css">
    <link rel="stylesheet" href="assets/css/Contact-Form-Clean.css">
    <link rel="stylesheet" href="assets/css/Data-Table-1.css">
    <link rel="stylesheet" href="assets/css/Data-Table.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/simple-footer.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body class="d-flex flex-column justify-content-between" id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav"
    data-bs-offset="54"
    style="100vh;">
    
    <nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-dark text-uppercase" id="mainNav">
        <div class="container">
            <!-- Start: home page --><a class="navbar-brand" href="{{url_for('home')}}">Home</a>
            <!-- End: home page --><button data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
                class="navbar-toggler navbar-toggler-right" type="button" aria-controls="navbarResponsive"
                aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <!-- Start: Mid tabs -->
                <ul class="navbar-nav mx-auto text-uppercase">
                    <li class="nav-item"><a class="nav-link" href="{{url_for('list authors')}}">List Author</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{url_for('Subscriptions')}}">Subscriptions</a></li>
                </ul><!-- End: Mid tabs -->
                <!-- Start: right tab -->
                <ul class="navbar-nav ms-auto text-uppercase">
                    <li class="nav-item"><a class="nav-link" href="{{url_for('report_problem')}}">REPORT A
                            PROBLEM<br></a></li>
                </ul><!-- End: right tab -->
            </div>
        </div>
    </nav>
    <header class="masthead">
        <div class="container" style="opacity: 0.98;">
            <div class="intro-text" style="background: #414141;margin-top: 171px;">
                <div class="intro-lead-in"><img id="title-logo-text" src="">
                
                    <h2>You are watching {}'s video on {}</h2>
                    {% block content %}
                        
                    {% endblock content %}
                
                </div>
                <div class="d-flex justify-content-between intro-heading text-uppercase"
                    style="margin-right: 90px;margin-left: 90px;"><a href="#"><i
                            class="fas fa-angle-double-left"></i></a><a href="#"><i
                            class="fas fa-angle-double-right"></i></a></div>
                <div>

                    <head>
                        <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />

                        <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
                        <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
                    </head>

                    <body>
                        <video controls width="90%" autoplay muted>

                            Sorry, your browser doesn't support embedded videos.
                        </video>
                        <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
                    </body>
                </div>
                <div style="margin-right: 90px;margin-left: 90px;margin-top: 90px;"></div>
            </div>
        </div>
    </header><!-- Start: simple footer -->
    <div class="footer-2" style="background: rgb(52,58,64);">
        <div class="container">
            <div class="row">
                <div class="col-2 col-sm-6 col-md-6 align-self-center">
                    <p class="text-start" style="margin-top:5%;margin-bottom:3%;">© 2021 YOUTUBE BEST CHANNELS</p>
                </div>
                <div class="col-12 col-sm-6 col-md-6">

                </div>
            </div>
        </div>
    </div><!-- End: simple footer -->
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
    <script src="assets/js/agency.js"></script>
</body>

</html>

标签： pythonhtmlcssflask

python - 带有参数flask的应用程序路由时的资产404

问题描述

解决方案

推荐阅读