使用flask和react,在html中引用js文件时出现404错误

问题描述 投票:0回答:1

我正在尝试学习 Flask 和 React 的基础知识,并且对两者的主要思想已经相当熟悉。现在我试图用一个由 Flask 应用程序提供服务的 Python 后端和一个用 React 编写的前端将两者缝合在一起。

我已成功遵循本教程http://aviadas.com/blog/2015/08/05/evaluating-react-dot-js-and-flask/这似乎是最简单的介绍。现在,我尝试通过分离我的 html 和 React.js 代码来重新组织作者的代码,以便更轻松地开始扩展简单应用程序的功能。应该超级简单。

我的目录结构如下:

├── README.md
├── app.py
├── requirements.txt
└── templates
    └── index.html
    └── script.js

app.py 包含以下代码:

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")

def index():
    return render_template('index.html')

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

index.html 包含:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <title>Flask React Tutorial</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
    </head>
    <body>
        <div id="mount-point"></div>
        <script type="module" src = "script.js"></script>
    </body>
</html>

script.js 包含:

     /*** @jsx React.DOM */
    var FirstComponent = React.createClass({
        render: function() {
            return (<p1>Hello world.</p1>);
        }
    });
    React.render(<FirstComponent />, document.getElementById('mount-point') );

我对原始教程代码所做的只是将 js 代码移动到文件 script.js 并替换该行

  <script type="text/jsx">

  <script type="module" src = "script.js"></script>

问题是,当我运行应用程序时,我得到

"GET /script.js HTTP/1.1" 404 -

如果我使用 script.js 文件的绝对路径,我会得到同样的结果。我必须在代码的其他地方做一些其他的、可能很简单的事情。 请注意,我对其中的大部分内容都很陌生,因此尽可能详尽的解释会很棒。 预先感谢。

javascript html reactjs flask
1个回答
0
投票

我能够通过使用解决这个问题:

<script src="{{ url_for('static', filename='script.js') }}"> </script> 
© www.soinside.com 2019 - 2024. All rights reserved.