Django có yêu cầu javascript không?

Làm cách nào để tạo API Django REST? . (Django 3)

tôi đã viết một cuốn sách

"Django tách rời". Hiểu và xây dựng các kiến ​​trúc Django tách rời cho giao diện người dùng JavaScript

Xin vui lòng đọc

Bài đăng này bắt đầu từ năm 2019. Hai năm trong phát triển web hiện đại bằng một thời gian dài. Cách tiếp cận được phác thảo ở đây vốn dĩ không tệ, nhưng nó có thể không phù hợp với các nhóm lớn hơn và do các thay đổi tiềm ẩn có thể phá vỡ trong webpack và công cụ liên quan, nên việc theo kịp các thay đổi có thể trở nên khó khăn. Các khung như Tiếp theo. js là một lựa chọn vững chắc hơn để xây dựng các dự án React phức tạp ngày nay

Django REST với React. những gì bạn sẽ học

Trong hướng dẫn sau, bạn sẽ học

• cách xây dựng API Django REST đơn giản
• cách cấu trúc một dự án Django với React

Django REST với React. yêu cầu

Để làm theo cùng với hướng dẫn, bạn nên có

• hiểu biết cơ bản về Python và Django
• hiểu biết cơ bản về JavaScript (ECMAScript 2015) và React
• phiên bản mới hơn của Nút. js được cài đặt trên hệ thống của bạn

Sẵn sàng?

Thiết lập môi trường ảo Python và dự án

Điều đầu tiên trước tiên là đảm bảo có sẵn môi trường ảo Python. Tạo một thư mục mới và di chuyển vào đó

mkdir django-react && cd $_

Sau khi hoàn tất, hãy tạo và kích hoạt môi trường Python mới

python3 -m venv venv
source venv/bin/activate

GHI CHÚ. từ bây giờ hãy đảm bảo luôn ở trong thư mục

django-admin startapp app_name

Bây giờ hãy kéo vào các phụ thuộc

pip install django djangorestframework

Khi quá trình cài đặt kết thúc, bạn đã sẵn sàng để tạo một dự án Django mới

django-admin startproject django_react .

Bây giờ chúng ta có thể bắt đầu xây dựng ứng dụng Django đầu tiên của mình. một API đơn giản để liệt kê và lưu trữ danh bạ

Django REST với React. xây dựng ứng dụng Django

Một dự án Django có thể có nhiều ứng dụng. Mỗi ứng dụng lý tưởng nên làm một việc. Các ứng dụng Django là mô-đun và có thể tái sử dụng, nếu một dự án khác cần lặp đi lặp lại cùng một ứng dụng, chúng tôi có thể đặt ứng dụng đó vào trình quản lý gói Python và cài đặt nó từ đó

Để tạo một ứng dụng mới trong Django, bạn sẽ chạy

django-admin startapp app_name

Trong trường hợp của chúng tôi, vẫn chạy trong thư mục dự án

django-admin startapp leads

Thao tác này sẽ tạo ứng dụng khách hàng tiềm năng mới của chúng tôi trong thư mục

django-admin startapp app_name

________số 8_______

Bây giờ hãy cho Django biết cách sử dụng ứng dụng mới. Mở

django-admin startapp app_name

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leads.apps.LeadsConfig', # activate the new app
]

Càng xa càng tốt. Trong phần tiếp theo, chúng tôi sẽ thêm mô hình đầu tiên của chúng tôi

Django REST với React. tạo mô hình Django

Với ứng dụng đã sẵn sàng, đã đến lúc tạo mô hình đầu tiên của chúng tôi. Một mô hình là một đối tượng đại diện cho dữ liệu của bảng của bạn. Hầu như mọi khung web đều có các mô hình và Django cũng không ngoại lệ

Một mô hình Django có thể có một hoặc nhiều trường. mỗi trường là một cột trong bảng của bạn. Trước khi tiếp tục, hãy xác định các yêu cầu của chúng tôi đối với ứng dụng chính

Vì tôi đang thu thập các liên hệ nên tôi có thể nghĩ ra một mô hình

django-admin startapp app_name

• một cái tên
• Một email
• một thông điệp

