Tôi đã thực hiện chính xác điều này trên Windows. Tôi có một trang .html cục bộ mà tôi sử dụng làm "bảng điều khiển" cho tất cả các công việc hiện tại của tôi. Ngoài các liên kết thông thường, tôi đã có thể thêm các liên kết có thể nhấp mở các tài liệu từ MS, bảng tính Excel, mở IDE của tôi, SSH vào máy chủ, v.v. Show
Đầu tiên, cập nhật sổ đăng ký Windows. Trình duyệt của bạn xử lý các giao thức thông thường như HTTP, HTTPS, FTP. Bạn có thể xác định giao thức của riêng bạn và một trình xử lý sẽ được gọi khi nhấp vào liên kết của loại giao thức đó. Đây là cấu hình (chạy với mkdir .vscode && cd .vscode3) Với điều này, khi tôi có một liên kết như mkdir .vscode && cd .vscode4, nhấp vào nó sẽ gọi mkdir .vscode && cd .vscode5 chuyển cho nó tham số dòng lệnh mkdir .vscode && cd .vscode6. Mã VBS của tôi xem xét tham số này và thực hiện điều cần thiết (trong trường hợp này, bởi vì nó kết thúc bằng .docx, nó gọi MS-word với mkdir .vscode && cd .vscode7 làm tham số cho nó. Bây giờ, tôi đã viết trình xử lý của mình bằng VBS chỉ vì nó là mã rất cũ (như hơn 15 năm). Tôi đã không thử nó, nhưng thay vào đó, bạn có thể viết một trình xử lý Python, mkdir .vscode && cd .vscode8. Tôi sẽ để nó cho bạn viết người xử lý của riêng bạn. Đối với các tập lệnh của bạn, liên kết của bạn có thể là mkdir .vscode && cd .vscode9 (tiền tố {
"editor.formatOnSave": false
}
0 cho biết tay cầm của bạn chạy với Python).  Dự án Pyscript mới cho phép bạn nhúng các chương trình Python trực tiếp vào các trang HTML và thực hiện chúng trong trình duyệt mà không có bất kỳ yêu cầu dựa trên máy chủ nào. Dự án đã được công bố vào cuối tuần này tại Pycon US 2022 và hoạt động như một trình bao bọc xung quanh & nbsp; pyodide & nbsp; Project, tải trình thông dịch Cpython như một mô -đun trình duyệt webassugging. "Pyscript là một khung cho phép người dùng tạo các ứng dụng Python phong phú trong trình duyệt bằng cách sử dụng hỗn hợp Python với HTML tiêu chuẩn." Giải thích Anaconda trong một bài đăng trên blog gần đây & nbsp; "Pyscript nhằm mục đích cung cấp cho người dùng ngôn ngữ lập trình hạng nhất có quy tắc kiểu dáng nhất quán, biểu cảm hơn và dễ học hơn." Mặc dù dự án pyodide trước đây cho phép bạn chạy Python trong trình duyệt, nhưng phải mất một thời gian để làm quen với cú pháp và không thanh lịch như chỉ đơn giản là viết một chương trình Python và dán nó vào trang HTML của bạn. Tuy nhiên, & nbsp; pyscript & nbsp; hoạt động như một trình bao bọc, cho phép bạn nhúng mã python trực tiếp giữa các thẻ {
"editor.formatOnSave": false
}
1 và tự động được thực thi bởi pyodide.Ví dụ: sau đây minh họa một ví dụ Hello World nhỏ bằng Pyscript và thực hiện trực tiếp trong trình duyệt. Lưu ý cách hàm {
"editor.formatOnSave": false
}
2 cho phép bạn xuất dữ liệu trực tiếp vào phần tử HTML.Các nhà phát triển cũng có thể mở rộng các trang Pyscript thông qua các gói Python bổ sung & nbsp; được tích hợp vào pyodide & nbsp; hoặc thông qua các gói được lưu trữ trên hệ thống tập tin cục bộ. Pyscript's get-started.md & nbsp; File cung cấp tài liệu về cách nhập các gói vào mã của bạn. Ngoài việc thực thi mã được nhúng trong HTML, cũng có thể thêm trình soạn thảo mã trực tiếp vào trang HTML bằng thẻ {
"editor.formatOnSave": false
}
3 để bạn có thể nhập mã và thực thi nó, như hiển thị bên dưới.Sử dụng trình chỉnh sửa giúp bạn dễ dàng kiểm tra mã một cách nhanh chóng và xem những gì sẽ và sẽ không hoạt động với Pyscript. Mặc dù JavaScript đã có thể thực hiện hầu hết mọi thứ bạn muốn tạo bằng Pyscript, với Python được coi là ngôn ngữ lập trình phổ biến nhất, Pyscript mở ra cơ hội cho nhiều dự án thú vị trên đường. Để bắt đầu với Pyscript, bạn có thể truy cập trang dự án & NBSP của họ, trong đó cũng bao gồm nhiều ví dụ về mã. Trong một thời gian dài, JavaScript đã là ngôn ngữ thống trị trong sự phát triển frontend do khả năng chạy tự nhiên trong trình duyệt và tương tác với HTML và CSS thông qua API DOM. Với sự ra đời của webassugging, mọi thứ đã bắt đầu thay đổi chậm. Các ngôn ngữ như Go, Rust, C, C ++ và nhiều ngôn ngữ khác giờ đây có thể chạy trong trình duyệt với tốc độ gần như bản địa, và Python đã bị bỏ lại phía sau. Với sự ra đời của Pyscript, các nhà phát triển Frontend hiện có thể xây dựng các mặt tiền phong phú với Python. Hơn nữa, họ cũng có thể khai thác vào hệ sinh thái Python, có các mô -đun khoa học hữu ích như Numpy, Matplotlib, và nhiều hơn nữa. Trong hướng dẫn này, chúng tôi sẽ trình bày như sau:
Điều kiện tiên quyếtĐể tận dụng tối đa hướng dẫn này, bạn sẽ cần:
Pyscript là gì?Pyscript là một khung web nguồn mở cho phép bạn tạo các ứng dụng web frontend bằng Python. Với Pyscript, bạn có thể nhúng mã Python vào HTML hoặc liên kết đến tệp Python và mã sẽ thực thi trong trình duyệt - mà không cần chạy Python trong phần phụ trợ. Tôi có thể chạy tập lệnh Python trong trang web không? Pyscript hoạt động như thế nào?Thiết lập thư mục dự án của bạn cho Pyscript Thiết lập thư mục dự án của bạn cho PyscriptVô hiệu hóa các công cụ tự động định dạng như đẹp hơn Bắt đầu mkdir pyscript_demo Pyscript nội bộ cd pyscript_demo Pyscript bên ngoài Tạo tệp {
"editor.formatOnSave": false
}
4Giả sử bạn sử dụng VSCode, chúng tôi có thể vô hiệu hóa định dạng tự động như sau. Trong thư mục dự án của bạn, hãy tạo thư mục <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
2 và điều hướng vào thư mục với lệnh sau.mkdir .vscode && cd .vscode Tiếp theo, tạo tệp <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
3 và thêm các nội dung sau:{
"editor.formatOnSave": false
}
Cùng với đó, tính năng Auto Format On Save cho thư mục này đã bị vô hiệu hóa trong VSCODE và chúng tôi hiện đã sẵn sàng để bắt đầu sử dụng Pyscript. Bắt đầuBây giờ thư mục của chúng tôi được thiết lập cho Pyscript, trước tiên chúng tôi sẽ thêm các liên kết vào tài sản Pyscript bao gồm tệp CSS và tệp JavaScript trong phần <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
4 của trang HTML.Khi tài sản đã được thêm vào, bạn có thể sử dụng Pyscript trong tệp HTML theo hai cách:
Pyscript nội bộCách dễ nhất và nhanh nhất để bắt đầu sử dụng Pyscript là nhúng mã Python vào tệp HTML. Hãy để làm điều đó! Mở trình soạn thảo văn bản ưa thích của bạn, tạo tệp <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
</body>
</html>
2 và thêm các nội dung sau:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
Trong phần <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
4, chúng tôi liên kết với tệp <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
</body>
</html>
4, chứa các kiểu cho các thành phần trực quan pyscript, repl, trình tải pyscript, v.v. Tạo các thẻ như <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
5 nơi bạn có thể viết mã Python của mình.Trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
8, bạn đã nhúng mã Python vào thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
5. Bây giờ chúng tôi đang giữ mọi thứ đơn giản, vì vậy chúng tôi chỉ in <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
</body>
</html>
9 cho người dùng.Đảm bảo lưu tệp của bạn trong root của thư mục dự án của bạn và mở tệp <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
</body>
</html>
2 trong Chrome. Sẽ mất một vài giây để tải và một khi trang đã được tải, nó sẽ trông tương tự như thế này:Pyscript bên ngoàiTrong khi đặt mã python vào thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
5 hoạt động, một cách tiếp cận tốt hơn và có thể mở rộng hơn nhiều là thêm mã vào một tệp bên ngoài và tham chiếu nó trong tệp HTML khi bạn tạo thêm các trang HTML hoặc tập lệnh của bạn lớn hơn.Sau đây là một số lý do tại sao bạn nên xem xét sử dụng mã Pyscript trong một tệp bên ngoài:
Để sử dụng Pyscript bên ngoài, chúng tôi sẽ tạo một tệp {
"editor.formatOnSave": false
}
4, một tệp Python kết thúc với tiện ích mở rộng <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
9 chứa mã Python của chúng tôi và cuối cùng tham chiếu tệp Python trong tệp {
"editor.formatOnSave": false
}
4.Tạo tệp { "editor.formatOnSave": false } 4Tạo tệp {
"editor.formatOnSave": false
}
4 và liên kết đến tài sản Pyscript:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
</body>
</html>
Các tập tin không phải là làm nhiều; Chúng tôi chỉ đang liên kết với các tài nguyên pyscript. Để làm cho nó hữu ích hơn, chúng tôi sẽ tạo một tệp {
"editor.formatOnSave": false
}
5 nơi mã Python của chúng tôi sẽ nằm.Tạo tệp { "editor.formatOnSave": false } 5Hãy để tạo ra một chức năng Python in một thông điệp chào hỏi. Trong trình soạn thảo văn bản của bạn, hãy tạo tệp {
"editor.formatOnSave": false
}
5 và thêm mã bên dưới:def greetings(name):
print(f'Hi, {name}')
greetings('John Doe')
Hàm <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
// add the following line
<py-script src="./main.py"></py-script>
</body>
</html>
0 có tham số <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
// add the following line
<py-script src="./main.py"></py-script>
</body>
</html>
1 và in một thông báo chào hỏi với tên được lưu trong tham số <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
// add the following line
<py-script src="./main.py"></py-script>
</body>
</html>
1. Khi chúng tôi gọi hàm <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
// add the following line
<py-script src="./main.py"></py-script>
</body>
</html>
0 với <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
// add the following line
<py-script src="./main.py"></py-script>
</body>
</html>
4 là một đối số, nó sẽ in <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
// add the following line
<py-script src="./main.py"></py-script>
</body>
</html>
5.Liên kết tệp { "editor.formatOnSave": false } 5 trong tệp HTMLBây giờ bạn đã tạo mã Python, bạn sẽ tham khảo tệp {
"editor.formatOnSave": false
}
5 trong tệp {
"editor.formatOnSave": false
}
4.Nhiều bài viết tuyệt vời hơn từ Logrocket:
Mở {
"editor.formatOnSave": false
}
4 và thêm dòng bên trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
8:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
// add the following line
<py-script src="./main.py"></py-script>
</body>
</html>
Thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
5 có thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
</body>
</html>
1, chấp nhận đường dẫn tệp của tệp Python.Mở tệp { "editor.formatOnSave": false } 4 trong trình duyệtBây giờ mọi thứ đã được đưa ra, chúng tôi sẽ mở {
"editor.formatOnSave": false
}
4 trong trình duyệt.Tuy nhiên, các trình duyệt sẽ từ chối tải và thực thi tệp Python bên ngoài do lỗi chính sách chia sẻ tài nguyên có nguồn gốc chéo (CORS). Để giải quyết vấn đề này, chúng ta sẽ cần sử dụng một máy chủ. Điều tốt là Python vận chuyển với một máy chủ web mà chúng ta có thể sử dụng! Máy chủ không cần phải được tạo bởi Python, bạn có thể sử dụng máy chủ trực tiếp hoặc bất kỳ máy chủ nào bạn chọn. Để tạo một máy chủ, hãy mở thiết bị đầu cuối trong thư mục gốc của dự án của bạn và chạy lệnh sau: python -m http.server Tiếp theo, mở chrome và ghé thăm python -m http.server5. Máy chủ sẽ tự động tải tệp {
"editor.formatOnSave": false
}
4 và bạn sẽ thấy như sau:Đối với phần còn lại của hướng dẫn này, chúng tôi sẽ tham khảo một tệp Python bên ngoài, điều này sẽ yêu cầu chúng tôi sử dụng máy chủ để tránh lỗi CORS và đôi khi chúng tôi sẽ nhúng mã Python trong HTML vì lợi ích ngắn gọn. Sử dụng pyscript replinPyscript đi kèm với một vòng lặp in read-eval (repl), mà bạn có thể sử dụng để thử nghiệm và thử mã Python. Để sử dụng replet, hãy thêm thẻ python -m http.server7 trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
8 trong tệp {
"editor.formatOnSave": false
}
4 của bạn:mkdir pyscript_demo0 Với máy chủ vẫn đang chạy, hãy truy cập python -m http.server5. Bạn sẽ thấy một phần mới nơi bạn có thể nhập mã Python. Bạn có thể nhập các mô -đun, đánh giá các biểu thức, tạo các chức năng và làm nhiều việc hơn. Để xem những gì một biểu thức đánh giá, bạn cần nhấp vào biểu tượng chơi màu xanh lá cây.Play icon. Hình ảnh sau đây cho thấy một số hoạt động bạn có thể làm: Bây giờ chúng ta đã biết cách sử dụng repl, tiếp theo chúng ta sẽ tìm hiểu cách tạo và sử dụng các mô -đun trong Pyscript. Sử dụng các mô -đun python trong pyscriptTrong phần này, chúng tôi sẽ tạo một mô -đun Python tùy chỉnh và sử dụng nó trong mã của chúng tôi. Chúng tôi cũng sẽ sử dụng các mô-đun từ Thư viện tiêu chuẩn Python, cũng như các mô-đun của bên thứ ba. Để sử dụng các mô -đun, chúng tôi sẽ giới thiệu một thẻ mới, mkdir pyscript_demo01, cho phép chúng tôi tham chiếu các mô -đun hoặc đường dẫn tệp mô -đun. Tạo các mô -đun tùy chỉnhHãy để tạo ra một mô -đun cục bộ chứa hai chức năng. Tạo tệp mkdir pyscript_demo02 trong thư mục dự án của bạn và thêm mã bên dưới: mkdir pyscript_demo1 Ở đây chúng tôi đã tạo ra hai chức năng thực hiện các hoạt động bổ sung và trừ. Tiếp theo, tạo tệp mkdir pyscript_demo03 và thêm các nội dung sau: mkdir pyscript_demo2 Trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
8, chúng tôi sử dụng thẻ mkdir pyscript_demo01, chấp nhận danh sách YAML có mkdir pyscript_demo06 làm khóa của nó. mkdir pyscript_demo02 là đường dẫn tệp của mô -đun tùy chỉnh so với tệp mkdir pyscript_demo03. Khi đường dẫn đến mô -đun tùy chỉnh được chỉ định, Pyscript sẽ nhập mô -đun trong tệp. Với mô -đun được tải, trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
5, chúng tôi nhập hàm mkdir pyscript_demo10 từ mkdir pyscript_demo02 và gọi hàm với các đối số mkdir pyscript_demo12 và mkdir pyscript_demo13. Với máy chủ đang chạy, hãy truy cập mkdir pyscript_demo14 và bạn sẽ thấy một trang tương tự như thế này: Nhập các mô -đun từ Thư viện tiêu chuẩn PythonPyscript, với sự trợ giúp của pyodide, cung cấp quyền truy cập vào rất nhiều mô -đun có sẵn trong thư viện tiêu chuẩn Python đã sẵn sàng để bạn sử dụng, ngoại trừ những điều sau đây:
Truy cập tài liệu Pyodide để xem một danh sách toàn diện. Ngoài ra, hãy lưu ý các mô -đun được bao gồm nhưng không chức năng, chẳng hạn như các mô -đun đa xử lý, luồng và ổ cắm. Các mô -đun trong thư viện tiêu chuẩn có sẵn trong không gian tên Pyscript theo mặc định; Bạn chỉ cần nhập chúng để sử dụng chúng trong tệp. Vẫn trong tệp mkdir pyscript_demo03, sửa đổi mã Python trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
5 để tạo số ngẫu nhiên bằng mô -đun mkdir pyscript_demo17: mkdir pyscript_demo3 Bây giờ hãy truy cập trang mkdir pyscript_demo14 và bạn sẽ thấy một số ngẫu nhiên được tạo mỗi khi bạn làm mới trang: Sử dụng các gói của bên thứ baNgoài việc sử dụng các mô-đun Python sẵn có, bạn cũng có thể sử dụng các thư viện của bên thứ ba được vận chuyển trong pyodide, chẳng hạn như:
Để biết danh sách đầy đủ các gói của bên thứ ba được hỗ trợ, hãy truy cập tài liệu pyodide hoặc theo dõi chặt chẽ trên repo github pyodide. Để thêm gói của bên thứ ba, hãy tạo tệp HTML mới, mkdir pyscript_demo19 và thêm mã sau: mkdir pyscript_demo4 Trong thẻ mkdir pyscript_demo01, chúng tôi thêm một danh sách các gói của bên thứ ba chúng tôi muốn sử dụng trong dự án của mình, đó là các gói Numpy và Matplotlib. Tiếp theo, trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
5, chúng tôi nhập Numpy dưới dạng mkdir pyscript_demo22 và matplotlib là mkdir pyscript_demo23. Theo đó, chúng tôi gọi phương thức Numpy từ mkdir pyscript_demo24, tạo ra một mảng sau đó được lưu trữ trong biến mkdir pyscript_demo25. Sau đó, chúng tôi gọi phương thức Matplotlib từ mkdir pyscript_demo26 với mảng mkdir pyscript_demo25 là một đối số để vẽ đồ thị. Hãy chắc chắn rằng tệp của bạn được lưu và truy cập trang mkdir pyscript_demo28. Bạn sẽ thấy một biểu đồ tương tự như sau: Bây giờ bạn đã hiểu cách sử dụng các mô-đun tùy chỉnh, sẵn có và các gói của bên thứ ba, chúng tôi sẽ học cách truy cập và thao tác các phần tử HTML trong phần tiếp theo. Truy cập và thao tác các phần tử HTML bằng PyscriptTrong phần này, chúng tôi sẽ tìm hiểu cách chọn phần tử HTML bằng ID hoặc lớp CSS, sửa đổi phần tử, đính kèm các sự kiện vào một phần tử và tạo các phần tử mới bằng Pyscript. Sử dụng lớp { "editor.formatOnSave": false } 8Pyscript vận chuyển với lớp {
"editor.formatOnSave": false
}
8, cho phép bạn chọn phần tử HTML bằng ID của nó.Để xem nó hoạt động như thế nào, hãy tạo một tệp mkdir pyscript_demo31 và chèn các nội dung sau: mkdir pyscript_demo5 Trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
8, chúng tôi có phần tử mkdir pyscript_demo33 với ID là mkdir pyscript_demo34. Chúng tôi sẽ sử dụng ID để chọn phần tử này bằng lớp {
"editor.formatOnSave": false
}
8. Trường hợp đã chọn sẽ cung cấp cho chúng ta các phương thức mà chúng ta có thể sử dụng để chọn con cháu và thao túng chúng.Một thẻ khác chúng tôi sẽ sử dụng là mkdir pyscript_demo36 với ID là mkdir pyscript_demo37. Chúng tôi sẽ sửa đổi mkdir pyscript_demo38 của nó để viết một giá trị mới. Cuối cùng, sau thẻ mkdir pyscript_demo36, chúng tôi liên kết với tệp mkdir pyscript_demo40 sẽ chứa mã Python của chúng tôi. Nó không tồn tại, vì vậy, hãy để đi trước và tạo ra nó. Khi bạn tạo tệp mkdir pyscript_demo40, hãy thêm mã sau vào nó: mkdir pyscript_demo6 Trong mã trước, chúng tôi sử dụng lớp {
"editor.formatOnSave": false
}
8 để truy cập phần tử mkdir pyscript_demo33 bằng ID mkdir pyscript_demo34. Khi một phần tử được chọn bằng lớp {
"editor.formatOnSave": false
}
8, bạn có thể tận dụng một số phương pháp sau:
Trong dòng thứ hai, chúng tôi sử dụng phương thức mkdir pyscript_demo48 để chọn phần tử con thứ nhất của phần tử mkdir pyscript_demo33 bằng tên lớp của nó, mkdir pyscript_demo53. Sau khi chọn trẻ, chúng tôi gọi phương thức mkdir pyscript_demo49 để thêm lớp mới mkdir pyscript_demo55 vào phần tử mkdir pyscript_demo56. Trong dòng thứ ba, chúng tôi truy cập phần tử con thứ hai bằng tên lớp của nó, mkdir pyscript_demo57, sau đó xóa lớp mkdir pyscript_demo57 của nó bằng phương pháp mkdir pyscript_demo50. Tiếp theo, chúng tôi gọi lớp {
"editor.formatOnSave": false
}
8 với ID mkdir pyscript_demo37, cung cấp một tham chiếu đến phần tử mkdir pyscript_demo36 nằm sau phần tử mkdir pyscript_demo63 trong tệp mkdir pyscript_demo31. Cuối cùng, chúng tôi gọi phương thức mkdir pyscript_demo46 với chuỗi mkdir pyscript_demo66. Phương thức sẽ đặt phần tử mkdir pyscript_demo36 giá trị mkdir pyscript_demo38 thành đối số chuỗi. Với máy chủ vẫn còn, hãy truy cập mkdir pyscript_demo69 và kiểm tra phần tử mkdir pyscript_demo33. Bạn sẽ thấy phần tử mkdir pyscript_demo56 đầu tiên hiện có một lớp phụ ( mkdir pyscript_demo55), phần tử thứ hai không có lớp và phần tử mkdir pyscript_demo73 hiện có văn bản chúng tôi đặt trong Python. Gắn các sự kiện vào các yếu tốBây giờ chúng ta có thể chọn các phần tử HTML và thực hiện một số thao tác cơ bản. Trong phần này, chúng tôi sẽ đính kèm một sự kiện nhấp chuột vào một phần tử và thực thi mã Python khi phần tử đã được nhấp. Tạo tệp mkdir pyscript_demo74 và ghi mã bên dưới: mkdir pyscript_demo7 Trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
8, chúng tôi có mkdir pyscript_demo76 với thuộc tính mkdir pyscript_demo77 chứa một số lớp là một phần của tệp <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Greetings!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
</body>
</html>
4. Thẻ mkdir pyscript_demo76 cũng có thuộc tính mkdir pyscript_demo80, gắn một sự kiện mkdir pyscript_demo81 vào nút. Thuộc tính mkdir pyscript_demo80 chấp nhận tên hàm mkdir pyscript_demo83, sẽ là hàm chạy khi nhấp vào nút. Tiếp theo, chúng ta có phần tử mkdir pyscript_demo73 với ID là mkdir pyscript_demo37. Chúng tôi sẽ sửa đổi phần tử trong mkdir pyscript_demo38 với hàm mkdir pyscript_demo83 mà chúng tôi xác định. Cuối cùng, chúng tôi liên kết đến tệp mkdir pyscript_demo88, trong đó sẽ chứa chức năng xử lý sự kiện. Hãy để xác định mkdir pyscript_demo88 và thêm các mục sau: mkdir pyscript_demo8 Hàm mkdir pyscript_demo83 có tham số, mkdir pyscript_demo91, đây là đối tượng sự kiện được truyền tự động đến chức năng khi bạn nhấp vào nút. Bên trong hàm, chúng tôi gọi phương thức Pyscript từ ____ ____146, có hai đối số: ID phần tử mkdir pyscript_demo37 và giá trị chúng tôi muốn viết, trong trường hợp của chúng tôi, mkdir pyscript_demo94. Đảm bảo rằng máy chủ của bạn đang chạy: python -m http.server Sau đó truy cập URL mkdir pyscript_demo95 trong Chrome. Khi trang tải, nhấp vào nút và một thông báo đọc Bạn đã nhấp vào nút, sẽ xuất hiện: Sử dụng JavaScript để truy cập và thao tác với DOMPyscript vận chuyển với mô -đun mkdir pyscript_demo96 cho phép bạn truy cập vào các phương thức JavaScript, như mkdir pyscript_demo97, mkdir pyscript_demo98, mkdir pyscript_demo99, v.v., để truy cập và thao tác các phần tử HTML. Với những điều này, bạn sẽ có thể kết hợp JavaScript và Python để thực hiện một số thao tác DOM tuyệt vời. Đây là một ví dụ: cd pyscript_demo0 Như bạn có thể thấy, chúng tôi đang trộn các phương thức mã Python như cd pyscript_demo00 cùng với các thuộc tính JavaScript cd pyscript_demo01 hoặc cd pyscript_demo02. Trong phần này, chúng tôi chủ yếu sẽ tập trung vào các phương thức cd pyscript_demo02 và thuận tiện, Pyscript thực hiện nó trong phạm vi Python tự động. Chúng tôi đã giành chiến thắng thậm chí cần nhập mô -đun mkdir pyscript_demo96 để sử dụng các phương thức cd pyscript_demo02. Tạo tệp cd pyscript_demo06 và thêm mã sau: cd pyscript_demo1 Trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
8, chúng tôi chỉ có phần tử mkdir pyscript_demo33 trống với ID là mkdir pyscript_demo34. Tiếp theo, chúng tôi tham khảo cd pyscript_demo10 sẽ chứa mã Python của chúng tôi. Tạo tệp cd pyscript_demo10 và thêm các nội dung sau: cd pyscript_demo2 Trong dòng đầu tiên, chúng tôi gọi phương thức mkdir pyscript_demo97 của mô -đun cd pyscript_demo02 với cd pyscript_demo14 làm đối số của nó. Phương thức sẽ tìm và trả về một phần tử với ID là mkdir pyscript_demo34, đó là phần tử mkdir pyscript_demo33 trong tệp cd pyscript_demo06. Trong dòng thứ hai, chúng tôi tạo một danh sách các văn bản điều hướng và lưu trữ nó trong biến cd pyscript_demo18. Sau đó, chúng tôi lặp lại danh sách cd pyscript_demo18. Trên mỗi lần lặp, chúng tôi gọi phương thức mkdir pyscript_demo98 với chuỗi cd pyscript_demo21 để tạo phần tử mkdir pyscript_demo56. Sau đó, chúng tôi thêm văn bản vào phần tử mkdir pyscript_demo56 bằng thuộc tính cd pyscript_demo24 và thêm tên lớp cd pyscript_demo25 vào phần tử mkdir pyscript_demo56 bằng thuộc tính cd pyscript_demo27. Cuối cùng, chúng tôi nối phần tử mkdir pyscript_demo56 vào phần tử mkdir pyscript_demo33 bằng cách gọi mkdir pyscript_demo99 với phần tử cd pyscript_demo31 làm đối số. Đảm bảo rằng tệp của bạn được lưu và máy chủ vẫn đang chạy. Truy cập cd pyscript_demo32 và bạn sẽ thấy một trang giống như sau: Nếu bạn đào sâu hơn và kiểm tra các yếu tố, bạn sẽ thấy rằng các yếu tố mkdir pyscript_demo56 đã được tạo với tên lớp cd pyscript_demo25, mà chúng tôi đặt trong Python: Bây giờ chúng ta có thể truy cập và thao tác DOM bằng lớp {
"editor.formatOnSave": false
}
8, đính kèm các sự kiện vào các phần tử và sử dụng JavaScript để truy vấn và sửa đổi DOM. Tiếp theo, chúng tôi sẽ tìm nạp dữ liệu từ API bằng Pyscript.Tìm nạp và hiển thị dữ liệu từ APITrong phần này, chúng tôi sẽ sử dụng Pyscript để gửi yêu cầu cd pyscript_demo36 tới API để truy xuất dữ liệu. API chúng tôi sẽ sử dụng là API dữ liệu ngẫu nhiên. Chúng tôi sẽ tạo một nút bằng một sự kiện nhấp chuột để chạy một hàm gọi API mỗi khi nhấp vào nút. Tạo tệp cd pyscript_demo37 trong thư mục của bạn và thêm các nội dung sau: cd pyscript_demo3 Mã nên quen thuộc vào thời điểm này. Phần quan trọng nhất là thẻ mkdir pyscript_demo76, có thuộc tính cd pyscript_demo39 chấp nhận hàm cd pyscript_demo40. Hàm sẽ nằm trong tệp cd pyscript_demo41 được liên kết ở phía dưới. Hãy để đi trước và tạo tập tin. Trong trình soạn thảo văn bản của bạn, hãy tạo một tệp mới có tên cd pyscript_demo41 với các nội dung sau: cd pyscript_demo4 Trong dòng đầu tiên, chúng tôi nhập phương thức cd pyscript_demo43 từ mô -đun cd pyscript_demo44, cho phép chúng tôi thực hiện các yêu cầu mạng không đồng bộ. Trong dòng thứ hai, chúng tôi nhập mô -đun cd pyscript_demo45, là một phần của thư viện tiêu chuẩn Python và cung cấp các từ khóa cd pyscript_demo46 và cd pyscript_demo47 hữu ích để tạo các hàm không đồng bộ. Tiếp theo, chúng tôi xác định hàm không đồng bộ cd pyscript_demo40 bằng cách tiền tố nó với từ khóa cd pyscript_demo46 từ mô -đun cd pyscript_demo45. Trong hàm, chúng tôi gọi phương thức cd pyscript_demo43 chấp nhận hai đối số:
Khi cd pyscript_demo43 chạy, nó trả về một đối tượng, sau đó được lưu trữ trong biến cd pyscript_demo56. Trong dòng sau đó, chúng tôi gọi cd pyscript_demo57 trên đối tượng cd pyscript_demo56 để phân tích JSON và trả về từ điển Python, sau đó được lưu trữ trong biến cd pyscript_demo59. Trong một vài dòng tiếp theo, bạn trích xuất tên, tên đệm và họ từ cd pyscript_demo59 Dict và lưu trữ chúng trong các biến tương ứng của chúng. Cuối cùng, chúng tôi kết hợp các tên bằng cách sử dụng các chuỗi F Python và gọi phương thức {
"editor.formatOnSave": false
}
2 để ghi dữ liệu trong phần tử mkdir pyscript_demo36 với ID là mkdir pyscript_demo37. Hãy chắc chắn rằng máy chủ của bạn đang chạy và truy cập trang cd pyscript_demo64. Khi trang tải, nhấp vào nút cd pyscript_demo65. Bạn sẽ thấy rằng một tên mới được tạo mỗi khi nhấp vào nút: Dữ liệu tồn tại bằng cách sử dụng { "editor.formatOnSave": false } 9Trong phần này, chúng tôi sẽ sử dụng lưu trữ cục bộ để lưu và truy xuất dữ liệu. Lưu trữ cục bộ là một đối tượng trong trình duyệt web có thể lưu trữ dữ liệu mà không cần hết hạn. Python có thể sử dụng lưu trữ cục bộ bằng cách nhập nó từ mô -đun mkdir pyscript_demo96. Để sử dụng lưu trữ cục bộ, chúng tôi sẽ tạo một khu vực văn bản cho phép người dùng nhập nhận xét. Nếu họ muốn lưu bình luận, họ sẽ nhấp vào nút cd pyscript_demo68 sẽ chạy chức năng lưu dữ liệu trong bộ nhớ cục bộ. Mỗi khi trang được truy cập, dữ liệu sẽ được truy xuất từ lưu trữ cục bộ và khu vực văn bản sẽ được đặt thành dữ liệu. Tạo tệp cd pyscript_demo69 và thêm các nội dung sau: cd pyscript_demo5 Trong thẻ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>print("Hello World!")</py-script>
</body>
</html>
8, chúng tôi tạo thẻ cd pyscript_demo71 với ID cd pyscript_demo72. Chúng tôi sẽ sử dụng ID này để có được một tham chiếu về phần tử khu vực văn bản trong Python. Tiếp theo, chúng tôi có một nút có cd pyscript_demo68 là ID của nó và một sự kiện nhấp chuột sẽ gọi hàm cd pyscript_demo74, mà chúng tôi đã định nghĩa. Cuối cùng, chúng tôi tham khảo cd pyscript_demo75, trong đó sẽ chứa mã Python của chúng tôi. Hãy để tạo ra các tập tin ngay bây giờ. Tạo cd pyscript_demo75 và thêm các mục sau: cd pyscript_demo6 Đầu tiên, chúng tôi nhập đối tượng {
"editor.formatOnSave": false
}
9 từ mô -đun mkdir pyscript_demo96. Tiếp theo, chúng tôi xác định hàm cd pyscript_demo79, lấy mkdir pyscript_demo91 làm tham số. Bên trong hàm, chúng tôi gọi lớp {
"editor.formatOnSave": false
}
8 với ID cd pyscript_demo72 để có được tham chiếu của khu vực văn bản. Khi phương thức tìm thấy khu vực văn bản, chúng tôi sử dụng thuộc tính cd pyscript_demo83 để lấy nội dung vùng văn bản và lưu trữ giá trị trong biến cd pyscript_demo84. Trong dòng tiếp theo, chúng tôi gọi phương thức cd pyscript_demo85 của đối tượng {
"editor.formatOnSave": false
}
9 để lưu văn bản nhận xét trong đối tượng {
"editor.formatOnSave": false
}
9 dưới phím cd pyscript_demo72. Bây giờ, hàm cd pyscript_demo79 sẽ chỉ chạy khi nhấp vào nút cd pyscript_demo68. Tuy nhiên, tiến hành bên ngoài chức năng cd pyscript_demo79, các dòng theo sau hàm sẽ chỉ thực thi trong quá trình tải trang. Khi trang được tải lần đầu tiên, chúng tôi sử dụng câu lệnh cd pyscript_demo92 để kiểm tra xem đối tượng {
"editor.formatOnSave": false
}
9 có dữ liệu dưới phím cd pyscript_demo72 không. Nếu đúng, chúng tôi tham chiếu khu vực văn bản bằng lớp {
"editor.formatOnSave": false
}
8 và lưu trữ thể hiện của nó trong biến cd pyscript_demo96. Tiếp theo, chúng tôi gọi phương thức mkdir pyscript_demo46 của ví dụ cd pyscript_demo96 để cập nhật nội dung vùng văn bản với dữ liệu từ lưu trữ cục bộ. Hãy chắc chắn rằng máy chủ của bạn đang chạy và truy cập cd pyscript_demo99. Nhập bất kỳ văn bản bạn thích và nhấp vào nút Lưu.Save button. Tiếp theo, làm mới URL và bạn sẽ thấy khu vực văn bản chứa văn bản bạn đã lưu trong lần truy cập ban đầu. Với điều đó, bây giờ bạn đã biết cách tận dụng {
"editor.formatOnSave": false
}
9 bằng Pyscript. Tiếp theo, chúng tôi sẽ đọc một tệp trong hệ thống tệp bằng Pyscript.Tương tác với hệ thống tệpTrong phần này, chúng tôi sẽ sử dụng Pyscript để đọc dữ liệu từ tệp Plaintext trong hệ thống tệp cục bộ và nối nội dung của nó vào DOM. Đầu tiên, hãy để tạo một tệp chứa dữ liệu chúng tôi muốn đọc. Trong thư mục dự án chính của bạn, hãy chạy lệnh sau để tạo và chuyển sang một thư mục mới: cd pyscript_demo7 Tiếp theo, tạo tệp mkdir .vscode && cd .vscode01 và thêm các nội dung sau, là tên của các khung web Python: cd pyscript_demo8 Lưu tệp và quay lại gốc của thư mục dự án của bạn: cd pyscript_demo9 Với tệp được tạo, hãy tạo tệp mkdir .vscode && cd .vscode02 trong trình soạn thảo văn bản của bạn với các mục sau: mkdir .vscode && cd .vscode0 Trong thẻ mkdir pyscript_demo01, chúng tôi chỉ định đường dẫn đến mkdir .vscode && cd .vscode01, liên quan đến đường dẫn mkdir .vscode && cd .vscode02. Tiếp theo, chúng tôi tạo một thẻ mkdir pyscript_demo33 trống với ID mkdir .vscode && cd .vscode07. Cuối cùng, chúng tôi tham khảo mkdir .vscode && cd .vscode08, mà chúng tôi sẽ xác định sớm. Tạo mkdir .vscode && cd .vscode08 với các nội dung sau: mkdir .vscode && cd .vscode1 Trong dòng đầu tiên, chúng tôi gọi phương thức mkdir pyscript_demo97 với bộ chọn ID mkdir .vscode && cd .vscode11, có tham chiếu của phần tử mkdir pyscript_demo33. Trong dòng thứ hai, chúng tôi gọi phương thức mkdir .vscode && cd .vscode13 với tên tệp mkdir .vscode && cd .vscode01 và lưu trữ đối tượng tệp là mkdir .vscode && cd .vscode15. Trong câu lệnh mkdir .vscode && cd .vscode16, chúng tôi lặp lại trên mỗi dòng được lưu trữ trong đối tượng tệp mkdir .vscode && cd .vscode15. Trong mỗi lần lặp, chúng tôi tạo một phần tử mkdir pyscript_demo56 bằng phương pháp cd pyscript_demo02 đối tượng ____ ____198. Tiếp theo, chúng tôi đặt nội dung văn bản mkdir pyscript_demo56 thành giá trị trong biến mkdir .vscode && cd .vscode22 bằng thuộc tính mkdir .vscode && cd .vscode23 của thể hiện mkdir .vscode && cd .vscode24. Cuối cùng, chúng tôi nối phần tử mkdir pyscript_demo56 vào phần tử mkdir pyscript_demo33 bằng cách gọi mkdir pyscript_demo99 với mkdir .vscode && cd .vscode24 làm đối số. Khởi động lại máy chủ (nếu bạn dừng nó trước đó): python -m http.server Truy cập URL mkdir .vscode && cd .vscode29 và bạn sẽ thấy nội dung từ tệp PlainText được hiển thị trên trang: Nếu bạn kiểm tra các yếu tố, bạn sẽ thấy rằng có bốn yếu tố mkdir pyscript_demo56 được nối với phần tử mkdir pyscript_demo33. Với điều đó, bây giờ bạn có thể đọc các tệp trong hệ thống tệp. Bạn có thể sử dụng cùng một cách tiếp cận để đọc các tệp CSV và nhiều định dạng tệp khác. Sự kết luậnTrong hướng dẫn này, chúng tôi đã học cách sử dụng pyscript repl, tạo các mô-đun tùy chỉnh, sử dụng các mô-đun từ thư viện tiêu chuẩn Python và nhập các mô-đun bên thứ ba. Chúng tôi cũng đã học cách truy cập và thao tác các phần tử bằng Pyscript, thực hiện các yêu cầu API, sử dụng {
"editor.formatOnSave": false
}
9 và đọc tệp Plaintext từ hệ thống tệp.Để khám phá Pyscript hơn nữa, hãy truy cập trang chủ Pyscript. Ngoài ra, hãy xem trang Tài liệu Pyodide để tìm hiểu thêm về các khả năng mà nó cho phép trong trình duyệt. Bạn đang thêm các thư viện JS mới để cải thiện hiệu suất hoặc xây dựng các tính năng mới? Điều gì sẽ xảy ra nếu họ làm điều ngược lại?Không có nghi ngờ gì về việc Frontends đang trở nên phức tạp hơn. Khi bạn thêm các thư viện JavaScript mới và các phụ thuộc khác vào ứng dụng của bạn, bạn sẽ cần nhiều khả năng hiển thị hơn để đảm bảo người dùng của bạn không gặp phải các vấn đề không xác định. Logrocket là một giải pháp giám sát ứng dụng Frontend cho phép bạn phát lại các lỗi JavaScript như thể chúng đã xảy ra trong trình duyệt của riêng bạn để bạn có thể phản ứng với lỗi hiệu quả hơn. Logrocket hoạt động hoàn hảo với bất kỳ ứng dụng nào, bất kể khung và có các plugin để đăng nhập bối cảnh bổ sung từ Redux, Vuex và @ngrx/Store.Thay vì đoán tại sao các vấn đề xảy ra, bạn có thể tổng hợp và báo cáo về trạng thái của ứng dụng của bạn khi xảy ra vấn đề.Logrocket cũng theo dõi hiệu suất ứng dụng của bạn, báo cáo các số liệu như tải CPU của máy khách, sử dụng bộ nhớ máy khách và hơn thế nữa. Xây dựng một cách tự tin - bắt đầu giám sát miễn phí. Bạn có thể chạy mã Python trong HTML không?Pyscript là một khung web nguồn mở cho phép bạn tạo các ứng dụng web frontend bằng Python.Với Pyscript, bạn có thể nhúng mã Python vào HTML hoặc liên kết đến tệp Python và mã sẽ thực thi trong trình duyệt - mà không cần chạy Python trong phần phụ trợ.With PyScript, you can either embed Python code in HTML, or link to a Python file and the code will execute in the browser — without running Python in the backend.
Tôi có thể chạy tập lệnh Python trong trang web không?Có, Pyscript là một khung mới tích hợp với mã trình duyệt của bạn (I-E HTML) và cho phép người dùng chạy mã Python của bạn.. |
