目录
它有什么作用?
安装方法
简介
首页 后端开发 Python教程 Python和JavaScript间交换数据的方法

Python和JavaScript间交换数据的方法

May 11, 2023 pm 11:04 PM
javascript python

telepath是一个Django库,用于在Python和JavaScript之间交换数据,使您可以构建具有丰富客户端接口的应用程序,同时将业务逻辑保留在服务器端代码中。

它有什么作用?

它提供了一种将包括Python对象在内的结构化数据打包为JSON可序列化格式的机制。通过向相应的JavaScript实现注册该机制,可以扩展该机制以支持任何Python类。然后,打包的数据可以包含在HTTP响应中,并在JavaScript中解压缩以获得与原始数据等效的数据结构。

安装方法

pip install telepath
登录后复制
登录后复制

并将'telepath'添加到项目的INSTALLED_APPS。

简介

假设我们正在构建一个用于玩跳棋的Django应用。我们已经花费了数天或数周的时间,构建了游戏规则的Python实现,并提供了代表当前游戏状态和各个部分的类。但是,我们还希望为播放器提供一个适当友好的用户界面,这意味着该是我们编写JavaScript前端的时候了。我们的UI代码不可避免地将拥有自己的对象,这些对象代表不同的角色,镜像我们正在服务器上跟踪的数据结构——但我们无法发送Python对象,因此将这些数据发送到客户端通常将意味着设计游戏状态的JSON表示形式,并在两端分别设计大量样式代码,遍历数据结构以在本机对象之间来回转换。让我们看看telepath如何简化该过程。

一个完整的跳棋游戏对于本教程来说有点太多了,所以我们只选择渲染这一步...

在Python环境中,创建一个新的Django项目:

pip install "Django>=3.1,<3.2" django-admin startproject draughts cd draughts ./manage.py startapp games
登录后复制

在draughts / settings.py的INSTALLED_APPS列表中添加'games'。

为简单起见,在本示例中,我们将不涉及数据库,而是将游戏状态表示为普通的Python类而不是Django模型。修改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(&#39;black&#39;, (x, y))             for y in range(0, 3)             for x in range((y + 1) % 2, 8, 2)         ]         white_pieces = [             Piece(&#39;white&#39;, (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, &#39;game.html&#39;, {})
登录后复制

如下所示创建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>
登录后复制

将新视图添加到draughts/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对象——现在是时候引入telepath,以便我们可以将该对象传输到客户端。执行下面命令:

pip install telepath
登录后复制
登录后复制

并将'telepath'添加到draughts /  settings.py中的INSTALLED_APPS列表中。现在编辑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序列化并传递到我们的模板的值。但是,现在重新加载页面失败,并出现以下形式的错误:don't  know how to pack object:

这是因为GameState是Telepath尚不知道如何处理的自定义Python类型。传递给pack的任何自定义类型必须链接到相应的JavaScript实现;这是通过定义Adapter对象并将其注册到telepath来完成的。如下更新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是JavaScript构造函数的标识符,该标识符将用于在客户端上构建GameState实例,并且js_args定义了将传递给此构造函数的参数列表,以重新创建给定game_state对象的JavaScript对应对象  。Media类指示文件,该文件遵循Django对格式媒体的约定,可在其中找到GameState的JavaScript实现。稍后我们将看到此JavaScript实现的外观,现在,我们需要为Piece类定义一个类似的适配器,因为我们对GameStateAdapter的定义取决于是否能够打包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  Element),您将看到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(&#39;tr&#39;);             table.appendChild(row);             cells[y] = [];             for (let x = 0; x < 8; x++) {                 let cell = document.createElement(&#39;td&#39;);                 row.appendChild(cell);                 cells[y][x] = cell;                 cell.style.width = cell.style.height = &#39;32px&#39;;                 cell.style.backgroundColor = (x + y) % 2 ? &#39;silver&#39;: &#39;white&#39;;             }         }          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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Linux系统自带Python解释器能删除吗? Linux系统自带Python解释器能删除吗? Apr 02, 2025 am 07:00 AM

关于Linux系统自带Python解释器的删除问题许多Linux发行版在安装时会预装Python解释器,它并非通过软件包管理器�...

如何解决Python中自定义装饰器的Pylance类型检测问题? 如何解决Python中自定义装饰器的Pylance类型检测问题? Apr 02, 2025 am 06:42 AM

使用自定义装饰器时的Pylance类型检测问题解决方法在Python编程中,装饰器是一种强大的工具,可以用于添加行�...

在Linux终端中使用python --version命令时如何解决权限问题? 在Linux终端中使用python --version命令时如何解决权限问题? Apr 02, 2025 am 06:36 AM

Linux终端中使用python...

Python 3.6加载pickle文件报错ModuleNotFoundError: No module named '__builtin__'怎么办? Python 3.6加载pickle文件报错ModuleNotFoundError: No module named '__builtin__'怎么办? Apr 02, 2025 am 06:27 AM

Python3.6环境下加载pickle文件报错:ModuleNotFoundError:Nomodulenamed...

FastAPI 和 aiohttp 是否共享同一个全局事件循环? FastAPI 和 aiohttp 是否共享同一个全局事件循环? Apr 02, 2025 am 06:12 AM

Python异步库之间的兼容性问题在Python中,异步编程已经成为处理高并发和I/O...

Python 3.6加载Pickle文件报错"__builtin__"模块未找到怎么办? Python 3.6加载Pickle文件报错"__builtin__"模块未找到怎么办? Apr 02, 2025 am 07:12 AM

Python3.6环境下加载Pickle文件报错:ModuleNotFoundError:Nomodulenamed...

如何在Python中通过信号杀死父进程后确保子进程也终止? 如何在Python中通过信号杀死父进程后确保子进程也终止? Apr 02, 2025 am 06:39 AM

使用信号杀死父进程时,子进程继续运行的问题及解决方案在Python编程中,通过信号杀死父进程后,子进程仍然...

See all articles