(Vui lòng thêm các trường bổ sung. Như điện thoại chẳng hạn). Chúng ta cũng đừng quên trường dấu thời gian. Django không thêm cột

django-admin startapp app_name

Mở

django-admin startapp app_name

django-admin startapp app_name

from django.db import models

class Lead(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    message = models.CharField(max_length=300)
    created_at = models.DateTimeField(auto_now_add=True)

Một lưu ý nhanh về các mô hình. dành thời gian của bạn để kiểm tra tài liệu trường Django. Khi lập kế hoạch cho một mô hình, hãy cố gắng chọn các trường thích hợp nhất cho trường hợp sử dụng của bạn. Với mô hình tại chỗ, hãy tạo di chuyển bằng cách chạy

python manage.py makemigrations leads

Cuối cùng di chuyển cơ sở dữ liệu với

python3 -m venv venv
source venv/bin/activate

Tuyệt. Trong các phần tiếp theo, chúng ta sẽ nói về serializers và view. Nhưng trước tiên, một lưu ý về thử nghiệm

Django REST với React. một rắc thử nghiệm

Tại thời điểm này, bạn có thể tự hỏi "Valentino, thử nghiệm thì sao?"

Tôi đã thấy rất nhiều hướng dẫn về Django bắt đầu như vậy

python3 -m venv venv
source venv/bin/activate

đừng làm thế. Không có điểm nào trong việc thử nghiệm cả mô hình Django vanilla hay Django ORM. Đây là một điểm khởi đầu tốt để thử nghiệm ở Django

• không kiểm tra mã tích hợp Django (mô hình, chế độ xem, v.v.)
• không kiểm tra các chức năng tích hợp sẵn của Python

Đừng kiểm tra những gì đã được kiểm tra. Vậy tôi nên kiểm tra những gì? . Bạn có chế độ xem tùy chỉnh không? . Nhưng, làm thế nào để tôi biết những gì để kiểm tra chính xác?

Làm cho mình một việc. Cài đặt vùng phủ sóng

python3 -m venv venv
source venv/bin/activate

Sau đó, mỗi khi bạn thêm một số mã vào phạm vi chạy ứng dụng của mình với

python3 -m venv venv
source venv/bin/activate

Sau đó tạo báo cáo

python3 -m venv venv
source venv/bin/activate

Bạn sẽ thấy chính xác những gì cần kiểm tra. Nếu bạn thích xem báo cáo trên dòng lệnh hãy chạy

python3 -m venv venv
source venv/bin/activate

Đợi đã, bạn vẫn ở đó chứ? . Giữ chặt, trong phần tiếp theo chúng ta sẽ xem xét các bộ nối tiếp

Để tìm hiểu thêm về thử nghiệm trong Django, hãy xem Bảng kiểm thử thử nghiệm Django

Trình nối tiếp Django REST

tuần tự hóa là gì? . Sau khi chuyển đổi một đối tượng, chúng ta có thể lưu nó vào một tệp hoặc gửi nó qua mạng

Tại sao tuần tự hóa là cần thiết? . đó là một lớp Python. Làm cách nào để kết xuất một lớp Python thành JSON trong trình duyệt?

Một bộ nối tiếp cũng hoạt động theo cách khác. nó chuyển đổi JSON thành các đối tượng. Bằng cách này bạn có thể

• hiển thị các mô hình Django trong trình duyệt bằng cách chuyển đổi chúng thành JSON
• thực hiện yêu cầu CRUD với tải trọng JSON tới API

Tóm lại. bộ nối tiếp Django REST là bắt buộc để hoạt động trên các mô hình thông qua API. Tạo một tệp mới có tên

django-admin startapp leads

django-admin startapp leads

django-admin startapp app_name

python3 -m venv venv
source venv/bin/activate

Như bạn có thể thấy, chúng tôi đang phân lớp

django-admin startapp leads

django-admin startapp leads

django-admin startapp leads

lưu và đóng tập tin. Trong các phần tiếp theo, chúng ta sẽ xem xét các lượt xem và url

Thiết lập kiểm soát. eh các lượt xem

Đến từ các khung khác, bạn có thể thấy ngạc nhiên khi Django không có bộ điều khiển

Bộ điều khiển đóng gói logic để xử lý yêu cầu và trả về phản hồi. Trong kiến ​​trúc MVC truyền thống có Model, View và Controller. Ví dụ về các khung MVC là Rails, Phoenix, Laravel

Django là một khung MVT. Tức là Model – View – Template. Có nhiều loại chế độ xem trong Django. chế độ xem chức năng, chế độ xem dựa trên lớp và chế độ xem chung

Một số nhà phát triển thích chế độ xem chức năng thay cho chế độ xem dựa trên lớp. Cá nhân tôi là một fan hâm mộ lớn của cái sau. Khi tôi chọn Django, đó là vì tôi đánh giá cao tốc độ phát triển, DRY, ít mã hơn

Tôi không thấy ích gì khi viết các lượt xem bằng tay khi đã có sẵn một tập hợp các giá trị mặc định lành mạnh. Đây là quy tắc ngón tay cái của tôi

Chỉ sử dụng chế độ xem chức năng nếu thời gian dành cho việc tùy chỉnh chế độ xem chung nhiều hơn thời gian viết chế độ xem bằng tay. Như với Django đơn giản, trong khung Django REST có nhiều cách để viết các khung nhìn

• chế độ xem dựa trên chức năng
• chế độ xem dựa trên lớp
• chế độ xem API chung

Đối với phạm vi của hướng dẫn này, tôi sẽ sử dụng các chế độ xem API chung. ứng dụng đơn giản của chúng tôi nên

• liệt kê một bộ sưu tập các mô hình
• tạo đối tượng mới trong cơ sở dữ liệu

Bằng cách xem tài liệu về chế độ xem API chung, chúng ta có thể thấy rằng có chế độ xem để liệt kê và tạo mô hình.

django-admin startapp leads

Mở

django-admin startapp leads

python3 -m venv venv
source venv/bin/activate

Đó là. Với 3 dòng mã, chúng tôi đã tạo chế độ xem để xử lý các yêu cầu GET và POST. Bây giờ còn thiếu gì? . Nói cách khác, chúng ta nên ánh xạ URL tới các lượt xem

Làm sao?

Thiết lập lộ trình. uhm các url

Mục tiêu của chúng ta là kết nối

django-admin startapp leads

django-admin startapp leads

django-admin startapp leads

Để định cấu hình ánh xạ URL, hãy bao gồm các url của ứng dụng trong

(venv) your@prompt:~/Code/django-react$ tree -d -L 1
.
├── django_react
├── leads
└── venv

python3 -m venv venv
source venv/bin/activate

Tiếp theo, tạo một tệp mới có tên

(venv) your@prompt:~/Code/django-react$ tree -d -L 1
.
├── django_react
├── leads
└── venv

django-admin startapp leads

python3 -m venv venv
source venv/bin/activate

Cuối cùng, hãy kích hoạt rest_framework trong

(venv) your@prompt:~/Code/django-react$ tree -d -L 1
.
├── django_react
├── leads
└── venv

django-admin startapp app_name

pip install django djangorestframework

Bây giờ bạn sẽ có thể chạy kiểm tra độ tỉnh táo với

pip install django djangorestframework

Đi qua http. //127. 0. 0. 1. 8000/api/lead/ và bạn sẽ thấy API có thể duyệt

GHI CHÚ. bạn nên tắt API có thể duyệt trong quá trình sản xuất với cấu hình này

pip install django djangorestframework

Trong khi tạo một số liên hệ ở dạng dựng sẵn. Trong phần tiếp theo chúng ta sẽ đi vào React

Django và React cùng nhau

Rất nhiều nhà phát triển Python gặp khó khăn với một câu hỏi đơn giản. Làm cách nào để dán Django và $insert_frontend_library_here lại với nhau?

Bộ định tuyến React có nên đảm nhận việc định tuyến không? . Tôi muốn nói "nó phụ thuộc". Nó phụ thuộc vào lượng JavaScript bạn cần. Nhưng bao nhiêu JavaScript là quá nhiều?

Đùa sang một bên, có nhiều cách để thiết lập dự án Django với React. Tôi thấy các mẫu sau (phổ biến đối với hầu hết mọi khung web)

lựa chọn 1. Phản ứng trong ứng dụng Django "frontend" của riêng mình. tải một mẫu HTML duy nhất và để React quản lý giao diện người dùng (khó khăn. trung bình)

Lựa chọn 2. Django REST dưới dạng API độc lập + Phản ứng dưới dạng SPA độc lập (độ khó. khó, nó liên quan đến một số hình thức xác thực dựa trên mã thông báo)

Tùy chọn 3. Pha trộn và kết hợp. các ứng dụng React nhỏ bên trong các mẫu Django (khó khăn. đơn giản, nhưng không thể duy trì lâu dài)

Và đây là lời khuyên của tôi. Nếu bạn mới bắt đầu với Django REST và React, hãy tránh tùy chọn 2. Thay vào đó, hãy chọn tùy chọn số 1 (Phản ứng trong ứng dụng Django "giao diện người dùng" của riêng nó) nếu

• bạn đang xây dựng một trang web giống ứng dụng
• giao diện có nhiều tương tác người dùng/AJAX
• bạn ổn với xác thực dựa trên Phiên
• không có mối quan tâm SEO
• bạn ổn với React Router

Trên thực tế, việc giữ React gần hơn với Django giúp lý do xác thực dễ dàng hơn. Bạn có thể khai thác xác thực dựng sẵn Django để đăng ký và đăng nhập người dùng

Sử dụng xác thực Phiên tốt và đừng lo lắng quá nhiều về mã thông báo và JWT

Chọn tùy chọn số 3 (các ứng dụng React nhỏ bên trong các mẫu Django) nếu

• trang web không cần nhiều Javascript
• SEO là một mối quan tâm lớn và bạn không thể sử dụng Node. js cho kết xuất phía máy chủ

Trong phần tiếp theo, chúng ta sẽ thực hiện với tùy chọn 1

Thiết lập React và webpack

từ chối trách nhiệm. Hướng dẫn của tôi miễn phí, không ràng buộc. Điều này có nghĩa là tôi không có nghĩa vụ phải cập nhật chúng liên tục lên các bản phát hành mới nhất của các gói. Cũng xin lưu ý rằng, công cụ giao diện người dùng thay đổi nhanh đến mức tôi không thể cập nhật từng bài đăng trên blog một cách nhanh chóng khi gói web giới thiệu các thay đổi đột phá trong cấu hình. Nếu có điều gì đó không phù hợp với bạn, hãy gửi cho tôi một email lịch sự và tôi sẽ cố gắng khắc phục hướng dẫn nếu có thời gian. Thưởng thức

Chúng tôi đã biết cách tạo ứng dụng Django, vì vậy hãy làm lại cho ứng dụng giao diện người dùng

pip install django djangorestframework

Bạn sẽ thấy một thư mục mới có tên là frontend bên trong thư mục dự án của bạn

pip install django djangorestframework

Hãy cũng chuẩn bị một cấu trúc thư mục để chứa các thành phần React

pip install django djangorestframework

và các tập tin tĩnh

pip install django djangorestframework

Tiếp theo chúng ta sẽ thiết lập React, webpack và babel. Di chuyển trong thư mục frontend và khởi tạo môi trường

pip install django djangorestframework

Tiếp theo cài đặt webpack và webpack cli

pip install django djangorestframework

Bây giờ hãy mở

(venv) your@prompt:~/Code/django-react$ tree -d -L 1
.
├── django_react
├── leads
└── venv

pip install django djangorestframework

Đóng tệp và lưu nó. Bây giờ hãy cài đặt babel để dịch mã của chúng ta

django-admin startproject django_react .

Tiếp theo kéo vào React

django-admin startproject django_react .

Bây giờ cấu hình babel với một

(venv) your@prompt:~/Code/django-react$ tree -d -L 1
.
├── django_react
├── leads
└── venv

(venv) your@prompt:~/Code/django-react$ tree -d -L 1
.
├── django_react
├── leads
└── venv

django-admin startproject django_react .

GHI CHÚ. nếu bạn đang nhận regeneratorRuntime không được xác định bằng async/await trong các thành phần React của bạn

Và cuối cùng tạo một

(venv) your@prompt:~/Code/django-react$ tree -d -L 1
.
├── django_react
├── leads
└── venv

django-admin startproject django_react .

Bây giờ chúng tôi đã sẵn sàng để lăn. (Chào mừng đến với lối vào hiện đại. )

Django REST với React. chuẩn bị ứng dụng frontend

Điều đầu tiên trước tiên hãy tạo chế độ xem trong

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leads.apps.LeadsConfig', # activate the new app
]

