我正在尝试学习 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 文件的绝对路径,我会得到同样的结果。我必须在代码的其他地方做一些其他的、可能很简单的事情。 请注意,我对其中的大部分内容都很陌生,因此尽可能详尽的解释会很棒。 预先感谢。
我能够通过使用解决这个问题:
<script src="{{ url_for('static', filename='script.js') }}"> </script>