Intégrer Vue dans Flask

                                                     

Ce tutoriel répond à la question, "Comment intégrer Vue.js dans Flask ?" Parce que vous lisez ce tutoriel, je suppose que vous le savez que Flask est un micro-framework Python conçu pour un développement Web rapide. Si vous êtes nouveau sur Flask, ou si vous pensez que je parle d'un thermos, je vous recommande de lire ceci avant de continuer ce tutoriel.

Vue.js est un framework progressif pour la création d'interfaces utilisateur. Si vous ne le connaissez pas, vous pouvez le lire ici.

Maintenant que vous connaissez Flask et Vue.js, nous pouvons commencer.

Paramètres Flask

Installons d'abord quelques dépendances :

pip install --user cookiecutter

Cookiecutter est un excellent outil de ligne de commande pour démarrer rapidement un modèle de projet. Nous utilisons cookiecutter, nous n'avons donc pas besoin de passer trop de temps à configurer le projet. Gardez à l'esprit que Flask n'inclut pas de piles comme le fait Django, donc beaucoup de travail doit être consacré à la configuration initiale de votre projet.

Maintenant que Cookiecutter est installé, nous devons récupérer un modèle de projet. Pour ce tutoriel, nous n’avons besoin que d’une simple API Flask. Exécutez la commande suivante :

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

Vous devriez obtenir le résultat suivant :

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

Un dossier nommé flask-vuejs-tutorial doit être créé. Accédez au dossier et vous devriez voir la structure suivante :

├── 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

Magnifique, n'est-ce pas ?

Avant de continuer, nous devons configurer un environnement virtuel. Exécuter :

python -m venv venv

Vous pouvez maintenant ouvrir le dossier du projet à l'aide de votre IDE/éditeur de texte préféré. Avant de passer à l'étape suivante, pensez à activer l'environnement virtuel.
Nous pouvons maintenant installer des dépendances. Exécution :

pip install -r requirements.txt

Une fois terminé, ouvrez app/config.py. Vous remarquerez que ce modèle d'API utilise une connexion à la base de données Postgres. Si cela ne vous dérange pas, vous pouvez configurer la base de données Postgres avec les informations d'identification nécessaires. Sinon, remplacez le contenu de ce dossier par les lignes de code suivantes :

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
}

Nous avons supprimé toute configuration postgres au profit de la configuration de sqlite. Si vous utilisez postgres, laissez le fichier conf.py inchangé.
Nous devons maintenant exporter l'application Flask. Exécutez :

export FLASK_APP=wsgi:app

Maintenant que nous avons terminé le paramétrage de l'API de Flask, exécutez :

flask run

et ouvrez http://127.0.0.1:5000/example sur le navigateur. Vous devriez voir ce qui suit :

{"message": "Success"}

Paramètres Vue.js

Maintenant que notre API est prête, nous pouvons passer au démarrage de l'application vue.
La première chose que nous devons faire est d'installer vue cli. Exécuter :

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

Une fois l'installation terminée, vous pouvez vérifier si la version est correcte (3.x) à l'aide de la commande suivante :

vue --version

À la racine du dossier du projet exécutez :

vue create web

J'ai choisi default (babel, eslint) comme valeur par défaut et yarn comme gestionnaire de paquets. Si vous êtes familier avec les projets de nœuds, vous pouvez continuer et choisir votre option préférée. Sinon, suivez les paramètres par défaut de ce didacticiel.
Maintenant, accédez au dossier web nouvellement créé et exécutez :

yarn serve
# OR
npm run serve

Si vous accédez à http://localhost:8080/, vous devriez voir Bienvenue dans votre vue .js App texte.

Nous sommes maintenant prêts à démarrer l'intégration.

Dans le dossier Web, créez un fichier appelé vue.config.js et collez le contenu suivant :

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

Ici, certaines configurations sont définies pour Vue cl i. Nous ne nous intéressons qu'à trois champs : assetsDir, baseUrl, outputDir.
Commençons par outputDir.
Ce dossier contient l'emplacement des fichiers Vue construits, c'est-à-dire le dossier qui contiendra le index.html qui chargera l'application Vue. Si vous observez le chemin fourni, vous remarquerez que le dossier se trouve à l'intérieur du module app de l'application flask.
assetsDir Enregistrez le dossier utilisé pour stocker les fichiers statiques (css, js, etc.). Notez que est relatif à la valeur fournie dans le champ outputDir.
Enfin, le champ baseUrl contiendra le préfixe de chemin du fichier statique dans index.html. Vous pouvez vérifier ceci pour en savoir plus sur les autres options de configuration.
Exécuter maintenant :

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教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!