Vue を Flask に統合する

                                                       

このチュートリアルは、「Vue.js を Flask に統合するにはどうすればよいですか?」という質問に答えます。 あなたはこのチュートリアルを読んでいると思いますので、 Flask は、迅速な Web 開発のために構築された Python マイクロフレームワークであることを知ってください。 Flask を初めて使用する場合、または魔法瓶について話しているのではないかと思われる場合は、このチュートリアルを続ける前にこれを読むことをお勧めします。

Vue.js は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。よく知らない場合は、ここでそれについて読むことができます。

Flask と Vue.js については理解できたので、始めてみましょう。

Flask 設定

最初にいくつかの依存関係をインストールしましょう:

pip install --user cookiecutter

Cookiecutter は、プロジェクト テンプレートをすばやくブートストラップするための優れたコマンド ライン ツールです。 Cookiecutter を使用しているため、プロジェクトの構成にあまり時間をかける必要はありません。 Flask には Django のようなバッテリーが含まれていないため、プロジェクトの初期セットアップには多大な労力を費やす必要があることに注意してください。 Cookiecutter をインストールしたので、プロジェクト テンプレートを取得する必要があります。このチュートリアルでは、単純な Flask API のみが必要です。次のコマンドを実行します。

cookiecutter gh:mobidevke/cookiecutter-flask-api-starter

次の出力が得られます。

repo_name [api-starter]: flask-vuejs-tutorial
api_name [Api]: api
version [1.0.0]: 1.0.0

flask-vuejs-tutorial

という名前のフォルダーが作成されます。フォルダーに移動すると、次の構造が表示されるはずです。

├── app
│   ├── config.py
│   ├── factory.py
│   ├── __init__.py
│   ├── models
│   │   ├── base.py
│   │   ├── database.py
│   │   ├── datastore.py
│   │   └── __init__.py
│   ├── resources
│   │   ├── example.py
│   │   └── __init__.py
│   └── utils.py
├── pytest.ini
├── README.md
├── requirements.txt
├── settings.py
├── tests
│   ├── conftest.py
│   ├── __init__.py
│   ├── test_app.py
│   ├── test_models.py
│   ├── test_resources.py
│   └── utils.py
├── unit-tests.sh
└── wsgi.py

美しいですね?

続行する前に、仮想環境をセットアップする必要があります。実行:

python -m venv venv

これで、お気に入りの IDE/テキスト エディターを使用してプロジェクト フォルダーを開くことができます。次のステップに進む前に、仮想環境をアクティブ化することを忘れないでください。

これで依存関係をインストールできるようになりました。実行:

pip install -r requirements.txt

完了後、app/config.py

を開きます。この API テンプレートは postgres データベース接続を使用していることがわかります。よろしければ、必要な認証情報を使用して postgres データベースをセットアップできます。それ以外の場合は、そのフォルダーの内容を次のコード行で置き換えます。 <pre class="brush:php;toolbar:false">import os class Config:     ERROR_404_HELP = False     SECRET_KEY = os.getenv('APP_SECRET', 'secret key')     SQLALCHEMY_DATABASE_URI = 'sqlite:///tutorial.db'     SQLALCHEMY_TRACK_MODIFICATIONS = False     DOC_USERNAME = 'api'     DOC_PASSWORD = 'password' class DevConfig(Config):     DEBUG = True class TestConfig(Config):     SQLALCHEMY_DATABASE_URI = 'sqlite://'     TESTING = True     DEBUG = True class ProdConfig(Config):     DEBUG = False config = {     'development': DevConfig,     'testing': TestConfig,     'production': ProdConfig }</pre> sqlite の構成を優先して、すべての postgres 構成を削除しました。 postgres を使用している場合は、

conf.py

ファイルを変更しないでください。 次に、Flask アプリケーションをエクスポートする必要があります。実行:

export FLASK_APP=wsgi:app

Flask の API の設定が完了したので、:

flask run

を実行し、ブラウザで http://127.0.0.1:5000/example を開きます。次の内容が表示されるはずです。

{"message": "Success"}

Vue.js 設定

API の準備が整ったので、vue アプリケーションのブートストラップに進むことができます。

最初に行う必要があるのは、vue cli をインストールすることです。実行:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

