search

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Ngày đăng: 28/10/2022
Trả lời: 0
Lượt xem: 43

Nếu bạn là một nhà phát triển web thích viết Python qua JavaScript, thì Brython, một triển khai Python chạy trong trình duyệt, có thể là một lựa chọn hấp dẫn.

Show

JavaScript là ngôn ngữ thực tế của phát triển web mặt trước. Động cơ JavaScript tinh vi là một phần vốn có của tất cả các trình duyệt internet hiện đại và tự nhiên thúc đẩy các nhà phát triển mã hóa các ứng dụng web phía trước trong JavaScript. Brython cung cấp những điều tốt nhất của cả hai thế giới bằng cách biến Python thành ngôn ngữ công dân hạng nhất trong trình duyệt và bằng cách truy cập vào tất cả các thư viện JavaScript và API hiện có có sẵn trong trình duyệt.front-end web development. Sophisticated JavaScript engines are an inherent part of all modern Internet browsers and naturally drive developers to code front-end web applications in JavaScript. Brython offers the best of both worlds by making Python a first-class citizen language in the browser and by having access to all the existing JavaScript libraries and APIs available in the browser.

Trong hướng dẫn này, bạn sẽ học cách:

  • Cài đặt Brython trong môi trường địa phương của bạn in your local environment
  • Sử dụng Python trong trình duyệtPython in a browser
  • Viết mã Python tương tác với JavaScriptinteracts with JavaScript
  • Triển khai Python với ứng dụng web của bạnPython with your web application
  • Tạo các phần mở rộng trình duyệt với Pythonbrowser extensions with Python
  • So sánh Brython với các triển khai Python khác cho các ứng dụng webother Python implementations for web applications

Là một nhà phát triển Python trung gian quen thuộc với phát triển web, bạn sẽ tận dụng tối đa hướng dẫn này nếu bạn cũng có một số kiến ​​thức về HTML và JavaScript. Để được bồi dưỡng JavaScript, hãy xem Python vs JavaScript cho Pythonistas.

Bạn có thể tải xuống tài liệu nguồn cho các ví dụ trong hướng dẫn này bằng cách nhấp vào liên kết bên dưới:

Chạy Python trong trình duyệt: Những lợi ích

Mặc dù JavaScript là ngôn ngữ phổ biến của phát triển web mặt trước, nhưng các điểm sau đây có thể áp dụng cho bạn:

  • Bạn có thể không thích viết mã trong JavaScript.
  • Bạn có thể muốn tận dụng các kỹ năng Python của bạn.
  • Bạn có thể không muốn dành thời gian để học JavaScript để khám phá các công nghệ trình duyệt.
  • Bạn có thể không muốn bị buộc phải học và sử dụng JavaScript để triển khai ứng dụng web.

Dù lý do là gì, nhiều nhà phát triển sẽ thích một sự thay thế dựa trên Python cho JavaScript để tận dụng sức mạnh của trình duyệt.

Có một số lợi ích của việc chạy Python trong trình duyệt. Nó cho phép bạn:

  • Thực hiện cùng một mã python trong máy chủ và trình duyệt
  • Làm việc với các API trình duyệt khác nhau bằng cách sử dụng Python
  • Thao tác mô hình đối tượng tài liệu (DOM) với Python
  • Sử dụng Python để tương tác với các thư viện JavaScript hiện có như Vue.js và JQuery
  • Dạy ngôn ngữ Python cho các sinh viên Python với Biên tập viên Brython
  • Giữ cảm giác vui vẻ trong khi lập trình trong Python

Một tác dụng phụ của việc sử dụng Python trong trình duyệt là mất hiệu suất so với cùng một mã trong JavaScript. Tuy nhiên, nhược điểm này không vượt trội hơn bất kỳ lợi ích nào được nêu ở trên.

Thực hiện phát triển web đẳng hình

JavaScript đẳng cấu hoặc JavaScript Universal, nhấn mạnh rằng các ứng dụng JavaScript nên chạy trên cả máy khách và máy chủ. Điều này giả định rằng phần cuối là dựa trên JavaScript, cụ thể là một máy chủ nút. Các nhà phát triển Python sử dụng Flask hoặc Django cũng có thể áp dụng các nguyên tắc đẳng cấu cho Python, miễn là họ có thể chạy Python trong trình duyệt.Universal JavaScript, emphasizes that JavaScript applications should run on both the client and the server. This is assuming that the back end is JavaScript based, namely a Node server. Python developers using Flask or Django can also apply the principles of isomorphism to Python, provided that they can run Python in the browser.

Brython cho phép bạn xây dựng mặt trước trong Python và chia sẻ các mô -đun giữa máy khách và máy chủ. Ví dụ: bạn có thể chia sẻ các chức năng xác thực, như mã sau để bình thường hóa và xác thực số điện thoại của chúng tôi:

 1import re
 2
 3def normalize_us_phone(phone: str) -> str:
 4    """Extract numbers and digits from a given phone number"""
 5    return re.sub(r"[^\da-zA-z]", "", phone)
 6
 7def is_valid_us_phone(phone: str) -> bool:
 8    """Validate 10-digit phone number"""
 9    normalized_number = normalize_us_phone(phone)
10    return re.match(r"^\d{10}$", normalized_number) is not None


 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
6 loại bỏ bất kỳ ký tự không phân giải nào, trong khi 
 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
7 trả về 
 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
8 nếu chuỗi đầu vào chứa chính xác mười chữ số và không có ký tự chữ cái. Mã tương tự có thể được chia sẻ giữa các quy trình chạy trên máy chủ Python và máy khách được xây dựng với Brython.

Truy cập API Web

Trình duyệt Internet phơi bày API Web được tiêu chuẩn hóa thành JavaScript. Các tiêu chuẩn này là một phần của tiêu chuẩn sống HTML. Một số ví dụ API Web bao gồm:

  • Lưu trữ web
  • Web tiền điện tử
  • Công nhân web
  • Lịch sử
  • URL

Brython cho phép bạn cả hai sử dụng API Web và tương tác với JavaScript. Bạn sẽ làm việc với một số API Web trong phần sau.

Thư viện tạo mẫu và JavaScript

Python thường được sử dụng để nguyên mẫu các đoạn mã, cấu trúc ngôn ngữ hoặc ý tưởng lớn hơn. Với Brython, thực tiễn mã hóa chung này sẽ có sẵn trong trình duyệt của bạn. Ví dụ: bạn có thể sử dụng bảng điều khiển Brython hoặc trình soạn thảo tương tác để thử nghiệm một đoạn mã.

Mở trình chỉnh sửa trực tuyến và nhập mã sau:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)

Ở đây, cách thức hoạt động của mã này:

  • Dòng 1 nhập mô -đun 
     1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
    9.     imports the 
     1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
    9 module.
  • Dòng 3 xác định 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    0, chức năng gọi lại mà Lừa gọi sau khi nhận được phản hồi từ 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    1.     defines 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    0, the callback function that’s invoked after getting the response from 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    1.
  • Dòng 6 gọi 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    1 để truy xuất bản dịch của Hello Hello bằng tiếng Pháp bằng API Hellosalut. Lưu ý rằng 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    3 có thể là 
     1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
    8 hoặc 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    5 khi bạn thực thi mã này trong Trình chỉnh sửa Brython. Nó cần phải là 
     1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
    8 nếu bạn thực thi cùng một mã trong bảng điều khiển Brython.     calls 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    1 to retrieve the translation of “hello” in French using the HelloSalut API. Note that 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    3 can be 
     1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
    8 or 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    5 when you execute this code in the Brython editor. It needs to be 
     1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
    8 if you execute the same code in the Brython console.

Nhấp vào Chạy trên ngăn đầu ra để xem kết quả sau:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>

Hãy thử sửa đổi ngôn ngữ từ 


<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
7 thành 

<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
8 và quan sát kết quả. Các mã ngôn ngữ được hỗ trợ bởi API này được liệt kê trong tài liệu Hellosalut.

Bạn có thể sửa đổi đoạn mã trong trình soạn thảo trực tuyến để tiêu thụ API công khai khác. Ví dụ: cố gắng tìm kiếm API công khai ngẫu nhiên từ dự án API công khai:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)

Sao chép mã ở trên vào Trình chỉnh sửa Brython trực tuyến và nhấp vào Chạy để hiển thị kết quả. Ở đây, một ví dụ ở định dạng JSON:

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}

Bởi vì điểm cuối lấy được một dự án ngẫu nhiên, bạn có thể sẽ nhận được một kết quả khác. Để biết thêm thông tin về định dạng JSON, hãy xem làm việc với dữ liệu JSON trong Python.

Bạn có thể sử dụng tạo mẫu để thử mã Python thông thường như bạn muốn trong trình thông dịch Python. Bởi vì bạn trong bối cảnh của một trình duyệt, Brython cũng cung cấp các cách để:

  • Tìm hiểu cách sử dụng API Web
  • Tương tác với mô hình đối tượng tài liệu (DOM)
  • Sử dụng các thư viện JavaScript hiện có như JQuery, D3 và Bokeh cũng như các khung UI JavaScript như Vue.js

Như một lối tắt, bạn có thể tận dụng hầu hết các tính năng được mô tả ở trên bằng cách mở bảng điều khiển hoặc biên tập viên có sẵn trên trang web Brython. Điều này không yêu cầu bạn cài đặt hoặc chạy bất cứ thứ gì trên máy tính cục bộ của bạn. Thay vào đó, nó cung cấp cho bạn một sân chơi trực tuyến để tương tác với cả công nghệ Python và Web.

Dạy Python cho học sinh

Brython vừa là trình biên dịch Python vừa là người phiên dịch được viết bằng JavaScript. Do đó, bạn có thể biên dịch và chạy mã Python trong trình duyệt. Một ví dụ điển hình về tính năng này được trình bày bởi biên tập viên trực tuyến có sẵn trên trang web Brython.

Với biên tập viên trực tuyến, Python đang chạy trong trình duyệt. Ở đó, không cần phải cài đặt Python trên máy và ở đó, không cần phải gửi mã đến máy chủ để được thực thi. Phản hồi là ngay lập tức cho người dùng và cách tiếp cận này không làm lộ ra phần cuối của các tập lệnh độc hại. Học sinh có thể thử nghiệm với Python trên bất kỳ thiết bị nào với trình duyệt hoạt động, chẳng hạn như điện thoại hoặc Chromebook, ngay cả với kết nối internet đốm.

Tính đến hiệu suất

Trang web Brython lưu ý rằng tốc độ thực hiện của triển khai có thể so sánh với CPython. Nhưng Brython được thực hiện trong trình duyệt và tham chiếu trong môi trường này là JavaScript được nướng vào động cơ trình duyệt. Kết quả là, hy vọng Brython sẽ chậm hơn JavaScript viết tay, được điều chỉnh tốt.

Brython biên dịch mã Python vào JavaScript và sau đó thực thi mã được tạo. Các bước này có tác động đến hiệu suất tổng thể và Brython có thể không phải lúc nào cũng đáp ứng các yêu cầu về hiệu suất của bạn. Trong một số trường hợp, bạn có thể cần ủy thác một số thực thi mã cho JavaScript hoặc thậm chí là WebAssugging. Bạn có thể thấy cách xây dựng webassugging và cách sử dụng mã kết quả trong Python trong phần trên WebAssugging.

Tuy nhiên, don lồng cho phép hiệu suất nhận thức làm bạn mất cách sử dụng Brython. Ví dụ: nhập các mô -đun Python có thể dẫn đến việc tải xuống mô -đun tương ứng từ máy chủ. Để minh họa tình huống này, hãy mở bảng điều khiển Brython và thực thi mã sau:

Độ trễ cho đến khi dấu nhắc được hiển thị (390 ms trên máy kiểm tra) là đáng chú ý. Điều này là do Brython phải tải xuống 


<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
9 và các phụ thuộc của nó và sau đó biên dịch các tài nguyên đã tải xuống. Tuy nhiên, từ thời điểm đó, không có sự chậm trễ trong khi thực hiện các chức năng có sẵn trong 

<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
9. Ví dụ: bạn có thể tạo một định danh độc đáo toàn cầu ngẫu nhiên, phiên bản UUID 4, với mã sau:

>>>

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')

Gọi 

$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
1 tạo đối tượng 
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
2, có biểu diễn chuỗi được in trong bảng điều khiển. Gọi 
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
1 trả về ngay lập tức và nhanh hơn nhiều so với việc nhập ban đầu của mô -đun 

<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
9.

Vui chơi

Nếu bạn đang đọc hướng dẫn này, thì bạn có thể quan tâm đến việc viết mã Python trong trình duyệt. Nhìn thấy mã Python được thực hiện trong trình duyệt rất thú vị đối với hầu hết các Pythonistas và đánh thức cảm giác vui vẻ và khả năng vô tận.

Tác giả của Brython, Pierre Quentel và những người đóng góp cho dự án cũng giữ niềm vui của Python trong khi thực hiện nhiệm vụ lớn là làm cho ngôn ngữ này tương thích với trình duyệt web.

Để chứng minh điều đó, hãy trỏ trình duyệt của bạn vào bảng điều khiển tương tác Brython và tại dấu nhắc Python, nhập như sau:

Tương tự như kinh nghiệm của Python trên máy địa phương của bạn, Brython biên dịch và thực hiện các hướng dẫn trên con ruồi và in Zen of Python. Nó diễn ra trong trình duyệt và thực thi mã Python không yêu cầu bất kỳ tương tác nào với máy chủ back-end:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Bạn cũng có thể thử một quả trứng Phục sinh Python cổ điển khác trong cùng một môi trường trình duyệt với mã sau:

Brython nắm lấy những mẩu hài hước tương tự mà bạn sẽ tìm thấy trong triển khai tham chiếu Python.

Bây giờ bạn đã quen thuộc với những điều cơ bản khi làm việc với Brython, bạn sẽ khám phá các tính năng nâng cao hơn trong các phần sau.

Cài đặt Brython

Thử nghiệm với bảng điều khiển trực tuyến Brython, là một khởi đầu tốt, nhưng nó đã giành chiến thắng cho phép bạn triển khai mã Python của mình. Có một số tùy chọn khác nhau để cài đặt Brython trong môi trường địa phương:

  • CDN
  • GitHub
  • Pypi
  • NPM

Hướng dẫn cho từng phương pháp này được nêu dưới đây, nhưng vui lòng bỏ qua trực tiếp cách tiếp cận ưa thích của bạn nếu bạn đã đưa ra quyết định.

Cài đặt CDN

Mạng phân phối nội dung (CDN) là một mạng lưới các máy chủ cho phép cải thiện hiệu suất và tốc độ tải xuống cho nội dung trực tuyến. Bạn có thể cài đặt các thư viện Brython từ một vài CDN khác nhau:

  • CDNJ
  • JSdelivr
  • CDNPKG

Bạn có thể chọn cài đặt này nếu bạn muốn triển khai một trang web tĩnh và thêm một số hành vi động vào các trang của bạn với chi phí tối thiểu. Bạn có thể nghĩ về tùy chọn này để thay thế cho jQuery, ngoại trừ sử dụng Python thay vì JavaScript.

Để minh họa việc sử dụng Brython với CDN, bạn sẽ sử dụng CDNJ. Tạo một tệp với mã HTML sau:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>

Dưới đây là các yếu tố chính của trang HTML này:

  • Dòng 5 tải 

    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    5 từ cdnjs. loads 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    5 from CDNJS.

  • Dòng 8 thực thi 

    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6 Khi tài liệu đã tải xong. 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6 đọc mã Python trong phạm vi hiện tại và biên dịch nó thành JavaScript. Xem phần Hiểu cách Brython làm việc để biết thêm chi tiết.     executes 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6 when the document has finished loading. 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6 reads the Python code in the current scope and compiles it to JavaScript. See the section Understanding How Brython Works for more details.

  • Dòng 9 Đặt loại tập lệnh thành 

    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    8. Điều này chỉ ra cho Brython mà mã cần được biên dịch và thực thi. sets the type of the script to 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    8. This indicates to Brython which code needs to be compiled and executed.

  • Dòng 10 nhập 

    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    9, một mô -đun Brython hiển thị các đối tượng và chức năng cho phép tương tác với trình duyệt. imports 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    9, a Brython module that exposes objects and functions allowing interaction with the browser.

  • Dòng 11 gọi 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    00, hiển thị hộp thông báo với văn bản 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    01     calls 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    00, which displays a message box with the text 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    01

Lưu tệp dưới dạng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02, sau đó bấm đúp vào tệp để mở nó bằng trình duyệt Internet mặc định của bạn. Trình duyệt hiển thị hộp thông báo với 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
01 Nhấp OK để đóng hộp thông báo:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Để giảm kích thước của tệp đã tải xuống, đặc biệt là trong sản xuất, hãy xem xét sử dụng phiên bản giảm thiểu của 

$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
5:

 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>

Phiên bản giảm thiểu sẽ giảm thời gian tải xuống và độ trễ cảm nhận theo quan điểm của người dùng. Để hiểu cách thức hoạt động của Brython, bạn sẽ học được cách Brython được tải bởi trình duyệt và cách thực thi mã Python trên.

Cài đặt GitHub

Cài đặt GitHub rất giống với cài đặt CDN, nhưng nó cho phép bạn triển khai các ứng dụng Brython với phiên bản phát triển mới nhất. Bạn có thể sao chép ví dụ trước và sửa đổi URL trong phần tử 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
05 để có được 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 sau đây:


<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>

Sau khi lưu tệp này trong thư mục cục bộ, nhấp đúp vào 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 để hiển thị trong trình duyệt cùng một trang bạn thu được với cài đặt CDN.

Cài đặt PYPI

Cho đến nay, bạn không cần phải cài đặt bất cứ thứ gì trong môi trường địa phương của bạn. Thay vào đó, bạn đã chỉ ra trong tệp HTML nơi trình duyệt có thể tìm thấy gói Brython. Khi trình duyệt mở trang, nó sẽ tải xuống tệp Brython JavaScript từ môi trường thích hợp, từ CDN hoặc GitHub.

Brython cũng có sẵn để cài đặt cục bộ trên PYPI. Cài đặt PYPI dành cho bạn nếu:

  • Bạn cần kiểm soát và tùy chỉnh nhiều hơn về môi trường Brython vượt ra ngoài những gì có sẵn khi chỉ vào tệp CDN.
  • Nền tảng của bạn là ở Python và bạn đã quen thuộc với 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    08.
  • Bạn muốn cài đặt cục bộ để giảm thiểu độ trễ mạng trong quá trình phát triển.
  • Bạn muốn quản lý dự án của mình và cung cấp một cách kiểu hạt hơn.

Cài đặt Brython từ PYPI Cài đặt 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
09, một công cụ dòng lệnh mà bạn có thể sử dụng để tự động hóa các chức năng như tạo mẫu dự án hoặc các mô-đun đóng gói và gói để đơn giản hóa việc triển khai dự án Brython.

Để biết thêm chi tiết, bạn có thể tham khảo tài liệu cài đặt cục bộ để xem các khả năng của 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
10 có sẵn trong môi trường của bạn sau khi cài đặt. 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
10 chỉ có sẵn với loại cài đặt này. Nó có sẵn nếu bạn cài đặt từ CDN hoặc với NPM. Bạn sẽ thấy 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
10 hoạt động sau trong hướng dẫn.

Trước khi cài đặt Brython, bạn muốn tạo môi trường ảo Python cho dự án này.

Trên Linux hoặc MacOS, thực thi các lệnh sau:

$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3

Trên Windows, bạn có thể tiến hành như sau:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
0

Bạn vừa tạo ra một môi trường Python chuyên dụng cho dự án của bạn và được cập nhật 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
08 với phiên bản mới nhất.

Trong các bước tiếp theo, bạn sẽ cài đặt Brython và tạo một dự án mặc định. Các lệnh giống nhau trên Linux, MacOS và Windows:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
1

Bạn đã cài đặt Brython từ Pypi, tạo một thư mục trống có tên 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
14 và tạo bộ xương dự án mặc định bằng cách thực hiện 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
10 được sao chép trong môi trường ảo của bạn trong quá trình cài đặt.

Trong thư mục 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
14, 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
17 đã tạo một mẫu dự án và tạo các tệp sau:

Tập tinSự mô tả
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
18		Tài liệu về cách chạy máy chủ HTTP Python và mở 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
19
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
5		Core Brython Engine (trình biên dịch, thời gian chạy và giao diện trình duyệt)
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
21		Thư viện tiêu chuẩn Brython
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
19		Mã nguồn của trang HTML demo Brython
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02		Ví dụ cơ bản mà bạn có thể sử dụng làm trang bắt đầu cho một dự án
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
24		Cơ sở dữ liệu ký tự Unicode (UCD) được sử dụng bởi 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
25

Để kiểm tra dự án web mới được tạo này, bạn có thể khởi động một máy chủ web Python cục bộ với các lệnh sau:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
2

Khi bạn thực thi 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
26, Python bắt đầu một máy chủ web trên cổng 8000. Trang mặc định dự kiến ​​là 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02. Trình duyệt Internet của bạn đến 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
28 để hiển thị một trang với văn bản 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
29:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Để biết ví dụ đầy đủ hơn, bạn có thể thay đổi URL trong thanh địa chỉ trình duyệt thành 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
30. Bạn sẽ thấy một trang tương tự như trang demo Brython:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Với phương pháp này, các tệp JavaScript Brython được tải trực tiếp từ môi trường địa phương của bạn. Lưu ý thuộc tính 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
31 trong phần tử 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
05 của 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
3

HTML ở trên được thụt vào để tăng cường khả năng đọc trong hướng dẫn này. Lệnh 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
34 không thụt đầu vào mẫu HTML ban đầu mà nó tạo ra.

Tệp HTML giới thiệu một vài tính năng Brython mới:

  • Dòng 6 tải 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    21, Thư viện tiêu chuẩn Python được biên dịch cho JavaScript. loads 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    21, the Python standard library compiled to JavaScript.

  • Dòng 8 gọi 

    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6 với đối số 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    37 để in các thông báo lỗi vào bảng điều khiển trình duyệt.     invokes 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6 with the argument 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    37 to print error messages to the browser console.

  • Dòng 10 nhập mô -đun 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    38 từ 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    9. Các chức năng để truy cập DOM có sẵn trong 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    38.     imports the 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    38 module from 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    9. Functions to access the DOM are available in 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    38.

  • Dòng 11 cho thấy một biểu tượng mới (

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    41) được thêm vào Python dưới dạng đường cú pháp. Trong ví dụ này, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    42 là một sự thay thế cho 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    43. Để biết chi tiết về các chức năng DOM này, hãy xem 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    44.     shows a new symbol (
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    41) added to Python as syntactic sugar. In this example, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    42 is a substitute for 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    43. For details about these DOM functions, check out 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    44.

Toán tử 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
41 được sử dụng để thêm nút con vào một phần tử của DOM. Bạn có thể thấy nhiều chi tiết hơn về việc sử dụng các toán tử dành riêng cho Brython trong API DOM trong Brython.

Cài đặt NPM

Nếu bạn rất thành thạo trong hệ sinh thái JavaScript, thì việc cài đặt NPM có thể thu hút bạn. Node.js và NPM được yêu cầu trước khi thực hiện cài đặt này.

Cài đặt với NPM sẽ cung cấp các mô -đun Brython JavaScript có sẵn trong dự án của bạn như bất kỳ mô -đun JavaScript nào khác. Sau đó, bạn có thể tận dụng công cụ JavaScript yêu thích của mình để kiểm tra, đóng gói và triển khai trình thông dịch và thư viện Brython. Cài đặt này là lý tưởng nếu bạn đã cài đặt các thư viện JavaScript hiện tại với NPM.

Giả sử rằng bạn đã cài đặt NPM trên hệ thống của mình, hãy tạo tệp 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
46 mặc định bằng cách gọi 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
47 trong một thư mục trống:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
4

Để tích hợp Brython vào dự án của bạn, hãy thực hiện lệnh sau:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
5

Bạn có thể bỏ qua các cảnh báo và lưu ý rằng Brython đã được thêm vào dự án của bạn. Để xác nhận, hãy mở 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
46 và đảm bảo bạn có thuộc tính 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
49 trỏ đến một đối tượng chứa mục 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
50:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
6

Đối với các ví dụ trước, bạn có thể tạo 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 sau đây và mở nó bằng trình duyệt của bạn. Một máy chủ web không cần thiết cho ví dụ này vì trình duyệt có thể tải tệp JavaScript 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
52 cục bộ:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
7

Trình duyệt hiển thị 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 và tải 
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
5 từ URL 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
55 trong 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02. Trong ví dụ này, bạn đã thấy một cách khác để cài đặt Brython tận dụng hệ sinh thái JavaScript. Trong phần còn lại của hướng dẫn, bạn sẽ viết mã dựa trên cài đặt CDN hoặc cài đặt PYPI.

Tóm tắt các tùy chọn cài đặt Brython

Brython có một chân trong thế giới Python và một người khác trong JavaScript. Các tùy chọn cài đặt khác nhau minh họa tình huống công nghệ chéo này. Chọn cài đặt cảm thấy hấp dẫn nhất đối với bạn dựa trên nền của bạn.

Bảng sau đây cung cấp cho bạn một số hướng dẫn:

Loại cài đặtĐịnh nghĩa bài văn
CDN Bạn muốn triển khai một trang web tĩnh và thêm một số hành vi động vào các trang của bạn với chi phí tối thiểu. Bạn có thể nghĩ về tùy chọn này để thay thế cho jQuery, ngoại trừ sử dụng Python thay vì JavaScript.
GitHub Điều này tương tự như cài đặt CDN, nhưng bạn muốn thử nghiệm phiên bản cạnh chảy máu của Brython.
Pypi Nền tảng của bạn là trong Python. Bạn đã quen thuộc với 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
08 và cách tạo môi trường ảo Python. Dự án của bạn có thể yêu cầu một số tùy chỉnh mà bạn muốn duy trì trong môi trường địa phương hoặc trong kho lưu trữ mã nguồn của bạn. Bạn muốn có nhiều quyền kiểm soát hơn đối với gói mà bạn sẽ phân phối. Bạn muốn triển khai trong một môi trường khép kín mà không cần truy cập Internet.
NPM Nền tảng của bạn là trong JavaScript. Bạn đã quen thuộc với các công cụ JavaScript, cụ thể là Node.js và NPM. Dự án của bạn có thể yêu cầu một số tùy chỉnh mà bạn muốn duy trì trong môi trường địa phương hoặc trong kho lưu trữ mã nguồn của bạn. Bạn muốn có nhiều quyền kiểm soát hơn đối với các gói bạn sẽ phân phối. Bạn muốn triển khai trong một môi trường khép kín mà không cần truy cập Internet.

