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_name3 và để môi trường Python hoạt động
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_name3. Cấu trúc dự án của bạn bây giờ nên là
________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_name5 và thêm ứng dụng vào INSTALLED_APPS
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_name6 được tạo từ các trường sau
- 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_name7 theo mặc định
Mở django-admin startapp app_name8 và tạo mô hình django-admin startapp app_name6
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/activate0
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/activate1
đừ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/activate2
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/activate3
Sau đó tạo báo cáo
python3 -m venv venv source venv/bin/activate4
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/activate5
Đợ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 leads0. django-admin startapp leads1 lấy mô hình django-admin startapp app_name6 của chúng tôi và một số trường
python3 -m venv venv source venv/bin/activate6
Như bạn có thể thấy, chúng tôi đang phân lớp django-admin startapp leads3. Một django-admin startapp leads3 trong Django REST giống như một django-admin startapp leads5. Nó phù hợp bất cứ khi nào bạn muốn ánh xạ chặt chẽ Mô hình thành bộ nối tiếp
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 leads6, lấy một bộ truy vấn và một serializer_class
Mở django-admin startapp leads7 và tạo chế độ xem
python3 -m venv venv source venv/bin/activate7
Đó 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 leads8 với django-admin startapp leads9. Nói cách khác, chúng tôi muốn thực hiện các yêu cầu GET và POST tới django-admin startapp leads9 để liệt kê và tạo mô hình
Để đị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 └── venv1
python3 -m venv venv source venv/bin/activate8
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 └── venv2. Trong tệp này, chúng tôi sẽ kết nối LeadListCreate với django-admin startapp leads9
python3 -m venv venv source venv/bin/activate9
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 └── venv4. Mở django-admin startapp app_name5 và thêm ứng dụng vào đó
pip install django djangorestframework0
Bây giờ bạn sẽ có thể chạy kiểm tra độ tỉnh táo với
pip install django djangorestframework1
Đ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 djangorestframework2
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 djangorestframework3
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 djangorestframework4
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 djangorestframework5
và các tập tin tĩnh
pip install django djangorestframework6
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 djangorestframework7
Tiếp theo cài đặt webpack và webpack cli
pip install django djangorestframework8
Bây giờ hãy mở (venv) your@prompt:~/Code/django-react$ tree -d -L 1 . ├── django_react ├── leads └── venv6 và định cấu hình hai tập lệnh, một dành cho sản xuất và một dành cho phát triển
pip install django djangorestframework9
Đó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 .0
Tiếp theo kéo vào React
django-admin startproject django_react .1
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 └── venv7 (vẫn bên trong (venv) your@prompt:~/Code/django-react$ tree -d -L 1 . ├── django_react ├── leads └── venv8)
django-admin startproject django_react .2
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 └── venv9 để cấu hình babel-loader
django-admin startproject django_react .3
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 ]0
django-admin startproject django_react .4
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 ]1
django-admin startproject django_react .5
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 ]2 là gói webpack của chúng tôi. Định cấu hình ánh xạ URL mới để bao gồm 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 ]3
django-admin startproject django_react .6
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 ]4
django-admin startproject django_react .7
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 ]5
django-admin startproject django_react .8
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 ]6. Nó sẽ là một thành phần React để tìm nạp và hiển thị dữ liệu
django-admin startproject django_react .9
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 ]7
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 ]8 và nhập thành phần của bạn
django-admin startapp app_name0
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_name1
khởi động máy chủ phát triển
pip install django djangorestframework1
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