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으로 문의하세요.

관련 기사

파이썬 : 게임, Guis 등Apr 13, 2025 am 12:14 AM

Python은 게임 및 GUI 개발에서 탁월합니다. 1) 게임 개발은 Pygame을 사용하여 드로잉, 오디오 및 기타 기능을 제공하며 2D 게임을 만드는 데 적합합니다. 2) GUI 개발은 Tkinter 또는 PYQT를 선택할 수 있습니다. Tkinter는 간단하고 사용하기 쉽고 PYQT는 풍부한 기능을 가지고 있으며 전문 개발에 적합합니다.

Python vs. C : 응용 및 사용 사례가 비교되었습니다Apr 12, 2025 am 12:01 AM

Python은 데이터 과학, 웹 개발 및 자동화 작업에 적합한 반면 C는 시스템 프로그래밍, 게임 개발 및 임베디드 시스템에 적합합니다. Python은 단순성과 강력한 생태계로 유명하며 C는 고성능 및 기본 제어 기능으로 유명합니다.

2 시간의 파이썬 계획 : 현실적인 접근Apr 11, 2025 am 12:04 AM

2 시간 이내에 Python의 기본 프로그래밍 개념과 기술을 배울 수 있습니다. 1. 변수 및 데이터 유형을 배우기, 2. 마스터 제어 흐름 (조건부 명세서 및 루프), 3. 기능의 정의 및 사용을 이해하십시오. 4. 간단한 예제 및 코드 스 니펫을 통해 Python 프로그래밍을 신속하게 시작하십시오.

파이썬 : 기본 응용 프로그램 탐색Apr 10, 2025 am 09:41 AM

Python은 웹 개발, 데이터 과학, 기계 학습, 자동화 및 스크립팅 분야에서 널리 사용됩니다. 1) 웹 개발에서 Django 및 Flask 프레임 워크는 개발 프로세스를 단순화합니다. 2) 데이터 과학 및 기계 학습 분야에서 Numpy, Pandas, Scikit-Learn 및 Tensorflow 라이브러리는 강력한 지원을 제공합니다. 3) 자동화 및 스크립팅 측면에서 Python은 자동화 된 테스트 및 시스템 관리와 같은 작업에 적합합니다.

2 시간 안에 얼마나 많은 파이썬을 배울 수 있습니까?Apr 09, 2025 pm 04:33 PM

2 시간 이내에 파이썬의 기본 사항을 배울 수 있습니다. 1. 변수 및 데이터 유형을 배우십시오. 이를 통해 간단한 파이썬 프로그램 작성을 시작하는 데 도움이됩니다.

10 시간 이내에 프로젝트 및 문제 중심 방법에서 컴퓨터 초보자 프로그래밍 기본 사항을 가르치는 방법?Apr 02, 2025 am 07:18 AM

10 시간 이내에 컴퓨터 초보자 프로그래밍 기본 사항을 가르치는 방법은 무엇입니까? 컴퓨터 초보자에게 프로그래밍 지식을 가르치는 데 10 시간 밖에 걸리지 않는다면 무엇을 가르치기로 선택 하시겠습니까?

중간 독서를 위해 Fiddler를 사용할 때 브라우저에서 감지되는 것을 피하는 방법은 무엇입니까?Apr 02, 2025 am 07:15 AM

Fiddlerevery Where를 사용할 때 Man-in-the-Middle Reading에 Fiddlereverywhere를 사용할 때 감지되는 방법 ...

Python 3.6에 피클 파일을로드 할 때 '__builtin__'모듈을 찾을 수없는 경우 어떻게해야합니까?Apr 02, 2025 am 07:12 AM

Python 3.6에 피클 파일로드 3.6 환경 보고서 오류 : modulenotfounderror : nomodulename ...

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.