telepath는 Python과 JavaScript 간 데이터 교환을 위한 Django 라이브러리로, 서버 측 코드에 비즈니스 로직을 유지하면서 풍부한 클라이언트 측 인터페이스로 애플리케이션을 구축할 수 있게 해줍니다.
무엇을 합니까?
Python 객체를 포함한 구조화된 데이터를 JSON 직렬화 가능 형식으로 패키징하는 메커니즘을 제공합니다. 이 메커니즘은 해당 JavaScript 구현에 등록하여 Python 클래스를 지원하도록 확장될 수 있습니다. 그런 다음 압축된 데이터를 HTTP 응답에 포함하고 JavaScript에서 압축을 풀어 원본 데이터와 동일한 데이터 구조를 얻을 수 있습니다.
설치 방법
pip install telepath
로그인 후 복사
로그인 후 복사
을 선택하고 프로젝트의 INSTALLED_APPS에 'telepath'를 추가하세요.
소개
체커 게임을 위한 Django 앱을 구축한다고 가정해 보겠습니다. 우리는 게임 규칙의 Python 구현을 구축하고 현재 게임 상태와 다양한 부분을 나타내는 클래스를 제공하는 데 며칠 또는 몇 주를 보냈습니다. 그러나 우리는 또한 플레이어에게 적절하게 사용자 친화적인 인터페이스를 제공하고 싶습니다. 이는 이제 JavaScript 프런트 엔드를 작성해야 할 때라는 것을 의미합니다. 우리의 UI 코드에는 필연적으로 서버에서 추적하는 데이터 구조를 미러링하여 다양한 역할을 나타내는 자체 개체가 있습니다. 하지만 Python 개체를 보낼 수 없으므로 이 데이터를 클라이언트에 보내는 것은 일반적으로 게임 상태의 JSON 표현을 설계하는 것을 의미합니다. , 양쪽 끝에서 많은 스타일링 코드를 디자인하고 데이터 구조를 탐색하여 기본 개체 간에 앞뒤로 변환합니다. 텔레파시가 어떻게 프로세스를 단순화하는지 살펴보겠습니다.
완전한 체커 게임은 이 튜토리얼에서 너무 부담스럽기 때문에 이 단계를 렌더링하도록 하겠습니다...
Python 환경에서 새 Django 프로젝트를 만듭니다:
pip install "Django>=3.1,<3.2" django-admin startproject draughts cd draughts ./manage.py startapp games
로그인 후 복사
초안/설정에서 .py INSTALLED_APPS 목록에 '게임'을 추가합니다.
단순화를 위해 이 예에서는 데이터베이스를 포함하지 않고 Django 모델 대신 일반 Python 클래스로 게임 상태를 나타냅니다. games/views.py를 다음과 같이 수정하세요:
from django.shortcuts import render class Piece: def __init__(self, color, position): self.color = color self.position = position class GameState: def __init__(self, pieces): self.pieces = pieces @staticmethod def new_game(): black_pieces = [ Piece('black', (x, y)) for y in range(0, 3) for x in range((y + 1) % 2, 8, 2) ] white_pieces = [ Piece('white', (x, y)) for y in range(5, 8) for x in range((y + 1) % 2, 8, 2) ] return GameState(black_pieces + white_pieces) def game(request): game_state = GameState.new_game() return render(request, 'game.html', {})로그인 후 복사
games/templates/game.html을 다음과 같이 생성하세요:
<!doctype html> <html> <head> <title>Draughts</title> <script> document.addEventListener('DOMContentLoaded', event => { const gameElement = document.getElementById('game'); gameElement.innerHTML = 'TODO: render the board here' }); </script> </head> <body> <h2>Draughts</h2> <div id="game"> </div> </body> </html>로그인 후 복사
drafts/urls.py에 새 뷰를 추가하세요:
from django.contrib import admin from django.urls import path from games.views import game urlpatterns = [ path('', game), path('admin/', admin.site.urls), ]로그인 후 복사
이제 ./manage를 사용하여 py runserver를 시작하세요. 서버에 접속하여 http://localhost:8000/에 액세스합니다.
지금까지 우리는 새 게임을 나타내는 GameState 개체를 만들었습니다. 이제 해당 개체를 클라이언트에 전송할 수 있도록 텔레파시를 도입할 차례입니다. 다음 명령을 실행하세요:
pip install telepath
로그인 후 복사
로그인 후 복사
그리고drafts/settings.py의 INSTALLED_APPS 목록에 'telepath'를 추가하세요. 이제 games/views.py 파일을 편집하세요.
import json from django.shortcuts import render from telepath import JSContext # ... def game(request): game_state = GameState.new_game() js_context = JSContext() packed_game_state = js_context.pack(game_state) game_state_json = json.dumps(packed_game_state) return render(request, 'game.html', { 'game_state_json': game_state_json, })로그인 후 복사
여기 JSContext는 게임 상태 개체를 Javascript에서 사용할 수 있는 표현으로 변환하는 데 사용되는 도우미 도구입니다. js_context.pack은 해당 객체를 가져와 JSON 직렬화하여 템플릿에 전달할 수 있는 값으로 변환합니다. 그러나 이제 다음 형식의 오류로 인해 페이지를 다시 로드하지 못합니다: 객체를 포장하는 방법을 모릅니다:
이는 GameState가 Telepath가 아직 처리 방법을 모르는 사용자 정의 Python 유형이기 때문입니다. pack에 전달된 모든 사용자 정의 유형은 해당 JavaScript 구현에 연결되어야 합니다. 이는 Adapter 개체를 정의하고 이를 텔레패스에 등록하여 수행됩니다. game/views.py를 다음과 같이 업데이트하세요:
import json from django.shortcuts import render from telepath import Adapter, JSContext, register # ... class GameState: # keep definition as before class GameStateAdapter(Adapter): js_constructor = 'draughts.GameState' def js_args(self, game_state): return [game_state.pieces] class Media: js = ['draughts.js'] register(GameStateAdapter(), GameState)
로그인 후 복사
여기서 js_constructor는 클라이언트에서 GameState 인스턴스를 빌드하는 데 사용될 JavaScript 생성자의 식별자이고, js_args는 이 생성자에 전달될 인수 목록을 정의합니다. 주어진 game_state 객체의 JavaScript 대응물을 다시 만듭니다. Media 클래스는 Django의 미디어 형식 지정 규칙을 따르는 파일을 나타내며 GameState의 JavaScript 구현을 찾을 수 있는 곳입니다. 이 JavaScript 구현이 나중에 어떻게 보이는지 살펴보겠습니다. 지금은 GameStateAdapter 정의가 Piece 인스턴스를 패키징할 수 있는지 여부에 따라 달라지므로 Piece 클래스에 대해 유사한 어댑터를 정의해야 합니다. games/views.py에 다음 정의를 추가하세요.
class Piece: # keep definition as before class PieceAdapter(Adapter): js_constructor = 'draughts.Piece' def js_args(self, piece): return [piece.color, piece.position] class Media: js = ['draughts.js'] register(PieceAdapter(), Piece)
로그인 후 복사
페이지를 다시 로드하면 오류가 사라지는 것을 볼 수 있습니다. 이는 GameState 개체를 JSON으로 성공적으로 직렬화하고 템플릿에 전달했음을 나타냅니다. 이제 이를 템플릿에 포함할 수 있습니다. games/templates/game.html을 편집하세요.
<body> <h2>Draughts</h2> <div id="game" data-game-state="{{ game_state_json }}"> </div> </body>로그인 후 복사
페이지를 다시 로드하고 브라우저의 개발자 도구에서 게임 요소를 검사하세요(Chrome 및 Firefox에서는 TODO 댓글을 마우스 오른쪽 버튼으로 클릭하고 Inspect 또는 Inspect를 선택하세요). 요소), 완전한 JavaScript 개체로 압축을 풀 준비가 된 GameState 개체의 JSON 표현이 표시됩니다.
데이터를 JSON 직렬화 가능 형식으로 패키징하는 것 외에도 JSContext 개체는 데이터를 미디어 속성으로 압축 해제하는 데 필요한 JavaScript 미디어 정의도 추적합니다. 게임 보기를 업데이트하여 템플릿에도 전달하겠습니다. games/views.py에서:
def game(request): game_state = GameState.new_game() js_context = JSContext() packed_game_state = js_context.pack(game_state) game_state_json = json.dumps(packed_game_state) return render(request, 'game.html', { 'game_state_json': game_state_json, 'media': js_context.media, })로그인 후 복사
games/templates/game.html의 HTML 헤더 파일에 다음 코드를 추가하세요:
<head> <title>Draughts</title> {{ media }} <script> document.addEventListener('DOMContentLoaded', event => { const gameElement = document.getElementById('game'); gameElement.innerHTML = 'TODO: render the board here' }); </script> </head>로그인 후 복사
重新加载页面并查看源代码，您将看到这带来了两个JavaScript包括 —— telepath.js(客户端telepath库，提供解包机制)和我们在适配器定义中指定的draughts.js文件。后者尚不存在，所以让我们在games / static / draughts.js中创建它：
class Piece { constructor(color, position) { this.color = color; this.position = position; } } window.telepath.register('draughts.Piece', Piece); class GameState { constructor(pieces) { this.pieces = pieces; } } window.telepath.register('draughts.GameState', GameState);로그인 후 복사
这两个类定义实现了我们先前在适配器对象中声明的构造函数-构造函数接收的参数是js_args定义的参数。window.telepath.register行将这些类定义附加到通过js_constructor指定的相应标识符。现在，这为我们提供了解压缩JSON所需的一切-回到games / templates / game.html中，更新JS代码，如下所示：
<script> document.addEventListener('DOMContentLoaded', event => { const gameElement = document.getElementById('game'); const gameStateJson = gameElement.dataset.gameState; const packedGameState = JSON.parse(gameStateJson); const gameState = window.telepath.unpack(packedGameState); console.log(gameState); }) </script>로그인 후 복사
您可能需要重新启动服务器以获取新的games/static文件夹。重新加载页面，然后在浏览器控制台中，您现在应该看到填充了Piece对象的GameState对象。现在，我们可以继续在games/static/draughts.js中填写渲染代码：
class Piece { constructor(color, position) { this.color = color; this.position = position; } render(container) { const element = document.createElement('div'); container.appendChild(element); element.style.width = element.style.height = '24px'; element.style.border = '2px solid grey'; element.style.borderRadius = '14px'; element.style.backgroundColor = this.color; } } window.telepath.register('draughts.Piece', Piece) class GameState { constructor(pieces) { this.pieces = pieces; } render(container) { const table = document.createElement('table'); container.appendChild(table); const cells = []; for (let y = 0; y < 8; y++) { let row = document.createElement('tr'); table.appendChild(row); cells[y] = []; for (let x = 0; x < 8; x++) { let cell = document.createElement('td'); row.appendChild(cell); cells[y][x] = cell; cell.style.width = cell.style.height = '32px'; cell.style.backgroundColor = (x + y) % 2 ? 'silver': 'white'; } } this.pieces.forEach(piece => { const [x, y] = piece.position; const cell = cells[y][x]; piece.render(cell); }); } } window.telepath.register('draughts.GameState', GameState)로그인 후 복사
在games/templates/game.html中添加对render方法的调用：
<script> document.addEventListener('DOMContentLoaded', event => { const gameElement = document.getElementById('game'); const gameStateJson = gameElement.dataset.gameState; const packedGameState = JSON.parse(gameStateJson); const gameState = window.telepath.unpack(packedGameState); gameState.render(gameElement); }) </script>로그인 후 복사
重新加载页面，您将看到我们的跳棋程序已准备就绪，可以开始游戏了。
让我们快速回顾一下我们已经取得的成果：
我们已经打包和解包了自定义Python / JavaScript类型的数据结构，而无需编写代码来递归该结构。如果我们的GameState对象变得更复杂(例如，“棋子”列表可能变成棋子和国王对象的混合列表，或者状态可能包括游戏历史)，则无需重构任何数据打包/拆包逻辑，除了为每个使用的类提供一个适配器对象。
仅提供了解压缩页面数据所需的JS文件-如果我们的游戏应用程序扩展到包括Chess，Go和Othello，并且所有生成的类都已通过Telepath注册，则我们仍然只需要提供与跳棋知识相关的代码。
即使我们使用任意对象，也不需要动态内联JavaScript —— 所有动态数据都以JSON形式传递，并且所有JavaScript代码在部署时都是固定的(如果我们的网站强制执行CSP，这一点很重要)。
위 내용은 Python과 JavaScript 간에 데이터를 교환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
