Kết nối Python và JavaScript

Trong lĩnh vực khoa học dữ liệu, người ta thường yêu cầu sử dụng một loạt các công cụ, mỗi công cụ cụ thể cho công việc của họ. Một vai trò yêu cầu trực quan hóa bằng giao diện web, nhưng xử lý tập lệnh Python, tốt hơn là nên xây dựng trực quan hóa riêng trong d3 hoặc THREE. js để hiển thị nó và sau đó tìm nạp dữ liệu theo yêu cầu. Bài viết này đề cập đến việc tạo một ứng dụng bình đơn giản có thể cung cấp dữ liệu cho giao diện web bằng cách sử dụng API tìm nạp

Tạo ứng dụng Flask

Chúng tôi bắt đầu bằng cách xây dựng một kho lưu trữ chứa một thư mục

########  imports  ##########
from flask import Flask, jsonify, request, render_template
app = Flask[__name__]
#############################
# Additional code goes here #
#############################
######### run app #########
app.run[debug=True]
1 trống và một tệp

Python Fetch Example


{{embed}}


0

Ứng dụng. py

Tệp


Python Fetch Example


{{embed}}


0 của chúng tôi chứa dữ liệu cần thiết để tạo giao diện web. Để làm điều này, chúng tôi sử dụng thư viện python bình [

Python Fetch Example


{{embed}}


2 ]. Đối với điều này, chúng ta có thể sử dụng mẫu sau

########  imports  ##########
from flask import Flask, jsonify, request, render_template
app = Flask[__name__]
#############################
# Additional code goes here #
#############################
######### run app #########
app.run[debug=True]

Ở đây chúng tôi bắt đầu bằng cách nhập các chức năng cần thiết, cấu trúc ứng dụng và lệnh chạy để khởi động ứng dụng

Mục lục. html

Đã xác định ứng dụng bình của chúng tôi, bây giờ chúng tôi cần tạo một trang web mẫu. Điều này có thể được thực hiện bằng cách đặt tệp


Python Fetch Example


{{embed}}


3 trong thư mục mẫu


Python Fetch Example


{{embed}}


Vì chúng tôi đang sử dụng mẫu này làm mẫu nên chúng tôi có thể sử dụng cú pháp thay thế kiểu phản ứng cho các từ khóa nhất định. Trong trường hợp này,


Python Fetch Example


{{embed}}


4 sẽ được thay thế bằng chuỗi

Python Fetch Example


{{embed}}


5 trong đoạn trích bên dưới

________số 8

Điều này xác định mã sẽ chạy khi truy cập trang chủ của ứng dụng bình và cần được thêm vào giữa các dòng


Python Fetch Example


{{embed}}


6 và

Python Fetch Example


{{embed}}


7 trong

Python Fetch Example


{{embed}}


0

Chạy ứng dụng

Cuối cùng, chúng ta có thể chạy ứng dụng và xem nó bằng cách sử dụng


Python Fetch Example


{{embed}}


9 và điều hướng đến
@app.route['/']
def home_page[]:
example_embed='This string is from python'
return render_template['index.html', embed=example_embed]
0 trong trình duyệt web để xem nó

NHẬN và ĐĂNG — chúng hoạt động như thế nào?

Khi chuyển dữ liệu, chúng tôi dựa vào các hàm GET và POST trong API tìm nạp. Các thuật ngữ này khá dễ hiểu

  • POST đề cập đến việc gửi thông tin đến một địa điểm, tương tự như gửi thư
  • NHẬN đề cập đến việc truy xuất dữ liệu - bạn biết mình có thư, vì vậy bạn đến bưu điện để thu thập [yêu cầu] nó

chức năng kiểm tra

Trong vòng


Python Fetch Example


{{embed}}


0, chúng tôi có thể tạo một URL cho các yêu cầu GET. Đoạn mã sau xác định phản hồi khi URL được gọi


Python Fetch Example


{{embed}}


5

Theo yêu cầu GET, chúng tôi xác định một từ điển chứa phần tử

@app.route['/']
def home_page[]:
example_embed='This string is from python'
return render_template['index.html', embed=example_embed]
2 và tuần tự hóa nó. Tiếp theo, điều này sau đó được đăng trở lại chương trình javascript đang gọi

Sau khi thêm đoạn mã sau vào trước lệnh


Python Fetch Example


{{embed}}


7 và thực thi nó, chúng ta có thể truy cập vào
@app.route['/']
def home_page[]:
example_embed='This string is from python'
return render_template['index.html', embed=example_embed]
4 — sẽ tạo ra kết quả sau


Python Fetch Example


{{embed}}


9

Gọi dữ liệu từ Javascript

Bây giờ chúng tôi đã thiết lập phía máy chủ của mọi thứ, chúng tôi có thể sử dụng lệnh tìm nạp để lấy dữ liệu từ nó. Để làm điều này, chúng ta có thể sử dụng lời hứa

