Question

我正在尝试学习基本知识并做出反应，并且已经对两者的主要思想逐渐适应。现在，我试图将两者与Flask应用程序提供的python后端以及用react编写的前端缝合在一起。

我已经成功遵循了本教程http://aviadas.com/blog/2015/08/05/evaluating-react-dot-js-and-flask/，这似乎是最简单的介绍。现在，我试图通过分离html和react.js代码来重组作者的代码，以使其更容易开始扩展简单应用程序的功能。应该超级直接。

我的目录结构如下：

SELECT fk_user
FROM   product b
JOIN   product o USING (fk_user)
WHERE  b.product = 'banana'
AND    o.product = 'orange';

app.py包含以下代码：

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

index.html包含：

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")

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

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

和script.js包含：

<!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>

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

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

使用

  <script type="text/jsx">

问题是，当我运行该应用程序时，我会得到

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

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

使用Flask和React，在html中引用js文件时出现404错误

0 个答案: