Trong bài viết này, bạn sẽ học cách sử dụng javascript hiện đại trong ứng dụng Django của mình mà không làm mất đi những lợi thế của Django
Javascript phía máy khách là một phần cốt lõi của các ứng dụng web tương tác hiện đại. Các khung javascript hiện đại phổ biến mà bạn có thể sử dụng cho ứng dụng Django của mình bao gồm React , Angular và VueJS
Ngoài ra còn có các khung javascript nhẹ hơn như Alpine. js [Alpine] cung cấp các công cụ mạnh mẽ để soạn hành vi trực tiếp trong HTML mà không cần các khung giao diện người dùng lớn hơn có thể yêu cầu các công cụ xây dựng hoặc dùng đến jQuery
Tổng quan về kiến trúc giao diện người dùng cho Ứng dụng Django
Kiến trúc giao diện người dùng đề cập đến cách tổ chức mã giao diện người dùng. Có ba cách tiếp cận phổ biến để tổ chức mã giao diện người dùng Django của bạn. Mỗi cái đều có ưu điểm và nhược điểm
Các mẫu kết xuất phía máy chủ
Các mẫu HTML được hiển thị trên máy chủ, đây là cách tiếp cận truyền thống
Các mẫu Django với các bit javascript nhỏ được thêm vào trong các mẫu của bạn để làm cho ứng dụng của bạn tương tác hơn
Tận dụng tất cả các tính năng tích hợp sẵn của Django
Tuyệt vời cho các nhóm nhỏ, cho phép tạo mẫu nhanh
Nhược điểm tiềm năng là mã giao diện người dùng có thể lớn và không được tổ chức [nhưng nó không nhất thiết phải. ]
Giao diện người dùng SPA [ứng dụng một trang] với Django dưới dạng API còn lại
Django được sử dụng hoàn toàn như một phụ trợ với giao tiếp thông qua API
Tuyệt vời cho các nhóm lớn hơn với các nhà phát triển giao diện người dùng và phụ trợ chuyên biệt vì các nhóm khác nhau có thể làm việc đồng thời mà không xung đột với công việc của nhau
Sử dụng khung giao diện người dùng đơn giản hóa việc xây dựng các ứng dụng giao diện người dùng phức tạp
Một nhược điểm là rất nhiều tính năng tích hợp sẵn của Django không thể sử dụng được. g. dạng xem, xác thực, mẫu và biểu mẫu
Lai của hai cách tiếp cận đầu tiên
Javascript được sử dụng khi cần thiết, nếu không thì các mẫu django truyền thống được sử dụng
Cách tiếp cận này nhằm mục đích trở thành tốt nhất của cả hai thế giới,
sử dụng các trang Django phía máy chủ khi cần ít javascript, ví dụ như các trang đích
sử dụng javascript đầu tiên của khách hàng khi yêu cầu các phần tử giao diện người dùng phức tạp hơn
Việc lựa chọn cách tiếp cận tùy thuộc vào yêu cầu dự án của bạn, ví dụ: quy mô nhóm hoặc mức độ phức tạp của giao diện người dùng
Phương pháp kết hợp sẽ là cách tốt nhất cho hầu hết các ứng dụng trong đó
80-90% ứng dụng là ‘CRUDy’
Chỉ một số thành phần yêu cầu trạng thái được lưu trữ ở phía máy khách, ví dụ: thành phần chỉnh sửa video
học bằng cách làm
Trong phần tiếp theo này, chúng ta xem xét các khía cạnh quan trọng của việc xây dựng ứng dụng bằng Django và javascript hiện đại
Yêu cầu dự án
Ứng dụng web sản phẩm khả thi tối thiểu [MVP] có trang đích và bảng điều khiển. Trang tổng quan sẽ có ứng dụng Todos và Ứng dụng biểu đồ
Sử dụng javascript khi được yêu cầu, ví dụ để làm cho bảng điều khiển tương tác. Điều này có nghĩa là sử dụng phương pháp kết hợp,
sử dụng các mẫu Django truyền thống cho trang đích
sử dụng javascript để thêm tương tác vào bảng điều khiển
Chúng tôi sẽ không sử dụng bất kỳ công cụ xây dựng nào trong hướng dẫn này, thay vào đó, chúng tôi sẽ sử dụng tập lệnh AlpineJS được nhúng trực tiếp trên trang
MVP của chúng tôi cần phải đẹp, chúng tôi sẽ sử dụng TailwindCSS và DaisyUI
điều kiện tiên quyết
Kiến thức cơ bản về Django & Javascript, cụ thể là Alpine. Nếu bạn đã quen thuộc với Vue thì bạn đã biết Alpine, nếu không hãy xem các tài liệu tuyệt vời về Alpine
Ứng dụng Django - Cơ sở mã đầy đủ có sẵn trên liên kết này
Đây sẽ không phải là hướng dẫn từng bước nhưng chúng tôi sẽ đề cập đến các khái niệm chính. Chúng tôi khuyên bạn nên tải xuống mã nếu bạn muốn làm theo. Hướng dẫn có nhịp độ nhanh và giả định kiến thức về Django và javascript
Sản phẩm cuối cùng
Trang đích - trang do máy chủ hiển thị không có javascript, sử dụng các mẫu Django đơn giản
Trang tổng quan sử dụng cả hai mẫu Django để hiển thị trang ban đầu và JS để thêm tương tác
Trang bảng điều khiển chính là chế độ xem mẫu Django
Định tuyến cho giao diện người dùng cần làm và chế độ xem biểu đồ do Alpine xử lý
Alpine cũng sẽ xử lý việc tìm nạp dữ liệu cho ứng dụng Todo
Cấu trúc dự án của bạn
Sao chép repo từ đây. Trong bước đầu tiên này, chúng ta sẽ cấu trúc dự án của mình để đảm bảo khả năng bảo trì và sự hài lòng của nhà phát triển. Đặt mọi thứ vào đúng vị trí của nó, với sự phân tách rõ ràng giữa các mối quan tâm. Chúng ta hãy xem sơ qua về cấu trúc dự án
cấu trúc thư mục
├── project
| └── config # Optional keeps config separate from apps
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── asgi.py
│ ├── api.py # not standard, will use for the api later
│ └── wsgi.py
| └── apps # All apps in this folder
| ├── dashboard
│ ├── apps.py
│ ├── urls.py
│ ├── views.py
│ ├── api.py # not standard, will use for the api later
│ ├── schema.py # not standard, will use for the api later
│ └── models.py
├─── templates
| ├── base.html
| ├── home.html
| └── dashboard
| ├── components
| ├── layout.html
| ├── home.html
| └── components
| ├── header.html
| ├── logo.html
├──── static # static files
| ├── js
| ├── css
| └── images
└─── manage.py
ghi chú
7 - dự án sẽ chỉ có một ứng dụng có tên là 'bảng điều khiển', chúng tôi đã có thể tạo ứng dụng này và đặt nó vào thư mục ứng dụng của chúng tôi{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}Thư mục
8 &{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
9 - bạn sẽ thấy các tệp bổ sung api. py và lược đồ. py. Chúng không được tạo bởi Django. Chúng tôi đã thêm chúng để hoàn thiện vì chúng tôi đã biết dự án của mình sẽ cần API{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
0{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
1 - tất cả các trang chính sẽ mở rộng mẫu này, xem bên dưới để biết thêm chi tiết{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
2{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
3 - tệp tĩnh bao gồm js, hình ảnh và kiểu{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
4 - Trong dự án này, chúng tôi sẽ tạo các thành phần javascript. Việc tách riêng javascript khỏi phần đánh dấu [HTML] của chúng tôi sẽ đảm bảo rằng cơ sở mã của chúng tôi có thể duy trì được. Nó cũng sẽ giúp bạn dễ dàng chuyển sang khung giao diện người dùng hơn nếu cần{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
Thiết lập các mẫu cơ sở và trang đích
Tạo mẫu cơ sở
cơ sở. mẫu html bao gồm tất cả các tập lệnh chung bắt buộc sẽ được sử dụng trên ứng dụng
mẫu/cơ sở. html
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
ghi chú
5 - phần này bao gồm TailwindCSS, [tạo kiểu] DaisyUI [các thành phần giao diện người dùng được tạo sẵn] Yêu cầu AlpineJS. Trong quá trình sản xuất, các tệp này phải được thu nhỏ, trong bài viết tiếp theo, chúng tôi sẽ xem xét cách cải thiện thiết lập này và làm cho nó sẵn sàng để sản xuất{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
6 - thêm csrftoken vào trang, điều này sẽ được yêu cầu đối với các yêu cầu Ajax tới chương trình phụ trợ{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
7 - thiết lập ứng dụng khách swagger-js. Đây là một bổ sung tuyệt vời giúp tương tác với API phụ trợ thuận tiện hơn{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
gagger là một bộ công cụ nguồn mở tập trung vào Đặc tả OpenAPI [OAS]
Swagger là một bộ công cụ nguồn mở tập trung vào đặc tả OpenAPI hoặc “OAS”
OAS định nghĩa một giao diện tiêu chuẩn, không phụ thuộc vào ngôn ngữ cho cả con người và máy tính để hiểu một dịch vụ mà không cần truy cập vào mã nguồn
Swagger cung cấp các công cụ có thể tương tác với thông số kỹ thuật này, chẳng hạn như
Swagger Codegen để tạo sơ khai máy chủ và SDK máy khách
Swagger Editor để thiết kế API với thông số OpenAPI
Giao diện người dùng vênh vang để trực quan hóa và tương tác với thông số OpenAPI
Trong hướng dẫn tiếp theo, chúng ta sẽ xem xét Swagger chi tiết hơn
Tạo mẫu trang chủ
Trang đích mở rộng cơ sở. mẫu html và chỉ bao gồm một thành phần tiêu đề html đơn giản. Chúng tôi hy vọng trang này sẽ tĩnh theo thời gian
mẫu/nhà. html
{% extends 'base.html' %}
{% block content %}
{% include "components/header.html" %}
{% endblock %}
cấu hình/url. py
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
4ghi chú
8 - trang đích của chúng tôi chỉ bao gồm một thành phần tiêu đề/tiêu đề. html, hiện tại, bạn có thể dễ dàng mở rộng phần này để thêm chân trang. Đối với bài viết này, chúng tôi đã sử dụng trình tạo trang tailwind trực tuyến. Bạn có thể sử dụng rất nhiều tài nguyên để xây dựng các trang đích chất lượng cao một cách nhanh chóng, chẳng hạn như xáo trộn. dev , devdojo , v.v.{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
9 - sử dụng một Django{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
40 đơn giản được xác định trực tiếp trong{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
9. Bạn sẽ lưu ý rằng chúng tôi đã thêm{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
42 để tránh tạo trang động mỗi khi có yêu cầu{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
Chế độ xem, Mô hình và API
Trong bước tiếp theo này, chúng tôi sẽ thiết lập chế độ xem trang tổng quan và các điểm cuối api bắt buộc
Những gì chúng tôi muốn đạt được
sử dụng các mẫu Django truyền thống để hiển thị lần đầu bảng điều khiển chính. trang html
bao gồm mọi dữ liệu bổ sung trong ngữ cảnh trang để tránh phải thực hiện các lệnh gọi API bổ sung từ giao diện người dùng
thiết lập điểm cuối api cho ứng dụng Todo
Tạo mô hình
ứng dụng/bảng điều khiển/mô hình. py
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
0ghi chú
43 - mở rộng trình quản lý để bao gồm logic nghiệp vụ cho ứng dụng todos của chúng tôi trong trường hợp này trả về danh sách các todos được định dạng{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
44. - đã thêm một phương thức tiện lợi để định dạng todos của chúng tôi cho giao diện người dùng{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
Tạo chế độ xem và API
Tiếp theo, chúng tôi sẽ tạo chế độ xem mẫu cho trang đích bảng điều khiển
ứng dụng/bảng điều khiển/lượt xem. py
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
3ghi chú
45 - chúng tôi đã sửa đổi phương pháp{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
46 để thêm dữ liệu bổ sung vào Biểu đồ. Điều này được nhúng trong ngữ cảnh trang và giúp chúng tôi không phải thực hiện lệnh gọi API bổ sung trên Ứng dụng biểu đồ giao diện người dùng để tìm nạp dữ liệu này{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
Hãy thêm API phụ trợ của chúng tôi. Chúng tôi đang sử dụng thư viện Django Ninja để thay thế cho thư viện Django rest framework tuyệt vời. Thư viện sử dụng Pydantic để xác thực dữ liệu và có hỗ trợ gợi ý không đồng bộ và nhập
ứng dụng/bảng điều khiển/lược đồ. py
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
6ghi chú
47 - lược đồ tuần tự hóa [chuyển đổi dữ liệu thành các loại python] và giải tuần tự hóa dữ liệu [chuyển đổi dữ liệu thành các loại nội dung như JSON hoặc XML]. Điều này tương đương với một lớp serializer trong Django rest framework{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
ứng dụng/bảng điều khiển/api. py
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
8ghi chú
48 - chúng tôi đã tạo bộ định tuyến todos và thêm thẻ 'todos'. Điều này sẽ đảm bảo thẻ chính xác được đưa vào chế độ xem tài liệu api của chúng tôi. Chúng tôi sẽ tham khảo lại tệp này khi chúng tôi kết nối các bộ định tuyến và url bên dưới{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}đã thêm tất cả các điểm cuối cần thiết để thực hiện các thao tác thô sơ cơ bản. Bạn sẽ nhận thấy rằng trên điểm cuối
49, tải trọng phải tuân theo kiểu dữ liệu TodoSchema. Nếu bạn cần thêm hướng dẫn về điều này, hãy xem tài liệu ninja Django{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
Kết nối các bộ định tuyến và URL
Trong phần này, chúng tôi sẽ kết nối các điểm cuối
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
45 và {% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
01 với cấu hình URL của chúng tôiứng dụng/bảng điều khiển/url. py
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
3ứng dụng/cấu hình/api. py
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
4ứng dụng/cấu hình/url. py
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
0ghi chú
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
02 - chúng tôi đã thêm {% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
45 vào tệp cấu hình URL của trang tổng quan{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
04 - đã nhập bộ định tuyến todos mà chúng tôi đã tạo trước đó và thêm nó vào API của chúng tôi{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
05 - đã cập nhật các url chính. py để bao gồm cấu hình URL của ứng dụng bảng điều khiển và các điểm cuối APITrang đích và tài liệu API hiện sẽ hoạt động. Giao diện người dùng này được tạo tự động bởi Swagger
Tạo các mẫu bảng điều khiển và thành phần alpine
Tiếp theo, chúng ta sẽ tạo các mẫu cho trang đích của bảng điều khiển, cũng như thành phần javascript của bảng điều khiển
Tóm tắt quy trình làm việc
tạo mẫu bố cục trang tổng quan
thêm trang đích và bao gồm các thuộc tính AlpineJS trực tiếp trong phần đánh dấu nhưng không trực tiếp đặt javascript nội tuyến trên trang
tạo mẫu cho ứng dụng Biểu đồ và ứng dụng Todo
Tạo bố cục bảng điều khiển và mẫu trang đích
mẫu/bố cục. html
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
1ghi chú
đây là mẫu Django bình thường mở rộng
1 mẫu và bao gồm thanh điều hướng bảng điều khiển sẽ xuất hiện trên mọi trang bảng điều khiển{% extends 'base.html' %} {% block content %} {% include "components/header.html" %} {% endblock %}
mẫu/hạ cánh. html
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
2ghi chú
Có rất nhiều điều đang diễn ra ở đây, hãy chia nhỏ các bit quan trọng
07 - Chỉ thị Alpine xác định một đoạn HTML là thành phần Alpine. Các thuộc tính được xác định trong thành phần Alpine của bảng điều khiển sẽ có sẵn cho tất cả các phần tử con. Bản thân thành phần núi cao được đưa vào trang bằng cách sử dụng dòng này{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
08 , chúng tôi sẽ soạn nó sau{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
09 - @ là một phím tắt cho x-bind núi cao. chỉ thị. Trong trường hợp này, nó liên kết sự kiện nhấp chuột với hàm{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
30 được xác định trong thành phần bảng điều khiển{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
31 - x-show cung cấp một cách rõ ràng để ẩn hoặc hiển thị các phần tử DOM. Trên trang này, nó sẽ ẩn hoặc hiển thị chế độ xem chỉ mục, chế độ xem ứng dụng biểu đồ hoặc chế độ xem ứng dụng việc cần làm tùy thuộc vào biến{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
32 được đặt thành gì{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
33 - để tránh chế độ xem không chính xác hiển thị trước khi tải trên núi cao, chúng tôi thêm áo choàng x trực tiếp vào từng chế độ xem. Trong tĩnh/phong cách/trang web của chúng tôi. css, chúng tôi cũng thêm CSS cần thiết để tệp này hoạt động{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
34{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
35 - phần này để hiển thị đúng biểu tượng ứng dụng. Chúng tôi sử dụng lệnh x-for để tạo các phần tử DOM bằng cách lặp qua danh sách. Đây là một ví dụ về HTML kết xuất javascript phía máy khách{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
36 - trong DashboardView, chúng tôi đã bao gồm chart_data trong ngữ cảnh trang. Thẻ mẫu json_script này sẽ chuyển đổi đối tượng Python dưới dạng JSON được gói trong thẻ script có thể được sử dụng bởi javascript{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
37 - chúng tôi cũng bao gồm các URL cho các biểu tượng ứng dụng của chúng tôi. Chúng sẽ được sử dụng trong thành phần bảng điều khiển alpine. Chúng tôi đang xác định chúng trước khi nhập tệp js trang của mình để chúng có sẵn khi Alpine tải thành phần{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
Ở giai đoạn này, chúng tôi đã xác định các mẫu nhưng chưa xác định thành phần Alpine. Do đó, chỉ tiêu đề sẽ được hiển thị nếu chúng tôi truy cập http. //máy chủ cục bộ. 8000/bảng điều khiển/
Các mẫu yêu cầu khác
Bạn có thể tham khảo mẫu/bảng điều khiển/thành phần trong cơ sở mã cho các tệp mẫu
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
38 , {% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
39 và {% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
60todo_form. html
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
3ghi chú
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
61 - một điều cần lưu ý ở đây là việc sử dụng chỉ thị {% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
61, liên kết giá trị của vùng văn bản với dữ liệu Alpine. Không có khái niệm mới nào khác trong các mẫu này mà chúng tôi chưa đề cập ở trênTạo bảng điều khiển Thành phần Alpine
Đây là ứng dụng javascript phía máy khách của chúng tôi. Nó sẽ xử lý định tuyến cho các chế độ xem đích Todo, Biểu đồ và bảng điều khiển cũng như logic cần thiết để tìm nạp dữ liệu, v.v.
tĩnh/js/bảng điều khiển. js
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
4Đây là thành phần alpine cơ bản của chúng tôi, có một số bit và phần còn thiếu, chẳng hạn như logic cho ứng dụng việc cần làm chẳng hạn mà chúng tôi sẽ mở rộng sau
ghi chú
63 - đối tượng javascript đại diện cho chế độ xem bảng điều khiển, bao gồm chỉ mục [trang đích] và biểu đồ và ứng dụng việc cần làm. Điều này được ánh xạ tới biến ứng dụng trong thành phần bảng điều khiển alpine{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
64 - đây là điểm vào cho thành phần núi cao của chúng tôi được gọi khi thành phần này được hoàn thành. Cập nhật URL để hiển thị chế độ xem chính xác. Trong trường hợp của chúng tôi, nó sẽ thay thế thông số tìm kiếm URL hiện tại để hiển thị ?view=index nếu thông số tìm kiếm chế độ xem không được xác định{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
30 ,{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
66 - chứa logic để định tuyến và cập nhật phiên lịch sử trình duyệt{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
67 - lắng nghe các sự kiện popstate, tôi. e. khi người dùng nhấp vào nút quay lại và gọi{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
30 để cập nhật giao diện người dùng{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
69. - xử lý bất kỳ logic bổ sung nào để tìm nạp dữ liệu từ phần phụ trợ và thiết lập các thành phần{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
80 - sử dụng dữ liệu trực tiếp từ ngữ cảnh trang thay vì sử dụng API{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}nếu [phím === này. ứng dụng. đồ thị. Chìa khóa]. - logic khi người dùng điều hướng đến chế độ xem Ứng dụng biểu đồ
Cập nhật thành phần Alpine của bảng điều khiển - Phương pháp CRUD cho ứng dụng Todo
Chúng tôi sẽ cập nhật thành phần bảng điều khiển trên núi cao của chúng tôi [cùng một tệp như trên] để bao gồm các phương thức CRUD cho ứng dụng của Todo. Trong thực tế, điều này có thể được chia thành một thành phần Alpine khác. Chúng tôi đã đưa nó vào cùng một thành phần để đơn giản hóa mọi thứ
tĩnh/js/bảng điều khiển. js
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
5ghi chú
81 ,{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
82 ,{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
83 - Phương pháp CRUD cho ứng dụng Todos{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}chúng tôi đang sử dụng
84 swagger-js mà chúng tôi đã khai báo trong cơ sở của mình. mẫu html. thay vì gõ các url, chúng tôi sử dụng các hoạt động mà chúng tôi đã xác định trong api của mình{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
85 - bao gồm một đối tượng trống cho tham số url {} và tải trọng i. e. {requestBody. dữ liệu}{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
86 - bao gồm {todo_id. id} đại diện cho tham số url todo_id bắt buộc. Điều này đại diện cho id của đối tượng Todo mà chúng tôi muốn xóa. Nếu bạn tham khảo lại bảng điều khiển/api. py, bạn sẽ lưu ý rằng chúng tôi sử dụng id này để tìm kiếm việc cần làm trên cơ sở dữ liệu{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
Vậy là xong, ứng dụng todos đã hoàn thành
Thêm chức năng xây dựng tùy chọn biểu đồ cho Chart App
Ứng dụng sử dụng thư viện echarts để hiển thị số liệu thống kê lưu lượng truy cập trong ứng dụng
tĩnh/js/biểu đồ. js
{% load static i18n %}
{% get_current_language as language_code %}
{% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %}
{# site meta and seo meta tags, override on specific pages as necessary. #}
{% block site_meta %}{% endblock %}
{% block seo-meta %}
{% endblock %}
{% block extra_css %}{% endblock %}
{% block head_js %}{% endblock %}
{# Alpine and app scripts #}
{# content goes here #}
{% block content %}{% endblock %}
{% block footer_js %}
// Cookie func
const csrftoken = getCookie['csrftoken'];
const authHeaders = {'X-CSRFToken': csrftoken}
// See Note below on using SwaggerJS
const client = SwaggerClient['/api/openapi.json', {
requestInterceptor: [req] => {
req.headers['X-CSRFToken'] = csrftoken;
req.headers['Content-Type'] = 'application/json';
return req;
},
}]
//uncomment to log api endpoints to console for debugging purposes
client.then[client => console.log[client.apis]]
{% endblock %}
6ghi chú
87 - trả về các tùy chọn biểu đồ cần thiết để tạo biểu đồ. Phương pháp này được gọi bởi hàm{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
88 trong{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
89 bất cứ khi nào người dùng điều hướng đến chế độ xem ứng dụng Biểu đồ{% load static i18n %} {% get_current_language as language_code %} {% spaceless %}{% block title %}Home{% endblock %}{% endspaceless %} {# site meta and seo meta tags, override on specific pages as necessary. #} {% block site_meta %}{% endblock %} {% block seo-meta %} {% endblock %} {% block extra_css %}{% endblock %} {% block head_js %}{% endblock %} {# Alpine and app scripts #}
{# content goes here #} {% block content %}{% endblock %}
Tất cả đã xong 🥳 🥳 .
Bản tóm tắt
Chọn kiến trúc - Django cho phép bạn linh hoạt sử dụng bất kỳ cách tiếp cận nào cho kiến trúc giao diện người dùng của mình. Đưa ra quyết định dựa trên các yêu cầu của dự án và tận dụng những gì Django cung cấp
Cấu trúc dự án của bạn - một dự án có cấu trúc tốt sẽ dễ bảo trì và tái cấu trúc. Dành thời gian để cấu trúc dự án của bạn trước khi bắt đầu. Bất cứ khi nào có thể, hãy cố gắng tách biệt JS và HTML của bạn
Khung javascript phía máy khách - Trong hầu hết các trường hợp, một khung nhỏ hơn như JavaScript của Alpine hoặc thậm chí vanilla sẽ đủ cho tập lệnh giao diện người dùng. Đối với các trường hợp sử dụng phức tạp hơn khi cần có khung javascript phía máy khách lớn, bạn nên xem xét phương pháp kết hợp thay vì SPA đầy đủ
Bước tiếp theo
Trong hướng dẫn tiếp theo, chúng tôi thảo luận về cách chúng tôi có thể cải thiện thiết lập này và chuẩn bị ứng dụng của chúng tôi để sản xuất
Chúng tôi sẽ tìm hiểu cách sử dụng công cụ xây dựng để giúp duy trì mã javascript của chúng tôi dễ dàng hơn. Chúng tôi cũng sẽ tìm hiểu sâu về Swagger và API phụ trợ