Tôi có thể tích hợp python với js không?
|
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách xây dựng một phụ trợ đơn giản bằng Python và một giao diện người dùng bằng JavaScript. Đối với phần phụ trợ Python, chúng tôi sẽ sử dụng thư viện Flask. Điều này sẽ cho phép chúng tôi thiết lập chương trình phụ trợ chỉ với một vài dòng mã Show
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à giao diện người dùng. Vì vậy, frontend 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 giao diện người dùng mẫu rất đơn giản Mã dự án đầy đủ có thể được tìm thấy trên GitHub của tôi. nơi đây nội dung điều kiện tiên quyếtMặ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
Chúng tôi cũng giả sử phần sau được cài đặt trên hệ thống của chúng tôi
Hãy đảm bảo rằng chúng ta đã cài đặt máy chủ http, để chúng ta có một cách dễ dàng để chạy mã giao diện người dùng của mình. Ví dụ: sử dụng npm. basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv0Tạo dự ánTrước tiên, hãy 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 Python backend và Web frontend Tạo một thư mục. basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv1Xây dựng chương trình phụ trợ PythonBước đầu tiên trong dự án phụ trợ Python và giao diện người dùng JavaScript của chúng tôi là xây dựng phụ trợ Hãy tạo một thư mục mới cho dự án của chúng ta trong basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv1 có tên là basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv3basic-web-app-tutorial + -- backend Thiết lập một môi trường ảo cho các phụ thuộcTiếp theo, chúng tôi sẽ tạo một môi trường ảo cho các phụ thuộc của chúng tôi. Như đã đề cập trước đó, việc sử dụng môi trường ảo giúp 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 của chúng tôi Chúng ta có thể tạo một môi trường ảo có tên là basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv4 bằng lệnh sau. basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv5Trước khi chúng tôi có thể cài đặt các phụ thuộc, chúng tôi 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. Cho cửa sổ. basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv7Ghi chú. 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 trong tệp basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv9basic-web-app-tutorial
+ .gitignore
+-- backend
+-- venvcài đặt phụ thuộcTiếp tục, hãy cài đặt các phụ thuộc cần thiết
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 bằng 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ảnTrong phần này, cuối cùng chúng ta sẽ viết đoạn mã đầu tiên Hãy tạo một tệp trong thư mục basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv3 có tên là from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello, World!"2 và chỉnh sửa nó bằng trình soạn thảo văn bản/IDE yêu thích của chúng ta. Ví dụ vscodebasic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venvChúng ta sẽ bắt đầu với ví dụ cơ bản trên trang Flask from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello, World!"Ở dòng đầu tiên, chúng ta nhập lớp Flask cho phép chúng ta tạo đối tượng Flask. Đây là đối tượng trung tâm cho ứng dụng phụ trợ của chúng tôi. Ở dòng 3, phiên bản được tạo bằng cách sử dụ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 một from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello, World!"4 bằng cách sử dụng một hàm trang trí. 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ụ trợ đang chạy, chúng tôi sẽ có thể truy cập 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, chức năng 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ủ của ứng dụng web của chúng tôi bằng trình duyệt internetSau khi đặ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 bây giờ chúng ta không muốn xử lý việc đặt các biến môi trường, chúng ta cũng có thể thêm các dòng saufrom 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ần chạy tệp theo cách thông thường. 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 lệnh/thiết bị đầu cuối sẽ trông giống như thế nàyNế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 sẽ nhận được thông báo from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello, World!"
if __name__ == "__main__":
app.run("localhost", 6969)3Thêm một đ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 dữ liệu giữa backend và frontend Hãy thêm một tệp JSON có tên là 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 tabasic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+ users.json
+-- venvVới những 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 tệp này đại diện cho 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 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 ứngTrê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. Trì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 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 chỉ được sử dụng để truy xuất dữ liệuTiế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 cách sử dụng basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+ users.json
+-- venv3 để tạo một phần xử lý tệp và đọc nó bằng cách sử dụng basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+ users.json
+-- venv4 trên dòng 15. Kết quả sẽ là một danh sách các từ điển mà chúng ta có thể thao tác. Để chứng minh điều này, chúng tôi thêm một tập dữ liệu người dùng khácSau đó, để gửi nó dưới dạng phản hồi hợp lệ, chúng tôi phải chuyển đổi lại dữ liệu này bằng cách sử dụng basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+ users.json
+-- venv5Bây giờ, để xem những 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 tôi điều hướng đến basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+ users.json
+-- venv6, chúng tôi sẽ thấy kết quả sauĐịnh cấu hình CORSTrước khi bắt đầu tạo ứng dụng khách giao diện người dùng, chúng ta nên định cấu hình CORS. Nếu chúng tôi không làm điều này, ứng dụng khách giao diện người dùng sẽ bị chặn bởi chương trình 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 chương trình phụ trợ của chúng tôi Để đơn giản, chúng tôi sẽ kích hoạt CORS cho tất cả các nguồn gốc ngay 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 những thay đổi có liên quan được làm nổi bậtfrom flask import Flask import flask import json from flask_cors import CORS app = Flask(__name__) CORS(app) Xây dựng giao diện người dùng JavaScriptBước tiếp theo cho dự án phụ trợ Python với giao diện người dùng JavaScript của chúng tôi là xây dựng giao diện người dùng. Trong phần này, chúng ta 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ị 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 frontendHãy tạo một thư mục mới cho dự án của chúng ta trong basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv1 có tên 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"]
}
]0basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+ users.json
+-- venv
+-- frontend
+ index.htmlThêm mã giao diện người dùngDưới đây là danh sách mã đầy đủ cho tệp [
{
"username": "user1",
"pets": ["dog"]
},
{
"username": "user2",
"pets": []
},
{
"username": "user3",
"pets": ["duck", "duck", "goose"]
}
]0. Chúng tôi sẽ đi qua các phần quan trọng từng bướcbasic-web-app-tutorial
+ .gitignore
+-- backend
+-- venv0Đầu tiên, hãy nhìn vào cơ thể basic-web-app-tutorial
+ .gitignore
+-- backend
+-- venv1Ở đây, chúng tôi chỉ định nghĩa một số phần 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 phần tử đó sau này bằng JavaScript. Chúng tôi cũng thêm một nút trên dòng 9 để kích hoạt chức năng sẽ truy xuất dữ liệu từ máy chủ phụ trợ đối tượng yêu cầu HTTPTiếp theo, đối tượng yêu cầu HTTP 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á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. Vì nó hoạt động ở hậu trường nên 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 trangThiết lập này kiểm tra xem liệu một phiên bản của đối tượng có tồn tại trên dòng 16 hay không và nếu không, hãy tạo nó rồi trả về nó Viết hàm gọi lạiTiếp theo, là chức năng gọi lại khi nhận được phản hồi từ phụ trợ basic-web-app-tutorial
+ .gitignore
+-- backend
+-- venv3Hà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 liệu chúng ta có mã trạng thái thành công (200) trên dòng 25 hay không. Trạng thái sẵn sàng cũng được kiểm tra. Trạng thái sẵn sàng 4 nghĩa là. yêu cầu đã hoàn thành 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ệuChú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 27Sau đó, 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ôiGửi yêu cầuSau đó, 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 truy xuất một phiên bản của [
{
"username": "user1",
"pets": ["dog"]
},
{
"username": "user2",
"pets": []
},
{
"username": "user3",
"pets": ["duck", "duck", "goose"]
}
]8 để gửi yêu cầu. Ở 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, hà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)0 của chúng ta sẽ được gọiVớ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 mà chúng tôi muốn gửi. Trong trường hợp này, chúng tôi muốn gửi một 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ácCuố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)6Chạy ứng dụng khách phía trướcBây giờ chúng tôi đã sẵn sàng chạy máy chủ http và thử nghiệm dự án phụ trợ Python và giao diện người dùng JavaScript của chúng tôi Nếu chúng ta khởi động máy chủ http bằng lệnh sau trong dấu nhắc lệnh/thiết bị đầu cuố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)7 trang này 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)8Sau đó, khi chúng tôi điều hướng đến địa chỉ này, chúng tôi sẽ thấy Chạy chương trình phụ trợ Python với giao diện người dùng JavaScriptBây giờ chúng tôi đã xây dựng tất cả các phần và cuối cùng có thể thấy cách chúng hoạt động cùng nhau Đảm bảo 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 lệnh/thiết bị đầu cuối trong thư mục basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+-- venv3Sau đó khởi động máy chủ web giao diện người dùng 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)7Sau đó điều hướng đến địa chỉ cho giao diện người dù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)8. Bây giờ khi chúng tôi nhấp vào nút, chúng tôi sẽ nhận được dữ liệu từ chương trình phụ trợKhi chúng tôi nhấp vào nút, một yêu cầu HTTP GET đượ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 phần phụ trợ, hãy kiểm tra 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 liệu nó có được phép trên tuyến đường đó 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 giao diện người dùng 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 giao diện người dùng Javascript và mã Python để nhận dữ liệu đó trên phụ trợ Gửi dữ liệu với frontendTrước tiên, chúng tôi sẽ thêm chức năng vào giao diện người dùng JavaScript đơn giản 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 POST tới phần phụ trợ của chúng tôi sẽ không được 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 phép cho đến khi chúng tôi cho phép rõ ràngCập nhật HTML cơ thể cho các yếu tố đầu vàoHãy thêm một số thành phần giao diện người dùng để nhập và gửi dữ liệu. HTML cập nhật from flask import Flask import flask import json from flask_cors import CORS app = Flask(__name__) CORS(app)8 trông như thế này basic-web-app-tutorial
+ .gitignore
+-- backend
+-- venv5Chúng tôi đã thêm một trường nhập 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, một chương trình 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, chương trình phụ trợ có thể trả về đối tượng dữ liệu đã cập nhật Thêm mã JavaScript mới để gửi dữ liệuBâ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 tới giao diện người dùng của chúng tôi basic-web-app-tutorial
+ .gitignore
+-- backend
+-- venv6Chức năng này tương tự như [
{
"username": "user1",
"pets": ["dog"]
},
{
"username": "user2",
"pets": []
},
{
"username": "user3",
"pets": ["duck", "duck", "goose"]
}
]3 với một điểm 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 một tài nguyên hoặc một 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 chương trình phụ trợ của mình để 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 trong yêu cầu POST basic-web-app-tutorial
+ .gitignore
+-- backend
+-- venv7Trên các dòng 72-76, chúng tôi nhận được giá trị từ phần tử giao diện người dùng nhập văn bản của mình. Chúng tôi lấy phần tử bằng cách basic-web-app-tutorial
+ .gitignore
+-- backend
+ app.py
+ users.json
+-- venv
+-- frontend
+ index.html4 và sau đó truy cập vào 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 thực đầu vào theo những cách khác. Tuy nhiên, điều này nằm ngoài phạm vi của hướng dẫn nàySau đó, chúng tôi nhận lại một phiên bản của XMLHttpRequestObject 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 79Trê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ửiCuối cùng, ở 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
+-- venv01Gửi dữ liệu và nhận phản hồi lỗiNế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ủ. Vì chương trình phụ trợ không cho phép phương pháp basic-web-app-tutorial
+ .gitignore
+-- backend
+-- venv02 nhưng yêu cầu của chúng tôi sẽ bị từ chốiChương trình 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 chương trình phụ trợ của mình để cho phép yêu cầu basic-web-app-tutorial
+ .gitignore
+-- backend
+-- venv02 này và xử lý nóNhận yêu cầu POST trong chương trình phụ trợ PythonTrong phần này, chúng ta sẽ cập nhật hàm from flask import Flask import flask import json from flask_cors import CORS app = Flask(__name__) CORS(app)6 để nó có thể chấp nhận và xử lý các yêu cầu POST Trước tiên, chúng tôi phải thêm một nhập khẩu basic-web-app-tutorial
+ .gitignore
+-- backend
+-- venv05basic-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
+-- venv9Trong trình trang trí trên dòng 13, chúng tôi thêm phương thức “POST” vào danh sách các phương thức được phép. Giờ đây, 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 mà mỗi yêu cầu đang sử dụng để chúng tôi có thể thay đổi hành vi của mã cho phù hợpChú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 hay 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ữ nguyên như những gì chúng tôi có trước đâyMã mới của chúng tôi, dòng 25-33 xử lý yêu cầu basic-web-app-tutorial
+ .gitignore
+-- backend
+-- venv02 sắp tớiVớ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 28Cuố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 nó trở 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.html1Hoàn thành gửi và nhận ví dụBây giờ chúng ta đã sẵn sàng để gửi và nhận dữ liệu với phương thức POST HTTP request. 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 phần đầu 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 kết quả như sau Phần phụ trợ hiển thị đầu ra sau Phần kết luậnTrong hướng dẫn này, chúng ta đã tìm hiểu về cách xây dựng một giao diện người dùng Python và phụ trợ Python cơ bản có thể giao tiếp với phụ trợ đó. Chúng tôi áp dụng các khái niệm cơ bản về giao tiếp giữa backend và frontend. Chương trình phụ trợ của chúng tôi có thể xử lý các yêu cầu GET và POST từ máy khách Dự án đầy đủ có thể được tìm thấy trên GitHub của tôi. nơi đây Vui lòng theo dõi tôi trên Twitter để được cập nhật các hướng dẫn mà tôi đang thực hiện Theo dõi @tmdev82Bình luận (18)
|
