带有Python Flask后端的Angular 4前端如何呈现简单的索引页 [英] Angular 4 frontend with python flask backend how to render simple index page

问题描述

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

Hello Python community I am angular and node.js developer and I want to try Python as backend of my server because I am new to python I want to ask you how to target the dist folder that contains all HTML and CSS and js files from the angular 4 apps in flask python server

因为我的应用程序是SPA应用程序，所以我已在角度路由组件中设置了路由

Because my app is SPA application I have set routes inside angular routing component

当我奔跑或走其他路线时，我会收到此字符串消息'./dist/index.html' 而且我知道我返回了字符串消息，但是我想告诉烧瓶用户在URL上键入的任何路由都允许angular渲染页面，因为在我的angular应用程序中，我已经设置了该页面并且可以正常工作

When I run about or any other route I get this string message './dist/index.html' And I know I return string message but I want to tell the flask whatever route the user type on URL let the angular to render the page because inside my angular app I have set this pages and is work

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

any help how to start with flask and angular to build simple REST API

现在我有了这个文件结构

Now I have this file structure

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

Best regards George35mk thnx for your help

推荐答案

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

Since I had this same problem, I hope this answer will help someone looking for it again.

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

2. 使用所需的端点创建python + flask网络应用.

1. First create your angular application and build it. (You will get all the required js files and index.html file inside the 'dist' folder.

2. Create your python + flask web app with required end points.

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

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

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

在python应用程序根文件夹内创建一个文件夹模板".

Create a folder 'templates' inside your python app root folder.

将您的index.html文件从angular dist文件夹复制到新创建的模板"文件夹.

Copy your index.html file from the angular dist folder to newly created 'templates' folder.

在python应用根文件夹中创建另一个名为"static"的文件夹

Create a another folder call 'static' inside your python app root folder

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

Then copy all the other static files( JS files and CSS files ) to this new folder.

像这样更新您的index.html文件静态文件url.

Update your index.html file static file urls like this.

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

烧瓶在'/root_folder/static'文件夹中查找静态文件并进行更新 相对于该结构的网址.

Flask look static files inside '/root_folder/static' folder and update url relative to this structure.

完成.现在，您的应用程序将在localhost:5000上投放，而角度应用程序将投放. 最终的文件夹结构将如下所示:

Done. Now your app will serve on localhost:5000 and angular app will served. Final folder structure will like this,

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

因为这是我在stackoverflow中的第一个答案，所以如果有什么要纠正的地方，请随时提及.

Since this is my first answer in stackoverflow,If there is a thing to be corrected, feel free to mention it.

这篇关于带有Python Flask后端的Angular 4前端如何呈现简单的索引页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！