Рубрики
Без рубрики

Учебное пособие по интеграции Flask Vue.js

Учебное пособие по интеграции Vue.js с колбой. Tagged с Python, Flask, Vue, JavaScript.

Этот учебник отвечает на вопрос, “Как мне интегрировать Vue.js с колкой?” Поскольку вы читаете этот урок, я предполагаю, что вы знаете, что Колба это Python MicroFramework, созданная для быстрой веб -разработки. Если вы не знакомы с колкой или, вероятно, думаете, что я собираюсь поговорить о термосе 😜, то я предлагаю прочитать об этом Здесь Прежде чем продолжить с этим уроком.

Vue.js это прогрессивная структура для создания пользовательских интерфейсов. Если вы не знакомы с этим, вы можете прочитать об этом Здесь Анкет

Теперь, когда вы знакомы с Flask и Vue.js, мы можем начать.

Установка колбы

Давайте сначала установим пару зависимостей:

pip install --user cookiecutter

CookieCutter это потрясающая утилита командной строки для быстрого начала шаблонов проектов. Мы используем CookieCutter, чтобы не тратить слишком много времени на настройку проекта. Помните, колба не батареи включены как Django Поэтому немало работы должно быть введено в первоначальную настройку проекта.

Теперь, когда вы установили CookieCutter, нам нужен шаблон проекта. Для этого урока нам просто нужен простой API Flask. Запустите следующие команды:

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/Text. Не забудьте активировать виртуальную среду, прежде чем перейти к следующему шагу. Теперь мы можем установить наши зависимости. Бежать:

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

Теперь, когда мы закончили настройку нашего API Flask, запустите:

flask run

затем открыть http://127.0.0.1:5000/example . Вы должны увидеть следующее:

{"message": "Success"}

Vue.js setup

Теперь, когда наш API готов, мы можем приступить к начальной загрузке приложения VUE. Первое, что нам нужно сделать, это установить Vue CLI. Бежать:

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

После завершения установки вы можете проверить, что у вас есть правильная версия (3.x) с этой командой:

vue --version

В корне запуска папки проекта:

vue create web

Я выбрал по умолчанию (Вавилон, Эслинт) как предустановка и пряжа Как мой менеджер посылок. Если вы знакомы с проектами узлов, вы можете пойти дальше и выбрать предпочтительные варианты. Если нет, просто следуйте по умолчанию для этого урока. Теперь перейдите в новый четко созданный Интернет папка и запустить:

yarn serve
# OR
npm run serve

Если вы перемещаетесь в http://localhost: 8080/ , вы должны увидеть Добро пожаловать в ваше приложение vue.js текст.

Теперь мы готовы начать интеграцию.

В веб -папке создайте файл с именем 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 CLI 3.3 и выше, используйте publicpath вместо baseurl Анкет Здесь определяют некоторые конфигурации для VUE CLI. Мы заинтересованы только в трех полях: AssetsDir, BaseUrl, OutputDir . Давайте начнем с вывода. Эта папка содержит местоположение встроенных файлов VUE, то есть папка, которая будет удерживать index.html это загрузит приложение Vue. Если вы соблюдаете предоставленный путь, вы заметите, что папка находится внутри приложение модуль приложения колбы. AssetsDir Удерживает папку для статических файлов (CSS, JS и т. Д.). Примечание Это относится к стоимости, предоставленной в outputDir поле. Наконец, baseurl Поле будет держать префикс пути для статических файлов в index.html Анкет Вы можете проверить это Чтобы узнать больше информации о других параметрах конфигурации. Теперь беги:

yarn build
# OR
npm run build

Если вы откроете приложение Папка, вы заметите, что были созданы две новые папки, Шаблоны и статический . Они содержат встроенные файлы VUE. Теперь создайте 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 и добавление маршрута к нему. Этот маршрут сделает наше приложение Vue.

Open __init__.py и добавьте следующие строки ниже app.flask :

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

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

Здесь мы регистрируем план, который мы создали ранее. Мы даем Blueprint префикс URL, так что наше приложение Vue доступно из /Просмотр/Образец .

Момент истины наступил.

Open 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 -

Вы успешно интегрировали колбу с Vuejs 😄.

Исходный код для этого урока можно найти Здесь Анкет

Оригинал: “https://dev.to/michaelbukachi/flask-vue-js-integration-tutorial-2g90”

Читайте ещё по теме: