programing

Vue.js와 Flask를 결합하려면 어떻게 해야 하나요?

goodsources 2023. 1. 23. 10:11
반응형

Vue.js와 Flask를 결합하려면 어떻게 해야 하나요?

Vue.js와 Flask를 함께 사용하고 싶습니다.동적인 프런트 엔드는 Vue.js, 백엔드는 Flask입니다.내가 어떻게 그럴 수 있을까?

최근 이 문제가 발생했습니다(Vue.js와 Flask의 조합).

1) 단순한 Vue.js 앱을 만들거나 2) Webpack과 같은 모듈 번들을 사용하여 싱글 파일 컴포넌트 또는 npm 패키지를 결합해야 하는 복잡한 Vue.js 앱을 만드는 방법에 따라 두 가지 이상의 조합 방법이 있습니다.

간단한 Vue.js 앱:

이것은 실제로 매우 쉽고 그 자체로 매우 강력합니다.

  1. Vue.js "('')'를 ..html 않으면 아무 이나 열어. 그렇지 않으면 그냥 아무것이나 열어서.html원하는 템플릿 파일입니다.
    • Vue.js 템플릿코드가 여기에 배치됩니다.

  2. HTML과 같은 파일에 Vue.js JavaScript 코드가 있어도 괜찮으시다면 아래는 간단한 "Hello World" 샘플 템플릿으로 Flask 템플릿 파일에 무엇이 필요한지 알 수 있습니다.

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
    • 이 예에서는 플라스크템플릿 파일에 Vue.js JavaScript 코드가 포함되어 있으므로 Vue.js JavaScript를 별도로 포함할 필요가 없습니다.소규모 프로젝트에서는 이 방법이 더 쉬울 수 있습니다.
  3. Vue.js 자바스크립트
    1. "JavaScript"에서.static만들고 싶은 앱 이름을 따서 폴더 이름을 지정하십시오.
      • Vue.js JavaScript 코드가 여기에 배치됩니다.
    2. 「 」의 ..html템플릿 파일에는 Vue.js를 포함하는 스크립트 태그가 포함되어 있습니다.
      • <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
        • 버전 번호는 변경되므로 해당 행만 복사하지 마십시오.최신 버전의 링크는 이쪽에서 보실 수 있습니다.
    3. 또한 이 템플릿파일 아래에도 작성한 JavaScript 파일을 로드하기 위한 스크립트태그가 포함되어 있습니다.
      • <script src="%% url_for('static', filename='js/YOUR_APP_NAME.js') %%"></script>
    4. " " " 를 .div .html" " " 가 idapp를 클릭합니다.
      • <div id="app"></div>

  4. 를 사용하는 , 에게 "Jinja2", "Jinja2"를하지 않도록 위해 코드를 몇 줄 .{{ }}Vue.js에 대해 이중 곡선 기호가 필요하기 때문에 변수를 렌더링하는 구문입니다.는 '보다 낫다'에해야 할 입니다.app.py이 조작을 실시합니다.

    class CustomFlask(Flask):
    jinja_options = Flask.jinja_options.copy()
    jinja_options.update(dict(
        variable_start_string='%%',  # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
        variable_end_string='%%',
    ))

app = CustomFlask(__name__)  # This replaces your existing "app = Flask(__name__)"
    • Flask-Bootstrap에는 "{{" / "}" 구문이 포함된 자체 템플릿이 있기 때문에 Flask-Bootstrap 구문을 바꾸면 Flask-Bootstrap은 작동하지 않습니다.Vue.js의 구문을 변경하는 방법은 Flask의 구문을 변경하는 것보다 훨씬 쉽습니다.
  5. 페이지를 평소대로 제공합니다 / 템플릿 파일을 평소대로 렌더링합니다.
  6. 원하는 경우 Vue.js 2.0 Hello World JSFiddle을 사용하여 보다 빠른 프로토타이핑을 수행한 다음 코드를.html그리고..js파일을 표시합니다.
    • 바이올린이 최신 버전의 Vue.js를 사용하고 있는지 확인하십시오.

진정해요!

