Python と JavaScript の間でデータを交換する方法
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
drafts/settings.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, })Here JSContext は、ゲーム状態オブジェクトの Javascript で使用できる表現への変換を管理するために使用されるヘルパー ツールです。 js_context.pack はそのオブジェクトを取得し、JSON シリアル化してテンプレートに渡すことができる値に変換します。ただし、現在はページのリロードが次の形式のエラーで失敗します: don't know how to package object:
これは、GameState が Telepath がまだ処理方法を知らないカスタム Python タイプであるためです。パックに渡されるカスタム タイプは、対応する 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 を右クリックします)コメントして [検査] または [要素の検査] を選択すると、GameState オブジェクトの JSON 表現が表示され、完全な JavaScript オブジェクトに解凍できる状態になります。
データを 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 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7749
15
1643
14
1397
52
1293
25
1234
29
PHPおよびPython：さまざまなパラダイムが説明されています
Apr 18, 2025 am 12:26 AM
PHPは主に手順プログラミングですが、オブジェクト指向プログラミング（OOP）もサポートしています。 Pythonは、OOP、機能、手続き上のプログラミングなど、さまざまなパラダイムをサポートしています。 PHPはWeb開発に適しており、Pythonはデータ分析や機械学習などのさまざまなアプリケーションに適しています。
PHPとPythonの選択：ガイド
Apr 18, 2025 am 12:24 AM
PHPはWeb開発と迅速なプロトタイピングに適しており、Pythonはデータサイエンスと機械学習に適しています。 1.PHPは、単純な構文と迅速な開発に適した動的なWeb開発に使用されます。 2。Pythonには簡潔な構文があり、複数のフィールドに適しており、強力なライブラリエコシステムがあります。
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
PHPとPython：彼らの歴史を深く掘り下げます
Apr 18, 2025 am 12:25 AM
PHPは1994年に発信され、Rasmuslerdorfによって開発されました。もともとはウェブサイトの訪問者を追跡するために使用され、サーバー側のスクリプト言語に徐々に進化し、Web開発で広く使用されていました。 Pythonは、1980年代後半にGuidovan Rossumによって開発され、1991年に最初にリリースされました。コードの読みやすさとシンプルさを強調し、科学的コンピューティング、データ分析、その他の分野に適しています。
Windows 8でコードを実行できます
Apr 15, 2025 pm 07:24 PM
VSコードはWindows 8で実行できますが、エクスペリエンスは大きくない場合があります。まず、システムが最新のパッチに更新されていることを確認してから、システムアーキテクチャに一致するVSコードインストールパッケージをダウンロードして、プロンプトとしてインストールします。インストール後、一部の拡張機能はWindows 8と互換性があり、代替拡張機能を探すか、仮想マシンで新しいWindowsシステムを使用する必要があることに注意してください。必要な拡張機能をインストールして、適切に動作するかどうかを確認します。 Windows 8ではVSコードは実行可能ですが、開発エクスペリエンスとセキュリティを向上させるために、新しいWindowsシステムにアップグレードすることをお勧めします。
Visual StudioコードはPythonで使用できますか
Apr 15, 2025 pm 08:18 PM
VSコードはPythonの書き込みに使用でき、Pythonアプリケーションを開発するための理想的なツールになる多くの機能を提供できます。ユーザーは以下を可能にします。Python拡張機能をインストールして、コードの完了、構文の強調表示、デバッグなどの関数を取得できます。デバッガーを使用して、コードを段階的に追跡し、エラーを見つけて修正します。バージョンコントロールのためにGitを統合します。コードフォーマットツールを使用して、コードの一貫性を維持します。糸くずツールを使用して、事前に潜在的な問題を発見します。
ターミナルVSCODEでプログラムを実行する方法
Apr 15, 2025 pm 06:42 PM
VSコードでは、次の手順を通じて端末でプログラムを実行できます。コードを準備し、統合端子を開き、コードディレクトリが端末作業ディレクトリと一致していることを確認します。プログラミング言語（pythonのpython your_file_name.pyなど）に従って実行コマンドを選択して、それが正常に実行されるかどうかを確認し、エラーを解決します。デバッガーを使用して、デバッグ効率を向上させます。
VSCODE拡張機能は悪意がありますか？
Apr 15, 2025 pm 07:57 PM
VSコード拡張機能は、悪意のあるコードの隠れ、脆弱性の活用、合法的な拡張機能としての自慰行為など、悪意のあるリスクを引き起こします。悪意のある拡張機能を識別する方法には、パブリッシャーのチェック、コメントの読み取り、コードのチェック、およびインストールに注意してください。セキュリティ対策には、セキュリティ認識、良好な習慣、定期的な更新、ウイルス対策ソフトウェアも含まれます。
