Hướng dẫn how do i run a python script button in html? - làm cách nào để chạy nút tập lệnh python trong html?

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:

• Pyscript là gì?
• Pyscript hoạt động như thế nào?
• Thiết lập thư mục dự án của bạn cho Pyscript
• Vô hiệu hóa các công cụ tự động định dạng như đẹp hơn
• Bắt đầu
• Pyscript nội bộ
• Pyscript bên ngoài
  • Tạo tệp

    cd pyscript_demo
    

    2
  • Tạo tệp

    cd pyscript_demo
    

    3
  • Liên kết tệp

    cd pyscript_demo
    

    3 trong tệp HTML
  • Mở tệp

    cd pyscript_demo
    

    2 trong trình duyệt
• Sử dụng pyscript replin
• Sử dụng các mô -đun python trong pyscript
  • Tạo các mô -đun tùy chỉnh
  • Nhập các mô -đun từ Thư viện tiêu chuẩn Python
  • Sử dụng các gói của bên thứ ba
• Truy cập và thao tác các phần tử HTML bằng Pyscript
  • Sử dụng lớp

    cd pyscript_demo
    

    6
  • Gắn các sự kiện vào các yếu tố
• Sử dụng JavaScript để truy cập và thao tác với DOM
• Tìm nạp và hiển thị dữ liệu từ API
• Dữ liệu tồn tại bằng cách sử dụng

  cd pyscript_demo
  

  7
• Tương tác với hệ thống tệp

Đ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:

• Một sự hiểu biết cơ bản về HTML, CSS và JavaScript
• Làm quen với cú pháp Python
• Một máy chủ web. Chúng tôi sẽ tạo một máy chủ đơn giản bằng Python, vì vậy hãy chắc chắn rằng bạn đã cài đặt Python trên hệ thống của mình
• Một trình duyệt web; Tài liệu Pyscript hiện khuyến nghị Chrome

Pyscript là gì?

Pyscript hoạt động như thế nào?

Thiết lập thư mục dự án của bạn cho Pyscript

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 Pyscript

Vô 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

cd pyscript_demo

Tạo tệp

cd pyscript_demo

Liên kết tệp

cd pyscript_demo

mkdir .vscode && cd .vscode

Mở tệp

cd pyscript_demo

{
  "editor.formatOnSave": false
}

Sử dụng pyscript replin

Bắt đầu

Bâ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 các tài sản Pyscript bao gồm tệp CSS và tệp JavaScript trong phần

mkdir .vscode && cd .vscode

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ộ: Bạn có thể viết và đặt mã Python của mình trong thẻ

  mkdir .vscode && cd .vscode
  

  3 trong tệp HTML. Thẻ

  mkdir .vscode && cd .vscode
  

  3 có thể được thêm vào thẻ

  mkdir .vscode && cd .vscode
  

  2 hoặc

  mkdir .vscode && cd .vscode
  

  6 tùy thuộc vào nhiệm vụ của bạn trong tay: You can write and place your Python code within the

  mkdir .vscode && cd .vscode
  

  3 tag in an HTML file. The

  mkdir .vscode && cd .vscode
  

  3 tag can be added in the

  mkdir .vscode && cd .vscode
  

  2 or

  mkdir .vscode && cd .vscode
  

  6 tag depending on your task at hand
• Pyscript bên ngoài: Đây là nơi bạn viết mã python của mình vào một tệp kết thúc bằng tiện ích mở rộng

  mkdir pyscript_demo
  

  5, sau đó bạn có thể tham khảo trong thẻ

  mkdir .vscode && cd .vscode
  

  3 bằng cách sử dụng thuộc tính

  mkdir .vscode && cd .vscode
  

  9: This is where you write your Python code in a file ending with

  mkdir pyscript_demo
  

  5 extension, which you can then reference in the

  mkdir .vscode && cd .vscode
  

  3 tag using the

  mkdir .vscode && cd .vscode
  

  9 attribute

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