@app.route['/']
def home_page[]:
example_embed='This string is from python'
return render_template['index.html', embed=example_embed]
5 như sau


Python Fetch Example


{{embed}}


1

Ở đây, chúng tôi chạy một yêu cầu GET trên

@app.route['/']
def home_page[]:
example_embed='This string is from python'
return render_template['index.html', embed=example_embed]
6 để chuyển đổi chuỗi JSON được trả về thành một đối tượng, sau đó in phần tử
@app.route['/']
def home_page[]:
example_embed='This string is from python'
return render_template['index.html', embed=example_embed]
2 ra bảng điều khiển web. Như thường lệ, mã JavaScript phải được lồng giữa các thẻ
@app.route['/']
def home_page[]:
example_embed='This string is from python'
return render_template['index.html', embed=example_embed]
8 trong tài liệu HTML

Yêu cầu dữ liệu từ máy chủ

Bây giờ chúng tôi có một ví dụ hoạt động, chúng tôi có thể mở rộng nó để bao gồm dữ liệu thực tế. Trên thực tế, điều này có thể liên quan đến việc truy cập cơ sở dữ liệu, giải mã một số thông tin hoặc lọc bảng

Với mục đích của hướng dẫn này, chúng tôi tạo một mảng dữ liệu từ đó chúng tôi lập chỉ mục các phần tử


Python Fetch Example


{{embed}}


5

Thiết lập cuộc gọi trang

Trong ứng dụng Flask của mình, chúng ta có thể thêm các đối số tùy chọn vào yêu cầu GET — trong trường hợp này là chỉ mục mảng mà chúng ta quan tâm. Điều này được chỉ định thông qua phần mở rộng trang bổ sung trong URL trang

@app.route['/']
def home_page[]:
example_embed='This string is from python'
return render_template['index.html', embed=example_embed]
9. Đối số này sau đó được chuyển vào hàm trang và được xử lý [

Python Fetch Example


{{embed}}


50] trong lệnh return


Python Fetch Example


{{embed}}


8

Viết yêu cầu Tìm nạp

Yêu cầu tìm nạp vẫn giữ nguyên ngoại trừ việc thay đổi URL GET để bao gồm chỉ mục của phần tử dữ liệu mà chúng tôi quan tâm. Điều này được thực hiện trong tập lệnh JS trong


Python Fetch Example


{{embed}}


3

########  imports  ##########
from flask import Flask, jsonify, request, render_template
app = Flask[__name__]
#############################
# Additional code goes here #
#############################
######### run app #########
app.run[debug=True]
0

Lần này, thay vì trả về một đối tượng, chúng tôi trả về một chuỗi và phân tích nó như vậy. Điều này sau đó có thể được sử dụng khi cần thiết trong mã — có thể là để cập nhật một con số hoặc hiển thị một thông báo

Bản tóm tắt

Chúng tôi đã khám phá một phương pháp để trích xuất dữ liệu bằng python và cung cấp dữ liệu đó cho mã javascript để trực quan hóa [các phương pháp thay thế bao gồm ổ cắm web/TCP và truyền phát tệp]. Chúng tôi có thể tạo mã python phía máy chủ để xử lý trước hoặc giải mã dữ liệu và chỉ cung cấp thông tin cần thiết cho khách hàng

Điều này hữu ích nếu chúng tôi có dữ liệu cập nhật liên tục, tập dữ liệu lớn [tài nguyên cao] hoặc dữ liệu nhạy cảm mà chúng tôi không thể cung cấp trực tiếp cho khách hàng

Bạn có thể kết nối JavaScript và Python không?

JS2PY hoạt động bằng cách dịch trực tiếp JavaScript sang Python . Nó chỉ ra rằng bạn có thể chạy JS trực tiếp từ mã Python mà không cần cài đặt các công cụ lớn bên ngoài như V8. Để sử dụng mô-đun, trước tiên mô-đun phải được cài đặt vào hệ thống, vì mô-đun không được tích hợp sẵn. Để sử dụng mô-đun, nó phải được nhập.

Tôi có thể chạy tệp Python bằng JavaScript không?

PyScript cho phép bạn chạy tập lệnh Python ngay trong trình duyệt, song song với JavaScript , với sự tương tác hai chiều giữa mã của bạn và trang web.

Tôi có thể nhập Python bằng JavaScript không?

Bạn có thể sử dụng Python và các mô-đun của nó bên trong JavaScript với Promise API . Bạn có thể kiểm tra nó với các mô-đun python yêu thích của mình như Numpy, Pandas, pyautogui, v.v. tại thời điểm này hoặc các mô-đun tích hợp khác nếu bạn muốn.

JavaScript có khó hơn Python không?

Nếu đang quyết định học ngôn ngữ lập trình nào trước tiên, bạn nên biết rằng JavaScript là ngôn ngữ khó học hơn nhiều so với Python . Cả hai ngôn ngữ đều được nhập động, ngôn ngữ lập trình cấp cao khá giống nhau.

Chủ Đề