在 Flask 中整合 Vue

#                            

本教學回答了這麼一個問題，" 我怎麼把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 db。否則，請使用以下程式碼行代替該資料夾的內容：

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
}

我們已經刪除了所有的 postgres 配置，以支援 sqlite 的配置。如果您要使用 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 作為我的包裹管理器。如果您熟悉node項目，則可以繼續並選擇您的首選選項。如果沒有，請遵循本教學的預設設定。
現在導航到新建的 web 資料夾並執行：

yarn serve
# OR
npm run serve

如果導航到http://localhost:8080/, 您應該可以看到 Welcome to Your Vue.js App 文字。

現在我們準備開始整合。

在Web 資料夾中，建立一個名為 vue.config.js 的檔案並貼上以下內容：

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
};

在這裡, 為Vue cl i定義了一些配置。我們只對三個欄位感興趣: assetsDir, baseUrl, outputDir。
讓我們從 outputDir 開始。
此資料夾保存已建置的 Vue 檔案的位置，即將儲存將載入 Vue 應用程式的 index.html 的資料夾。如果您觀察這提供的路徑, 您將會注意到該資料夾位於flask應用程式的 app 模組內部。
assetsDir 保存用於存放靜態檔案(css, js 等)的資料夾。 注意 它是相對於 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教程》

以上是在 Flask 中整合 Vue的詳細內容。更多資訊請關注PHP中文網其他相關文章！