search

Khung JavaScript Django

Ngày đăng: 07/12/2022
Trả lời: 0
Lượt xem: 50

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

Show

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

Khung JavaScript Django

  • 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

Khung JavaScript Django

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ú

  • {% 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 %}

  
  
  

{% endblock %}
    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

  • Thư mục 

    {% 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 %}

  
  
  

{% endblock %}
    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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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

  • {% extends 'base.html' %}

{% block content %}
    {% include "components/header.html" %}
{% 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

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 %}

  
  
  

{% endblock %}

ghi chú

  • {% extends 'base.html' %}

{% block content %}
    {% include "components/header.html" %}
{% endblock %}
    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

  • gagger là một bộ công cụ nguồn mở tập trung vào Đặc tả OpenAPI (OAS)

Thông tin thêm về Swagger

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 %}

  
  
  

{% endblock %}
4

ghi chú

  • {% extends 'base.html' %}

{% block content %}
    {% include "components/header.html" %}
{% endblock %}
    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 
    {% 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 %}

  
  
  

{% endblock %}
    40 đơn giản được xác định trực tiếp trong 
    {% extends 'base.html' %}

{% block content %}
    {% include "components/header.html" %}
{% endblock %}
    9. Bạn sẽ lưu ý rằng 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 %}

  
  
  

{% endblock %}
    42 để tránh tạo trang động mỗi khi có yêu cầu

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 %}

  
  
  

{% endblock %}
0

ghi 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 %}

  
  
  

{% endblock %}
    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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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

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 %}

  
  
  

{% endblock %}
3

ghi 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 %}

  
  
  

{% endblock %}
    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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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

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 %}

  
  
  

{% endblock %}
6

ghi 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 %}

  
  
  

{% endblock %}
    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

ứ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 %}

  
  
  

{% endblock %}
8

ghi 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 %}

  
  
  

{% endblock %}
    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

  • đã 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 

    {% 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 %}

  
  
  

{% endblock %}
    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

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 %}

  
  
  

{% 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 %}

  
  
  

{% 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 %}

  
  
  

{% 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 %}

  
  
  

{% 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 %}

  
  
  

{% endblock %}
0

ghi 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 %}

  
  
  

{% 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 %}

  
  
  

{% 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 %}

  
  
  

{% 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 %}

  
  
  

{% 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 API

Trang đí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

Khung JavaScript Django

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 %}

  
  
  

{% endblock %}
1

ghi chú

  • đây là mẫu Django bình thường mở rộng 

    {% extends 'base.html' %}

{% block content %}
    {% include "components/header.html" %}
{% endblock %}
    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

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 %}

  
  
  

{% endblock %}
2

ghi chú

Có rất nhiều điều đang diễn ra ở đây, hãy chia nhỏ các bit quan trọ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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% endblock %}
    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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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

Ở 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 %}

  
  
  

{% 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 %}

  
  
  

{% 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 %}

  
  
  

{% endblock %}
60

todo_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 %}

  
  
  

{% endblock %}
3

ghi 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 %}

  
  
  

{% 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 %}

  
  
  

{% 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ên

Tạ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 %}

  
  
  

{% 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ú

  • {% 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 %}

  
  
  

{% endblock %}
    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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
      
  
      

      
{% block footer_js %}

  
  
  

{% endblock %}
      80 - sử dụng dữ liệu trực tiếp từ ngữ cảnh trang thay vì sử dụng API

    • 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 %}

  
  
  

{% endblock %}
5

ghi 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 %}

  
  
  

{% endblock %}
    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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% endblock %}
    83 - Phương pháp CRUD cho ứng dụng Todos

    • chúng tôi đang sử 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 %}


    
      
  
      

      
{% block footer_js %}

  
  
  

{% endblock %}
      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 %}


    
      
  
      

      
{% block footer_js %}

  
  
  

{% 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 %}


    
      
  
      

      
{% block footer_js %}

  
  
  

{% 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

Vậy là xong, ứng dụng todos đã hoàn thành

Khung JavaScript Django

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 %}

  
  
  

{% endblock %}
6

ghi 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 %}

  
  
  

{% endblock %}
    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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% 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 %}


    
    
  
    

    
{% block footer_js %}

  
  
  

{% endblock %}
    89 bất cứ khi nào người dùng điều hướng đến chế độ xem ứng dụng Biểu đồ

Khung JavaScript Django

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ợ

Django có phải là một khung JavaScript không?

Mặc dù phần lớn lõi của Django là Python, nhưng các ứng dụng đóng góp của quản trị viên và gis chứa mã JavaScript . Vui lòng tuân theo các tiêu chuẩn viết mã này khi viết mã JavaScript để đưa vào Django.

Tôi có thể sử dụng JavaScript và Django cùng nhau không?

Nói về các ứng dụng web trong tương lai, Django có rất nhiều thứ để cung cấp và có khả năng phù hợp với bất kỳ cấu trúc ứng dụng web hiện đại nào. Xếp chồng các khung web Django và Javascript để xây dựng các ứng dụng web hiện đại là một trong những cách tốt nhất để xếp các khung phụ trợ và giao diện người dùng .

Khung giao diện người dùng nào là tốt nhất cho Django?

10 Framework Front-End và Back-end hàng đầu dành cho Nhà phát triển Full-Stack năm 2022 .
Góc [Giao diện người dùng + JavaScript].
Nút. .
Django [Giao diện người dùng + Phụ trợ + Python].
Flask [Phụ trợ + Python].
Bootstrap [Giao diện người dùng + CSS].
jQuery [Giao diện người dùng + JavaScript].
Ruby on Rails [Phụ trợ + Ruby].
GraphQL [Phụ trợ + JavaScript]

