Python 및 Vue.js를 사용하여 실시간 동기화된 웹 애플리케이션 개발-파이썬 튜토리얼-php.cn

집

백엔드 개발

파이썬 튜토리얼

Python 및 Vue.js를 사용하여 실시간 동기화된 웹 애플리케이션 개발

PHPz

Jun 17, 2023 am 08:28 AM

pythonvuejs웹 실시간

웹 애플리케이션의 인기와 사용자 경험에 대한 요구 사항이 증가함에 따라 실시간 동기화는 최신 웹 애플리케이션에서 없어서는 안 될 기능이 되었습니다. 이 글에서는 Python과 Vue.js를 사용하여 실시간 동기식 웹 애플리케이션을 개발하는 방법을 소개합니다.

실시간 동기화를 달성하려면 WebSocket, 비동기 프로그래밍 및 프런트엔드 프레임워크를 포함한 일부 최신 웹 기술을 사용해야 합니다. 다음은 이 문서에서 사용될 기술 스택입니다:

Python 3.6+
Flask
flask-Socketio
gevent
vue.js 2.0+
Vuex
socket.io-Client

이러한 기술을 사용하여 실시간 동기화 웹 애플리케이션을 구현하는 방법을 단계별로 소개하겠습니다.

Flask 애플리케이션 만들기

먼저 Flask 애플리케이션을 만들어야 합니다. Python의 pip 패키지 관리자를 사용하여 Flask를 설치할 수 있습니다.

pip install flask

그런 다음 다음 콘텐츠로 app.py 파일을 만듭니다.

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

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

if __name__ == '__main__':
    socketio.run(app)

이 코드는 Flask 애플리케이션을 생성하고 루트 경로에 이름을 렌더링합니다. 이는 index.html의 템플릿입니다. . 나중에 이 템플릿을 만들겠습니다. 또한 나중에 실시간 동기화를 구현하는 데 사용할 수 있도록 WebSocket 서버도 시작했습니다.

Vue.js 애플리케이션 만들기

다음으로 Vue.js 애플리케이션을 만들어야 합니다. Vue의 CLI 도구를 사용하여 Vue.js 애플리케이션을 빠르게 생성할 수 있습니다. 명령은 다음과 같습니다.

npm install -g @vue/cli
vue create client

이렇게 하면 client라는 Vue.js 애플리케이션이 생성됩니다. 애플리케이션 디렉토리로 이동하여 필요한 종속성을 설치합니다.

cd client
npm install vue-socket.io vue-socket.io-extended socket.io-client vuex --save

그런 다음 애플리케이션의 일부 구성을 수행해야 합니다. src/main.js를 열고 다음 코드를 사용하세요.

import Vue from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io-extended'
import io from 'socket.io-client'
import Vuex from 'vuex'
import {store} from './store/store'

Vue.use(Vuex)

const socket = io(`${window.location.hostname}:5000`)

Vue.use(VueSocketIO, socket, {store})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

코드에서 우리는 Flask 애플리케이션의 WebSocket 서버에 연결할 수 있도록 필요한 모듈을 가져오고 소켓 인스턴스를 만들었습니다.

Create Vuex store

우리는 Vuex를 사용하여 애플리케이션의 상태를 관리합니다. 따라서 다음 코드를 사용하여 스토어 폴더를 생성하고 그 안에 store.js 파일을 생성해야 합니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    SET_MESSAGE(state, payload) {
      state.message = payload
    }
  }
})

이 스토어에는 상태의 메시지 필드가 포함되어 있으며 필드를 설정하는 변형이 있습니다.

Vue 구성 요소 만들기

이제 Vue 구성 요소를 만들어 메시지 상태를 표시하고 실시간 동기화를 달성할 수 있습니다. 실시간 동기화를 구현하기 위해 구성 요소의 소켓 방출 및 on 메서드를 사용합니다. App.vue 파일을 열고 다음 코드를 사용합니다.

<template>
  <div class="container">
    <h1 id="message">{{ message }}</h1>
    <input v-model="input" type="text">
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      input: ''
    }
  },
  computed: {
    message() {
      return this.$store.state.message
    }
  },
  methods: {
    sendMessage() {
      this.$socket.emit('message', this.input)
    }
  },
  sockets: {
    message(payload) {
      this.$store.commit('SET_MESSAGE', payload)
    }
  }
}
</script>

<style>
.container {
  margin: 100px auto;
  text-align: center;
}
</style>

Vue 구성 요소에서 소켓의 방출 및 on 메서드를 사용했다는 점에 유의하세요. Emit 메소드는 서버에 메시지를 보내는 데 사용되며, on 메소드는 서버에서 보낸 메시지를 수신하고 지정된 콜백을 실행하는 데 사용됩니다.

index.html 템플릿 만들기

또한 Flask 애플리케이션에 대한 진입점을 제공하기 위해 index.html 템플릿을 만들어야 합니다. template/index.html을 열고 다음 코드를 사용합니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Socket.IO Application</title>
</head>
<body>
  <div id="app"></div>
  <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>

