Hướng dẫn how to send data from frontend to backend python - cách gửi dữ liệu từ frontend tới backend python

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

  • 1 Điều kiện tiên quyết Prerequisites
  • 2 Tạo dự án Creating the project
  • 3 Xây dựng phụ trợ Python Building the Python backend
    • 3.1 Thiết lập môi trường ảo cho các phụ thuộc Setting up a virtual environment for dependencies
    • 3.2 Cài đặt phụ thuộc Installing dependencies
    • 3.3 Ứng dụng phụ trợ Python cơ bản Basic python backend app
    • 3.4 Thêm điểm cuối và gửi lại dữ liệu Adding an endpoint and sending back data
    • 3.5 Cấu hình CORS Configuring CORS
  • 4 Xây dựng phía trước JavaScript Building the JavaScript frontend
    • 4.1 Thiết lập Dự án Frontend Setup the frontend project
    • 4.2 Thêm mã frontend Adding the frontend code
    • 4.3 Đối tượng yêu cầu HTTP HTTP request object
    • 4.4 Viết chức năng gọi lại Writing the callback function
    • 4.5 Gửi yêu cầu Sending a request
    • 4.6 Chạy máy khách Frontend Running the frontend client
  • 5 Chạy phụ trợ Python với Frontend JavaScript Running the Python backend with JavaScript frontend
  • 6 Gửi dữ liệu với frontend JavaScript và nhận trên phần phụ trợ Send data with the JavaScript frontend and receive on the backend
    • 6.1 Gửi dữ liệu với Frontend Sending data with the frontend
      • 6.1.1 Cập nhật cơ thể HTML cho các phần tử đầu vào Updating the body HTML for input elements
      • 6.1.2 Thêm mã JavaScript mới để gửi dữ liệu Adding new JavaScript code for sending data
    • 6.2 Gửi dữ liệu và nhận phản hồi lỗi Sending the data and getting error response
    • 6.3 Nhận yêu cầu bài đăng trong phần phụ trợ Python Receiving POST request in the Python backend
    • 6.4 Đã hoàn thành việc gửi và nhận ví dụ Completed sending and receiving example
  • 7. Kết luận Conclusion

Đ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
     +-- venv
0.

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
     +-- venv
1.

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
     +-- venv
1 của chúng tôi được gọi là
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     +-- venv
3.

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
     +-- venv
4 bằng lệnh sau:
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     +-- venv
5.

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
     +-- venv
6. Đối với Windows:
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     +-- venv
7.

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
     +-- venv
4 vào tệp
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     +-- venv
9.

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
     +-- venv
3 đượ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:

Hướng dẫn how to send data from frontend to backend python - cách gửi dữ liệu từ frontend tới backend python

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
     +-- venv
3 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
     +-- venv
0. 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
     +-- venv
1, 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
     +-- venv
3 để tạo tay cầm tệp và đọc nó bằng
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     + users.json
     +-- venv
4 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
     +-- venv
5

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
     +-- venv
6, chúng ta sẽ thấy kết quả sau:

Hướng dẫn how to send data from frontend to backend python - cách gửi dữ liệu từ frontend tới backend python

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
     +-- venv
1 của chúng tôi được gọi là
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     + users.json
     +-- venv
9 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
     +-- venv
0

Đầu tiên, hãy để Lôi nhìn vào cơ thể:

basic-web-app-tutorial
+ .gitignore
+-- backend
     +-- venv
1

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

basic-web-app-tutorial
+ .gitignore
+-- backend
     +-- venv
2

