Gửi dữ liệu từ bình tới 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 Show
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 ##########1 trống và một tệp 0 Ứng dụng. pyTệp 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 ( 2 ). Đối với điều này, chúng ta có thể sử dụng mẫu sau ######## imports ########## Ở đâ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 3 trong thư mục mẫu
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, 4 sẽ được thay thế bằng chuỗi 5 trong đoạn trích bên dưới Đ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 6 và 7 trong 0 Chạy ứng dụngCuối cùng, chúng ta có thể chạy ứng dụng và xem nó bằng cách sử dụng 9 và điều hướng đến @app.route('/') 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
chức năng kiểm traTrong vòng 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 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('/') 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ọiSau khi thêm đoạn mã sau vào trước lệnh 7 và thực thi nó, chúng ta có thể truy cập vào @app.route('/') 4 — sẽ tạo ra kết quả sau9 Gọi dữ liệu từ JavascriptBâ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('/') 5 như sau1 Ở đây, chúng tôi chạy một yêu cầu GET trên @app.route('/') 6 để chuyển đổi chuỗi JSON được trả về thành một đối tượng, sau đó in phần tử @app.route('/') 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('/') 8 trong tài liệu HTMLYê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ử 5 Thiết lập cuộc gọi trangTrong ứ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('/') 9. Đối số này sau đó được chuyển vào hàm trang và được xử lý (50) trong lệnh return 8 Viết yêu cầu Tìm nạpYê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 3 ######## imports ##########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 Tóm lược 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 Làm cách nào để gửi dữ liệu tới JavaScript từ Flask?trong nội dung HTML và tạo mẫu trong id thẻ, ví dụ: sử dụng chỉ mục danh sách trong id thẻ và giá trị danh sách tại tên lớp thẻ. Ở đây tôi có hai danh sách maintenance_next[] và maintenance_block_time[] có cùng độ dài. Tôi muốn chuyển dữ liệu của hai danh sách này sang javascript bằng cách sử dụng bình. . x = 10 in x x = "Xin chào" in x Bạn có thể sử dụng bình trong JavaScript không?Bạn sẽ cần HTML để tạo trang web dựa trên Flask. Bạn không thực sự cần CSS hoặc JavaScript , nhưng rất có thể bạn sẽ muốn sử dụng CSS hoặc JavaScript, tùy thuộc vào những gì bạn cần trang web của mình . Bạn có thể chứa các tệp CSS và JS dưới dạng tệp 'tĩnh' trong bản dựng Flask của mình.
Làm cách nào để lấy dữ liệu từ một trang web khác bằng JavaScript?Tiếp cận. Trước tiên hãy tạo tệp JavaScript, tệp HTML và tệp CSS cần thiết. Sau đó lưu trữ URL API trong một biến (ở đây api_url). Xác định hàm async (ở đây getapi()) và chuyển api_url vào hàm đó. Xác định một phản hồi liên tục và lưu trữ dữ liệu đã tìm nạp bằng phương thức chờ tìm nạp ()
Tôi có thể sử dụng Jinja trong JavaScript không?JsJinja cho phép bạn sử dụng các mẫu Jinja2 của mình trong Javascript . Nó biên dịch các mẫu Jinja2 thành Javascript mà không bị hạn chế. Có thể tạo js thông qua dòng lệnh jsjinja |