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

Question

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

因为我的应用程序是SPA应用程序,我在angular routing组件中设置了路由

当我运行或任何其他路线时,我得到这个字符串消息'./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

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

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

2. 使用所需的端点创建您的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()
   

3. 在python app根文件夹中创建一个文件夹'templates'.

4. 将index.html文件从angular dist文件夹复制到新创建的"templates"文件夹.

5. 在python app根文件夹中创建另一个名为'static'的文件夹

6. 然后将所有其他静态文件(JS文件和CSS文件)复制到此新文件夹.

7. 像这样更新你的index.html文件静态文件URL.

     <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中的第一个答案,如果有一件事需要纠正,请随意提及.