[
    {
        "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
     +-- venv
3

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
     +-- venv
4

Ở đâ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
     +-- venv
1 đến địa chỉ
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     + users.json
     +-- venv
6. 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:

Hướng dẫn how to send data from frontend to backend python - cách gửi dữ liệu từ frontend tới backend python

Sau đó, khi chúng ta điều hướng đến địa chỉ này, chúng ta sẽ thấy:

Hướng dẫn how to send data from frontend to backend python - cách gửi dữ liệu từ frontend tới backend python

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
     +-- venv
3.

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
     +-- venv
9:
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ợ:

Hướng dẫn how to send data from frontend to backend python - cách gửi dữ liệu từ frontend tới backend python

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
     +-- venv
5

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
     +-- venv
6

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.html
1 thay vì
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     + users.json
     +-- venv
+-- frontend
     + index.html
2. Trạng thái
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     + users.json
     +-- venv
+-- frontend
     + index.html
1 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
     +-- venv
7

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.html
4 và sau đó truy cập thuộc tính
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     + users.json
     +-- venv
+-- frontend
     + index.html
5. 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.html
7 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.html
8 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.html
9. Đ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
     +-- venv
00 và sau đó biến nó thành một chuỗi bằng cách sử dụng
basic-web-app-tutorial
+ .gitignore
+-- backend
     +-- venv
01.

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
     +-- venv
02 nhưng yêu cầu của chúng tôi sẽ bị từ chối.

Hướng dẫn how to send data from frontend to backend python - cách gửi dữ liệu từ frontend tới backend python
Phần phụ trợ không cho phép các yêu cầu POST

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

Hướng dẫn how to send data from frontend to backend python - cách gửi dữ liệu từ frontend tới backend python
Đầu ra phụ trợ Python khi nhận được yêu cầu POST

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
     +-- venv
05:

basic-web-app-tutorial
+ .gitignore
+-- backend
     +-- venv
8

Đ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
     +-- venv
9

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
     +-- venv
07 trên đối tượng
basic-web-app-tutorial
+ .gitignore
+-- backend
     +-- venv
05 để 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
     +-- venv
1 hoặc yêu cầu
basic-web-app-tutorial
+ .gitignore
+-- backend
     +-- venv
02. Mã để xử lý một
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     + users.json
     +-- venv
1 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
     +-- venv
02 đến.

Với

basic-web-app-tutorial
+ .gitignore
+-- backend
     +-- venv
13, 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
     +-- venv
14 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
     +-- venv
15 với mã trạng thái
basic-web-app-tutorial
+ .gitignore
+-- backend
     + app.py
     + users.json
     +-- venv
+-- frontend
     + index.html
1.

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

Hướng dẫn how to send data from frontend to backend python - cách gửi dữ liệu từ frontend tới backend python
Xem dữ liệu phản hồi được in bên dưới đầu vào.

Phần phụ trợ cho thấy đầu ra sau:

Hướng dẫn how to send data from frontend to backend python - cách gửi dữ liệu từ frontend tới backend python
Backend hiển thị xử lý yêu cầu bài đăng

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

Làm cách nào để kết nối Frontend với phụ trợ trong Python?

Đảm bảo rằng máy chủ phụ trợ đang chạy bằng cách chạy lệnh python app.py trong dấu nhắc của thiết bị đầu cuối/lệnh trong thư mục phụ trợ. Sau đó, khởi động máy chủ web frontend nếu nó không chạy trong thư mục frontend: http-server. Sau đó điều hướng đến địa chỉ cho frontend http: // localhost: 8080.

Làm thế nào dữ liệu được gửi từ frontend đến phụ trợ?

1.) Kết nối HTTP qua TCP: Đây là kết nối ngắn ngủi nơi máy khách yêu cầu một cái gì đó từ máy chủ và máy chủ gửi lại cho máy khách ngay lập tức và kết nối được đóng lại. 2.)HTTP connection over TCP: It is a short-lived connection where the client requests for something from the server and the server sends it back to the client immediately and the connection is closed. 2.)

Làm thế nào để bạn kết nối frontend và phụ trợ?

Kết nối một frontend với một phụ trợ bằng các dịch vụ..
Tạo và chạy mẫu Hello Backend Microservice bằng cách sử dụng đối tượng triển khai ..
Sử dụng đối tượng dịch vụ để gửi lưu lượng truy cập đến nhiều bản sao của microservice ..
Tạo và chạy Microservice Frontend Microservice, cũng sử dụng đối tượng triển khai ..

Tôi có thể sử dụng python cho frontend và phụ trợ không?

Hãy nhớ rằng, Python là một ngôn ngữ lập trình chung.Nó có thể được sử dụng cho cả phát triển phía trước và phụ trợ.Tuy nhiên, nó được sử dụng rộng rãi hơn trong phụ trợ;Trên thực tế, Python được liệt kê trong số các ngôn ngữ phụ trợ phổ biến nhất.It can be used for both frontend and backend development. However, it is more widely used in backend; in fact, Python is listed among the most popular backend languages.