Cách kết nối frontend và backend trong python

Question

Python đã trở nên phổ biến vô cùng trong những năm gần đây. Nó có nhiều ứng dụng, từ ứng dụng phổ biến nhất trong Trí tuệ nhân tạo, đến Khoa học dữ liệu, Người máy và Viết kịch bản

Nội dung chính Show

điều kiện tiên quyết
PyScript là gì?
Tại sao lại là PyScript?
Cách bắt đầu với PyScript
Tạo một tệp HTML
Liên kết PyScript
In ra trình duyệt
Nhiều thao tác hơn với PyScript
Gắn nhãn cho các phần tử được gắn nhãn
Chạy REPL trong trình duyệt
Nhập tệp, mô-đun và thư viện
Định cấu hình siêu dữ liệu
Phần kết luận
Người giới thiệu
Tôi có thể sử dụng Python cho phụ trợ và giao diện người dùng không?
Làm cách nào để kết nối phụ trợ Python với giao diện người dùng JS?
Tôi có thể sử dụng HTML cho giao diện người dùng và Python cho phụ trợ không?
Làm cách nào để kết hợp HTML với Python?

Trong lĩnh vực phát triển web, Python được sử dụng chủ yếu trên backend với các framework như Django và Flask

Trước đây, Python không có nhiều hỗ trợ ở mặt trước như các ngôn ngữ khác như JavaScript. Nhưng may mắn thay, các nhà phát triển Python đã xây dựng một số thư viện (chẳng hạn như Brython) để hỗ trợ ngôn ngữ yêu thích của họ trên web

Và năm nay, trong hội nghị PyCon 2022, Anaconda đã công bố một khung có tên PyScript cho phép bạn sử dụng Python trên web bằng HTML tiêu chuẩn

Bạn có thể xem tweet này về việc ra mắt

📢 Bạn đã nghe tin từ PyCon chưa. ? . Đi tới https. //t. co/n4OoeBD46z để biết thêm thông tin. 🧠 💥
– Anaconda (@anacondainc) ngày 30 tháng 4 năm 2022

điều kiện tiên quyết

Bạn sẽ cần các công cụ và kiến thức sau để viết mã cùng với bài viết này

Trình soạn thảo văn bản hoặc IDE do bạn chọn
Kiến thức về Python
Kiến thức về HTML
Trình duyệt (Google Chrome là trình duyệt được đề xuất cho PyScript)

PyScript là gì?

Nguồn. Trang web chính thức của PyScript

PyScript là một khung giao diện người dùng Python cho phép người dùng xây dựng các chương trình Python bằng giao diện HTML trong trình duyệt

Nó được phát triển bằng cách sử dụng sức mạnh của Emscripten, Pyodide, WASM và các công nghệ web hiện đại khác để cung cấp các khả năng sau phù hợp với mục tiêu của nó

Để cung cấp một API đơn giản và rõ ràng
Để cung cấp một hệ thống các thành phần có thể cắm và mở rộng
Để hỗ trợ và mở rộng HTML tiêu chuẩn để đọc các thành phần tùy chỉnh được đánh giá cao và đáng tin cậy nhằm đạt được sứ mệnh “Lập trình cho 99%. ”

Nguồn. Blog Anaconda

Trong vài thập kỷ qua, Python và các ngôn ngữ giao diện người dùng nâng cao như HTML, CSS và JavaScript hiện đại đã không hoạt động cùng nhau. Python thiếu một cơ chế đơn giản để tạo giao diện người dùng hấp dẫn để đóng gói và triển khai ứng dụng một cách đơn giản, trong khi HTML, CSS và JavaScript hiện tại có thể có đường cong học tập dốc

Việc cho phép Python sử dụng các quy ước HTML, CSS và JavaScript không chỉ giải quyết hai vấn đề đó mà còn giải quyết các vấn đề liên quan đến phát triển, đóng gói, phân phối và triển khai ứng dụng web

Tuy nhiên, PyScript không có nghĩa là đảm nhận vai trò của JavaScript trong trình duyệt - thay vào đó, nó có nghĩa là cung cấp cho các nhà phát triển Python, đặc biệt là các nhà khoa học dữ liệu, tính linh hoạt và sức mạnh hơn

Tại sao lại là PyScript?

PyScript cung cấp cho bạn một ngôn ngữ lập trình với các quy ước kiểu dáng nhất quán, biểu cảm hơn và dễ học bằng cách cung cấp những điều sau

