Hướng dẫn how do you link a website to a backend in python? - làm thế nào để bạn liên kết một trang web với một chương trình phụ trợ trong python?

Đây là cho dự án mini của tôi được đánh giá..Chông về cơ bản tôi cần một GUI để hiển thị việc thực hiện băm gấp đôi. Tôi đã sử dụng HTML và CSS để tạo mặt trước của mình nhưng tôi không thể kết nối đầu sau của mình với phía trước ..

Tôi đã viết mã của mình bằng Python và phần trước bằng cách sử dụng HTML và CSS

Trang băm đôi trong HTML nơi tôi cần nhúng mã python của mình:

    

  








 DOUBLE HASHING


Home





Enter the size of the hash table:




 




     
<% def double_hashing(keys, hashtable_size, double_hash_value %>
<%hashtable_list = [None] * hashtable_size %>
<%for i in range(len(keys)): %>
<% hashkey = keys[i] % hashtable_size %>
<%if hashtable_list[hashkey] is None: %>
<% hashtable_list[hashkey] = keys[i] %>
<% else: %>
<% new_hashkey = hashkey%>
<%while hashtable_list[new_hashkey] is not None: %>
<%steps = double_hash_value - (keys[i] % double_hash_value) %>
<%new_hashkey = (new_hashkey + steps) % hashtable_size%>
<%hashtable_list[new_hashkey] = keys[i]%>
<%return hashtable_list %>


<% values = [26, 54, 94, 17, 31, 77, 44, 51] %>
<%=print(double_hashing(values, 21, 19))%>

Gói

1. Hypernova sẽ chạy như một dịch vụ, tạo ra HTML của thành phần React / Vue (kết xuất phía máy chủ)
2. Nó rất linh hoạt và thân thiện với SEO, bạn có thể sử dụng giải pháp này để di chuyển trang web của mình để phản ứng, Vue
3. Kiến trúc này không phổ biến lắm, và không có nhiều tài nguyên học tập về nó.
4. Tài nguyên

Kết xuất phía máy chủ ở quy mô

Hoạt động Node.js cho kết xuất phía máy chủ

Sự kết luận

Vì vậy, tôi viết bài đăng trên blog này để nói về một số giải pháp

Sau khi đọc, bạn sẽ biết sáu giải pháp để kết hợp frontend và phụ trợ, và những ưu và nhược điểm.

Giải pháp 1: SPA (Ứng dụng một trang)

Ứng dụng một trang (SPA) là một ứng dụng web hoặc trang web tương tác với người dùng bằng cách tự động viết lại trang web hiện tại với dữ liệu mới từ máy chủ web, thay vì phương thức mặc định của trình duyệt web tải toàn bộ trang mới.

Quy trình làm việc

1. Ứng dụng Frontend là một trang web tĩnh được phục vụ bởi máy chủ web như Nginx.
2. Khi người dùng truy cập trang web, index.html được phục vụ và trình duyệt tải xuống các tệp JS, CSS.
3. Sau đó, trình duyệt sẽ sử dụng ứng dụng JS để init React / Vue và xây dựng cây Dom.
4. Và sau đó ứng dụng React / Vue sẽ tương tác với phụ trợ API thông qua giao thức REST API hoặc GraphQL.

Frontend

Để tạo một ứng dụng Frontend đã tách rời:

1. Chúng ta có thể sử dụng created-react-app để tạo ứng dụng React.
2. Chúng ta có thể sử dụng Vue-cli để tạo một ứng dụng Vue.

Phụ trợ

Phần phụ trợ sẽ hoạt động như máy chủ API:

Django

Đối với Django Dev, chúng tôi cũng có thể cần các gói dưới đây.

1. Django Rest Framework sẽ giúp chúng tôi xây dựng API REST.
2. DJ-Rest-Auth hoặc Djoser cho hỗ trợ API API.
3. Các tiêu đề Django-CORS sẽ giúp giải quyết vấn đề chia sẻ tài nguyên có nguồn gốc chéo (CORS).
4. Graphene-Django tích hợp GraphQL vào dự án Django của bạn.
5. cookiecutter-django-rest

Bình giữ nhiệt

Đối với Flask Dev, chúng tôi cũng có thể cần các gói dưới đây.

1. flask-restful
2. flask-api
3. flask-graphql
4. flask-cors

Fastapi

1. Corsmiddleware

Ưu và nhược điểm

Pros:

1. Thân thiện với cả nhà phát triển Frontend và Prodend, và có nhiều tài nguyên học tập trực tuyến về kiến ​​trúc này.
2. Cấu trúc tách rời là sạch sẽ và dễ dàng để mở rộng quy mô.

Cons:

1. Không thể hưởng lợi từ một số tính năng django tuyệt vời, bình (mẫu, biểu mẫu, auth được xây dựng)
2. Ứng dụng Web không thân thiện với SEO và hơi chậm trên tải trang đầu tiên.

Giải pháp 2: SSR (kết xuất phía máy chủ)

Tiểu sử

Trước tiên hãy kiểm tra lý do tại sao SSR được giới thiệu và vấn đề gì nó giải quyết được.

Nếu bạn tạo ứng dụng web với mẫu SPA ở trên, hãy kiểm tra mã nguồn HTML, bạn sẽ thấy một cái gì đó như thế này:

Chúng tôi nhận thấy một số vấn đề ở đây:

1. ở trên trống, công cụ tìm kiếm không thể hiểu trang là gì mà không chạy JS.
2. Trình duyệt cần chạy một số mã JS để xây dựng cây Dom (có thể cần gửi một số yêu cầu bổ sung), điều này làm cho trang web hơi chậm để tải.

Quy trình làm việc

Ứng dụng Frontend là một trang web tĩnh được phục vụ bởi máy chủ web như Nginx.

Notes:

1. Khi người dùng truy cập trang web, index.html được phục vụ và trình duyệt tải xuống các tệp JS, CSS.
2. Sau đó, trình duyệt sẽ sử dụng ứng dụng JS để init React / Vue và xây dựng cây Dom.
3. Và sau đó ứng dụng React / Vue sẽ tương tác với phụ trợ API thông qua giao thức REST API hoặc GraphQL.
4. Frontend

Frontend

1. Để tạo một ứng dụng Frontend đã tách rời:
2. Chúng ta có thể sử dụng created-react-app để tạo ứng dụng React.

Phụ trợ

Phần phụ trợ sẽ hoạt động như máy chủ API:

Ưu và nhược điểm

Pros:

1. Thân thiện với cả nhà phát triển Frontend và Prodend, và có nhiều tài nguyên học tập trực tuyến về kiến ​​trúc này.
2. Cấu trúc tách rời là sạch sẽ và dễ dàng để mở rộng quy mô.

Cons:

1. Không thể hưởng lợi từ một số tính năng django tuyệt vời, bình (mẫu, biểu mẫu, auth được xây dựng)

Ứng dụng Web không thân thiện với SEO và hơi chậm trên tải trang đầu tiên.

• Giải pháp 2: SSR (kết xuất phía máy chủ)

Tiểu sử

Trước tiên hãy kiểm tra lý do tại sao SSR được giới thiệu và vấn đề gì nó giải quyết được.

Nếu bạn tạo ứng dụng web với mẫu SPA ở trên, hãy kiểm tra mã nguồn HTML, bạn sẽ thấy một cái gì đó như thế này:

Chúng tôi nhận thấy một số vấn đề ở đây:

1. ở trên trống, công cụ tìm kiếm không thể hiểu trang là gì mà không chạy JS.
2. Trình duyệt cần chạy một số mã JS để xây dựng cây Dom (có thể cần gửi một số yêu cầu bổ sung), điều này làm cho trang web hơi chậm để tải.
3. Kết xuất phía máy chủ (SSR) là một kỹ thuật phổ biến để hiển thị ứng dụng một trang (SPA) phía máy khách trên máy chủ và sau đó gửi một trang được hiển thị đầy đủ cho máy khách. Điều này cho phép các thành phần động được phục vụ dưới dạng đánh dấu HTML tĩnh.
4. Khi người dùng truy cập trang web, Node web server cố gắng kết xuất thành phần thành HTML ở phía máy chủ.

Node web server gửi yêu cầu đến phụ trợ API để tìm nạp dữ liệu và hiển thị các thành phần để xây dựng HTML.

Sau đó, HTML sẽ được trả lại cho trình duyệt.

Frontend

1. Để tạo một ứng dụng Frontend đã tách rời:
2. Next.js
3. Nuxt.js

Chúng ta có thể sử dụng created-react-app để tạo ứng dụng React.

1. Chúng ta có thể sử dụng Vue-cli để tạo một ứng dụng Vue.
2. Phụ trợ

Phần phụ trợ sẽ hoạt động như máy chủ API:

Django

Phụ trợ

Phần phụ trợ sẽ hoạt động như máy chủ API:

Ưu và nhược điểm

Pros:

1. Nhanh chóng, an toàn

Cons:

1. Tạo ra mất thời gian, bạn cần xây dựng mỗi khi bạn cập nhật nội dung.
2. Không thân thiện với động, bạn cần viết thêm một số mã để xử lý
   8.

Tài nguyên

1. Trang chủ Jamstack

Giải pháp 4: Hybrid

Trong giải pháp này, chúng tôi đã kết hợp chặt chẽ trước và phụ trợwe have tightly coupled frontend and backend

Biểu đồ

1. Ứng dụng Frontend Biên dịch và gói tài sản Frontend Frontend.
2. Sau khi hoàn thành việc xây dựng, các tài sản được xây dựng được đặt tại thư mục
   9.
3. Django hoặc Flask sẽ coi các tài sản được xây dựng là tài sản bình thường và không quan tâm họ đến từ đâu.do not care where they come from.
4. Django hoặc Flask sẽ thêm liên kết JS và CSS vào mẫu để đảm bảo trình duyệt có thể tải xuống.

Quy trình làm việc

Notes:

1. Khi người dùng truy cập trang web, máy chủ web xử lý yêu cầu, hãy hiển thị HTML bằng mẫu Django hoặc Jinja.
2. Trình duyệt tải xuống CSS, JS và các tài sản khác.
3. Trình duyệt chạy JavaScript để rắc HTML được bật máy chủ.

Frontend

1. Chúng ta có thể sử dụng Python-WebPack-B-B-bilerplate để Jump Start Frontend Project được gói bởi WebPack.
2. Đối với khung JavaScript, có nhiều tùy chọn và tôi khuyên bạn nên đọc Đánh giá khung JavaScript nhẹ (cho các nhà phát triển Django)

Nhập khẩu

Đối với những người không thích giải pháp Frontend Bundle như index.html0, bạn có thể kiểm tra index.html1

Bây giờ Khung Rails mới nhất đã sử dụng công nghệ này https://github.com/rails/importmap-rails

Và gói django cũng có sẵn trên https://github.com/dropseed/django-importmap

Ưu và nhược điểm

Pros:

1. Chúng ta vẫn có thể sử dụng cú pháp mẫu Django / Flask và HTML vì chúng ta đã quen thuộc
2. Chúng ta có thể viết JS và SCSS trong cú pháp hiện đại, mã dễ đọc và dễ bảo trì hơn.
3. Chúng tôi có thể nhập dự án Frontend 3 bên mà không cần chạm vào mẫu, nhưng thay vào đó sử dụng lệnh ____22.
4. Mã Linter có thể giúp kiểm tra kiểu mã JS và CSS.

Cons:

1. Không có nhiều tài nguyên học tập về giải pháp này.

Giải pháp 5: Khởi chạy React hoặc Vue trong mẫu

Sử dụng trường hợp

Giả sử bạn đang xây dựng một dự án Django bằng cách sử dụng index.html3, vì một số lý do, bạn cần thêm một trang bảng điều khiển phức tạp vào dự án.

index.html4 hoặc index.html5 Có vẻ như tùy chọn tốt ở đây, tuy nhiên, bạn không muốn chuyển toàn bộ dự án sang SPA, sau đó bạn có thể chọn giải pháp này.you do not want to move the whole project to SPA, then you can choose this solution.

Bạn có thể sử dụng index.html4 hoặc index.html5 để hiển thị các trang cụ thể hoặc các thành phần cụ thể trong dự án web Python của bạn.

Quy trình làm việc

Notes:

1. Khi người dùng truy cập trang web, máy chủ web xử lý yêu cầu, hãy hiển thị HTML bằng mẫu Django hoặc Jinja.
2. Trình duyệt tải xuống CSS, JS và các tài sản khác.

Frontend

1. Chúng ta có thể sử dụng Python-WebPack-B-B-bilerplate để Jump Start Frontend Project được gói bởi WebPack.
2. Đối với khung JavaScript, có nhiều tùy chọn và tôi khuyên bạn nên đọc Đánh giá khung JavaScript nhẹ (cho các nhà phát triển Django)

Ưu và nhược điểm

Pros:

1. Nhập khẩu
2. Đối với những người không thích giải pháp Frontend Bundle như index.html0, bạn có thể kiểm tra index.html1

Cons:

1. Bây giờ Khung Rails mới nhất đã sử dụng công nghệ này https://github.com/rails/importmap-rails

Và gói django cũng có sẵn trên https://github.com/dropseed/django-importmap

Chúng ta vẫn có thể sử dụng cú pháp mẫu Django / Flask và HTML vì chúng ta đã quen thuộc

Quy trình làm việc

Notes:

1. Khi người dùng truy cập trang web, máy chủ web xử lý yêu cầu, hãy hiển thị HTML bằng mẫu Django hoặc Jinja.
2. Trình duyệt tải xuống CSS, JS và các tài sản khác.
3. Trình duyệt chạy JavaScript để rắc HTML được bật máy chủ.
4. Frontend

Chúng ta có thể sử dụng Python-WebPack-B-B-bilerplate để Jump Start Frontend Project được gói bởi WebPack.

1. django-react-templatetags
2. python-react
3. Đối với khung JavaScript, có nhiều tùy chọn và tôi khuyên bạn nên đọc Đánh giá khung JavaScript nhẹ (cho các nhà phát triển Django)

Ưu và nhược điểm

Pros:

1. Nhập khẩu

Cons:

1. Đối với những người không thích giải pháp Frontend Bundle như index.html0, bạn có thể kiểm tra index.html1

Tài nguyên

• Trang chủ Jamstack
• Giải pháp 4: Hybrid

Trong giải pháp này, chúng tôi đã kết hợp chặt chẽ trước và phụ trợ

Biểu đồ

Ứng dụng Frontend Biên dịch và gói tài sản Frontend Frontend.

Sau khi hoàn thành việc xây dựng, các tài sản được xây dựng được đặt tại thư mục

9.

1. Django hoặc Flask sẽ coi các tài sản được xây dựng là tài sản bình thường và không quan tâm họ đến từ đâu.
2. Django hoặc Flask sẽ thêm liên kết JS và CSS vào mẫu để đảm bảo trình duyệt có thể tải xuống.
3. Quy trình làm việc
4. Khi người dùng truy cập trang web, máy chủ web xử lý yêu cầu, hãy hiển thị HTML bằng mẫu Django hoặc Jinja.

Trình duyệt tải xuống CSS, JS và các tài sản khác.

Làm thế nào để Python kết nối với các trang web?

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

Tôi có thể sử dụng Python cho phần cuối của trang web không?

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