이 템플릿에는 Vue가 포함되어 있습니다. 진입점이며 Vue 애플리케이션이 콘텐츠를 렌더링하기 위한 DOM 요소를 제공합니다. 템플릿에는 Flask 애플리케이션에서 참조하고 Vue 애플리케이션의 스크립트를 제공하는 정적 파일 URL도 포함되어 있습니다.

앱 실행

이제 앱에 대한 모든 설정이 완료되었으므로 다음 명령을 사용하여 시작할 수 있습니다.

python app.py

그런 다음 브라우저에서 http://localhost:5000을 엽니다. 페이지에 텍스트를 입력할 수 있는 입력 상자가 표시됩니다. 뿐만 아니라 다른 브라우저로 전환하여 입력창에 텍스트를 입력하면 방금 입력한 텍스트도 여기에 동기화되는 것을 확인할 수 있습니다!

이렇게 해서 우리는 Python과 Vue 기반의 브라우저를 성공적으로 구현했습니다. Node.js 웹 애플리케이션을 실시간으로 동기화합니다. 이 모델에는 온라인 채팅 애플리케이션이나 다중 사용자 공동 작업 애플리케이션과 같은 다양한 애플리케이션 시나리오가 있습니다.

위 내용은 Python 및 Vue.js를 사용하여 실시간 동기화된 웹 애플리케이션 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Numpy를 사용하여 다차원 배열을 어떻게 생성합니까?Apr 29, 2025 am 12:27 AM

다음 단계를 통해 Numpy를 사용하여 다차원 배열을 만들 수 있습니다. 1) Numpy.array () 함수를 사용하여 NP.Array ([[1,2,3], [4,5,6]]과 같은 배열을 생성하여 2D 배열을 만듭니다. 2) np.zeros (), np.ones (), np.random.random () 및 기타 함수를 사용하여 특정 값으로 채워진 배열을 만듭니다. 3) 서브 어레이의 길이가 일관되고 오류를 피하기 위해 배열의 모양과 크기 특성을 이해하십시오. 4) NP.Reshape () 함수를 사용하여 배열의 모양을 변경하십시오. 5) 코드가 명확하고 효율적인지 확인하기 위해 메모리 사용에주의를 기울이십시오.

Numpy 어레이에서 '방송'의 개념을 설명하십시오.Apr 29, 2025 am 12:23 AM

BroadcastingInnumpyIsamethodtoperformoperationsonArraysoffferentShapesByAutomicallyAligningThem.itsimplifiesCode, enourseadability, andboostsperformance.here'showitworks : 1) smalraysarepaddedwithonestomatchdimenseare

데이터 저장을 위해 목록, Array.Array 및 Numpy Array 중에서 선택하는 방법을 설명하십시오.Apr 29, 2025 am 12:20 AM

forpythondatastorage, chooselistsforflexibilitywithmixeddatatypes, array.arrayformemory-effic homogeneousnumericaldata, andnumpyarraysforadvancednumericalcomputing.listsareversatilebutlessefficipforlargenumericaldatasets.arrayoffersamiddlegro

파이썬 목록을 사용하는 것이 배열을 사용하는 것보다 더 적절한 시나리오의 예를 제시하십시오.Apr 29, 2025 am 12:17 AM

pythonlistsarebetterthanarraysformanagingDiversEdatatypes.1) 1) listscanholdementsofdifferentTypes, 2) thearedynamic, weantEasyAdditionSandremovals, 3) wefferintufiveOperationsLikEslicing, but 4) butiendess-effectorlowerggatesets.

파이썬 어레이에서 요소에 어떻게 액세스합니까?Apr 29, 2025 am 12:11 AM

toaccesselementsInapyThonArray : my_array [2] AccessHetHirdElement, returning3.pythonuseszero 기반 인덱싱 .1) 사용 positiveAndnegativeIndexing : my_list [0] forthefirstelement, my_list [-1] forstelast.2) audeeliciforarange : my_list

파이썬에서 튜플 이해력이 가능합니까? 그렇다면, 어떻게 그리고 그렇지 않다면?Apr 28, 2025 pm 04:34 PM

기사는 구문 모호성으로 인해 파이썬에서 튜플 이해의 불가능성에 대해 논의합니다. 튜플을 효율적으로 생성하기 위해 튜플 ()을 사용하는 것과 같은 대안이 제안됩니다. (159 자)

파이썬의 모듈과 패키지는 무엇입니까?Apr 28, 2025 pm 04:33 PM

이 기사는 파이썬의 모듈과 패키지, 차이점 및 사용법을 설명합니다. 모듈은 단일 파일이고 패키지는 __init__.py 파일이있는 디렉토리이며 관련 모듈을 계층 적으로 구성합니다.

파이썬에서 Docstring이란 무엇입니까?Apr 28, 2025 pm 04:30 PM

기사는 Python의 Docstrings, 사용법 및 혜택에 대해 설명합니다. 주요 이슈 : 코드 문서 및 접근성에 대한 문서의 중요성.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Dreamweaver Mac版

시각적 웹 개발 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.