django-admin startproject django_react .

Sau đó, tạo một mẫu trong

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leads.apps.LeadsConfig', # activate the new app
]

django-admin startproject django_react .

Như bạn có thể thấy mẫu sẽ gọi

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leads.apps.LeadsConfig', # activate the new app
]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leads.apps.LeadsConfig', # activate the new app
]

django-admin startproject django_react .

Tiếp theo, tạo một tệp mới có tên

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leads.apps.LeadsConfig', # activate the new app
]

django-admin startproject django_react .

Cuối cùng kích hoạt ứng dụng giao diện người dùng trong

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leads.apps.LeadsConfig', # activate the new app
]

django-admin startproject django_react .

Tại thời điểm này, bạn có thể thử trên http. //127. 0. 0. 1. 8000/ (trong khi vẫn chạy máy chủ phát triển Django). Bây giờ bạn sẽ thấy một trang trống

Trong phần tiếp theo, cuối cùng chúng ta sẽ thêm React vào hỗn hợp

Django REST với React. giao diện React

Để giữ cho mọi thứ đơn giản, chúng tôi sẽ tạo một thành phần React đơn giản sẽ hiển thị dữ liệu của chúng tôi. Nếu bạn chưa có bất cứ thứ gì trong cơ sở dữ liệu thì đây là thời điểm tốt để điền vào ứng dụng của bạn một số liên hệ

