Python - 带有 angularjs 前端的烧瓶服务器，无法在 index.html 中找到 javascript 或 css 文件答案

【问题标题】：Python - flask server with angularjs front end, can't locate javascript or css files in index.htmlPython - 带有 angularjs 前端的烧瓶服务器，无法在 index.html 中找到 javascript 或 css 文件
【发布时间】：2018-12-03 18:27:14
【问题描述】：

我正在构建一个基本网站，该网站使用 Flask 中的 python 后端和 Angularjs 前端。我目前在索引模板加载 js 文件和 css 文件时遇到 404 问题

我的目录结构如下：

-console/
---lib/
   ---css/
       ---bootstrap.css
---app.module.js
---index.html
-src/
---_init_.py
---api.py

我的服务器api.py 代码如下：

from flask import (Flask, jsonify, request, abort, render_template)

app = Flask(__name__, template_folder='../console')


@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')

这可以毫无问题地找到索引文件，但是当索引文件尝试加载必要的 css 和 js 文件时，它无法找到它们。我目前基本索引页面的代码如下：

<!DOCTYPE html>
<html ng-app="championsLeague" lang="en-US">

<head>
    <title>Champions League</title>

    <link rel="stylesheet" href="lib/css/bootstrap.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="app.module.js"></script>
</head>

<body>

    <div ng-view>
        <p>test</p>
    </div>
</body>

</html>

当我启动我的服务器并导航到我的本地主机时，这些错误出现在控制台中：

127.0.0.1/:7 GET http://127.0.0.1:5000/lib/css/bootstrap.css net::ERR_ABORTED 404 (NOT FOUND)
2127.0.0.1/:9 GET http://127.0.0.1:5000/app.module.js net::ERR_ABORTED 404 (NOT FOUND)
angular.js:88 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=championsLeague&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24injector%2Fnomod%3Fp0%3DchampionsLeague%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A26%3A408%0A%20%20%20%20at%20b%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A25%3A439)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A26%3A182%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A332%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
    at angular.js:88
    at angular.js:5023
    at r (angular.js:408)
    at g (angular.js:4983)
    at gb (angular.js:4900)
    at c (angular.js:1955)
    at Uc (angular.js:1976)
    at we (angular.js:1861)
    at angular.js:34354
    at HTMLDocument.b (angular.js:3488)

我假设角度错误是由未找到 app.module.js 文件引起的。关于问题可能是什么的任何想法？我要求我使用烧瓶作为我的服务器来执行此任务，因此其他服务器不是一个选项。

【问题讨论】：

标签： javascript python angularjs

【解决方案1】：

你的js文件不是模板，而是静态资源。试试这个：

app = Flask(__name__, 
        template_folder='../console',
        static_url_path='../console')

另一个问题可能是您的 Flask 应用程序位于子目录中。它应该是您的应用程序文件的根目录。

更多信息：How to serve static files in Flask

旁注：我个人会使用稍微不同的结构。关于如何构建 Flask 应用程序有一些约定，如下所述：

这对我很有帮助。

【讨论】：

不幸的是，这似乎并没有解决问题，仍然在这些文件上得到 404。我会尝试重构我的目录，看看是否有帮助
我添加了指向另一个应该有帮助的问题的链接
谢谢，我去看看。我已将我的应用程序重构为在 src 文件夹中包含所有前端代码，因此烧瓶服务器在目录中更高。我将尝试该答案中的一些解决方案，看看会发生什么