目录
它有什么作用?
安装方法
简介
首页 后端开发 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.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
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)

mysql 是否要付费 mysql 是否要付费 Apr 08, 2025 pm 05:36 PM

MySQL 有免费的社区版和收费的企业版。社区版可免费使用和修改,但支持有限,适合稳定性要求不高、技术能力强的应用。企业版提供全面商业支持,适合需要稳定可靠、高性能数据库且愿意为支持买单的应用。选择版本时考虑的因素包括应用关键性、预算和技术技能。没有完美的选项,只有最合适的方案,需根据具体情况谨慎选择。

mysql安装后怎么使用 mysql安装后怎么使用 Apr 08, 2025 am 11:48 AM

文章介绍了MySQL数据库的上手操作。首先,需安装MySQL客户端,如MySQLWorkbench或命令行客户端。1.使用mysql-uroot-p命令连接服务器,并使用root账户密码登录;2.使用CREATEDATABASE创建数据库,USE选择数据库;3.使用CREATETABLE创建表,定义字段及数据类型;4.使用INSERTINTO插入数据,SELECT查询数据,UPDATE更新数据,DELETE删除数据。熟练掌握这些步骤,并学习处理常见问题和优化数据库性能,才能高效使用MySQL。

mySQL下载完安装不了 mySQL下载完安装不了 Apr 08, 2025 am 11:24 AM

MySQL安装失败的原因主要有:1.权限问题,需以管理员身份运行或使用sudo命令;2.依赖项缺失,需安装相关开发包;3.端口冲突,需关闭占用3306端口的程序或修改配置文件;4.安装包损坏,需重新下载并验证完整性;5.环境变量配置错误,需根据操作系统正确配置环境变量。解决这些问题,仔细检查每个步骤,就能顺利安装MySQL。

mysql下载文件损坏无法安装的修复方案 mysql下载文件损坏无法安装的修复方案 Apr 08, 2025 am 11:21 AM

MySQL下载文件损坏,咋整?哎,下载个MySQL都能遇到文件损坏,这年头真是不容易啊!这篇文章就来聊聊怎么解决这个问题,让大家少走弯路。读完之后,你不仅能修复损坏的MySQL安装包,还能对下载和安装过程有更深入的理解,避免以后再踩坑。先说说为啥下载文件会损坏这原因可多了去了,网络问题是罪魁祸首,下载过程中断、网络不稳定都可能导致文件损坏。还有就是下载源本身的问题,服务器文件本身就坏了,你下载下来当然也是坏的。另外,一些杀毒软件过度“热情”的扫描也可能造成文件损坏。诊断问题:确定文件是否真的损坏

mysql 需要互联网吗 mysql 需要互联网吗 Apr 08, 2025 pm 02:18 PM

MySQL 可在无需网络连接的情况下运行,进行基本的数据存储和管理。但是,对于与其他系统交互、远程访问或使用高级功能(如复制和集群)的情况,则需要网络连接。此外,安全措施(如防火墙)、性能优化(选择合适的网络连接)和数据备份对于连接到互联网的 MySQL 数据库至关重要。

如何针对高负载应用程序优化 MySQL 性能? 如何针对高负载应用程序优化 MySQL 性能? Apr 08, 2025 pm 06:03 PM

MySQL数据库性能优化指南在资源密集型应用中,MySQL数据库扮演着至关重要的角色,负责管理海量事务。然而,随着应用规模的扩大,数据库性能瓶颈往往成为制约因素。本文将探讨一系列行之有效的MySQL性能优化策略,确保您的应用在高负载下依然保持高效响应。我们将结合实际案例,深入讲解索引、查询优化、数据库设计以及缓存等关键技术。1.数据库架构设计优化合理的数据库架构是MySQL性能优化的基石。以下是一些核心原则:选择合适的数据类型选择最小的、符合需求的数据类型,既能节省存储空间,又能提升数据处理速度

MySQL安装后服务无法启动的解决办法 MySQL安装后服务无法启动的解决办法 Apr 08, 2025 am 11:18 AM

MySQL拒启动?别慌,咱来排查!很多朋友安装完MySQL后,发现服务死活启动不了,心里那个急啊!别急,这篇文章带你从容应对,揪出幕后黑手!读完后,你不仅能解决这个问题,还能提升对MySQL服务的理解,以及排查问题的思路,成为一名更强大的数据库管理员!MySQL服务启动失败,原因五花八门,从简单的配置错误到复杂的系统问题都有可能。咱们先从最常见的几个方面入手。基础知识:服务启动流程简述MySQL服务启动,简单来说,就是操作系统加载MySQL相关的文件,然后启动MySQL守护进程。这其中涉及到配置

mysql安装后怎么优化数据库性能 mysql安装后怎么优化数据库性能 Apr 08, 2025 am 11:36 AM

MySQL性能优化需从安装配置、索引及查询优化、监控与调优三个方面入手。1.安装后需根据服务器配置调整my.cnf文件,例如innodb_buffer_pool_size参数,并关闭query_cache_size;2.创建合适的索引,避免索引过多,并优化查询语句,例如使用EXPLAIN命令分析执行计划;3.利用MySQL自带监控工具(SHOWPROCESSLIST,SHOWSTATUS)监控数据库运行状况,定期备份和整理数据库。通过这些步骤,持续优化,才能提升MySQL数据库性能。

See all articles