Django có thể thay thế JavaScript không?

Câu trả lời đơn giản là KHÔNG. Django là một khung web hoàn toàn dựa trên Python và Thật khó để Python có thể thay thế JavaScript . Đầu tiên, JavaScript là trình duyệt gốc, trong khi Python thì không. Thứ hai, JavaScript và Python không phải là web-native, nghĩa là chúng có thể hoạt động song song.

programming javascript

Bài Viết Liên Quan

Tìm hiểu chung về văn bản nghị luận năm 2024
Tìm hiểu chung về văn bản nghị luận năm 2024

mẹo hay
Sử lý lỗi không lăng được chuột trong sketchup năm 2024
Sử lý lỗi không lăng được chuột trong sketchup năm 2024

mẹo hay Công Nghệ Chuột
Bài tập tìm hằng số cân bằng hoá 11 năm 2024
Bài tập tìm hằng số cân bằng hoá 11 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Băn khoăn có nghĩa là gì năm 2024
Băn khoăn có nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì
Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024
Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024

mẹo hay
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Món Ngon Bánh
Họ tiếng nhật của bạn là gì năm 2024
Họ tiếng nhật của bạn là gì năm 2024

là ai Hỏi Đáp Là gì
Ý nghĩa của header from top là gì năm 2024
Ý nghĩa của header from top là gì năm 2024

mẹo hay Hỏi Đáp Là gì Top List Top Header la gì Footer la gì
Tự học tiếng anh như thế nào hiệu quả năm 2024
Tự học tiếng anh như thế nào hiệu quả năm 2024

mẹo hay Hỏi Đáp Thế nào Học Tốt Học Tiếng anh Học tiếng Anh
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Khỏe Đẹp Cơ thể
Tuổi đinh mão xây nhà năm nào tốt năm 2024
Tuổi đinh mão xây nhà năm nào tốt năm 2024

mẹo hay Xây Đựng Xây Nhà
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
Khoán chi đến sản phẩm cuối cùng là gì năm 2024

là ai Hỏi Đáp Là gì
Các yếu tố cấu thành văn hóa tổ chức năm 2024
Các yếu tố cấu thành văn hóa tổ chức năm 2024

mẹo hay
Thế nào là số vô tỉ cho ví dụ năm 2024
Thế nào là số vô tỉ cho ví dụ năm 2024

mẹo hay Hỏi Đáp Thế nào Ví dụ
Quà trung thu tiếng anh là gì năm 2024
Quà trung thu tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Mid-Autumn gift
Đẻ mổ tối đa được bao nhiêu lần năm 2024
Đẻ mổ tối đa được bao nhiêu lần năm 2024

bao nhieu Hỏi Đáp Bao nhiêu
Thiết kế quán trà sữa bao nhiêu tiền năm 2024
Thiết kế quán trà sữa bao nhiêu tiền năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Món Ngon Trà sữa
Top nước hoa hồng se khít lỗ chân lông năm 2024
Top nước hoa hồng se khít lỗ chân lông năm 2024

mẹo hay Top List Top
Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024
Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024

mẹo hay
Daylight is coming like a rentless milkman upstairs là gì năm 2024
Daylight is coming like a rentless milkman upstairs là gì năm 2024

là ai Hỏi Đáp Là gì

Quảng Cáo

Có thể bạn quan tâm

Bóng đèn cực tím 1m2 công suất bao nhiêu watt năm 2024
1 tháng trước . bởi TrackingTrilogy
Cơ sở của giá trị hàng hóa là gì năm 2024
1 tháng trước . bởi Fast-foodLineage
Cách sửa lỗi trong speakers properties ko hiện enhancement năm 2024
1 tháng trước . bởi MilitaryTracing
Giải bài tập toán lớp 5 tập 2 bài 163 năm 2024
1 tháng trước . bởi ThoughtlessEnclosure
Miracle in cell number 7 review năm 2024
1 tháng trước . bởi UndeniableFiring
Mục tiêu bài học chi tiết đánh giá được năm 2024
1 tháng trước . bởi ThunderousFlask
Asias next top model 5 tap 6 năm 2024
1 tháng trước . bởi HorribleBattling
Cầu gỗ lim huế bao nhiêu tiền năm 2024
1 tháng trước . bởi YieldingSwimmer
Cân bằng sinh học là gì cho ví dụ năm 2024
1 tháng trước . bởi UmbilicalProceeding
Tổng hợp kiến thức toán ôn thi đại học năm 2024
1 tháng trước . bởi ImpossibleEquation

Toplist được quan tâm

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
5 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
5 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
5 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
5 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
5 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
5 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
5 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
5 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024
5 ngày trước
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024
6 ngày trước
Tự học tiếng anh như thế nào hiệu quả năm 2024
1 tuần trước
Tuổi đinh mão xây nhà năm nào tốt năm 2024
1 tuần trước
Bài tập tìm hằng số cân bằng hoá 11 năm 2024
3 ngày trước
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
1 tuần trước
Họ tiếng nhật của bạn là gì năm 2024
1 tuần trước
Băn khoăn có nghĩa là gì năm 2024
4 ngày trước
Tìm hiểu chung về văn bản nghị luận năm 2024
1 ngày trước
Anh bộ đội cụ hồ gốc bỉ là gì năm 2024
1 ngày trước

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Học Tốt Inc.