インストールが完了したら、次のコマンドを使用してバージョンが正しい (3.x) かどうかを確認できます:

vue --version

プロジェクト フォルダーのルートで次のコマンドを実行します:

vue create web

デフォルトとして

default (babel, eslint)

を選択し、パッケージ マネージャーとして yarn を選択しました。ノード プロジェクトに精通している場合は、好みのオプションを選択して進んでください。そうでない場合は、このチュートリアルのデフォルト設定に従ってください。 次に、新しく作成した web
フォルダーに移動して次を実行します。

yarn serve
# OR
npm run serve

http://localhost:8080/ に移動すると、

Welcome to Your Vue が表示されるはずです。 .js App

テキスト。 これで、統合を開始する準備が整いました。

Web フォルダーで、

vue.config.js

というファイルを作成し、次の内容を貼り付けます。 <pre class="brush:php;toolbar:false">const path = require('path'); module.exports = {   assetsDir: '../static',   baseUrl: '',   publicPath: undefined,   outputDir: path.resolve(__dirname, '../app/templates'),   runtimeCompiler: undefined,   productionSourceMap: undefined,   parallel: undefined,   css: undefined };</pre>ここで、Vue cl i の構成を定義します。ここで関心があるのは、

assetsDir、baseUrl、outputDir

の 3 つのフィールドだけです。 outputDir から始めましょう。 このフォルダーには、ビルドされた Vue ファイルの場所が保持されます。これは、Vue アプリケーションをロードする
index.html
を保持するフォルダーです。指定されたパスを観察すると、フォルダーが flask アプリケーションの app モジュール内にあることがわかります。 assetsDir
静的ファイル (css、js など) を保存するために使用されるフォルダーを保存します。 Note これは、outputDir フィールドに指定された値に相対的です。 最後に、baseUrl
フィールドは、静的ファイルのパス プレフィックスを index.html に保存します。これを確認して、他の構成オプションについて詳しく知ることができます。 ＃＃＃今すぐ実行：＃＃＃

yarn build
# OR
npm run build

如果打开 app 文件夹, 您会注意到已经创建了两个新文件夹, 即templates 和 static。 它们包含内置的vue文件。
现在在app 文件夹中创建一个 views.py 文件并粘贴以下内容：

from flask import Blueprint, render_template, abort
from jinja2 import TemplateNotFound

sample_page = Blueprint('sample_page', 'sample_page', template_folder='templates')

@sample_page.route('/sample')
def get_sample():
    try:
        return render_template('index.html')
    except TemplateNotFound:
        abort(404)

现在，这是怎么回事呢？
好吧，现在我们创建一个名为 sample_page 的 Flask 蓝图(blueprint)，并添加路由。这条路由将渲染我们的 Vue 应用。

打开 __init__.py 文件并在 app = f.flask 下添加以下几行:

.....
app = f.flask
from .views import sample_page

app.register_blueprint(sample_page, url_prefix='/views')

在这里, 我们正在注册之前创建的蓝图(blueprint)。
我们为蓝图(blueprint)指定了url前缀，以便于可以从 /views/sample访问我们的vue应用程序。

真相时刻到啦。

打开 http://127.0.0.1:5000/views/sample， 您应该能看到以下内容:

如果您检查日志, 将看到正确加载了内置资源:

 * Serving Flask app "wsgi:app"
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [24/May/2019 20:45:02] "GET /views/sample HTTP/1.1" 200 -
127.0.0.1 - - [24/May/2019 20:45:02] "GET /static/css/app.e2713bb0.css HTTP/1.1" 200 -
127.0.0.1 - - [24/May/2019 20:45:02] "GET /static/js/chunk-vendors.b10d6c99.js HTTP/1.1" 200 -
127.0.0.1 - - [24/May/2019 20:45:02] "GET /static/js/app.c249faaa.js HTTP/1.1" 200 -
127.0.0.1 - - [24/May/2019 20:45:02] "GET /static/img/logo.82b9c7a5.png HTTP/1.1" 200 -
127.0.0.1 - - [24/May/2019 20:45:02] "GET /views/favicon.ico HTTP/1.1" 404 -

您已经成功将Flask与Vuejs集成 

推荐教程：《Python教程》

以上がVue を Flask に統合するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。