Hỗ trợ trên trình duyệt. PyScript cho phép hỗ trợ Python và lưu trữ mà không cần máy chủ hoặc cấu hình
khả năng tương tác. Các chương trình có thể giao tiếp hai chiều giữa các đối tượng và không gian tên Python và JavaScript
hỗ trợ hệ sinh thái. PyScript cho phép sử dụng các gói Python phổ biến như Pandas, NumPy, v.v.
linh hoạt khung. PyScript là một khung linh hoạt mà các nhà phát triển có thể xây dựng trên đó để tạo các thành phần có thể mở rộng trực tiếp trong Python một cách dễ dàng
Quản lý môi trường. PyScript cho phép các nhà phát triển xác định các tệp và gói để đưa vào mã trang của họ để chạy
Phát triển giao diện người dùng. Với PyScript, các nhà phát triển có thể dễ dàng xây dựng với các thành phần giao diện người dùng có sẵn như nút và vùng chứa, v.v.

Cách bắt đầu với PyScript

PyScript khá dễ dàng và dễ học. Để bắt đầu, bạn có thể làm theo hướng dẫn trên trang web hoặc tải xuống. tập tin zip

Trong bài viết này, chúng ta sẽ sử dụng và học cách sử dụng PyScript thông qua trang web. Bạn có thể làm điều này bằng cách liên kết các thành phần trong tệp HTML của mình. Hãy in “Xin chào thế giới” đầu tiên của chúng tôi với PyScript

Tạo một tệp HTML

Để bắt đầu, bạn cần tạo một tệp HTML để hiển thị văn bản trên trình duyệt của mình bằng trình soạn thảo văn bản/IDE mà bạn chọn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>

</body>
</html>

Liên kết PyScript

Sau khi tạo tệp HTML, chúng tôi sẽ cần liên kết PyScript trong tệp HTML của bạn để có quyền truy cập vào giao diện PyScript. Điều này sẽ được đặt trong thẻ

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

0

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

In ra trình duyệt

Bây giờ bạn đã liên kết PyScript với tệp HTML, bạn có thể in “Xin chào thế giới” của mình

Bạn có thể làm điều này với thẻ

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

1. Thẻ

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

1 cho phép bạn chạy các chương trình Python nhiều dòng và in chúng trên trang trình duyệt. Đặt thẻ vào giữa các thẻ

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

3

<body> <py-script> print("Hello, World!") </py-script> </body>

Mã đầy đủ cho tệp HTML bên dưới

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>
	<py-script> print("Hello, World!") </py-script>
</body>
</html>

Trên trình duyệt của bạn, bạn sẽ thấy điều này

Mẹo. Nếu đang sử dụng trình chỉnh sửa VSCode, bạn có thể sử dụng tiện ích Máy chủ Trực tiếp trong VSCode để tải lại trang khi bạn cập nhật tệp HTML

Nhiều thao tác hơn với PyScript

Có nhiều thao tác hơn bạn có thể thực hiện với khung PyScript. Bây giờ chúng ta hãy nhìn vào một số trong số họ

Gắn nhãn cho các phần tử được gắn nhãn

Trong khi sử dụng PyScript, bạn có thể muốn chuyển các biến từ mã Python sang HTML. Bạn có thể thực hiện việc này bằng phương pháp

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

4 từ mô-đun

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

5 trong thẻ

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

6. Sử dụng thuộc tính

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

7, bạn có thể chuyển các chuỗi được hiển thị dưới dạng văn bản thông thường

Phương thức ghi chấp nhận hai biến. giá trị

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

7 và biến sẽ được cung cấp

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>

  <body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
    </py-script>
  </body>
</html>

Và đầu ra trở thành

Chạy REPL trong trình duyệt

PyScript cung cấp giao diện để chạy mã Python trong trình duyệt

Để có thể làm được điều này, PyScript sử dụng thẻ

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

9. Thẻ

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

9 thêm thành phần REPL vào trang, hoạt động như một trình chỉnh sửa mã và cho phép bạn viết mã thực thi nội tuyến

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <py-repl id="my-repl" auto-generate=true> </py-repl>
</html>

Dùng thử trên trình duyệt (tốt nhất là Chrome), bạn sẽ nhận được cái này

Nhập tệp, mô-đun và thư viện

Một trong những chức năng mà PyScript cung cấp là tính linh hoạt. Trong PyScript, bạn có thể nhập tệp cục bộ, mô-đun sẵn có hoặc thư viện của bên thứ ba. Quá trình này sử dụng thẻ

<body> <py-script> print("Hello, World!") </py-script> </body>

1. Thẻ này dùng để khai báo các phụ thuộc cần thiết

Đối với các tệp Python cục bộ trên hệ thống của bạn, bạn có thể đặt mã vào tệp

<body> <py-script> print("Hello, World!") </py-script> </body>

2 và đường dẫn đến các mô-đun cục bộ được cung cấp trong đường dẫn. nhập vào thẻ

<body> <py-script> print("Hello, World!") </py-script> </body>

1

Hãy tạo một tệp Python

<body> <py-script> print("Hello, World!") </py-script> </body>

4 để chứa một số chức năng

from random import randint