{
  "editor.formatOnSave": false
}

  
    
    
    
    
    
    
  
  
  
    print("Hello World!")
  

Trong phần

mkdir .vscode && cd .vscode

{
  "editor.formatOnSave": false
}

mkdir .vscode && cd .vscode

Trong thẻ

mkdir .vscode && cd .vscode

mkdir .vscode && cd .vscode

{
  "editor.formatOnSave": false
}

Đả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

{
  "editor.formatOnSave": false
}

Pyscript bên ngoài

Trong khi đặt mã python vào thẻ

mkdir .vscode && cd .vscode

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:

• Tệp có thể được lưu trữ bởi trình duyệt, dẫn đến hiệu suất nhanh hơn
• Bạn có thể tham khảo tệp trong nhiều trang, giảm trùng lặp
• Mã Python của bạn có thể được định dạng với các công cụ như Linters Black hoặc Python. Những công cụ này hiện đang hoạt động trên mã python được nhúng trong tệp HTML

Để sử dụng Pyscript bên ngoài, chúng tôi sẽ tạo một tệp

cd pyscript_demo

mkdir pyscript_demo

cd pyscript_demo

Tạo tệp cd pyscript_demo 2

Tạo tệp

cd pyscript_demo

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

cd pyscript_demo

Tạo tệp cd pyscript_demo 3

Hã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

cd pyscript_demo

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Hàm

  
    
    
    
    
    
    
  
  
  
    print("Hello World!")
  

  
    
    
    
    
    
    
  
  
  
    print("Hello World!")
  

  
    
    
    
    
    
    
  
  
  
    print("Hello World!")
  

  
    
    
    
    
    
    
  
  
  
    print("Hello World!")
  

Liên kết tệp cd pyscript_demo 3 trong tệp HTML

Bây giờ bạn đã tạo mã Python, bạn sẽ tham khảo tệp

cd pyscript_demo

cd pyscript_demo

Nhiều bài viết tuyệt vời hơn từ Logrocket:

• Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
• Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của nút
• Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
• Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
• So sánh NestJS so với Express.js

Mở

cd pyscript_demo

mkdir .vscode && cd .vscode

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Thẻ

mkdir .vscode && cd .vscode

mkdir .vscode && cd .vscode

Mở tệp cd pyscript_demo 2 trong trình duyệt

Bây giờ mọi thứ đã được đưa ra, chúng tôi sẽ mở

cd pyscript_demo

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:

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Tiếp theo, mở chrome và ghé thăm

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

cd pyscript_demo

Đố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 replin

Pyscript đ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ẻ

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

mkdir .vscode && cd .vscode

cd pyscript_demo

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Với máy chủ vẫn đang chạy, hãy truy cập

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

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 pyscript

Trong 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,

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Tạo các mô -đun tùy chỉnh

Hãy để tạo ra một mô -đun cục bộ chứa hai chức năng.

Tạo tệp

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Ở đâ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

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Trong thẻ

mkdir .vscode && cd .vscode

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Với mô -đun được tải, trong thẻ

mkdir .vscode && cd .vscode

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Với máy chủ đang chạy, hãy truy cập

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Nhập các mô -đun từ Thư viện tiêu chuẩn Python

Pyscript, 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:

• tkinter
• Venv
• DBM

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

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

mkdir .vscode && cd .vscode

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Bây giờ hãy truy cập trang

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Sử dụng các gói của bên thứ ba

Ngoà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ư:

• Numpy
• Gấu trúc
• pytest
• Jinja2
• beautifulsoup4
• matplotlib
• PIL
• scikit-learn

Để 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,

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Trong thẻ

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

mkdir .vscode && cd .vscode

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Hãy chắc chắn rằng tệp của bạn được lưu và truy cập trang

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

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 Pyscript

Trong 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 cd pyscript_demo 6

Pyscript vận chuyển với lớp

cd pyscript_demo

Để xem nó hoạt động như thế nào, hãy tạo một tệp

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Trong thẻ

