Question

Hello Python社区我是角度和node.js开发人员，我想尝试Python作为我的服务器的后端，因为我是python的新手我想问你如何定位包含所有HTML和CSS和js的dist文件夹来自flask python服务器中的角度4应用程序的文件

因为我的应用程序是SPA应用程序，所以我在angular routing component

中设置了路径

当我跑步或任何其他路线时，我收到此字符串消息'./dist/index.html' 而且我知道我返回字符串消息但是我想告诉烧瓶用户在URL上输入的任何路径让角度来呈现页面，因为在我的角度应用程序中我设置了这些页面并且正在工作

任何帮助如何从flask和angular开始构建简单的REST API

现在我有了这个文件结构

python-angular4-app
                  |___ dist
                  |      |___ index.html
                  |      |___ style.css
                  |      |___ inline.js
                  |      |___ polyfill.js
                  |      |___ vendor.js
                  |      |___ favicon.ico
                  |      |___ assets
                  |
                  |___ server.py

我的server.py有此内容

from flask import Flask

app = Flask(__name__, )

@app.route('/')
def main():
    return './dist/index.html'


@app.route('/about')
def about():
    return './dist/index.html'


@app.route('/contact')
def contact():
    return './dist/index.html'

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

最好的问候George35mk thnx的帮助

Answer 1

由于我遇到同样的问题，我希望这个答案可以帮助有人再次寻找它。

首先创建角度应用程序并构建它。（您将在'dist'文件夹中获得所有必需的js文件和index.html文件。

使用所需的终点创建您的python + flask web应用程序。

from flask import Flask,render_template
app = Flask(__name__)

@app.route("/")
def hello():
    return render_template('index.html')

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

在python app根文件夹中创建一个文件夹'templates'。
将index.html文件从angular dist文件夹复制到新创建的“templates”文件夹。
在python app根文件夹
然后将所有其他静态文件（JS文件和CSS文件）复制到这个新文件夹。

更新你的index.html文件静态文件网址。

  <script type="text/javascript" src="/static/inline.bundle.js"></script>

Flask在'/ root_folder / static'文件夹中查看静态文件并进行更新 url相对于这个结构。

完成。现在你的应用程序将在localhost：5000和角度应用程序服务。最终文件夹结构将是这样的，

    /pythondApplication
        |-server.py
        |-templates
        |     -index.html
        |-static
        |     -js files and css files

由于这是我在stackoverflow中的第一个答案，如果有一件事需要纠正，请随意提及。

Answer 2

我不认为可以通过REST API访问Angular'add'目录。任何路由都应该在客户端使用Angular完成，而Flask应该处理你的终点。

在构建REST API方面，我建议使用以下内容：

from flask import Flask, jsonify

app = Flask(__name__)

tasks = [
    {
        'id': 1,
        'title': u'Buy groceries',
        'description': u'Milk, Cheese, Pizza, Fruit, Tylenol', 
        'done': False
    },
    {
        'id': 2,
        'title': u'Learn Python',
        'description': u'Need to find a good Python tutorial on the web', 
        'done': False
    }
]

@app.route('/todo/api/v1.0/tasks', methods=['GET'])
def get_tasks():
    return jsonify({'tasks': tasks})

if __name__ == '__main__':
    app.run(debug=True)

这是一个非常有用的tutorial在Flask中构建基本REST API。

然后，这将非常好地插入到Angular中的客户端：

getInfo() {
 return  this.http.get(
   'http://myapi/id')
   .map((res: Response) => res.json());

}

Angular 4前端与python flask后端如何呈现简单的索引页面

我的server.py有此内容

2 个答案: