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

집

백엔드 개발

파이썬 튜토리얼

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

PHPz

Jun 17, 2023 am 08:28 AM

python vuejs 웹 실시간

웹 애플리케이션의 인기와 사용자 경험에 대한 요구 사항이 증가함에 따라 실시간 동기화는 최신 웹 애플리케이션에서 없어서는 안 될 기능이 되었습니다. 이 글에서는 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>{{ 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으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7491

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

MySQL은 지불해야합니다 Apr 08, 2025 pm 05:36 PM

MySQL에는 무료 커뮤니티 버전과 유료 엔터프라이즈 버전이 있습니다. 커뮤니티 버전은 무료로 사용 및 수정할 수 있지만 지원은 제한되어 있으며 안정성이 낮은 응용 프로그램에 적합하며 기술 기능이 강합니다. Enterprise Edition은 안정적이고 신뢰할 수있는 고성능 데이터베이스가 필요하고 지원 비용을 기꺼이 지불하는 응용 프로그램에 대한 포괄적 인 상업적 지원을 제공합니다. 버전을 선택할 때 고려 된 요소에는 응용 프로그램 중요도, 예산 책정 및 기술 기술이 포함됩니다. 완벽한 옵션은없고 가장 적합한 옵션 만 있으므로 특정 상황에 따라 신중하게 선택해야합니다.

hadidb : 파이썬의 가볍고 수평 확장 가능한 데이터베이스 Apr 08, 2025 pm 06:12 PM

HADIDB : 가볍고 높은 수준의 확장 가능한 Python 데이터베이스 HadIDB (HADIDB)는 파이썬으로 작성된 경량 데이터베이스이며 확장 수준이 높습니다. PIP 설치를 사용하여 HADIDB 설치 : PIPINSTALLHADIDB 사용자 관리 사용자 만들기 사용자 : createUser () 메소드를 작성하여 새 사용자를 만듭니다. Authentication () 메소드는 사용자의 신원을 인증합니다. Fromhadidb.operationimportuseruser_obj = user ( "admin", "admin") user_obj.

MongoDB 데이터베이스 비밀번호를 보는 Navicat의 방법 Apr 08, 2025 pm 09:39 PM

해시 값으로 저장되기 때문에 MongoDB 비밀번호를 Navicat을 통해 직접 보는 것은 불가능합니다. 분실 된 비밀번호 검색 방법 : 1. 비밀번호 재설정; 2. 구성 파일 확인 (해시 값이 포함될 수 있음); 3. 코드를 점검하십시오 (암호 하드 코드 메일).

MySQL은 인터넷이 필요합니까? Apr 08, 2025 pm 02:18 PM

MySQL은 기본 데이터 저장 및 관리를위한 네트워크 연결없이 실행할 수 있습니다. 그러나 다른 시스템과의 상호 작용, 원격 액세스 또는 복제 및 클러스터링과 같은 고급 기능을 사용하려면 네트워크 연결이 필요합니다. 또한 보안 측정 (예 : 방화벽), 성능 최적화 (올바른 네트워크 연결 선택) 및 데이터 백업은 인터넷에 연결하는 데 중요합니다.

MySQL을 해결하는 방법은 로컬 호스트에 연결할 수 없습니다 Apr 08, 2025 pm 02:24 PM

MySQL 연결은 다음과 같은 이유로 인한 것일 수 있습니다. MySQL 서비스가 시작되지 않았고 방화벽이 연결을 가로 채고 포트 번호가 올바르지 않으며 사용자 이름 또는 비밀번호가 올바르지 않으며 My.cnf의 청취 주소가 부적절하게 구성되어 있습니다. 1. MySQL 서비스가 실행 중인지 확인합니다. 2. MySQL이 포트 3306을들을 수 있도록 방화벽 설정을 조정하십시오. 3. 포트 번호가 실제 포트 번호와 일치하는지 확인하십시오. 4. 사용자 이름과 암호가 올바른지 확인하십시오. 5. my.cnf의 바인드 아드 드레스 설정이 올바른지 확인하십시오.

MySQL Workbench가 Mariadb에 연결할 수 있습니다 Apr 08, 2025 pm 02:33 PM

MySQL Workbench는 구성이 올바른 경우 MariadB에 연결할 수 있습니다. 먼저 커넥터 유형으로 "mariadb"를 선택하십시오. 연결 구성에서 호스트, 포트, 사용자, 비밀번호 및 데이터베이스를 올바르게 설정하십시오. 연결을 테스트 할 때는 마리아드 브 서비스가 시작되었는지, 사용자 이름과 비밀번호가 올바른지, 포트 번호가 올바른지, 방화벽이 연결을 허용하는지 및 데이터베이스가 존재하는지 여부를 확인하십시오. 고급 사용에서 연결 풀링 기술을 사용하여 성능을 최적화하십시오. 일반적인 오류에는 불충분 한 권한, 네트워크 연결 문제 등이 포함됩니다. 오류를 디버깅 할 때 오류 정보를 신중하게 분석하고 디버깅 도구를 사용하십시오. 네트워크 구성을 최적화하면 성능이 향상 될 수 있습니다

고로드 애플리케이션의 MySQL 성능을 최적화하는 방법은 무엇입니까? Apr 08, 2025 pm 06:03 PM

MySQL 데이터베이스 성능 최적화 안내서 리소스 집약적 응용 프로그램에서 MySQL 데이터베이스는 중요한 역할을 수행하며 대규모 트랜잭션 관리를 담당합니다. 그러나 응용 프로그램 규모가 확장됨에 따라 데이터베이스 성능 병목 현상은 종종 제약이됩니다. 이 기사는 일련의 효과적인 MySQL 성능 최적화 전략을 탐색하여 응용 프로그램이 고 부하에서 효율적이고 반응이 유지되도록합니다. 실제 사례를 결합하여 인덱싱, 쿼리 최적화, 데이터베이스 설계 및 캐싱과 같은 심층적 인 주요 기술을 설명합니다. 1. 데이터베이스 아키텍처 설계 및 최적화 된 데이터베이스 아키텍처는 MySQL 성능 최적화의 초석입니다. 몇 가지 핵심 원칙은 다음과 같습니다. 올바른 데이터 유형을 선택하고 요구 사항을 충족하는 가장 작은 데이터 유형을 선택하면 저장 공간을 절약 할 수있을뿐만 아니라 데이터 처리 속도를 향상시킬 수 있습니다.