mkdir .vscode && cd .vscode

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

cd pyscript_demo

Một thẻ khác chúng tôi sẽ sử dụng là

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Khi bạn tạo tệp

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Trong mã trước, chúng tôi sử dụng lớp

cd pyscript_demo

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Khi một phần tử được chọn bằng lớp

cd pyscript_demo

• from flask import Flask, render_template_x000D_
  app = Flask(__name__)_x000D_
  _x000D_
  @app.route('/')_x000D_
  def index():_x000D_
    return render_template('index.html')_x000D_
  _x000D_
  @app.route('/my-link/')_x000D_
  def my_link():_x000D_
    print ('I got clicked!')_x000D_
  _x000D_
    return 'Click.'_x000D_
  _x000D_
  if __name__ == '__main__':_x000D_
    app.run(debug=True)

  54: Đặt giá trị

  from flask import Flask, render_template_x000D_
  app = Flask(__name__)_x000D_
  _x000D_
  @app.route('/')_x000D_
  def index():_x000D_
    return render_template('index.html')_x000D_
  _x000D_
  @app.route('/my-link/')_x000D_
  def my_link():_x000D_
    print ('I got clicked!')_x000D_
  _x000D_
    return 'Click.'_x000D_
  _x000D_
  if __name__ == '__main__':_x000D_
    app.run(debug=True)

  46

• from flask import Flask, render_template_x000D_
  app = Flask(__name__)_x000D_
  _x000D_
  @app.route('/')_x000D_
  def index():_x000D_
    return render_template('index.html')_x000D_
  _x000D_
  @app.route('/my-link/')_x000D_
  def my_link():_x000D_
    print ('I got clicked!')_x000D_
  _x000D_
    return 'Click.'_x000D_
  _x000D_
  if __name__ == '__main__':_x000D_
    app.run(debug=True)

  56: Sử dụng bộ chọn CSS để tìm các yếu tố hậu duệ

• from flask import Flask, render_template_x000D_
  app = Flask(__name__)_x000D_
  _x000D_
  @app.route('/')_x000D_
  def index():_x000D_
    return render_template('index.html')_x000D_
  _x000D_
  @app.route('/my-link/')_x000D_
  def my_link():_x000D_
    print ('I got clicked!')_x000D_
  _x000D_
    return 'Click.'_x000D_
  _x000D_
  if __name__ == '__main__':_x000D_
    app.run(debug=True)

  57: Thêm một hoặc nhiều lớp vào một phần tử

• from flask import Flask, render_template_x000D_
  app = Flask(__name__)_x000D_
  _x000D_
  @app.route('/')_x000D_
  def index():_x000D_
    return render_template('index.html')_x000D_
  _x000D_
  @app.route('/my-link/')_x000D_
  def my_link():_x000D_
    print ('I got clicked!')_x000D_
  _x000D_
    return 'Click.'_x000D_
  _x000D_
  if __name__ == '__main__':_x000D_
    app.run(debug=True)

  58: Xóa một hoặc nhiều lớp khỏi một phần tử

Trong dòng thứ hai, chúng tôi sử dụng phương thức

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

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ó,

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Tiếp theo, chúng tôi gọi lớp

cd pyscript_demo

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Với máy chủ vẫn còn, hãy truy cập

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

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

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Trong thẻ

mkdir .vscode && cd .vscode

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

{
  "editor.formatOnSave": false
}

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Tiếp theo, chúng ta có phần tử

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Cuối cùng, chúng tôi liên kết đến tệp

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Hãy để xác định

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Hàm

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Đảm bảo rằng máy chủ của bạn đang chạy:

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Sau đó truy cập URL

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Sử dụng JavaScript để truy cập và thao tác với DOM

Pyscript vận chuyển với mô -đun

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Như bạn có thể thấy, chúng tôi đang trộn các phương thức mã Python như

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Trong phần này, chúng tôi chủ yếu sẽ tập trung vào các phương thức

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Tạo tệp

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Trong thẻ

