Flask에 Vue 통합

                                                       

이 튜토리얼은 "Vue.js를 Flask에 어떻게 통합하나요?"라는 질문에 대한 답변입니다. 이 튜토리얼을 읽고 있으므로 Flask가 빠른 웹 개발을 위한 도구라는 것을 알고 있다고 가정합니다. 세워짐. 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
}

sqlite 구성을 위해 모든 postgres 구성을 제거했습니다. postgres를 사용하는 경우 conf.py 파일을 변경하지 않고 그대로 두세요. app/config.py。您会注意到，此API模板使用了postgres数据库连接。 如果您不介意，可以使用必要的凭据设置postgres db。否则，请使用以下代码行代替该文件夹的内容：

export FLASK_APP=wsgi:app

我们已经删除了所有的 postgres 配置，以支持 sqlite 的配置。如果您要使用 postgres，请保持 conf.py 文件不变。
现在我们需要导出 Flask 应用程序。执行:

flask run

现在我们已经完成了 Flask 的 API 的设置，执行:

{"message": "Success"}

然后在浏览器上打开 http://127.0.0.1:5000/example。您应该能看到以下内容：

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

Vue.js设置

现在我们的 API 已经准备就绪，我们可以继续引导vue应用程序了。
我们需要做的第一件事是安装 vue cli。执行:

vue --version

一旦安装完成后, 您可以使用以下命令检查版本是否正确(3.x)：

vue create web

在项目文件夹的根目录中运行:

yarn serve
# OR
npm run serve

我选择 default (babel, eslint) 作为预设，并选择 yarn 作为我的包裹管理器。如果您熟悉node项目，则可以继续并选择您的首选选项。如果没有，请遵循本教程的默认设置。
现在导航到新建的 web 文件夹并运行：

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

如果导航到http://localhost:8080/, 您应该可看到 Welcome to Your Vue.js App 文本。

现在我们准备开始集成。

在 Web 文件夹中，创建一个名为 vue.config.js 的文件并粘贴以下内容：

yarn build
# OR
npm run build

在这里, 为 Vue cl i定义了一些配置。我们只对三个字段感兴趣: assetsDir, baseUrl, outputDir。
让我们从 outputDir 开始。
此文件夹保存已构建的 Vue 文件的位置，即将保存将加载 Vue 应用程序的 index.html 的文件夹。如果您观察这提供的路径, 您将会注意到该文件夹位于flask应用程序的 app 模块内部。
assetsDir 保存用于存放静态文件(css, js 等)的文件夹。 注意 它是相对于 outputDir 字段中提供的值的。
最后,  baseUrl 字段将在 index.html이제 Flask 애플리케이션을 내보내야 합니다. 실행:

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)

이제 Flask API 설정이 완료되었으므로 🎜

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

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

🎜를 실행하고 브라우저에서 http://127.0.0.1:5000/example을 엽니다. 다음 내용이 표시됩니다. 🎜

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

🎜🎜Vue.js 설정🎜🎜🎜이제 API가 준비되었으므로 vue 애플리케이션 부트스트래핑으로 넘어갈 수 있습니다. 🎜가장 먼저 해야 할 일은 vue cli를 설치하는 것입니다. 실행: 🎜rrreee🎜 설치가 완료되면 다음 명령을 사용하여 버전이 올바른지(3.x) 확인할 수 있습니다. 🎜rrreee🎜 프로젝트 폴더 루트에서 실행: 🎜rrreee🎜 저는 🎜default(babel)를 선택했습니다. , eslint) 🎜를 기본값으로 하고 🎜yarn🎜을 내 패키지 관리자로 사용합니다. 노드 프로젝트에 익숙하다면 계속 진행하여 원하는 옵션을 선택할 수 있습니다. 그렇지 않은 경우 이 튜토리얼의 기본 설정을 따르십시오. 🎜이제 새로 생성된 🎜web🎜 폴더로 이동하여 다음을 실행합니다. 🎜rrreee🎜 http://localhost:8080/으로 이동하면 🎜Welcome to Your Vue.js App🎜 텍스트가 표시됩니다. 🎜🎜이제 통합을 시작할 준비가 되었습니다. 🎜🎜Web 폴더에서 vue.config.js라는 파일을 만들고 다음 콘텐츠를 붙여넣습니다. 🎜rrreee🎜여기에는 Vue cl i에 대한 일부 구성이 정의되어 있습니다. 우리는 🎜assetsDir, baseUrl, outputDir🎜 세 가지 필드에만 관심이 있습니다. 🎜outputDir부터 시작해 보겠습니다. 🎜이 폴더에는 빌드된 Vue 파일의 위치, 즉 Vue 애플리케이션을 로드할 index.html가 들어 있는 폴더가 들어 있습니다. 제공된 경로를 관찰하면 폴더가 플라스크 애플리케이션의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!