Bảng này tóm tắt các tùy chọn cài đặt khác nhau có sẵn cho bạn. Trong phần tiếp theo, bạn sẽ tìm hiểu thêm về cách Brython hoạt động.

Hiểu cách Brython hoạt động

Chuyến tham quan của bạn về các cách khác nhau để cài đặt Brython đã cho bạn một số manh mối cấp cao về cách thực hiện hoạt động. Ở đây, một bản tóm tắt về một số đặc điểm mà bạn đã phát hiện ra cho đến nay trong hướng dẫn này:

  • Nó là một triển khai Python trong JavaScript.
  • Nó có một dịch giả Python cho JavaScript và thực hiện thời gian chạy trong trình duyệt.
  • Nó hiển thị hai thư viện chính có sẵn dưới dạng tệp JavaScript:
    1. $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
      5 là cốt lõi của ngôn ngữ Brython, như chi tiết trong các thành phần cốt lõi của Brython.       is the core of the Brython language, as detailed in Brython Core Components.
    2.  1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
      21 là thư viện tiêu chuẩn Brython.       is the Brython standard library.
  • Nó gọi 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6, biên dịch mã Python có trong các thẻ 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    55 với loại 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    8.

Trong các phần sau, bạn sẽ xem xét chi tiết hơn về cách Brython hoạt động.

Các thành phần cốt lõi Brython

Cốt lõi của Brython được chứa trong 

$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
5 hoặc trong 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
64, phiên bản giảm thiểu của động cơ Brython. Cả hai đều bao gồm các thành phần chính sau:

  • $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6 là hàm JavaScript chính được phơi bày trong không gian tên toàn cầu JavaScript. Bạn có thể thực hiện bất kỳ mã Python nào mà không gọi chức năng này. Đây là chức năng JavaScript duy nhất mà bạn phải gọi rõ ràng. is the main JavaScript function exposed in the JavaScript global namespace. You can’t execute any Python code without calling this function. This is the only JavaScript function that you should have to call explicitly.

  •  1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    66 là một đối tượng toàn cầu JavaScript chứa tất cả các đối tượng nội bộ cần thiết để chạy các tập lệnh Python. Đối tượng này được sử dụng trực tiếp khi bạn viết các ứng dụng Brython. Nếu bạn nhìn vào mã Brython, cả JavaScript và Python, thì bạn sẽ thấy sự xuất hiện thường xuyên của 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    66. Bạn không cần sử dụng đối tượng này, nhưng bạn nên biết về nó khi bạn thấy lỗi hoặc khi bạn muốn gỡ lỗi mã của mình trong bảng điều khiển trình duyệt.     is a JavaScript global object that holds all internal objects needed to run Python scripts. This object isn’t used directly when you write Brython applications. If you look at the Brython code, both JavaScript and Python, then you’ll see regular occurrences of 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    66. You don’t need to use this object, but you should be aware of it when you see an error or when you want to debug your code in the browser console.

  • Các loại tích hợp là triển khai các loại Python tích hợp trong JavaScript. Ví dụ: py_int.js, py_string.js và py_dicts.js là các triển khai tương ứng của 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    68, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    69 và 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    70.     are implementations of the Python built-in types in JavaScript. For example, py_int.js, py_string.js and py_dicts.js are respective implementations of 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    68, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    69 and 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    70.

  • $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    9 là mô-đun trình duyệt hiển thị các đối tượng JavaScript thường được sử dụng trong ứng dụng Web Front-end, như giao diện DOM sử dụng 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    38 và cửa sổ trình duyệt bằng đối tượng 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    73.     is the browser module that exposes the JavaScript objects commonly used in a front-end web application, like the DOM interfaces using 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    38 and the browser window using the 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    73 object.

Bạn sẽ thấy từng thành phần này trong hành động khi bạn làm việc thông qua các ví dụ trong hướng dẫn này.

Thư viện tiêu chuẩn Brython

Bây giờ bạn có một ý tưởng tổng thể về tệp Brython cốt lõi, 

$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
5, bạn sẽ tìm hiểu về tệp đồng hành của nó, 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
21.

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
21 phơi bày thư viện tiêu chuẩn Python. Khi tệp này được tạo, Brython biên dịch thư viện tiêu chuẩn Python vào JavaScript và kết hợp kết quả vào gói 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
21.

Brython dự định sẽ càng gần càng tốt với CPYThon, việc thực hiện tham chiếu Python. Để biết thêm thông tin về CPython, hãy xem hướng dẫn của bạn về mã nguồn CPython và bên trong CPython.

Khi Brython đang chạy trong bối cảnh của trình duyệt web, nó có một số hạn chế. Ví dụ: trình duyệt không cho phép truy cập trực tiếp vào hệ thống tệp, do đó, việc mở một tệp với 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
78 là không thể. Các chức năng không liên quan đến trình duyệt web có thể không được thực hiện. Ví dụ: mã bên dưới đang chạy trong môi trường Brython:

>>>

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
8

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
79 nêu ra một ngoại lệ vì nó không an toàn để xóa một tệp cục bộ khỏi môi trường trình duyệt và API tệp và thư mục thư mục chỉ là một đề xuất dự thảo.

Brython chỉ hỗ trợ các mô -đun Python bản địa. Nó không hỗ trợ các mô -đun Python được xây dựng trong C trừ khi chúng được thực hiện lại trong JavaScript. Ví dụ, 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
80 được viết bằng C trong CPython và được triển khai trong JavaScript trong Brython. Bạn có thể tham khảo danh sách các mô -đun trong phân phối Brython để so sánh với việc triển khai CPython.

Bạn cần bao gồm 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
21 hoặc 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
82 để nhập các mô -đun từ thư viện tiêu chuẩn Python.

Brython trong hành động

Tại thời điểm này, bạn có thể tự hỏi làm thế nào Brython hành xử trong một trình duyệt mà chỉ nhận thức được công cụ JavaScript của nó. Việc sử dụng lại các ví dụ trước và các công cụ có sẵn trong trình duyệt, bạn sẽ tìm hiểu về quy trình liên quan đến việc thực thi mã Python trong trình duyệt.

Trong phần cài đặt máy chủ CDN, bạn đã thấy ví dụ sau:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
9

Khi tải và phân tích trang HTML, 

$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
6 thực hiện các bước sau:

  1. Đọc mã Python có trong phần tử 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    84
  2. Biên dịch mã Python với JavaScript tương đương
  3. Đánh giá mã JavaScript kết quả với 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    85

Trong ví dụ trên, mã Python được nhúng trong tệp HTML:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
0

Một tùy chọn khác là tải xuống mã Python từ một tệp riêng biệt:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
1

Trong trường hợp này, tệp Python sẽ trông như thế này:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
2

Tách mã Python với mã HTML là một cách tiếp cận sạch hơn và cho phép bạn tận dụng lợi ích và chức năng của các trình chỉnh sửa mã. Hầu hết các biên tập viên đều có hỗ trợ cho JavaScript nhúng trong HTML, nhưng họ không hỗ trợ Python trong HTML.

Brython sườn bên trong

Phần này cung cấp một chuyến đi sâu hơn vào quá trình chuyển đổi mã Python thành JavaScript. Nếu bạn không quan tâm đến những chi tiết này, thì hãy bỏ qua phần này, vì nó không bắt buộc để hiểu phần còn lại của hướng dẫn. Để minh họa quá trình này và xem qua các phần bên trong của Brython, hãy thực hiện các bước sau:

  1. Mở trang chủ Brython.
  2. Mở bảng điều khiển web với CMD+ALT+I trên MAC hoặc Ctrl+Shift+I trên Windows và Linux.Cmd+Alt+I on Mac or Ctrl+Shift+I on Windows and Linux.

Trong trình duyệt JavaScript REPLED, Kiểu và thực thi mã sau:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
3

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
86 phân tích cú pháp và biên dịch mã Python được cung cấp cho JavaScript và sau đó thực thi JavaScript trong trình duyệt web. Bạn sẽ nhận được kết quả sau:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Áp dụng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
85 cho mã Brython in 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
88 trong bảng điều khiển trình duyệt. Hàm JavaScript trả về 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
89, đây là giá trị trả về mặc định cho một hàm trong JavaScript.

Khi bạn xây dựng một ứng dụng Brython, bạn không cần phải gọi rõ ràng một chức năng trong mô -đun JavaScript 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
66. Ví dụ này chỉ được cung cấp để chứng minh cách Brython vận hành đằng sau hậu trường. Nhận thức được 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
66 có thể giúp bạn đọc mã Brython và thậm chí đóng góp cho dự án khi bạn có thêm kinh nghiệm. Nó cũng sẽ giúp bạn hiểu rõ hơn về các ngoại lệ có thể được hiển thị trong bảng điều khiển trình duyệt.

Đối tượng JavaScript 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
66 có sẵn trong phạm vi toàn cầu của JavaScript và bạn có thể truy cập nó với bảng điều khiển JavaScript trình duyệt.

Sử dụng Brython trong trình duyệt

Tại thời điểm này, bạn có đủ sự hiểu biết về Brython để làm việc với các ví dụ chi tiết hơn. Trong phần này, bạn sẽ thực hiện một máy tính Base64 để thử nghiệm trong trình duyệt với API DOM và các chức năng khác thường chỉ có sẵn từ JavaScript.

Bạn có thể tải xuống mã nguồn cho các ví dụ trong hướng dẫn này bằng cách nhấp vào liên kết bên dưới:

Bạn sẽ bắt đầu bằng cách học cách thao túng DOM bằng Python và HTML.

API DOM trong Brython

Để thử nghiệm các thao tác DOM có sẵn trong Brython, bạn sẽ xây dựng một biểu mẫu để mã hóa một chuỗi thành Base64. Mẫu hoàn thành sẽ trông như thế này:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Tạo tệp HTML sau đây và đặt tên cho nó 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
4

HTML ở trên tải các tài nguyên tĩnh, xác định bố cục UI và bắt đầu tổng hợp Python:

  • Dòng 7 tải Bảng kiểu PureCSS để cải thiện kiểu HTML mặc định. Điều này là cần thiết để Brython làm việc. loads the PureCSS style sheet to improve on the default HTML style. This isn’t necessary for Brython to work.

  • Dòng 9 tải phiên bản giảm thiểu của động cơ Brython. loads the minimized version of the Brython engine.

  • Dòng 12 tải phiên bản giảm thiểu của thư viện tiêu chuẩn Brython. loads the minimized version of the Brython standard library.

  • Dòng 14 tải 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    94, xử lý logic động của trang HTML tĩnh này. Lưu ý việc sử dụng 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    95. Nó giúp đồng bộ hóa việc tải và đánh giá tài nguyên và đôi khi cần thiết để đảm bảo rằng Brython và bất kỳ tập lệnh Python nào cũng được tải đầy đủ trước khi thực hiện 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6.     loads 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    94, which handles the dynamic logic of this static HTML page. Note the use of 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    95. It helps synchronize the loading and evaluation of resources and is sometimes needed to make sure that Brython and any Python scripts are fully loaded before executing 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6.

  • Dòng 21 mô tả một trường 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    97. Trường này lấy chuỗi để mã hóa như một đối số. describes an 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    97 field. This field takes the string to encode as an argument.

  • Các dòng 22 đến 25 Xác định mặc định 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    98 kích hoạt logic chính của trang. Bạn có thể thấy logic này được thực hiện trong 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    94 dưới đây.     define the default 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    98 that triggers the main logic of the page. You can see this logic implemented in 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    94 below.

  • Dòng 26 xác định 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    98 để xóa dữ liệu và các yếu tố trên trang. Điều này được thực hiện trong 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    94 dưới đây.     defines a 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    98 to clear up data and elements on the page. This is implemented in 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    94 below.

  • Dòng 29 tuyên bố 

    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    02 dự định là người giữ chỗ cho một bảng. declares a 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    02 intended to be a placeholder for a table.

Mã Python liên quan, 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
94, như sau:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
5

