0

0

Python和JavaScript间交换数据的方法

WBOY

WBOY

发布时间:2023-05-11 23:04:04

|

1540人浏览过

|

来源于亿速云

转载

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('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:

               Draughts                            

Draughts

将新视图添加到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:

可视化柱形图排序交换代码
可视化柱形图排序交换代码

可视化柱形图排序交换代码是利用HTML加CSS代码编程的排序方法,柱形图来展现数据可视化模型,冒泡排序可视化工具,供大家免费下载和在线预览。

下载
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:

        

Draughts

再次重新加载页面,并在浏览器的开发人员工具中检查游戏元素(在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头文件中:

         Draughts         {{ media }}              

重新加载页面并查看源代码,您将看到这带来了两个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代码,如下所示:

您可能需要重新启动服务器以获取新的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方法的调用:

重新加载页面,您将看到我们的跳棋程序已准备就绪,可以开始游戏了。

  • 让我们快速回顾一下我们已经取得的成果:

  • 我们已经打包和解包了自定义Python /  JavaScript类型的数据结构,而无需编写代码来递归该结构。如果我们的GameState对象变得更复杂(例如,“棋子”列表可能变成棋子和国王对象的混合列表,或者状态可能包括游戏历史),则无需重构任何数据打包/拆包逻辑,除了为每个使用的类提供一个适配器对象。

  • 仅提供了解压缩页面数据所需的JS文件-如果我们的游戏应用程序扩展到包括Chess,Go和Othello,并且所有生成的类都已通过Telepath注册,则我们仍然只需要提供与跳棋知识相关的代码。

即使我们使用任意对象,也不需要动态内联JavaScript ——  所有动态数据都以JSON形式传递,并且所有JavaScript代码在部署时都是固定的(如果我们的网站强制执行CSP,这一点很重要)。

相关文章

python速学教程(入门到精通)
python速学教程(入门到精通)

python怎么学习?python怎么入门?python在哪学?python怎么学才快?不用担心,这里为大家提供了python速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

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

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

63

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

31

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

73

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

20

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

7

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

4

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

49

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

11

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 0.7万人学习

Django 教程
Django 教程

共28课时 | 3.1万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号