def add_two_numbers(x, y):
    return x + y

def generate_random_number():
    x = randint(0, 10)
    return x

Sau đó, tệp Python sẽ được nhập vào HTML bằng thẻ

<body> <py-script> print("Hello, World!") </py-script> </body>

1. Bạn nên đặt thẻ này trong thẻ

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

0, phía trên thẻ

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

3

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - paths:
          - /example.py
      </py-env>
    </head>

  <body>
    <h1>Let's print random numbers</h1>
    <b>Doe's lucky number is <label id="lucky"></label></b>
    <py-script>
      from example import generate_random_number
      pyscript.write('lucky', generate_random_number())
    </py-script>
  </body>
</html>

Điều này sẽ trở lại

Đối với các thư viện của bên thứ ba không phải là một phần của thư viện tiêu chuẩn, PyScript hỗ trợ chúng

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
            - numpy
            - requests
      </py-env>
    </head>

  <body>
    <py-script>
	import numpy as np
	import requests
    </py-script>
  </body>
</html>

Định cấu hình siêu dữ liệu

Bạn có thể đặt và định cấu hình siêu dữ liệu chung về ứng dụng PyScript của mình ở định dạng YAML bằng cách sử dụng thẻ

<body> <py-script> print("Hello, World!") </py-script> </body>

8. Bạn có thể sử dụng thẻ này ở định dạng này

<py-config>
  - autoclose_loader: false
  - runtimes:
    -
      src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
      name: pyodide-0.20
      lang: python
</py-config>

Đây là các giá trị tùy chọn mà thẻ

<body> <py-script> print("Hello, World!") </py-script> </body>

9 cung cấp. Chúng bao gồm

autoclose_loader (boolean). Nếu điều này được đặt thành false, PyScript sẽ không đóng màn hình khởi động đang tải
tên (chuỗi). Tên ứng dụng người dùng
phiên bản (chuỗi). Phiên bản của ứng dụng người dùng
thời gian chạy (Danh sách thời gian chạy). Danh sách các cấu hình thời gian chạy sẽ có các trường sau. src, tên và ngôn ngữ

Phần kết luận

Trong bài viết này, bạn đã tìm hiểu PyScript là gì và cách sử dụng nó trong tệp HTML để chạy mã Python trên trình duyệt. Bạn cũng đã tìm hiểu về các thao tác/chức năng khác nhau mà bạn có thể thực hiện với PyScript

Với PyScript, việc chạy và thực hiện các thao tác Python trên web trở nên dễ dàng hơn, vì điều này trước đây không hề dễ dàng. Đây là một công cụ tuyệt vời cho những ai mong muốn sử dụng Python trên web

PyScript vẫn đang trong giai đoạn đầu và đang được phát triển mạnh mẽ. Nó vẫn đang ở giai đoạn alpha và phải đối mặt với các vấn đề đã biết như thời gian tải có thể ảnh hưởng đến khả năng sử dụng (một số hoạt động khác không thể được hiển thị tại thời điểm viết bài này do các vấn đề về hiệu suất). Vì vậy, bạn chưa nên sử dụng nó trong sản xuất vì có thể sẽ có nhiều thay đổi đột phá

Người giới thiệu

Trang web chính thức của PyScript
trang cá sấu
Mã nguồn PyScript
Hướng dẫn bắt đầu với PyScript

QUẢNG CÁO

Ifihanagbara Olusheye

Kỹ sư phần mềm. Nhà văn kỹ thuật

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tôi có thể sử dụng Python cho phụ trợ và giao diện người dùng không?

Python là ngôn ngữ lập trình đa năng mạnh mẽ phục vụ cả nhu cầu giao diện người dùng và phụ trợ . Điều đó đang được nói, Python được sử dụng phổ biến hơn ở mặt sau và thường được gọi là như vậy.

Làm cách nào để kết nối phụ trợ Python với giao diện người dùng JS?

Chạy chương trình phụ trợ Python với giao diện người dùng JavaScript . py trong dấu nhắc lệnh/thiết bị đầu cuối trong thư mục phụ trợ Make sure the backend server is running by running the command python app.py in the terminal/command prompt in the backend directory . Sau đó khởi động máy chủ web giao diện người dùng nếu nó không chạy trong thư mục giao diện người dùng. máy chủ http.

Tôi có thể sử dụng HTML cho giao diện người dùng và Python cho phụ trợ không?

Các khía cạnh trực quan của trang web mà người dùng có thể nhìn thấy và trải nghiệm là giao diện người dùng. Mặt khác, mọi thứ xảy ra trong nền có thể được quy cho phần phụ trợ. Các ngôn ngữ được sử dụng cho giao diện người dùng là HTML, CSS và JavaScript trong khi các ngôn ngữ được sử dụng cho giao diện người dùng bao gồm Java, Ruby, Python và. Mạng .