Mã Python hiển thị định nghĩa về các hàm gọi lại và cơ chế để thao tác với DOM:

  • Dòng 1 nhập các mô -đun mà bạn sử dụng để tương tác với mã API của DOM và trình duyệt trong 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    64. imports the modules that you use to interact with the DOM and the Browser API code in 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    64.

  • Dòng 2 Nhập khẩu 

    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    05, có sẵn trong Thư viện tiêu chuẩn Brython, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    82.     imports 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    05, which is available in the Brython standard library, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    82.

  • Dòng 4 tuyên bố một từ điển mà bạn sẽ sử dụng để lưu trữ dữ liệu trong suốt vòng đời của trang HTML. declares a dictionary that you’ll use to store data during the life of the HTML page.

  • Dòng 6 xác định trình xử lý sự kiện 

    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    07, mã hóa giá trị base64 của văn bản được nhập trong trường đầu vào với ID 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    08. Đây là một chức năng gọi lại lấy một sự kiện làm đối số. Đối số này được sử dụng trong hàm nhưng được yêu cầu trong Brython và là tùy chọn trong JavaScript. Như một quy ước, bạn có thể sử dụng 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    09 như một người giữ chỗ giả. Một ví dụ về việc sử dụng này được mô tả trong Hướng dẫn kiểu Google Python.     defines the event handler 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    07, which encodes the Base64 value of the text entered in the input field with ID 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    08. This is a callback function that takes an event as an argument. This argument isn’t used in the function but is required in Brython and is optional in JavaScript. As a convention, you can use 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    09 as a dummy placeholder. An example of this usage is described in the Google Python Style Guide.

  • Dòng 7 Lấy giá trị của phần tử DOM được xác định với 

    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    08. retrieves the value of the DOM element identified with 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    08.

  • Dòng 18 xác định trình xử lý sự kiện 

    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    11, xóa dữ liệu và trình bày dữ liệu trên trang này. defines the event handler 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    11, which clears the data and presentation of the data on this page.

  • Dòng 22 xác định 

    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    12, lấy dữ liệu có trong 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    13 và hiển thị nó theo biểu mẫu trên trang.     defines 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    12, which takes the data contained in the 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    13 and displays it under the form on the page.

  • Dòng 26 Lấy phần tử DOM với ID 

    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    08. retrieves the DOM element with the ID 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    08.

  • Dòng 29 Xóa giá trị của phần tử DOM với ID 

    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    08. clears the value of the DOM element with the ID 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    08.

  • Dòng 31 liên kết sự kiện 

    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    16 của nút 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    17 với 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    07.     binds the 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    16 event of the 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    17 button to 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    07.

  • Dòng 32 liên kết sự kiện 

    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    16 của nút 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    20 với 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    11.     binds the 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    16 event of the 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    20 button to 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    11.