웹 팩을 사용한 보다 복잡한 Vue.js 앱:

  1. 노드 설치(npm이 포함되어 있습니다.이것이 우리가 필요로 하는 것입니다).
  2. vue-cli 설치:
    • npm install -g @vue/cli
  3. 새 Vue.js 웹 팩 프로젝트를 만듭니다.
    • vue create my-project
    • 이를 위한 한 가지 방법은 다음과 같습니다.server폴더와 aclient폴더, 여기서server폴더에는 플라스크 서버 코드가 포함되어 있습니다.client폴더에는 Vue.js 프로젝트 코드가 포함되어 있습니다.
    • 또 다른 방법은 Vue.js 프로젝트를 Flask 프로젝트 내의 폴더로 포함하는 것입니다.
  4. 웹 팩 구성을 설정하여app.html파일이 플라스크에 생성됩니다.server/templates필요한 정적 JavaScript 및 CSS를 지정합니다.app.html에 작성됩니다.server/static/app/폴더, Flask 앱의 비 Vue 부분에서 사용되는 정적 자산으로부터 격리됩니다.
  5. Vue.js 프로젝트를 플라스크 프로젝트와 결합하려면npm run buildVue.js 프로젝트를 포함하는 폴더 내에서 Vue.js 프로젝트를 생성하면.html파일 및 몇 개의 정적 파일(JavaScript 및 CSS)을 지정합니다.

Webpack 설정에 대한 정확한 변경(git commit을 통해):

client/build/webpack.dev.conf.js:

new HtmlWebpackPlugin({
-   filename: 'index.html',
-   template: 'index.html',
+   filename: 'app.html',
+   template: 'app.html',

여기서 (위) 플라스크 앱의 'index.html'과 충돌하지 않도록 Vue.js 'launch' 파일의 이름을 app.html로 변경합니다.

client/config/index.js:

module.exports = {
  build: {
    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    index: path.resolve(__dirname, '../../server/templates/app.html'),
+    assetsRoot: path.resolve(__dirname, '../../server/static/app'),
+    assetsSubDirectory: '',
+    assetsPublicPath: '/static/app',

여기서 (위) app.html 파일과 정적 자산을 생성할 위치를 설정합니다.

Webpack이 Flask의 "static" 폴더 내에 정적 자산을 생성하도록 지시하고 있기 때문입니다./static/app/)...

  1. 이러한 자산을 포함할 상대 URLhtml파일은 웹 팩에 의해 자동으로 올바르게 설정됩니다.
    • 예:src=/static/app/js/app.f5b53b475d0a8ec9499e.js
  2. 이러한 URL에 있는 파일에 대해 문의하면 Flask는 자동으로 파일을 처리하는 방법을 알 수 있습니다.static/ Flask 는 Flask 라고 가정합니다./static/etc.URL 니 url 。
    • Flask 루트가 필요한 유일한 생성 파일은app.html파일.

client/build/webpack.prod.conf.js:

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
-    ? 'index.html'
+    ? 'app.html'
    : config.build.index,
-  template: 'index.html',
+  template: 'app.html',

'launch'을 '' 페이지와 webpack.dev.conf.js.

routes.py:

@web_routes.route('/app')
@login_required
def app():
    if current_user.datetime_subscription_valid_until < datetime.datetime.utcnow():
        return redirect(url_for('web_routes.pay'))

    return render_template('app.html')

여기(위)는 렌더링 기능입니다.)을 사용하고 있습니다.<blueprint_name>.route 그럴 필요는 .는 필요 없습니다.

vue-cli 또는 Webpack을 사용하면 프로세스를 단순화할 수 있습니다.간단하게 작성

vue.config.jsVue 프로젝트에서 Vue config를 참조하십시오.

module.exports = {
    outputDir: "../dist",

    // relative to outputDir
    assetsDir: "static" 
};

그런 다음 플라스크 앱을 구성합니다.

app.py

from flask import Flask, render_template

app = Flask(__name__,
            static_folder = "./dist/static",
            template_folder = "./dist")


@app.route('/')
def index():
    return render_template("index.html")

: 플라스크의 , 플라스크의 경우static_folder ★★★★★★★★★★★★★★★★★」template_folder같을 수 없어요.

언급URL : https://stackoverflow.com/questions/46214132/how-can-i-combine-vue-js-with-flask

반응형

'programing' 카테고리의 다른 글

jQuery를 사용하여 이름으로 요소를 선택하려면 어떻게 해야 합니까?  (0) 2023.01.23
JavaScript에서 문자열 배열을 대소문자를 구분하지 않고 정렬하려면 어떻게 해야 합니까?  (0) 2023.01.23
Python에서 여러 줄의 코멘트를 작성하려면 어떻게 해야 하나요?  (0) 2023.01.13
중첩된 사전을 구현하는 가장 좋은 방법은 무엇입니까?  (0) 2023.01.13
핸들바.js {{#if}} 조건부 논리 연산자  (0) 2023.01.13

'programing'의 다른글

  • 현재글Vue.js와 Flask를 결합하려면 어떻게 해야 하나요?

관련글

댓글

티스토리툴바