Trong hướng dẫn này, chúng tôi sẽ học cách xây dựng một phụ trợ đơn giản với Python và một mặt trận trong JavaScript. Đối với phụ trợ Python, chúng tôi sẽ sử dụng thư viện bình. Điều này sẽ cho phép chúng tôi thiết lập phần phụ trợ chỉ với một vài dòng mã. Mục tiêu chính của bài viết này là chứng minh sự tương tác giữa phụ trợ Python và một mặt trận. Vì vậy, phía trước sẽ đơn giản nhất có thể. Chúng tôi sẽ sử dụng JavaScript đơn giản, không có khung. Có nghĩa là, đây sẽ là một ví dụ rất lớn UI. Mã dự án đầy đủ có thể được tìm thấy trên github của tôi: ở đây. Nội dung
Điều kiện tiên quyết
Mặc dù đây là một hướng dẫn cơ bản, một số kiến thức trước đây được giả định:
- Kiến thức Python cơ bản
- Kiến thức JavaScript cơ bản
Chúng tôi cũng giả sử những điều sau đây được cài đặt trên hệ thống của chúng tôi:
- Python 3.6 trở lên
- pip
- VENV: Giữ cho môi trường của chúng ta sạch sẽ bằng cách giữ các phụ thuộc của chúng ta trong một thư mục cụ thể cho tài sản của chúng ta.
- NPM: Khi chúng tôi sẽ cài đặt HTTP-Server.
Hãy để đảm bảo rằng chúng tôi cài đặt HTTP-Server, vì vậy chúng tôi có một cách dễ dàng để chạy mã frontend của chúng tôi. Ví dụ: sử dụng NPM:
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv0.
Tạo dự án
Đầu tiên, hãy để Lừa thiết lập thư mục dự án của chúng tôi. Đây sẽ là thư mục gốc và chứa các thư mục cho phụ trợ Python và frontend Web.
Tạo một thư mục:
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv1.
Xây dựng phụ trợ Python
Bước đầu tiên trong dự án phụ trợ Python và JavaScript của chúng tôi là xây dựng phần phụ trợ.
Hãy cùng tạo ra một thư mục mới cho dự án của chúng tôi trong
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv1 của chúng tôi được gọi là
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv3.
basic-web-app-tutorial + -- backend
Thiết lập môi trường ảo cho các phụ thuộc
Tiếp theo, chúng tôi sẽ tạo ra một môi trường ảo cho các phụ thuộc của chúng tôi. Như đã đề cập trước đó, sử dụng môi trường ảo giữ cho phần còn lại của hệ thống của chúng tôi sạch sẽ. Các thư viện Python Chúng tôi sẽ cài đặt sẽ chỉ được cài đặt vào môi trường này và sẽ không ảnh hưởng đến phần còn lại của hệ thống.
Chúng ta có thể tạo một môi trường ảo được gọi là
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv4 bằng lệnh sau:
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv5.
Trước khi chúng ta có thể cài đặt các phụ thuộc, chúng ta phải kích hoạt môi trường. Trên các hệ thống Linux, lệnh là:
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv6. Đối với Windows:
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv7.
Lưu ý: Nếu sử dụng Git cho dự án của bạn, hãy đảm bảo đặt thư mục
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv4 vào tệp
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv9.
basic-web-app-tutorial + .gitignore +-- backend +-- venv
Cài đặt phụ thuộc
Tiếp tục, hãy để cài đặt các phụ thuộc cần thiết:
- Bình: Một khung ứng dụng web trọng lượng nhẹ. Cho phép chúng tôi thiết lập một ứng dụng web nhanh chóng và dễ dàng chỉ với một vài dòng mã.
- Flask-Cors: Giúp bạn dễ dàng kích hoạt chia sẻ tài nguyên nguồn gốc [CORS]. Có nghĩa là, điều này sẽ cho phép Frontend JavaScript của chúng tôi giao tiếp với phụ trợ Python. Nếu không, phía trước sẽ bị chặn tự động.
Hãy để đảm bảo môi trường ảo được kích hoạt trước khi chúng tôi cài đặt các phụ thuộc này. Nếu nó được kích hoạt, chúng tôi sẽ cài đặt các phụ thuộc với lệnh sau:
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"0.
Ứng dụng phụ trợ Python cơ bản
Trong phần này, cuối cùng chúng tôi sẽ viết mã đầu tiên của chúng tôi.
Hãy để tạo một tệp trong thư mục
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv3 được gọi là
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"2 và chỉnh sửa nó với trình chỉnh sửa văn bản/IDE yêu thích của chúng tôi. Ví dụ VSCode.
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv
Chúng tôi sẽ bắt đầu với ví dụ cơ bản nhìn thấy trên trang bình:
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"
Trên dòng đầu tiên, chúng tôi nhập lớp bình cho phép chúng tôi ví dụ một đối tượng bình. Đây là đối tượng trung tâm cho ứng dụng phụ trợ của chúng tôi. Trên dòng 3, trường hợp được tạo bằng biến
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"3 làm tên cho ứng dụng. Đây có thể là bất kỳ tên thực sự.
Cuối cùng, chúng tôi xác định
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"4 bằng cách sử dụng bộ trang trí chức năng:
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"5. Điều này có nghĩa là nếu phần phụ trợ đang chạy, chúng ta sẽ có thể tiếp cận nó tại địa chỉ gốc. Bất cứ khi nào máy khách gửi yêu cầu HTTP đến địa chỉ gốc, hàm
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"6 này sẽ được thực thi. Ví dụ: bằng cách điều hướng đến địa chỉ máy chủ ứng dụng web của chúng tôi bằng trình duyệt internet.
Sau khi cài đặt biến môi trường
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"7, chúng tôi có thể chạy máy chủ thử nghiệm bằng cách sử dụng:
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"8. Theo mặc định, máy chủ sẽ chạy trên
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"9. Nếu chúng tôi không muốn đối phó với việc thiết lập các biến môi trường ngay bây giờ, chúng tôi cũng có thể thêm các dòng sau:
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]
Bây giờ chúng ta chỉ có thể chạy tệp theo cách chung:
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]0 và sau đó máy chủ sẽ chạy trên
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]1. Đầu ra trong dấu nhắc thiết bị đầu cuối/lệnh sẽ trông giống như thế này:
Nếu chúng tôi mở trình duyệt của mình và điều hướng đến
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]2, chúng tôi nên được chào đón bằng một tin nhắn
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]3
Thêm điểm cuối và gửi lại dữ liệu
Để làm cho mọi thứ thú vị hơn một chút, chúng tôi sẽ thêm một điểm cuối gửi lại dữ liệu ở định dạng JSON. Không chỉ vậy, chúng tôi sẽ đọc dữ liệu này từ đĩa và sau đó gửi nó dưới dạng phản hồi. Định dạng JSON là một định dạng rất phổ biến được sử dụng để truyền đạt dữ liệu giữa phụ trợ và frontend.
Hãy để thêm một tệp JSON có tên
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]4 vào thư mục
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv3 của chúng tôi:
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv
Với các nội dung sau:
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]
Chúng tôi đang sử dụng một tệp để đơn giản hóa ví dụ, nhưng hãy tưởng tượng điều này thể hiện một số dữ liệu trong cơ sở dữ liệu.
Tiếp theo, chúng tôi sẽ thêm một điểm cuối mới gửi dữ liệu này dưới dạng phản hồi cho một yêu cầu. Chúng tôi cũng sẽ thêm nhập khẩu mới. Giải thích theo sau mã:
from flask import Flask import flask import json app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" @app.route['/users', methods=["GET"]] def users[]: print["users endpoint reached..."] with open["users.json", "r"] as f: data = json.load[f] data.append[{ "username": "user4", "pets": ["hamster"] }] return flask.jsonify[data] if __name__ == "__main__": app.run["localhost", 6969]
Trên dòng 2 và 3, chúng tôi nhập
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]6 và
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]7 sẽ cho phép chúng tôi trả về dữ liệu JSON và đọc tệp JSON tương ứng.
Trên các dòng 11-21, điểm cuối mới
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]8 được xác định. Nhà trang trí
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]9 hiện cũng có tham số
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv0. Với tham số này, chúng tôi có thể chỉ định loại yêu cầu HTTP nào được cho phép trên điểm cuối này. Trong trường hợp này, chúng tôi chỉ cho phép
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv1, thường được sử dụng để lấy dữ liệu.
Tiếp theo, chúng tôi chỉ cần đọc tệp dữ liệu
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]4 bằng
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv3 để tạo tay cầm tệp và đọc nó bằng
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv4 trên dòng 15. Kết quả sẽ là danh sách các từ điển mà chúng tôi có thể thao tác. Để chứng minh điều này, chúng tôi thêm một bộ dữ liệu người dùng khác.
Sau đó, để gửi nó dưới dạng phản hồi hợp lệ, chúng tôi phải chuyển đổi dữ liệu này bằng cách sử dụng
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv5
Bây giờ, để xem các thay đổi trong mã của chúng tôi, chúng tôi phải dừng máy chủ và khởi động lại. Sau đó, nếu chúng ta điều hướng đến
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv6, chúng ta sẽ thấy kết quả sau:
Cấu hình CORS
Trước khi chúng tôi bắt đầu tạo máy khách frontend, chúng tôi nên định cấu hình CORS. Nếu chúng tôi không làm điều này, khách hàng frontend sẽ bị chặn bởi phần phụ trợ. Điều này được thực hiện tự động để ngăn các nguồn không mong muốn có thể giao tiếp với phụ trợ của chúng tôi.
Để giữ cho nó đơn giản, chúng tôi sẽ kích hoạt CORS cho tất cả các nguồn gốc bây giờ. Dưới đây là đoạn mã từ
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!"2 với các thay đổi có liên quan được tô sáng:
from flask import Flask import flask import json from flask_cors import CORS app = Flask[__name__] CORS[app]
Xây dựng phía trước JavaScript
Bước tiếp theo cho phụ trợ Python của chúng tôi với dự án Frontend JavaScript là xây dựng mặt trận. Trong phần này, chúng tôi sẽ viết một trang HTML rất cơ bản với một số JavaScript.
JavaScript của chúng tôi sẽ gửi yêu cầu đến máy chủ phụ trợ của chúng tôi và sau đó xử lý dữ liệu trong phản hồi để hiển thị nó trên trang. Như đã đề cập trước đó, ví dụ này sẽ không sử dụng khung giao diện người dùng hoặc thư viện để gửi yêu cầu.
Thiết lập dự án frontend
Hãy cùng tạo một thư mục mới cho dự án của chúng tôi trong
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv1 của chúng tôi được gọi là
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv9 và thêm một tệp có tên là
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]0:
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv +-- frontend + index.html
Thêm mã frontend
Dưới đây là danh sách mã hoàn chỉnh cho tệp
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]0. Chúng tôi sẽ trải qua các phần quan trọng từng bước:
basic-web-app-tutorial + .gitignore +-- backend +-- venv0
Đầu tiên, hãy để Lôi nhìn vào cơ thể:
basic-web-app-tutorial + .gitignore +-- backend +-- venv1
Ở đây chúng tôi chỉ cần xác định một số yếu tố HTML mà chúng tôi cung cấp ID để chúng tôi có thể tự động thêm văn bản/dữ liệu vào các yếu tố đó sau này với JavaScript. Chúng tôi cũng thêm một nút trên dòng 9 để kích hoạt một hàm sẽ truy xuất dữ liệu từ máy chủ phụ trợ.
Đối tượng yêu cầu HTTP
Tiếp theo, đối tượng yêu cầu
basic-web-app-tutorial + .gitignore +-- backend +-- venv2
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]2 này là một đối tượng có thể được sử dụng để trao đổi dữ liệu với một máy chủ web phía sau hậu trường. Nó được hỗ trợ bởi tất cả các trình duyệt. Bởi vì nó hoạt động ở hậu trường, chúng tôi có thể cập nhật trang của mình với dữ liệu đến mà không phải tải lại trang.
Thiết lập này kiểm tra xem liệu một thể hiện của đối tượng tồn tại trên dòng 16 và nếu không tạo ra nó và sau đó trả về nó.
Viết chức năng gọi lại
Tiếp theo, chức năng gọi lại khi nhận được phản hồi từ phần phụ trợ:
basic-web-app-tutorial + .gitignore +-- backend +-- venv3
Hàm
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]3 này kiểm tra trạng thái của đối tượng
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]4 để xem chúng ta có mã trạng thái thành công [200] trên dòng 25. Trạng thái sẵn sàng cũng được kiểm tra không. Sẵn sàng cho trạng thái 4 có nghĩa là: Yêu cầu kết thúc và phản hồi đã sẵn sàng. Nếu phản hồi đã sẵn sàng, chúng tôi có thể xử lý dữ liệu.
Chúng tôi cập nhật thông tin thời gian dữ liệu trên trang bằng cách gọi
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]5 trên dòng 27.
Sau đó, chúng tôi đặt HTML bên trong cho datadiv của chúng tôi thành
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]6 trên các dòng 28-30. Thuộc tính
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]6 này phải chứa dữ liệu JSON của chúng tôi.
Gửi một yêu cầu
Sau đó, mã gửi yêu cầu:
basic-web-app-tutorial + .gitignore +-- backend +-- venv4
Ở đây trước tiên chúng tôi phải lấy một thể hiện của
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]8 để gửi yêu cầu. Trên dòng tiếp theo, dòng 36, chúng tôi đặt chức năng gọi lại. Có nghĩa là, khi
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]9 được kích hoạt chức năng
from flask import Flask import flask import json app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" @app.route['/users', methods=["GET"]] def users[]: print["users endpoint reached..."] with open["users.json", "r"] as f: data = json.load[f] data.append[{ "username": "user4", "pets": ["hamster"] }] return flask.jsonify[data] if __name__ == "__main__": app.run["localhost", 6969]0 của chúng tôi sẽ được gọi.
Với
from flask import Flask import flask import json app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" @app.route['/users', methods=["GET"]] def users[]: print["users endpoint reached..."] with open["users.json", "r"] as f: data = json.load[f] data.append[{ "username": "user4", "pets": ["hamster"] }] return flask.jsonify[data] if __name__ == "__main__": app.run["localhost", 6969]1, chúng tôi chỉ định loại yêu cầu chúng tôi muốn gửi. Trong trường hợp này, chúng tôi muốn gửi yêu cầu HTTP
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv1 đến địa chỉ
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv6. Và tham số cuối cùng đặt
from flask import Flask import flask import json app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" @app.route['/users', methods=["GET"]] def users[]: print["users endpoint reached..."] with open["users.json", "r"] as f: data = json.load[f] data.append[{ "username": "user4", "pets": ["hamster"] }] return flask.jsonify[data] if __name__ == "__main__": app.run["localhost", 6969]4 thành
from flask import Flask import flask import json app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" @app.route['/users', methods=["GET"]] def users[]: print["users endpoint reached..."] with open["users.json", "r"] as f: data = json.load[f] data.append[{ "username": "user4", "pets": ["hamster"] }] return flask.jsonify[data] if __name__ == "__main__": app.run["localhost", 6969]5. Điều này có nghĩa là yêu cầu sẽ được gửi trong nền mà không chặn thực thi mã khác.
Cuối cùng, chúng tôi gửi yêu cầu mà không có bất kỳ dữ liệu bổ sung nào trên dòng 40 với
from flask import Flask import flask import json app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" @app.route['/users', methods=["GET"]] def users[]: print["users endpoint reached..."] with open["users.json", "r"] as f: data = json.load[f] data.append[{ "username": "user4", "pets": ["hamster"] }] return flask.jsonify[data] if __name__ == "__main__": app.run["localhost", 6969]6.
Chạy máy khách Frontend
Bây giờ chúng tôi đã sẵn sàng để chạy một máy chủ HTTP và kiểm tra dự án phụ trợ Python và JavaScript của chúng tôi.
Nếu chúng ta bắt đầu máy chủ http bằng lệnh sau trong dấu nhắc thiết bị đầu cuối/lệnh:
from flask import Flask import flask import json app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" @app.route['/users', methods=["GET"]] def users[]: print["users endpoint reached..."] with open["users.json", "r"] as f: data = json.load[f] data.append[{ "username": "user4", "pets": ["hamster"] }] return flask.jsonify[data] if __name__ == "__main__": app.run["localhost", 6969]7, trang sẽ được phục vụ tại
from flask import Flask import flask import json app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" @app.route['/users', methods=["GET"]] def users[]: print["users endpoint reached..."] with open["users.json", "r"] as f: data = json.load[f] data.append[{ "username": "user4", "pets": ["hamster"] }] return flask.jsonify[data] if __name__ == "__main__": app.run["localhost", 6969]8:
Sau đó, khi chúng ta điều hướng đến địa chỉ này, chúng ta sẽ thấy:
Chúng tôi đã xây dựng tất cả các mảnh bây giờ và cuối cùng có thể thấy cách chúng làm việc cùng nhau.
Đảm bảo rằng máy chủ phụ trợ đang chạy bằng cách chạy lệnh
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]0 trong dấu nhắc của thiết bị đầu cuối/lệnh trong thư mục
basic-web-app-tutorial + .gitignore +-- backend + app.py +-- venv3.
Sau đó, khởi động máy chủ Web Frontend nếu nó không chạy trong thư mục
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv9:
from flask import Flask import flask import json app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" @app.route['/users', methods=["GET"]] def users[]: print["users endpoint reached..."] with open["users.json", "r"] as f: data = json.load[f] data.append[{ "username": "user4", "pets": ["hamster"] }] return flask.jsonify[data] if __name__ == "__main__": app.run["localhost", 6969]7.
Sau đó điều hướng đến địa chỉ cho Frontend
from flask import Flask import flask import json app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" @app.route['/users', methods=["GET"]] def users[]: print["users endpoint reached..."] with open["users.json", "r"] as f: data = json.load[f] data.append[{ "username": "user4", "pets": ["hamster"] }] return flask.jsonify[data] if __name__ == "__main__": app.run["localhost", 6969]8. Bây giờ khi chúng tôi nhấp vào nút, chúng tôi sẽ lấy dữ liệu từ phần phụ trợ:
Khi chúng tôi nhấp vào nút, một yêu cầu Get HTTP được gửi đến địa chỉ chúng tôi đã chỉ định. Trong khi đó, máy chủ phụ trợ đang lắng nghe các yêu cầu trên
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]1. Khi yêu cầu đến trong kiểm tra phụ trợ để xem đường dẫn được yêu cầu
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]8 để xem liệu nó có bất kỳ tuyến đường/điểm cuối phù hợp nào không. Mã máy chủ cũng kiểm tra phương thức để xem nó có được phép trên tuyến đó không. Nếu mọi thứ đều ổn, nó sẽ tiếp tục xử lý yêu cầu bằng cách gọi hàm
from flask import Flask import flask import json from flask_cors import CORS app = Flask[__name__] CORS[app]6 trong mã Python.
Gửi dữ liệu với frontend JavaScript và nhận trên phần phụ trợ
Trong phần này, chúng tôi sẽ viết mã để gửi dữ liệu với Frontend và mã Python JavaScript để nhận dữ liệu đó trên phần phụ trợ.
Gửi dữ liệu với Frontend
Đầu tiên, chúng tôi sẽ thêm chức năng vào Frontend JavaScript Barebones của chúng tôi để gửi dữ liệu đến phần phụ trợ. Chúng tôi cũng sẽ thấy rằng việc gửi một yêu cầu bài đăng đến phần phụ trợ của chúng tôi sẽ không được phép bởi phần phụ trợ trên điểm cuối
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]8 cho đến khi chúng tôi cho phép rõ ràng.
Cập nhật cơ thể HTML cho các yếu tố đầu vào
Hãy để thêm một số yếu tố UI để nhập và gửi dữ liệu. HTML
from flask import Flask import flask import json from flask_cors import CORS app = Flask[__name__] CORS[app]8 được cập nhật trông như thế này:
basic-web-app-tutorial + .gitignore +-- backend +-- venv5
Chúng tôi đã thêm một trường đầu vào văn bản đơn giản, một nút để kích hoạt hàm
from flask import Flask import flask import json from flask_cors import CORS app = Flask[__name__] CORS[app]9 và một div sẽ hiển thị phản hồi từ phần phụ trợ. Ngay cả khi gửi dữ liệu, phụ trợ sẽ trả về một số dữ liệu xác nhận sự thành công của hoạt động. Ví dụ: khi chỉnh sửa dữ liệu, phần phụ trợ có thể trả về đối tượng dữ liệu được cập nhật.
Thêm mã JavaScript mới để gửi dữ liệu
Bây giờ, hãy để thêm một số chức năng JavaScript.
Đầu tiên, chức năng gọi lại được kích hoạt khi máy chủ gửi phản hồi cho giao diện người dùng của chúng tôi:
basic-web-app-tutorial + .gitignore +-- backend +-- venv6
Hàm này tương tự như
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]3 với một sự khác biệt nhỏ. Trên dòng 62, chúng tôi kiểm tra trạng thái
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv +-- frontend + index.html1 thay vì
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv +-- frontend + index.html2. Trạng thái
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv +-- frontend + index.html1 thường được gửi khi dữ liệu được gửi và phần phụ trợ đã tạo ra một tài nguyên hoặc phần dữ liệu mới ở phía phụ trợ trong cơ sở dữ liệu chẳng hạn. Chúng tôi cũng sẽ định cấu hình phụ trợ của chúng tôi để gửi mã trạng thái này, vì vậy ở đây chúng tôi phải phản ứng với nó.
Tiếp theo, mã gửi dữ liệu thực tế trong một yêu cầu bài đăng:
basic-web-app-tutorial + .gitignore +-- backend +-- venv7
Trên các dòng 72-76, chúng tôi nhận được giá trị từ phần tử UI đầu vào văn bản của chúng tôi. Chúng tôi nhận được phần tử bằng
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv +-- frontend + index.html4 và sau đó truy cập thuộc tính
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv +-- frontend + index.html5. Sau đó chúng tôi kiểm tra xem giá trị có trống hay không. Thông thường chúng tôi cũng sẽ xác nhận đầu vào theo những cách khác. Tuy nhiên, đây là bên ngoài phạm vi của hướng dẫn này.
Sau đó, chúng tôi nhận được một thể hiện của XMLHTTPrequestObject một lần nữa và định cấu hình chức năng gọi lại, lần này chúng tôi đặt
[ { "username": "user1", "pets": ["dog"] }, { "username": "user2", "pets": [] }, { "username": "user3", "pets": ["duck", "duck", "goose"] } ]9 thành chức năng gọi lại mới của chúng tôi
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv +-- frontend + index.html7 trên dòng 79.
Trên dòng 82, chúng tôi đặt tiêu đề yêu cầu
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv +-- frontend + index.html8 cho yêu cầu HTTP của chúng tôi thành
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv +-- frontend + index.html9. Điều này thông báo cho máy chủ phụ trợ về loại dữ liệu chúng tôi đang gửi.
Cuối cùng, trên dòng 84, chúng tôi gửi dữ liệu bằng cách đặt nó vào cấu trúc JSON
basic-web-app-tutorial + .gitignore +-- backend +-- venv00 và sau đó biến nó thành một chuỗi bằng cách sử dụng
basic-web-app-tutorial + .gitignore +-- backend +-- venv01.
Gửi dữ liệu và nhận phản hồi lỗi
Nếu chúng tôi gửi một số dữ liệu ngay bây giờ, chúng tôi sẽ nhận được phản hồi lỗi từ máy chủ. Bởi vì phần phụ trợ không cho phép phương thức
basic-web-app-tutorial + .gitignore +-- backend +-- venv02 nhưng yêu cầu của chúng tôi sẽ bị từ chối.
Phần phụ trợ cũng cho thấy rằng nó đã gửi phản hồi 405 [phương thức không được phép]:
Tiếp theo, chúng tôi sẽ thêm chức năng vào phần phụ trợ của chúng tôi để cho phép yêu cầu ____102 này và xử lý nó.
Nhận được yêu cầu bài đăng trong phần phụ trợ Python
Trong phần này, chúng tôi sẽ cập nhật chức năng
from flask import Flask import flask import json from flask_cors import CORS app = Flask[__name__] CORS[app]6 của chúng tôi để có thể chấp nhận và xử lý các yêu cầu POST.
Đầu tiên, chúng tôi phải thêm nhập
basic-web-app-tutorial + .gitignore +-- backend +-- venv05:
basic-web-app-tutorial + .gitignore +-- backend +-- venv8
Điều này cho phép chúng tôi trích xuất thêm thông tin về các yêu cầu đến.
basic-web-app-tutorial + .gitignore +-- backend +-- venv9
Trong bộ trang trí trên dòng 13, chúng tôi thêm phương thức Post Post vào danh sách các phương thức được phép. Bây giờ chúng tôi hỗ trợ hai phương thức yêu cầu trên cùng một điểm cuối [
from flask import Flask app = Flask[__name__] @app.route["/"] def hello[]: return "Hello, World!" if __name__ == "__main__": app.run["localhost", 6969]8], chúng tôi phải xác định phương thức nào mỗi yêu cầu đang sử dụng để chúng tôi có thể thay đổi hành vi của mã theo đó.
Chúng tôi sử dụng thuộc tính
basic-web-app-tutorial + .gitignore +-- backend +-- venv07 trên đối tượng
basic-web-app-tutorial + .gitignore +-- backend +-- venv05 để xác định xem chúng tôi đang xử lý yêu cầu
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv1 hoặc yêu cầu
basic-web-app-tutorial + .gitignore +-- backend +-- venv02. Mã để xử lý một
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv1 vẫn giống như những gì chúng ta đã có trước đây.
Mã mới của chúng tôi, dòng 25-33 liên quan đến yêu cầu
basic-web-app-tutorial + .gitignore +-- backend +-- venv02 đến.
Với
basic-web-app-tutorial + .gitignore +-- backend +-- venv13, chúng tôi có thể trích xuất dữ liệu JSON [tải trọng] được gửi dưới dạng từ điển JSON. Sau đó, chúng tôi trích xuất dữ liệu và gán nó cho
basic-web-app-tutorial + .gitignore +-- backend +-- venv14 trên dòng 28.
Cuối cùng, trên các dòng 29-33, chúng tôi xây dựng một đối tượng dữ liệu phản hồi mới và gửi lại dưới dạng đối tượng
basic-web-app-tutorial + .gitignore +-- backend +-- venv15 với mã trạng thái
basic-web-app-tutorial + .gitignore +-- backend + app.py + users.json +-- venv +-- frontend + index.html1.
Đã hoàn thành việc gửi và nhận ví dụ
Bây giờ chúng tôi đã sẵn sàng để gửi và nhận dữ liệu với phương thức yêu cầu HTTP POST. Chúng ta nên đảm bảo khởi động lại phần phụ trợ sau khi lưu các thay đổi và làm mới/khởi động lại trang web frontend.
Nhập một cái gì đó vào hộp văn bản đầu vào và nhấn gửi sẽ dẫn đến một cái gì đó như sau:
Phần phụ trợ cho thấy đầu ra sau:
Sự kết luận
Trong hướng dẫn này, chúng tôi đã tìm hiểu về việc xây dựng một phụ trợ Python cơ bản và phía trước JavaScript có thể giao tiếp với phụ trợ đó. Chúng tôi đưa vào thực hành các khái niệm cơ bản về giao tiếp giữa một phụ trợ và mặt tiền. Trợ lý của chúng tôi có thể xử lý việc xử lý nhận và đăng yêu cầu từ khách hàng.
Dự án đầy đủ có thể được tìm thấy trên github của tôi: ở đây.
Vui lòng theo dõi tôi trên Twitter để được cập nhật về các hướng dẫn mà tôi đang thực hiện:
Theo dõi @tmdev82