Để thao túng DOM, Brython sử dụng hai toán tử:

  1.  1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    41 là một toán tử mới, cụ thể cho Brython, thêm một đứa trẻ vào một nút. Bạn có thể thấy một vài ví dụ về việc sử dụng này trong 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    12, được xác định trên dòng 22.     is a new operator, specific to Brython, that adds a child to a node. You can see a few examples of this usage in 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    12, defined on line 22.

  2. {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    24 là một thay thế cho 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    25 và thêm các nút anh chị em.     is a substitute for 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    25 and adds sibling nodes.

Bạn có thể thấy cả hai toán tử trong câu lệnh sau được lấy từ 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
12:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
6

Bạn có thể đọc mã trên như là Thêm vào phần tử bảng Phần tử đầu bảng chứa phần tử hàng bảng bao gồm hai phần tử ô dữ liệu bảng liền kề. Nó được hiển thị trong trình duyệt như mã HTML sau:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
7

Mã HTML hiển thị cấu trúc lồng nhau cho hàng tiêu đề của phần tử bảng. Ở đây, một định dạng dễ đọc hơn của cùng một mã:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
8

Để quan sát kết quả trong bảng điều khiển Brython, bạn có thể nhập khối mã sau:

>>>

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
9

Để thực hiện mã đầy đủ, bạn cần khởi động một máy chủ web. Như trước đây, bạn khởi động máy chủ web Python tích hợp trong cùng thư mục với hai tệp 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 và 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
94:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
0

Sau khi bắt đầu máy chủ web, hãy trỏ trình duyệt của bạn đến 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
28. Trang trông như thế này:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Bạn sẽ mở rộng ví dụ này trong phần API Web Trình duyệt bằng cách cho phép dữ liệu được lưu trữ giữa các trang tải lại.

Nhập khẩu trong Brython

Bạn có thể sử dụng 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
30 để truy cập các mô -đun Python hoặc các mô -đun Brython được biên dịch cho JavaScript.

Các mô -đun Python là các tệp có tiện ích mở rộng 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
31 trong thư mục gốc của dự án của bạn hoặc, đối với gói Python, trong một thư mục con chứa tệp 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
32. Để nhập các mô -đun Python trong mã Brython của bạn, bạn cần bắt đầu một máy chủ web. Để biết thêm về các mô -đun Python, hãy xem các mô -đun và gói Python - giới thiệu.

Để khám phá cách nhập các mô -đun Python vào mã Brython của bạn, hãy làm theo các hướng dẫn được mô tả trong phần cài đặt với PYPI, tạo và kích hoạt môi trường ảo Python, cài đặt Brython và sửa đổi 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 như sau:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
1

Tệp HTML ở trên hiển thị các mô -đun được nhập từ động cơ lõi (

$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
9), từ thư viện tiêu chuẩn (
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
35) và từ một mô -đun Python cục bộ (
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
36). Tại đây, nội dung của 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
37:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
2

Mô -đun này thực hiện 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
38, một trong các công thức nấu ăn 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
39. 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
38 trả về n phần tử đầu tiên của một điều đáng tin cậy nhất định. Nó dựa vào 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
41.

Nếu bạn cố gắng mở 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 từ hệ thống tệp bằng trình duyệt của mình, thì bạn sẽ gặp lỗi sau trong bảng điều khiển trình duyệt:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
3

Nhập mô -đun Python yêu cầu bắt đầu một máy chủ web cục bộ. Bắt đầu một máy chủ web cục bộ và trỏ trình duyệt của bạn đến 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
28. Bạn sẽ xem trang HTML sau:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Với một máy chủ web đang chạy, trình duyệt đã có thể tìm nạp mô -đun 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
37 khi 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
45 được thực thi. Kết quả của cả hai giá trị, 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
46 và 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
47, được chèn vào tệp HTML bằng hai dòng cuối cùng của tập lệnh Python nhúng và được hiển thị bởi trình duyệt.

Giảm kích thước nhập khẩu

Trong thư mục dự án của ví dụ trước, để giảm kích thước của các mô -đun JavaScript đã nhập và với các mô -đun Python đi kèm với JavaScript, bạn có thể sử dụng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
10 với tùy chọn 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
49:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
4

Điều này sẽ tạo 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
50 và bạn có thể sửa đổi phần tử ____105 của 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 như sau:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
5

Dòng 4 Thay đổi nguồn tập lệnh gốc từ 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
21 thành 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
50.

Mở 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 với trình duyệt của bạn hoặc trỏ trình duyệt vào máy chủ cục bộ hiển thị cùng một trang HTML. Lưu ý các điểm sau:

  1. Bạn có thể hiển thị trang HTML trong trình duyệt của mình mà không cần chạy máy chủ web.
  2. Bạn không cần phải phân phối 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    37 vì mã đã được chuyển đổi thành JavaScript và đi kèm trong 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    50.
  3. Bạn không cần phải tải 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    21.

Công cụ dòng lệnh 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
59 cung cấp một giải pháp để loại bỏ mã không cần thiết khỏi các thư viện tiêu chuẩn và biên dịch mô-đun Python của bạn thành mã JavaScript. Điều này giúp đóng gói ứng dụng của bạn và kết quả tải xuống tài nguyên nhỏ hơn.

Tương tác với JavaScript

Brython cho phép mã Python tương tác với mã JavaScript. Mẫu phổ biến nhất là truy cập JavaScript từ Brython. Điều ngược lại, mặc dù có thể, là phổ biến. Bạn có thể thấy một ví dụ về JavaScript gọi chức năng Python trong phần Kiểm tra đơn vị JavaScript.

JavaScript

Cho đến thời điểm này, bạn đã trải nghiệm một vài kịch bản trong đó mã Python tương tác với mã JavaScript. Cụ thể, bạn đã có thể hiển thị một hộp thông báo bằng cách gọi 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
60.

Bạn có thể thấy 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
61 hoạt động trong ba ví dụ sau đây chạy trong bảng điều khiển Brython, không phải trong Shell phiên dịch Cpython tiêu chuẩn:

>>>

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
6

Hoặc bạn có thể sử dụng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
73:

>>>

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
7

Hoặc bạn có thể sử dụng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
73:

>>>

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
8

Hoặc bạn có thể sử dụng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
73:

Hoặc bạn có thể sử dụng 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
63:

Do lớp mới tiếp xúc với Brython và bản chất toàn cầu của cả 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
00 và 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
73, bạn có thể gọi 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
61 trên 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
67 hoặc thậm chí trên 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
68.		Dưới đây là các mô -đun Brython chính cho phép truy cập vào các hàm JavaScript:Mô -đun
Định nghĩa bài vănVí dụ
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
9
Chứa các tên và mô-đun tích hợp
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
60
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
71
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
73
Truy cập DOM
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
72 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
73
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
74
Tạo các yếu tố HTML
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
75
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
67
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
79
Truy cập 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
77 Chức năng và đối tượng
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
78 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
79
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
80
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
82

Truy cập các đối tượng được xác định trong JavaScript

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
9

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
81 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
82

  • Ngoài các chức năng và API JavaScript có sẵn trong trình duyệt, bạn cũng có thể truy cập vào các chức năng JavaScript mà bạn đã viết. Ví dụ sau đây cho thấy cách truy cập chức năng JavaScript tùy chỉnh từ Brython: defines the custom function 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    83 in a JavaScript block.
  • Ở đây, cách thức hoạt động của nó: invokes 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    83.

Dòng 9 xác định hàm tùy chỉnh 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
83 trong khối JavaScript.

Dòng 17 gọi {"code":"fr","hello":"Salut"} 83.

Bạn có thể sử dụng cùng một tính năng để truy cập các thư viện JavaScript. Bạn có thể thấy cách trong khung UI Web, nơi bạn sẽ tương tác với Vue.js, một khung giao diện người dùng web phổ biến.

Trình duyệt API Web

  1. {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    85
  2. {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    86

Các trình duyệt phơi bày các API Web mà bạn có thể truy cập từ JavaScript và Brython có quyền truy cập vào cùng một API. Trong phần này, bạn sẽ mở rộng máy tính Base64 để lưu trữ dữ liệu giữa các trang trình duyệt.

API Web cho phép tính năng này là API lưu trữ web. Nó bao gồm hai cơ chế:

Bạn sẽ sử dụng 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86 trong ví dụ sắp tới.

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
0

Như bạn đã biết trước đó, máy tính Base64 tạo ra một từ điển chứa chuỗi đầu vào được ánh xạ tới giá trị được mã hóa cơ sở64 của chuỗi này. Dữ liệu vẫn tồn tại trong bộ nhớ sau khi trang được tải nhưng được thanh lọc khi bạn tải lại trang. Lưu dữ liệu vào 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86 sẽ bảo tồn từ điển giữa các trang tải lại. 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86 là một cửa hàng giá trị khóa.

Để truy cập 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86, bạn cần nhập 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
91. Để gần với triển khai ban đầu, bạn sẽ tải và lưu dữ liệu từ điển vào 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86 ở định dạng JSON. Khóa để lưu và tìm nạp dữ liệu sẽ là 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
93. Mã sửa đổi bao gồm nhập khẩu mới và hàm 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
94:

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
94 được thực thi khi mã Python được tải. Nó lấy dữ liệu JSON từ 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86 và điền vào một từ điển Python sẽ được sử dụng để giữ dữ liệu trong bộ nhớ trong suốt vòng đời của trang. Nếu nó không tìm thấy 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
93 trong 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86, thì nó sẽ tạo ra một từ điển trống cho khóa 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
93 trong 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86 và trả về một từ điển trống.

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
1

Bạn có thể xem mã Python đầy đủ kết hợp 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
94 bằng cách mở rộng hộp bên dưới. Nó cho thấy cách sử dụng API web 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86 như lưu trữ liên tục thay vì dựa vào bộ nhớ trong bộ nhớ phù du, như trong việc triển khai trước đây của ví dụ này.

Mã sau đây cho thấy cách quản lý dữ liệu bằng trình duyệt 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86:

Các dòng mới được tô sáng. Từ điển toàn cầu 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
13 được điền bởi 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
94 khi tệp được tải và xử lý khi gọi 
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
6. Khi trang được tải lại, dữ liệu được tìm nạp từ 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
86.

Mỗi lần tính toán giá trị Base64 mới, nội dung của 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
13 được chuyển đổi thành JSON và được lưu trữ trong bộ lưu trữ cục bộ. Chìa khóa của bộ lưu trữ là 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
93.

>>>

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
2

Bạn có thể truy cập tất cả các chức năng API Web từ 

$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
9 và các mô hình con khác. Tài liệu cấp cao về việc truy cập API Web có sẵn trong tài liệu Brython. Để biết thêm chi tiết, bạn có thể tham khảo tài liệu API Web và sử dụng bảng điều khiển Brython để thử nghiệm các API Web.

Nếu hiệu suất là một mối quan tâm, thì hãy xem xét sử dụng phiên bản JavaScript.

Khung giao diện người dùng web

Các khung giao diện người dùng JavaScript phổ biến như Angular, React, Vue.js hoặc Svelte đã trở thành một phần quan trọng của bộ công cụ phát triển phía trước, và Brython tích hợp liền mạch với một số khung này. Trong phần này, bạn sẽ xây dựng một ứng dụng bằng Vue.js phiên bản 3 và Brython.

Ứng dụng mà bạn sẽ xây dựng là một hình thức tính toán băm của một chuỗi. Tại đây, một ảnh chụp màn hình của trang HTML đang chạy:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
18 của trang HTML xác định các ràng buộc và mẫu được khai báo:

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
3

Nếu bạn không quen thuộc với Vue, thì bạn sẽ nhanh chóng bao gồm một vài điều bên dưới, nhưng vui lòng tham khảo tài liệu chính thức để biết thêm thông tin:

  • Chỉ thị Vue.js là các giá trị thuộc tính đặc biệt, được đặt trước với 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    19, cung cấp hành vi động và ánh xạ dữ liệu giữa các giá trị của các thành phần DOM và Vue.js:     are special attribute values, prefixed with 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    19, that provide dynamic behavior and data mapping between values of the DOM and Vue.js components:
    •  1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      20 liên kết giá trị đầu vào với mô hình VUE 
       1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      21 và cắt giá trị.       binds the input value to the Vue model 
       1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      21 and trims the value.
    •  1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      22 liên kết giá trị của thả xuống với 
       1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      23.       binds the value of the dropdown to 
       1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      23.
    •  1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      24 liên kết giá trị tùy chọn với 
       1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      25.       binds the option value to 
       1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      25.
  • Các mẫu Vue được biểu thị bằng các biến được bao quanh bởi niềng răng xoăn đôi. Vue.js thay thế các giữ chỗ tương ứng với giá trị tương ứng trong thành phần Vue: are denoted with variables surrounded by double curly braces. Vue.js substitutes the corresponding placeholders with the corresponding value in the Vue component:
    •  1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      26
    •  1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
      25
  • Trình xử lý sự kiện được xác định với biểu tượng AT (
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    28) như trong 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    29.     are identified with an at symbol (
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    28) like in 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    29.

Mã Python tương ứng mô tả logic kinh doanh VUE và gắn kết:

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
4

Bản chất khai báo của Vue.js được hiển thị trong tệp HTML với các chỉ thị và mẫu Vue. Nó cũng được chứng minh trong mã Python với khai báo của thành phần VUE trên dòng 11 và dòng 28 đến 35. Kỹ thuật khai báo này dây giá trị nút của DOM với dữ liệu VUE, cho phép hành vi phản ứng của khung.

Điều này loại bỏ một số mã nồi hơi mà bạn phải viết trong ví dụ trước. Chẳng hạn, lưu ý rằng bạn đã không chọn các thành phần từ DOM với một biểu thức như 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
30. Tạo ứng dụng VUE và gọi 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
31 xử lý ánh xạ của thành phần VUE cho các phần tử DOM tương ứng và liên kết của các hàm JavaScript.

Trong Python, việc truy cập các trường đối tượng Vue yêu cầu bạn phải tham khảo đối tượng Vue với 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
81:

  • Dòng 14 lấy giá trị của trường thành phần 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    33.     fetches the value of the component field 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    33.
  • Dòng 21 cập nhật thành phần dữ liệu 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    34.     updates the data component 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    34.
  • Dòng 25 thêm một thuật toán vào danh sách 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    35.     adds an algorithm to the list 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    35.
  • Dòng 26 Instantiates 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    36 với phím đầu tiên là 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    37.     instantiates 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    36 with the first key of 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    37.

Nếu sự ra đời của Vue kết hợp với Brython đã thúc đẩy sự quan tâm của bạn, thì bạn có thể muốn kiểm tra dự án Vuepy, cung cấp các ràng buộc Python đầy đủ cho Vue.js và sử dụng Brython để chạy Python trong trình duyệt.

WebAssugging

Trong một số tình huống, bạn có thể sử dụng WebAssugging để cải thiện hiệu suất của Brython hoặc thậm chí JavaScript. WebAssugging, hoặc WASM, là mã nhị phân được hỗ trợ bởi tất cả các trình duyệt chính. Nó có thể cung cấp một cải tiến hiệu suất so với JavaScript trong trình duyệt và là mục tiêu tổng hợp cho các ngôn ngữ như C, C ++ và Rust. Nếu bạn không sử dụng Rust hoặc Wasm, thì bạn có thể bỏ qua phần này.WebAssembly, or Wasm, is binary code that is supported by all major browsers. It can provide a performance improvement over JavaScript in the browser and is a compilation target for languages like C, C++, and Rust. If you’re not using Rust or Wasm, then you can skip this section.

Trong ví dụ sau đây thể hiện cách sử dụng WebAssugging, bạn sẽ thực hiện một chức năng trong Rust và sẽ gọi nó từ Python.

Đây không phải là một hướng dẫn rỉ sét kỹ lưỡng. Nó chỉ làm trầy xước bề mặt. Để biết thêm chi tiết về rỉ sét, hãy xem tài liệu rỉ sét.

Bắt đầu bằng cách cài đặt rỉ sét bằng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
38. Để biên dịch các tệp WASM, bạn cũng cần thêm mục tiêu 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
39:

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
5

Tạo một dự án bằng cách sử dụng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
40, được cài đặt trong quá trình cài đặt rỉ sét:

Lệnh trên tạo ra một dự án bộ xương trong một thư mục có tên 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
41. Trong thư mục này, bạn sẽ tìm thấy 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
42, tệp cấu hình Build Rust Build, mà bạn cần sửa đổi để cho biết rằng bạn muốn tạo một thư viện động. Bạn có thể làm điều này bằng cách thêm phần được tô sáng:

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
6

Sửa đổi 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
43 bằng cách thay thế nội dung của nó bằng cách sau:

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
7

Trong gốc của dự án, nơi 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
42, biên dịch dự án của bạn:

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
8

Tiếp theo, tạo thư mục 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
14 với 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 sau:

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
9

Dòng 6 trên tải các 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
94 sau đây từ cùng một thư mục:

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
0

Các dòng được tô sáng là keo cho phép Brython truy cập vào chức năng rỉ sét 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
48:

  • Dòng 16 đọc 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    49 bằng cách sử dụng 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    50 và sau đó gọi 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    51 khi tệp WASM được tải xuống.     reads 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    49 using 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    50 and then invokes 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    51 when the Wasm file is downloaded.
  • Dòng 5 thực hiện 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    51, lấy mô -đun WASM làm đối số.     implements 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    51, which takes the Wasm module as an argument.
  • Dòng 7 gán 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    48 cho tên 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    54 cục bộ để làm cho nó có sẵn cho Python.     assigns 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    48 to the local 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    54 name to make it available to Python.

Trong cùng một thư mục 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
14, sao chép 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
49 từ 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
57:

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
1

Bố cục thư mục dự án trông như thế này:

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
2

Điều này cho thấy cấu trúc thư mục của dự án rỉ sét được tạo ra với 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
58. Để rõ ràng, 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
59 bị bỏ qua một phần.

Bây giờ hãy khởi động một máy chủ trong 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
14:

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
0

Cuối cùng, trỏ trình duyệt internet của bạn đến 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
28. Trình duyệt của bạn sẽ hiển thị một trang như sau:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Dự án này cho thấy cách tạo một webassugging mà bạn có thể sử dụng từ JavaScript hoặc Brython. Do chi phí đáng kể do xây dựng tệp WASM, đây không phải là cách tiếp cận đầu tiên của bạn để giải quyết một vấn đề cụ thể.

Nếu JavaScript không đáp ứng các yêu cầu về hiệu suất của bạn, thì Rust có thể là một tùy chọn. Điều này chủ yếu là hữu ích nếu bạn đã có mã WASM để tương tác, mã mà bạn đã xây dựng hoặc các thư viện WASM hiện có.

Một lợi ích có thể khác của việc sử dụng rỉ sét để tạo ra một webassugging là quyền truy cập vào các thư viện mà không tồn tại trong Python hoặc JavaScript. Nó cũng có thể hữu ích nếu bạn muốn sử dụng thư viện Python được viết bằng C và có thể được sử dụng với Brython. Nếu một thư viện như vậy tồn tại trong rỉ sét, thì bạn có thể xem xét việc xây dựng một tệp WASM để sử dụng nó với Brython.

Áp dụng sự phát triển không đồng bộ trong Brython

Lập trình đồng bộ là hành vi tính toán mà bạn có thể quen thuộc nhất. Ví dụ: khi thực hiện ba câu lệnh, A, B và C, chương trình A lần đầu tiên thực hiện A, sau đó B và cuối cùng C. Mỗi câu lệnh chặn luồng của chương trình trước khi chuyển nó sang cái tiếp theo. is the computation behavior that you may be the most familiar with. For example, when executing three statements, A, B, and C, a program first executes A, then B, and finally C. Each statement blocks the flow of the program before passing it on to the next one.

Hãy tưởng tượng một kỹ thuật sao cho A sẽ được thực hiện trước, B sẽ được gọi nhưng không được thực hiện ngay lập tức, và sau đó C sẽ được thực thi. Bạn có thể nghĩ B như một lời hứa sẽ bị xử tử trong tương lai. Vì B không chặn, nó được coi là không đồng bộ. Để biết thêm nền tảng về lập trình Asynchronus, bạn có thể kiểm tra bắt đầu với các tính năng Async trong Python.

JavaScript là một luồng đơn và phụ thuộc vào xử lý không đồng bộ đặc biệt khi liên lạc mạng. Ví dụ, tìm nạp kết quả của API không yêu cầu chặn việc thực thi các hàm JavaScript khác.

Với Brython, bạn có quyền truy cập vào các tính năng không đồng bộ thông qua một số thành phần:

  • Gọi lại JavaScript
  • JavaScript hứa hẹn
  •  1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    62
  •  1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    63

Khi JavaScript đã phát triển, các cuộc gọi lại đã được thay thế dần dần bằng lời hứa hoặc các chức năng Async. Trong hướng dẫn này, bạn sẽ học cách sử dụng lời hứa từ Brython và cách sử dụng các mô -đun 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
62 và 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
63, tận dụng bản chất không đồng bộ của JavaScript.

Mô -đun 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
66 từ thư viện CPython có thể được sử dụng trong bối cảnh trình duyệt và được thay thế trong Brython bằng 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
63.

JavaScript hứa hẹn ở Brython

Trong JavaScript, một lời hứa là một đối tượng có thể tạo ra kết quả đôi khi trong tương lai. Giá trị được tạo ra sau khi hoàn thành sẽ là một giá trị hoặc lý do cho một lỗi.

Ở đây, một ví dụ minh họa cách sử dụng đối tượng JavaScript 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
68 từ Brython. Bạn có thể làm việc với ví dụ này trong bảng điều khiển trực tuyến:

>>>

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
4

Trong bảng điều khiển web, bạn có thể nhận được phản hồi ngay lập tức về việc thực thi mã Python:

  • Dòng 1 nhập 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    69 để đặt thời gian chờ và 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    73 để truy cập đối tượng 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    68.     imports 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    69 to set a timeout and 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    73 to access the 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    68 object.
  • Dòng 2 xác định một người thực thi, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    72, trả về một tin nhắn khi lời hứa thành công, vào cuối thời gian chờ.     defines an executor, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    72, that returns a message when the promise is successful, at the end of the timeout.
  • Dòng 5 xác định một hàm, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    73, hiển thị cảnh báo.     defines a function, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    73, that displays an alert.
  • Dòng 8 tạo ra một lời hứa với người thực thi, bị xích với khối 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    74, cho phép truy cập vào kết quả của lời hứa.     creates a promise with the executor, chained with a 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    74 block, allowing access to the result of the promise.

Trong ví dụ trên, thời gian chờ mô phỏng nhân tạo một chức năng dài. Việc sử dụng thực sự của một lời hứa có thể liên quan đến một cuộc gọi mạng. Sau 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
75 giây, lời hứa hoàn thành thành công với giá trị 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
76.

Nếu hàm thực thi, 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
72, phát hiện lỗi, thì nó có thể gọi 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
78 với lý do cho lỗi là đối số. Bạn có thể thực hiện điều này bằng một phương thức chuỗi mới, 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
79, trên đối tượng 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
68, như sau:

>>>

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
5

Trong bảng điều khiển web, bạn có thể nhận được phản hồi ngay lập tức về việc thực thi mã Python:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Dòng 1 nhập 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
69 để đặt thời gian chờ và 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
73 để truy cập đối tượng 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
68.

Dòng 2 xác định một người thực thi, 1from browser import ajax 2 3def on_complete(req): 4 print(req.text) 5 6ajax.get("https://api.publicapis.org/random", 7 blocking=True, 8 oncomplete=on_complete) 72, trả về một tin nhắn khi lời hứa thành công, vào cuối thời gian chờ.

Dòng 5 xác định một hàm, 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
73, hiển thị cảnh báo.I/O-bound function is a function that mostly spends time waiting for input or output to finish, whereas a CPU-bound function is computing. Invoking an API over the network or querying a database is an I/O-bound execution, whereas calculating a sequence of prime numbers is CPU bound.

Brython sườn 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
62 phơi bày các hàm HTTP như 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
83 và 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
84, theo mặc định, không đồng bộ. Các chức năng này có tham số 

<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
3 có thể được đặt thành 
 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
8 để hiển thị cùng một hàm đồng bộ.

Để gọi HTTP 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
87 không đồng bộ, hãy gọi 

<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
1 như sau:

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
6

Để tìm nạp API trong chế độ chặn, hãy đặt tham số 


<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
3 thành 
 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
8:

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
7

Mã sau đây cho thấy sự khác biệt giữa việc thực hiện cuộc gọi AJAX chặn và cuộc gọi AJAX không chặn:

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
8

Mã trên minh họa cả hai hành vi, đồng bộ và không đồng bộ:

  • Dòng 13 xác định 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    91, tìm nạp văn bản từ một tệp từ xa bằng cách sử dụng 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    1. Hành vi mặc định của 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    1 là không đồng bộ. 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    91 Trả về và 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    95 được gán cho tham số 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    96 được gọi lại sau khi nhận được tệp từ xa 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    97.     defines 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    91, which fetches text from a remote file using 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    1. The default behavior of 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    1 is asynchronous. 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    91 returns, and 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    95 assigned to the parameter 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    96 is called back after receiving the remote file 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    97.

  • Dòng 18 xác định 

     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    98, thể hiện cách sử dụng 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    1 với hành vi chặn. Trong kịch bản này, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    95 được gọi trước khi 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    98 trả về.     defines 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    98, which demonstrates how to use 
    
<html>
  <head>
    <script
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    script>
  head>
  <body onload="brython()">
    <script type="text/python">
      import browser
      browser.alert("Hello Real Python!")
    script>
  body>
html>
    1 with the blocking behavior. In this scenario, 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    95 is called before 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    98 returns.

Khi bạn chạy ví dụ đầy đủ và nhấp vào Async Get và chặn Get, bạn sẽ thấy màn hình sau:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Bạn có thể thấy rằng trong kịch bản đầu tiên, 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
91 được thực hiện đầy đủ và kết quả của cuộc gọi API xảy ra không đồng bộ. Trong tình huống thứ hai, kết quả của cuộc gọi API được hiển thị trước khi quay lại từ 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
98.

Async io trong brython

Với 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
66, Python 3.4 bắt đầu để lộ các khả năng không đồng bộ mới. Trong Python 3.5, hỗ trợ không đồng bộ đã được làm giàu với cú pháp ________ 405/________ 406. Do sự không tương thích với vòng lặp sự kiện trình duyệt, Brython thực hiện 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
63 thay thế cho tiêu chuẩn 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
66.

Mô -đun Brython 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
63 và Mô -đun Python 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
66 đều hỗ trợ bằng cách sử dụng từ khóa 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
05 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
06 và chia sẻ các chức năng chung, như 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
13 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
14. Cả hai mô -đun đều thực hiện các chức năng riêng biệt khác liên quan đến bối cảnh thực thi tương ứng của chúng, môi trường bối cảnh CPython cho 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
66 và môi trường trình duyệt cho 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
63.

Coroutines

Bạn có thể sử dụng 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
13 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
14 để tạo coroutines. Để minh họa hành vi của các coroutines được thực hiện trong Brython, bạn sẽ thực hiện một biến thể của một ví dụ coroutine có sẵn trong tài liệu Cpython:

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
9

Ngoại trừ dòng 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
30 đầu tiên, mã giống như bạn tìm thấy trong tài liệu CPython. Nó cho thấy việc sử dụng các từ khóa 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
05 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
06 và hiển thị 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
13 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
14 trong hành động:

  • Dòng 1 sử dụng 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    66 làm bí danh cho 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    63. Mặc dù nó bóng tối 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    26, nhưng nó giữ mã gần với ví dụ về tài liệu Python để tạo điều kiện so sánh.     uses 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    66 as an alias for 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    63. Although it shadows 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    26, it keeps the code close to the Python documentation example to facilitate the comparison.
  • Dòng 4 tuyên bố Coroutine 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    27. Lưu ý việc sử dụng 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    05.     declares the coroutine 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    27. Note the use of 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    05.
  • Dòng 5 gọi 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    29 với 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    06 để hàm hiện tại sẽ giảm kiểm soát thành một hàm khác cho đến khi 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    14 hoàn thành.     invokes 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    29 with 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    06 so that the current function will cede control to another function until 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    14 completes.
  • Dòng 8 tuyên bố một coroutine khác sẽ gọi Coroutine 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    27 hai lần.     declares another coroutine that will itself call the coroutine 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    27 twice.
  • Dòng 9 gọi 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    13, một chức năng không chặn có một coroutine, ____________ 434 trong ví dụ này là một đối số.     invokes 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    13, a nonblocking function that takes a coroutine—
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    34 in this example—as an argument.

Lưu ý rằng trong bối cảnh của trình duyệt, 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
35 tận dụng vòng lặp sự kiện JavaScript nội bộ. Điều này khác với chức năng liên quan 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
36 trong CPython, nơi quản lý đầy đủ vòng lặp sự kiện.

Để thực thi mã này, hãy dán nó vào Trình chỉnh sửa Brython trực tuyến và nhấp vào Chạy. Bạn sẽ nhận được một đầu ra tương tự như ảnh chụp màn hình sau:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Đầu tiên, tập lệnh được thực thi, sau đó 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
37 được hiển thị và cuối cùng 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
38 được hiển thị.

Để biết thêm chi tiết về Coroutines trong Python, bạn có thể xem Async IO trong Python: một hướng dẫn hoàn chỉnh.

Các khái niệm chung về I/O không đồng bộ áp dụng cho tất cả các nền tảng chấp nhận mô hình này. Trong JavaScript, vòng lặp sự kiện về bản chất là một phần của môi trường, trong khi ở Cpython, đây là thứ được quản lý bằng cách sử dụng các chức năng được phơi bày bởi 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
66.

Ví dụ trên là một bài tập có chủ ý để giữ mã chính xác như được hiển thị trong ví dụ tài liệu Python. Trong khi mã hóa trong trình duyệt với Brython, nhưng nó khuyên bạn nên sử dụng rõ ràng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
63, như bạn sẽ thấy trong phần sau.

Web chức năng cụ thể

Để cấp một cuộc gọi không đồng bộ đến API, như trong phần trước, bạn có thể viết một chức năng như sau:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>
0

Lưu ý việc sử dụng các từ khóa 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
05 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
06. Hàm cần được định nghĩa là 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
05 để sử dụng cuộc gọi với 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
06. Trong quá trình thực hiện chức năng này, khi đạt được cuộc gọi đến 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
45, chức năng cung cấp kiểm soát trở lại vòng lặp sự kiện chính trong khi chờ đợi cuộc gọi mạng, 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
46, để hoàn thành. Phần còn lại của việc thực hiện chương trình không bị chặn.

Ở đây, một ví dụ về cách gọi 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
47:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>
1

Hàm 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
35 thực thi coroutine 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
47. Nó không chặn.

Một ví dụ mã hoàn chỉnh hơn cho thấy cách sử dụng các từ khóa 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
05 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
06 và cách 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
35 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
46 là bổ sung:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>
2

Như trong các phiên bản gần đây nhất của Python 3, bạn có thể sử dụng từ khóa 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
05 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
06:

  • Dòng 7 xác định 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    47 với từ khóa 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    05.     defines 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    47 with the keyword 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    05.
  • Dòng 9 gọi 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    46 với từ khóa 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    06. Sử dụng 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    06 yêu cầu hàm bao quanh được xác định với 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    05.     invokes 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    46 with the keyword 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    06. Using 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    06 requires the enclosing function to be defined with 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    05.
  • Dòng 14 cho thấy cách sử dụng 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    35, lấy làm đối số hàm 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    05 được gọi.     shows how to use 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    35, which takes as an argument the 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    05 function to be called.

Để chạy ví dụ đầy đủ, bạn cần khởi động một máy chủ web. Bạn có thể khởi động máy chủ web Python Development với 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
64. Nó bắt đầu một máy chủ web cục bộ trên cổng 8000 và trang mặc định ____102:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Ảnh chụp màn hình hiển thị chuỗi các bước được thực hiện sau khi nhấp vào Async Get. Sự kết hợp của việc sử dụng mô -đun 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
26 và các từ khóa 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
05 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
06 cho thấy cách bạn có thể nắm lấy mô hình lập trình không đồng bộ mà JavaScript quảng bá.

Phân phối và đóng gói một dự án Brython

Phương pháp bạn sử dụng để cài đặt Brython có thể ảnh hưởng đến cách thức và nơi bạn có thể triển khai dự án Brython của mình. Cụ thể, để triển khai cho PYPI, tùy chọn tốt nhất là đầu tiên cài đặt Brython từ PYPI và sau đó tạo dự án của bạn với 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
10. Nhưng việc triển khai web điển hình đến máy chủ riêng hoặc cho nhà cung cấp đám mây có thể tận dụng bất kỳ phương thức cài đặt nào bạn chọn.

Bạn có một số tùy chọn triển khai:

  • Triển khai thủ công và tự động
  • Triển khai đến PYPI
  • Triển khai cho CDN

Bạn có thể khám phá từng trong số này trong các phần sau.

Triển khai web thủ công và tự động

Ứng dụng của bạn chứa tất cả các phụ thuộc tĩnh, CSS, JavaScript, Python và các tệp hình ảnh mà bạn cần cho trang web của mình. Brython là một phần của các tệp JavaScript của bạn. Tất cả các tập tin có thể được triển khai AS-IS trên nhà cung cấp mà bạn chọn. Bạn có thể tham khảo các hướng dẫn phát triển web và tự động hóa việc triển khai Django bằng vải và ansible để biết chi tiết về việc triển khai các ứng dụng Brython của bạn.

Nếu bạn quyết định sử dụng 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
59 để đi kèm mã Python của bạn, thì các tệp bạn triển khai won có bất kỳ mã nguồn Python nào, chỉ 
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
5 và 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
50. Bạn cũng đã giành chiến thắng bao gồm 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
21 vì các mô -đun cần thiết sẽ được bao gồm trong 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
50 rồi.

Triển khai để PYPI

Khi bạn cài đặt Brython từ PYPI, bạn có thể sử dụng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
10 để tạo gói có thể được triển khai thành PYPI. Mục tiêu của việc tạo một gói như vậy là mở rộng mẫu Brython mặc định làm cơ sở cho các dự án tùy chỉnh của bạn và cung cấp các trang web Brython có sẵn từ PYPI.

Sau khi làm theo các hướng dẫn trong phần Cài đặt từ PYPI, hãy thực hiện lệnh sau trong dự án 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
14 mới của bạn:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>
3

Bạn sẽ được nhắc trả lời một vài câu hỏi nhằm tạo 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
77, mà bạn có thể sửa đổi sau. Sau khi hoàn thành lệnh, bạn sẽ có một thư mục gọi là 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
78 chứa các tệp bạn cần để tạo gói có thể cài đặt.

Bạn có thể kiểm tra cài đặt gói mới này cục bộ như sau:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>
4

Sau đó, bạn cũng có thể xác nhận rằng lệnh mới được triển khai cục bộ với gói 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
14 bằng cách thực thi lệnh sau:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>
5

Lưu ý rằng lệnh 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
14 hoạt động chính xác như Brython đã làm sau khi cài đặt ban đầu. Bạn chỉ cần tạo một gói Brython có thể cài đặt tùy chỉnh có thể được triển khai thành PYPI. Để biết mô tả kỹ lưỡng về cách triển khai gói hàng của bạn thành PYPI, hãy xem cách xuất bản gói Python nguồn mở thành PYPI.

Sau khi được triển khai thành PYPI, bạn có thể cài đặt gói Brython của mình với 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
08 trong môi trường ảo Python. Bạn có thể tạo ứng dụng tùy chỉnh mới của mình với lệnh mới mà bạn đã tạo:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>
6

Tóm lại, đây là các bước để triển khai PYPI:

  1. Cài đặt Brython từ Pypi.
  2. Tạo một dự án với 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    17.
  3. Tạo một gói có thể cài đặt từ dự án của bạn với 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    83.
  4. Triển khai gói này để PYPI.

Các phương pháp cài đặt khác, CDN CDN, GitHub và NPM, don don bao gồm 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
10 và do đó aren rất phù hợp để chuẩn bị gói PYPI.

Triển khai đến CDN

Giống như 

$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
5 và 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
86 có sẵn trên các máy chủ CDN, bạn cũng có thể triển khai tài sản tĩnh, hình ảnh, kiểu dáng và tệp JavaScript của mình, bao gồm các tệp Python của bạn hoặc 
{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
50, cho CDN. Ví dụ về CDN bao gồm:

  • CloudFlare
  • Google Cloud CDN
  • Azure CDN
  • Amazon Cloudfront
  • Akamai

Nếu ứng dụng của bạn là nguồn mở, thì bạn có thể nhận được hỗ trợ CDN miễn phí. Ví dụ bao gồm CDNJ và JSdelivr.

Tạo tiện ích mở rộng Google Chrome

Các tiện ích mở rộng Chrome là các thành phần được xây dựng với các công nghệ web và được kết hợp vào Chrome để tùy chỉnh môi trường duyệt web của bạn. Thông thường, các biểu tượng của các tiện ích mở rộng này có thể nhìn thấy ở đầu cửa sổ Chrome, ở bên phải của thanh địa chỉ.

Tiện ích mở rộng công khai có sẵn trên cửa hàng trang web Chrome. Để tìm hiểu, bạn sẽ cài đặt các tiện ích mở rộng Google Chrome từ các tệp cục bộ:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Trước khi thực hiện việc triển khai tiện ích mở rộng Google Chrome ở Brython, trước tiên, bạn sẽ thực hiện phiên bản JavaScript và sau đó dịch nó thành Brython.

Hello World Extension in JS

Là một khởi đầu, bạn sẽ thực hiện một tiện ích mở rộng sẽ thực hiện các hành động sau:

  1. Mở cửa sổ bật lên khi bạn nhấp vào biểu tượng tiện ích mở rộng
  2. Mở tin nhắn nhanh khi bạn nhấp vào nút cửa sổ bật lên
  3. Nối tin nhắn bạn đã nhập ở dưới cùng của cửa sổ bật lên ban đầu

Ảnh chụp màn hình sau đây minh họa hành vi này:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Trong một thư mục trống, hãy tạo tệp 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
88 để định cấu hình tiện ích mở rộng:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>
7

Trường quan trọng cho ví dụ này là tệp bật lên mặc định, 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
89, mà bạn cũng sẽ phải tạo. Để biết thông tin về các trường khác và hơn thế nữa, bạn có thể tham khảo tài liệu định dạng tệp kê khai.

Trong cùng một thư mục, hãy tạo tệp 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
89 được sử dụng để xác định giao diện người dùng của tiện ích mở rộng:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>
8

Tệp HTML bao gồm một liên kết đến logic kinh doanh JavaScript của tiện ích mở rộng và mô tả giao diện người dùng của nó:

  • Dòng 5 đề cập đến 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    91, chứa logic của phần mở rộng.     refers to 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    91, which contains the logic of the extension.
  • Dòng 8 xác định một 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    98 sẽ được liên kết với một trình xử lý trong 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    91.     defines a 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    98 that will be bound to a handler in 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    91.
  • Dòng 9 tuyên bố một trường sẽ được sử dụng bởi mã JavaScript để hiển thị một số văn bản. declares a field to be used by the JavaScript code to display some text.

Bạn cũng cần tạo 

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
91:

 1
 2<html>
 3    <head>
 4        <script
 5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
 6        script>
 7    head>
 8    <body onload="brython()">
 9        <script type="text/python">
10            import browser
11            browser.alert("Hello Real Python!")
12        script>
13    body>
14html>
9

Logic chính của mã JavaScript bao gồm việc khai báo một trình xử lý 

{"code":"fr","hello":"Salut"}
ted in   5.00 ms>
16 liên kết với trường 
{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
96 của thùng chứa HTML:

  • Dòng 2 gọi chế độ tập lệnh cho phép xác thực nghiêm ngặt hơn trong JavaScript để tiết lộ các lỗi JavaScript. invokes the script mode that enables more stringent validation in JavaScript to reveal JavaScript mistakes.
  • Dòng 4 chọn trường được xác định bởi 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    96 trong 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    89 và gán nó cho một biến.     selects the field identified by 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    96 in 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    89 and assigns it to a variable.
  • Dòng 6 xác định trình xử lý sẽ xử lý sự kiện khi người dùng nhấp vào nút. Trình xử lý sự kiện này nhắc người dùng cho tên của họ, sau đó thay đổi nội dung của 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    99 được xác định với 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    00 thành tên được cung cấp.     defines the handler that will process the event when a user clicks the button. This event handler prompts the user for their name, then changes the contents of the 
    {
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "https://www.data.gov/",
      "Category": "Government"
    }
  ]
}
    99 identified with 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    00 to the provided name.

Trước khi cài đặt tiện ích mở rộng này, hãy thực hiện các bước sau:

  1. Mở menu Google Chrome ở phía bên phải của màn hình.
  2. Mở các phụ nhân con thêm các công cụ.
  3. Nhấp vào phần mở rộng.

Một màn hình sẽ hiển thị các tiện ích mở rộng hiện đã được cài đặt của bạn, nếu có. Nó có thể trông như thế này:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Để cài đặt tiện ích mở rộng mới của mình, bạn sẽ cần thực hiện các bước sau:

  1. Đảm bảo rằng chế độ nhà phát triển được bật ở phía trên bên phải của màn hình.
  2. Nhấp vào Tải Giải nén.
  3. Chọn thư mục chứa tất cả các tệp bạn vừa tạo.

Nếu không có lỗi nào xảy ra trong quá trình cài đặt, thì bây giờ bạn sẽ thấy một biểu tượng mới có J ở phía bên phải của thanh địa chỉ trình duyệt của bạn. Để kiểm tra tiện ích mở rộng của bạn, nhấp vào biểu tượng J của thanh công cụ được hiển thị bên dưới:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Nếu bất kỳ lỗi nào xảy ra trong quá trình cài đặt hoặc thực thi, thì bạn sẽ thấy nút lỗi màu đỏ ở bên phải của nút mở rộng nút Xóa:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Bạn có thể nhấp vào lỗi để hiển thị lỗi và xác định nguyên nhân gốc. Sau khi sửa, tải lại phần mở rộng bằng cách nhấp vào mũi tên tròn ở phía dưới bên phải của thẻ mở rộng, sau đó lặp lại quy trình cho đến khi nó hoạt động như bạn mong đợi.

Để kiểm tra tiện ích mở rộng mới được cài đặt của bạn, bạn có thể nhấp vào biểu tượng J được hiển thị ở phía bên phải của thanh công cụ trình duyệt. Nếu biểu tượng được hiển thị, thì hãy nhấp vào các tiện ích mở rộng để liệt kê các tiện ích mở rộng đã cài đặt và chọn nút Pushpin được căn chỉnh với tiện ích mở rộng JS Hello World mà bạn vừa cài đặt.

Hello World Extension in Python

Nếu bạn đã đạt đến điểm này, thì bạn đã hoàn thành các bước khó khăn nhất, chủ yếu để làm quen với quá trình tạo tiện ích mở rộng Chrome và cài đặt nó. Các bước sẽ tương tự với Brython, với một vài khác biệt mà bạn sẽ học trong phần này.

Tệp kê khai sẽ khác biệt, với một tên mở rộng khác và, để đo lường tốt, một mô tả khác:

 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
0

Lưu ý rằng bạn cũng phải bao gồm một tài sản mới, 

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
01. Điều này là cần thiết để chính sách chống lại 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
85 có thể được nới lỏng trong hệ thống mở rộng Chrome. Hãy nhớ rằng Brython sử dụng 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
85.

Đây là một thứ gì đó mà bạn đã giới thiệu và bạn có thể kiểm soát ở Brython. Bạn cần phải bật bằng cách sử dụng 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
85 nếu bạn muốn sử dụng Brython làm ngôn ngữ của phần mở rộng trình duyệt của bạn. Nếu bạn không thêm 
>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
05 vào 
>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
01, thì bạn sẽ thấy lỗi sau:

 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
1

Tệp HTML cũng sẽ có một vài bản cập nhật, như sau:

 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
2

Mã HTML rất giống với mã bạn đã sử dụng để tạo tiện ích mở rộng Chrome trong JavaScript. Một vài chi tiết đáng chú ý:

  • Dòng 5 tải 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    64 từ một gói địa phương. Vì lý do bảo mật, chỉ các tập lệnh cục bộ được tải và bạn có thể tải từ một nguồn bên ngoài như CDN.     loads 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    64 from a local package. For security reasons, only local scripts are loaded and you can’t load from an external source like a CDN.
  • Dòng 6 tải 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    08, gọi 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6.     loads 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    08, which invokes 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6.
  • Dòng 7 tải 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    10.     loads 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    10.
  • Dòng 9 tuyên bố 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    18 mà không có 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    12 thông thường.     declares 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
    18 without the usual 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    12.

Một ràng buộc bảo mật khác ngăn bạn gọi 

$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
6 trong sự kiện 
>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
14 của thẻ 
 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6ajax.get("https://api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete)
18. Giải pháp thay thế là thêm người nghe vào tài liệu và chỉ ra trình duyệt để thực thi 
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
6 sau khi nội dung của tài liệu được tải:

 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
3

Cuối cùng, bạn có thể thấy logic chính của ứng dụng này trong mã Python sau:

 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
4

Với điều đó, bạn đã sẵn sàng để tiến hành cài đặt và thử nghiệm như bạn đã làm cho phần mở rộng Chrome JavaScript.

Thử nghiệm và gỡ lỗi Brython

Hiện tại không có thư viện tiện lợi cho mã thử nghiệm đơn vị Brython. Khi Brython phát triển, bạn sẽ thấy nhiều tùy chọn hơn để kiểm tra và gỡ lỗi mã Python trong trình duyệt. Nó có thể tận dụng khung thử nghiệm đơn vị Python cho một mô -đun Python độc lập có thể được sử dụng bên ngoài trình duyệt. Trong trình duyệt, selen với trình điều khiển trình duyệt là một lựa chọn tốt. Gỡ lỗi cũng bị hạn chế nhưng có thể.

Bài kiểm tra đơn vị Python

Các khung thử nghiệm đơn vị Python, như 

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
17 và 
>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
18 tích hợp, don lồng làm việc trong trình duyệt. Bạn có thể sử dụng các khung này cho các mô -đun Python cũng có thể được thực thi trong bối cảnh của Cpython. Bất kỳ mô-đun cụ thể nào của Brython như 
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
9 đều có thể được kiểm tra với các công cụ như vậy ở dòng lệnh. Để biết thêm thông tin về thử nghiệm đơn vị Python, hãy xem bắt đầu với thử nghiệm trong Python.

Selen

Selenium là một khung để tự động hóa các trình duyệt. Nó bất khả tri đối với ngôn ngữ được sử dụng trong trình duyệt, cho dù đó là JavaScript, Elm, Wasm hay Brython, bởi vì nó sử dụng khái niệm webDriver để hoạt động giống như người dùng tương tác với trình duyệt. Bạn có thể kiểm tra tự động hóa web hiện đại với Python và Selenium để biết thêm thông tin về khung này.

Bài kiểm tra đơn vị JavaScript

Có nhiều khung thử nghiệm tập trung vào JavaScript, như Mocha, Jasmine và Qunit, hoạt động tốt trong hệ sinh thái JavaScript đầy đủ. Nhưng họ không nhất thiết phải phù hợp với mã python thử nghiệm đơn vị chạy trong trình duyệt. Một tùy chọn yêu cầu phơi bày toàn cầu các chức năng Brython cho JavaScript, đi ngược lại các thực tiễn tốt nhất.

Để minh họa tùy chọn hiển thị chức năng Brython cho JavaScript, bạn sẽ sử dụng QUNIT, bộ thử nghiệm đơn vị JavaScript có thể chạy khép kín trong tệp HTML:

 1<script
 2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
 3script>
5

Trong một tệp HTML, bạn đã viết mã Python, mã JavaScript và các kiểm tra JavaScript để xác thực các hàm từ cả hai ngôn ngữ được thực thi trong trình duyệt:

  • Dòng 11 nhập khung QUNIT. imports the QUnit framework.
  • Dòng 23 phơi bày 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    20 cho JavaScript.     exposes 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    20 to JavaScript.
  • Dòng 28 Xác định 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    21 để kiểm tra hàm JavaScript 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    22.     defines 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    21 to test the JavaScript function 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    22.
  • Dòng 34 xác định 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    23 để kiểm tra hàm Python 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    20.     defines 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    23 to test the Python function 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    20.
  • Dòng 40 xác định 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    25 để kiểm tra hàm Python 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    20 với lỗi.     defines 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    25 to test the Python function 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    20 with an error.

Bạn không cần phải bắt đầu một máy chủ web để thực hiện kiểm tra đơn vị. Mở 

 1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
02 trong trình duyệt và bạn sẽ thấy như sau:

Hướng dẫn can i run python in a browser? - tôi có thể chạy python trong trình duyệt không?

Trang cho thấy hai thử nghiệm thành công, 

>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
28 và 
>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
29 và một bài kiểm tra thất bại, 
>>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
30.

Việc hiển thị hàm Python cho JavaScript cho thấy cách bạn có thể sử dụng khung kiểm tra đơn vị JavaScript để thực hiện Python trong trình duyệt. Mặc dù có thể thử nghiệm, nhưng nó không được khuyến nghị nói chung vì nó có thể xung đột với các tên JavaScript hiện có.

Gỡ lỗi ở Brython

Theo văn bản này, không có công cụ thân thiện với người dùng nào để gỡ lỗi ứng dụng Brython của bạn. Bạn không thể tạo một tệp bản đồ nguồn cho phép bạn gỡ lỗi từng bước trong các công cụ phát triển trình duyệt.

Điều này không nên làm bạn nản lòng khi sử dụng Brython. Dưới đây là một vài mẹo để giúp gỡ lỗi và khắc phục sự cố mã Brython của bạn:

  • Sử dụng 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    31 hoặc 
    >>> uuid.uuid4()
UUID('291930f9-0c79-4c24-85fd-f76f2ada0b2a')
    32 để in các giá trị biến trong bảng điều khiển công cụ phát triển trình duyệt.     to print variable values in the browser’s developer tools console.
  • Sử dụng gỡ lỗi chuỗi F như được mô tả trong các tính năng mới thú vị trong Python 3.8. as described in Cool New Features in Python 3.8.
  • Xóa trình duyệt Lừa được lập chỉ mụcDB một lần bằng cách sử dụng các công cụ nhà phát triển. once in a while by using the developer tools.
  • Tắt bộ đệm trình duyệt trong quá trình phát triển bằng cách kiểm tra hộp kiểm tắt bộ đệm trong tab mạng của các công cụ phát triển trình duyệt. during development by checking the Disable cache checkbox in the Network tab of the browser’s developer tools.
  • Thêm các tùy chọn vào 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    6 để cho phép hiển thị thông tin gỡ lỗi bổ sung trong bảng điều khiển JavaScript.     to enable additional debug information to be displayed in the JavaScript console.
  • Sao chép 
    $ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
(brython) $ python -m pip install --upgrade pip
Collecting pip
  Downloading pip-20.2.4-py2.py3-none-any.whl (1.5 MB)
     |████████████████████████████████| 1.5 MB 1.3 MB/s
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 20.2.3
    Uninstalling pip-20.2.3:
      Successfully uninstalled pip-20.2.3
    5 và 
     1from browser import ajax
 2
 3def on_complete(req):
 4    print(req.text)
 5
 6language = "fr"
 7
 8ajax.get(f"https://fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete)
    82 cục bộ để tăng tốc tải lại trong quá trình phát triển.     to speed up reloading during development.
  • Bắt đầu một máy chủ cục bộ khi bạn 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    30 mã Python.     when you 
    {"code":"fr","hello":"Salut"}
ted in   5.00 ms>
    30 Python code.
  • Mở Thanh tra từ phần mở rộng khi khắc phục sự cố mở rộng Chrome. when troubleshooting a Chrome extension.

Một trong những tính năng của Python là Repred (vòng lặp Read-Eval). Bảng điều khiển Brython trực tuyến cung cấp một nền tảng để thử nghiệm, kiểm tra và gỡ lỗi hành vi của một số đoạn mã.

Khám phá các lựa chọn thay thế cho Brython

Brython là một lựa chọn duy nhất để viết mã Python trong trình duyệt. Một vài lựa chọn thay thế có sẵn:

  • Skulpt
  • Transcrypt
  • Pyodide
  • PyPy.js

Mỗi lần thực hiện tiếp cận vấn đề từ một góc độ khác nhau. Brython cố gắng trở thành người thay thế cho JavaScript bằng cách cung cấp quyền truy cập vào cùng một API và thao tác DOM như JavaScript, nhưng với sự hấp dẫn của cú pháp Python và thành ngữ. Nó được đóng gói như một bản tải xuống nhỏ so với một số lựa chọn thay thế có thể có các mục tiêu khác nhau.

Làm thế nào để các khung này so sánh?

Skulpt

Transcrypt

Pyodide

Mỗi lần thực hiện tiếp cận vấn đề từ một góc độ khác nhau. Brython cố gắng trở thành người thay thế cho JavaScript bằng cách cung cấp quyền truy cập vào cùng một API và thao tác DOM như JavaScript, nhưng với sự hấp dẫn của cú pháp Python và thành ngữ. Nó được đóng gói như một bản tải xuống nhỏ so với một số lựa chọn thay thế có thể có các mục tiêu khác nhau.

Transcrypt

Pyodide

Mỗi lần thực hiện tiếp cận vấn đề từ một góc độ khác nhau. Brython cố gắng trở thành người thay thế cho JavaScript bằng cách cung cấp quyền truy cập vào cùng một API và thao tác DOM như JavaScript, nhưng với sự hấp dẫn của cú pháp Python và thành ngữ. Nó được đóng gói như một bản tải xuống nhỏ so với một số lựa chọn thay thế có thể có các mục tiêu khác nhau.

Pyodide

Mỗi lần thực hiện tiếp cận vấn đề từ một góc độ khác nhau. Brython cố gắng trở thành người thay thế cho JavaScript bằng cách cung cấp quyền truy cập vào cùng một API và thao tác DOM như JavaScript, nhưng với sự hấp dẫn của cú pháp Python và thành ngữ. Nó được đóng gói như một bản tải xuống nhỏ so với một số lựa chọn thay thế có thể có các mục tiêu khác nhau.

Làm thế nào để các khung này so sánh?

PyPy.js

Skulpt biên dịch mã python cho javascript trong trình duyệt. Việc biên dịch diễn ra sau khi trang được tải, trong khi trong Brython, phần tổng hợp diễn ra trong quá trình tải trang.

Mặc dù nó không có chức năng tích hợp để thao túng DOM, Skulpt rất gần với Brython trong các ứng dụng của nó. Điều này bao gồm sử dụng giáo dục và các ứng dụng Python toàn diện, như được chứng minh bởi Anvil.

Skulpt là một dự án được duy trì hướng tới Python 3. Brython chủ yếu ngang hàng với CPython 3.9 cho các mô -đun tương thích với việc thực hiện trong trình duyệt.

Transcrypt bao gồm một công cụ dòng lệnh để biên dịch mã Python với mã JavaScript. Việc biên dịch được cho là đi trước thời hạn (AOT). Mã kết quả sau đó có thể được tải vào trình duyệt. Transcrypt có một dấu chân nhỏ, khoảng 100kb. Nó nhanh chóng và hỗ trợ thao tác Dom.

Sự khác biệt giữa Skulpt và Brython là Transcrypt được biên dịch cho JavaScript với trình biên dịch Transcrypt trước khi được tải xuống và sử dụng trong trình duyệt. Điều này cho phép tốc độ và kích thước nhỏ. Tuy nhiên, nó ngăn chặn Transcrypt không được sử dụng như một nền tảng cho giáo dục như các nền tảng khác.

Pyodide là một bản tổng hợp WebAssugging của trình thông dịch CPython. Nó diễn giải mã Python trong trình duyệt. Không có giai đoạn tổng hợp JavaScript. Mặc dù pyodide, như pypy.js, yêu cầu bạn phải tải xuống một lượng dữ liệu đáng kể, nhưng nó được tải với các thư viện khoa học như Numpy, Pandas, Matplotlib, v.v.

Bạn có thể thấy Pyodide là một môi trường máy tính xách tay Jupyter chạy hoàn toàn trong trình duyệt thay vì được phục vụ bởi một máy chủ back-end. Bạn có thể thử nghiệm với pyodide bằng một ví dụ trực tiếp.

  • Pypy.js sử dụng trình thông dịch Pypy Python được biên dịch cho JavaScript với EMScripten, làm cho nó tương thích để chạy trong trình duyệt. in a local environment
  • Ngoài tình trạng không hoạt động hiện tại của dự án, Pypy.js là một gói lớn, khoảng 10 MB, bị cấm đối với các ứng dụng web điển hình. Bạn vẫn có thể sử dụng pypy.js như một nền tảng để học Python trong trình duyệt bằng cách mở trang chủ Pypy.js. in your front-end web applications
  • Pypy.js được tổng hợp với javascript với eMscripten. Pyodide tiến thêm một bước, tận dụng EMScripten và WASM đặc biệt để biên dịch các phần mở rộng Python C như Numpy to Webassugging.DOM
  • Theo văn bản này, pypy.js dường như không được duy trì. Đối với một cái gì đó trong cùng một tĩnh mạch liên quan đến quá trình biên dịch, hãy xem xét pyodide.JavaScript
  • Sự kết luậnbrowser extensions
  • Trong hướng dẫn này, bạn đã thực hiện một cuộc lặn sâu vào một số khía cạnh của việc viết mã Python trong trình duyệt. Điều này có thể đã mang lại cho bạn một số mối quan tâm trong việc thử Python cho sự phát triển phía trước.alternatives to Brython

Trong hướng dẫn này, bạn đã học được cách:

Cài đặt và sử dụng Brython trong môi trường địa phương

Bạn có thể chạy Python trong Chrome không?

Truy cập cửa hàng trang web Chrome để tải xuống phần mở rộng Python Shell Chrome.Nhấp vào Thêm vào Chrome để cài đặt và thêm tiện ích mở rộng vào trình duyệt.Sau khi tiện ích mở rộng được cài đặt, nhấp vào nó để khởi chạy nó.Một cửa sổ nhỏ sẽ xuất hiện nơi bạn có thể viết và thực thi mã Python.

Làm cách nào để mở Python trong Chrome?

Thực hiện theo các bước này trong ứng dụng Python của bạn để mở URL trong trình duyệt Chrome ...
Đăng ký tên loại trình duyệt bằng Webbrowser.Đăng ký() .Cũng cung cấp đường dẫn tệp thực thi trình duyệt ..
Nhận đối tượng bộ điều khiển cho trình duyệt bằng WebBrowser.Nhận () và mở URL bằng Open () ..

programming python Brython PyScript Python in browser Py HTML

Bài Viết Liên Quan

Giấy in tạp chí là giấy gì năm 2024
Giấy in tạp chí là giấy gì năm 2024

là ai Giấy Couche Giấy Fort Giấy magazine Giấy Bristol
Đề khảo sát giữa kì 1 toán 8 năm 2024
Đề khảo sát giữa kì 1 toán 8 năm 2024

mẹo hay
Xe số sàn và xe số tự động là gì năm 2024
Xe số sàn và xe số tự động là gì năm 2024

là ai Hỏi Đáp Là gì
Nước nóng và nước lạnh cái nào đông nhanh hơn năm 2024
Nước nóng và nước lạnh cái nào đông nhanh hơn năm 2024

mẹo hay Hiệu ứng Mpemba
Công cụ kiểm tra lỗi chính tả trong word năm 2024
Công cụ kiểm tra lỗi chính tả trong word năm 2024

mẹo hay
Khắc phục lỗi hp pc hardware diagnostics uefi năm 2024
Khắc phục lỗi hp pc hardware diagnostics uefi năm 2024

mẹo hay Test hardware PC
Lượng nước mưa trung bình trên m2 ở tp.hcm năm 2024
Lượng nước mưa trung bình trên m2 ở tp.hcm năm 2024

mẹo hay
Phượng hoàng cổ trấn tên tiếng trung là gì năm 2024
Phượng hoàng cổ trấn tên tiếng trung là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng trung
Lỗi văng game liên quân trên iphone 6 năm 2024
Lỗi văng game liên quân trên iphone 6 năm 2024

mẹo hay Công Nghệ Iphone Game Garena
Công văn số 180/mt-vp ngày 12/02/2023 năm 2024
Công văn số 180/mt-vp ngày 12/02/2023 năm 2024

mẹo hay
Dùng phần mề kế toán giải quyết đucợ những gì năm 2024
Dùng phần mề kế toán giải quyết đucợ những gì năm 2024

mẹo hay Kế toán online AMIS Kế toán
Last seen recently nghĩa là gì năm 2024
Last seen recently nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì Last seen recently
Luyến ái 1 2 tên trung quốc là gì năm 2024
Luyến ái 1 2 tên trung quốc là gì năm 2024

là ai Hỏi Đáp Là gì
Cach chup anh va quay phim tren lap top năm 2024
Cach chup anh va quay phim tren lap top năm 2024

mẹo hay Top List Top Phim CyberLink YouCam Camera laptop
Sau sinh nên uống sữa tươi loại nào năm 2024
Sau sinh nên uống sữa tươi loại nào năm 2024

mẹo hay
Bị lỗi khi nộp tiền thuế qua mạng năm 2024
Bị lỗi khi nộp tiền thuế qua mạng năm 2024

mẹo hay Thuế điện tử thuedientu.gdt.gov.vn đăng nhập Tổng cục Thuế
Độc lập dân tộc là gì năm 2024
Độc lập dân tộc là gì năm 2024

là ai Hỏi Đáp Là gì
Đề thi toán tuổi thơ lớp 5 cấp quốc gia năm 2024
Đề thi toán tuổi thơ lớp 5 cấp quốc gia năm 2024

mẹo hay
Bài tập tiếng anh về bộ phận cơ thể người năm 2024
Bài tập tiếng anh về bộ phận cơ thể người năm 2024

mẹo hay Khỏe Đẹp Cơ thể Bài tập Học Tốt Tiếng anh
Anh em dùng ứng dụng mindmap nào tinh tế năm 2024
Anh em dùng ứng dụng mindmap nào tinh tế năm 2024

mẹo hay Mindnode là gì Cách dụng MindNode Xmind

Quảng Cáo

Có thể bạn quan tâm

Bài tập excel bảng theo dõi nhập xuất hàng năm 2024
1 ngày trước . bởi InnateBaker
Giải sgk toán lớp 8 tập 2 trang 30 31 năm 2024
1 ngày trước . bởi EligibleSystem
Bạn phạm lỗi lần 1 là do bạn sai năm 2024
1 ngày trước . bởi LegitimateObscurity
Spot rate and forward rate là gì năm 2024
1 ngày trước . bởi Best-knownParson
Mã hóa web config để che đi thông tin string năm 2024
1 ngày trước . bởi SereneDemonstration
Khai thác các giá trị văn hóa trong du lịch năm 2024
1 ngày trước . bởi Self-supportingHumility
Hãy đến và cảm nhận tiếng anh là gì năm 2024
1 ngày trước . bởi DevoidTreadmill
Bài toán kế hoạch kinh doanh lop 10 năm 2024
1 ngày trước . bởi GruesomeGirlfriend
Top nhung nguoi dep trai nhat trong 101 mua 4 năm 2024
1 ngày trước . bởi SmokyDepletion
Lãi suất hoàn vốn là gì năm 2024
1 ngày trước . bởi CrookedMonument

Toplist được quan tâm

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
5 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
5 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
5 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
5 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
5 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
5 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
5 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
5 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Bài tập có lời giải tổ chức thi công năm 2024
4 ngày trước . bởi VolubleBrowsing
Giải các bài toán tìm x lớp 4 năm 2024
1 tuần trước . bởi PredominantManga
Bị tê gót chân là bệnh gì năm 2024
1 tuần trước . bởi AdultClerk
Cuộc gọi không xác định là gì năm 2024
1 tuần trước . bởi UncontrollableComplexity
Dđiện trở các cặp dây máy nén là bao nhiêu năm 2024
2 ngày trước . bởi TelevisedNarration
Vietnam airline được ký gửi bao nhiêu kg năm 2024
1 ngày trước . bởi ProlongedSeating
Last seen recently nghĩa là gì năm 2024
3 giờ trước . bởi High-levelRelaxation
Đại học tôn đức thắng bao nhiêu 1 tín chỉ năm 2024
1 tuần trước . bởi WashedChina
1 8 ga tương đương bao nhiêu km h năm 2024
1 tuần trước . bởi All-powerfulFrequency
Anh trai gọi em gái là gì trong tiếng hàn năm 2024
6 ngày trước . bởi SpentDeliverance

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 boxhoidap.com Inc.