mkdir .vscode && cd .vscode

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Tạo tệp

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Trong dòng đầu tiên, chúng tôi gọi phương thức

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

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

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Sau đó, chúng tôi thêm văn bản vào phần tử

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Đả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

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

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ố

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Bây giờ chúng ta có thể truy cập và thao tác DOM bằng lớp

cd pyscript_demo

Tìm nạp và hiển thị dữ liệu từ API

Trong phần này, chúng tôi sẽ sử dụng Pyscript để gửi yêu cầu

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Tạo tệp

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Mã nên quen thuộc vào thời điểm này. Phần quan trọng nhất là thẻ

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

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

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Trong dòng đầu tiên, chúng tôi nhập phương thức

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Tiếp theo, chúng tôi xác định hàm không đồng bộ

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

• _x000D_
  _x000D_
  _x000D_
   _x000D_
       _x000D_
      _x000D_
          
  My Website
  _x000D_
          
  _x000D_
              _x000D_
          
  _x000D_
          _x000D_
           Click me_x000D_
  _x000D_
      

  60: Điểm cuối API

• _x000D_
  _x000D_
  _x000D_
   _x000D_
       _x000D_
      _x000D_
          
  My Website
  _x000D_
          
  _x000D_
              _x000D_
          
  _x000D_
          _x000D_
           Click me_x000D_
  _x000D_
      

  61: Loài phương pháp HTTP bạn muốn sử dụng, đó là phương pháp

  _x000D_
  _x000D_
  _x000D_
   _x000D_
       _x000D_
      _x000D_
          
  My Website
  _x000D_
          
  _x000D_
              _x000D_
          
  _x000D_
          _x000D_
           Click me_x000D_
  _x000D_
      

  44 ở đây.

Khi

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Trong một vài dòng tiếp theo, bạn trích xuất tên, tên đệm và họ từ

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Hãy chắc chắn rằng máy chủ của bạn đang chạy và truy cập trang

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Dữ liệu tồn tại bằng cách sử dụng cd pyscript_demo 7

Trong 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

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Để 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

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Tạo tệp

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Trong thẻ

mkdir .vscode && cd .vscode

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Tạo

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Đầu tiên, chúng tôi nhập đối tượng

cd pyscript_demo

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

cd pyscript_demo

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

cd pyscript_demo

cd pyscript_demo

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Bây giờ, hàm

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Khi trang được tải lần đầu tiên, chúng tôi sử dụng câu lệnh

cd pyscript_demo

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

cd pyscript_demo

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Hãy chắc chắn rằng máy chủ của bạn đang chạy và truy cập

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

cd pyscript_demo

Tương tác với hệ thống tệp

Trong 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:

Tiếp theo, tạo tệp

Lưu tệp và quay lại gốc của thư mục dự án của bạn:

Với tệp được tạo, hãy tạo tệp

Trong thẻ

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Tạo

Trong dòng đầu tiên, chúng tôi gọi phương thức

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Trong câu lệnh

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

_x000D_
_x000D_
_x000D_
 _x000D_
     _x000D_
    _x000D_
        
My Website
_x000D_
        
_x000D_
            _x000D_
        
_x000D_
        _x000D_
         Click me_x000D_
_x000D_
    

Khởi động lại máy chủ (nếu bạn dừng nó trước đó):

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

Truy cập URL

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ố

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

from flask import Flask, render_template_x000D_
app = Flask(__name__)_x000D_
_x000D_
@app.route('/')_x000D_
def index():_x000D_
  return render_template('index.html')_x000D_
_x000D_
@app.route('/my-link/')_x000D_
def my_link():_x000D_
  print ('I got clicked!')_x000D_
_x000D_
  return 'Click.'_x000D_
_x000D_
if __name__ == '__main__':_x000D_
  app.run(debug=True)

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ận

Trong 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

cd pyscript_demo

Để 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í.