web-dev-qa-db-ja.com

Angular 4フロントエンドpython flaskバックエンド単純なインデックスページのレンダリング方法

こんにちはPythonコミュニティ私はangularとnode.js開発者であり、サーバーのバックエンドとしてPython pythonが初めてです。angular 4アプリの=からのすべてのHTMLおよびCSSおよびjsファイルを含むdistフォルダーをターゲットにする方法を尋ねたいflask python server

私のアプリはSPAアプリケーションであるため、angularルーティングコンポーネント内にルートを設定しました

走り回ったり、他のルートに行くと、この文字列メッセージ'./dist/index.html'そして、私は文字列メッセージを返すことを知っていますが、flask URLでユーザーが入力したルートが何であれ、angular my angular appこのページを設定し、作業中です

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よろしくお願いします

pythonangularrestflask
15
George C.

私も同じ問題を抱えていたので、この答えが再びそれを探している人の助けになることを願っています。

  1. 最初にangularアプリケーションを作成し、ビルドします。必要なすべてのjsファイルとindex.htmlファイルを 'dist'フォルダー内に取得します。

  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アプリのルートフォルダー内にフォルダー 'templates'を作成します。

  4. Index.htmlファイルをangular distフォルダーから新しく作成された 'templates'フォルダーにコピーします。

  5. pythonアプリのルートフォルダー内に別のフォルダー呼び出し '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で提供され、angularアプリが提供されます。最終的なフォルダー構造は次のようになります。

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

これがstackoverflowの私の最初の答えであるため、修正すべきことがある場合は、お気軽に言及してください。

8
Emalsha Rasad

Angular 'dist'ディレクトリをREST API経由でアクセスできます。すべてのルーティングは、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 から基本的なREST APIをFlaskで構築することに関するものです。

これにより、Angularのクライアント側に非常にうまく接続されます。

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

}

2
DariusFontaine