Chạy máy chủ phát triển và truy cập http. //127. 0. 0. 1. 8000/api/lead/ để chèn một số khách hàng tiềm năng

Bây giờ hãy tạo một tệp mới trong

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leads.apps.LeadsConfig', # activate the new app
]

django-admin startproject django_react .

GHI CHÚ. bạn có thể viết thành phần giống hệt như một hàm với móc

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leads.apps.LeadsConfig', # activate the new app
]

lưu và đóng tập tin. Bây giờ hãy tạo điểm vào cho webpack trong

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leads.apps.LeadsConfig', # activate the new app
]

django-admin startapp app_name

Bây giờ chúng tôi đã sẵn sàng để thử nghiệm mọi thứ. Chạy webpack với

django-admin startapp app_name

khởi động máy chủ phát triển

pip install django djangorestframework

và đi qua http. //127. 0. 0. 1. 8000/. (Nếu bạn thấy "Đã xảy ra sự cố", hãy đảm bảo di chuyển và điền vào cơ sở dữ liệu của bạn)

Cuối cùng, bạn sẽ thấy dữ liệu của mình trong một thành phần React

Khá đơn giản. Nhưng nó đã có tác dụng

Django REST với React. kết luận, đi đâu từ đây

Trong hướng dẫn này, chúng tôi đã xây dựng một dự án Django REST/React đơn giản. Bạn đã học cách

• xây dựng API Django REST đơn giản
• cấu trúc một dự án Django với React
• kết nối React với API Django REST

Vui lòng thử nghiệm bằng cách thêm nhiều tính năng hơn vào dự án (như xác thực)

Cách tiếp cận mà chúng tôi đã thực hiện khi kết nối giao diện người dùng React với Django hơi đơn giản, nhưng thể hiện nền tảng vững chắc về những gì bạn sẽ làm trong thế giới thực

Để tìm hiểu thêm về những thách thức bạn sẽ gặp phải với webpack và Django trong các dự án lớn hơn, hãy nhớ đọc thêm Sử dụng webpack với Django. nó không phải là dễ dàng như bạn nghĩ

Tôi cũng đã có một cuộc nói chuyện về chủ đề. "Tách rời Django với Django REST và React" tại Pycon Italy X ở Florence. Trang trình bày tại đây