Tích hợp django và javascript

Ghi chú. Nếu trước đây bạn đã cài đặt create-react-app trên toàn cầu, bạn nên gỡ cài đặt gói này để đảm bảo npx luôn sử dụng phiên bản mới nhất của create-react-app. Để gỡ cài đặt, hãy chạy lệnh này. npm uninstall -g create-react-app

---

Chạy ứng dụng React

Chạy lệnh này để di chuyển đến thư mục my-react-app

Chạy lệnh này để thực thi ứng dụng React my-react-app

Một cửa sổ trình duyệt mới sẽ bật lên với Ứng dụng React mới được tạo của bạn. Nếu không, hãy mở trình duyệt của bạn và nhập

ReactDOM.(myElement, document.getElementById('root'));

2 vào thanh địa chỉ

Kết quả

---

Những gì bạn nên biết

Trước khi bắt đầu với React. JS, bạn nên có kinh nghiệm trung cấp về

Bạn cũng nên có một số kinh nghiệm với các tính năng JavaScript mới được giới thiệu trong ECMAScript 6 (ES6), bạn sẽ tìm hiểu về chúng trong chương React ES6

Ghi chú. Kể từ Chrome 50, API vị trí địa lý sẽ chỉ hoạt động trên các ngữ cảnh bảo mật như HTTPS. Nếu trang web của bạn được lưu trữ trên một nguồn gốc không an toàn (chẳng hạn như HTTP), các yêu cầu lấy vị trí của người dùng sẽ không còn hoạt động

---

Sử dụng định vị địa lý HTML

Phương thức getCurrentPosition() được sử dụng để trả về vị trí của người dùng

Ví dụ dưới đây trả về vĩ độ và kinh độ của vị trí của người dùng

Ví dụ

Tự mình thử »

Ví dụ giải thích

• Kiểm tra xem Định vị địa lý có được hỗ trợ không
• Nếu được hỗ trợ, hãy chạy phương thức getCurrentPosition(). Nếu không, hiển thị thông báo cho người dùng
• Nếu phương thức getCurrentPosition() thành công, nó sẽ trả về một đối tượng tọa độ cho hàm được chỉ định trong tham số (showPosition)
• Hàm showPosition() xuất Vĩ độ và Kinh độ

Ví dụ trên là tập lệnh Định vị địa lý rất cơ bản, không xử lý lỗi

---

---

Xử lý lỗi và từ chối

Tham số thứ hai của phương thức getCurrentPosition() được sử dụng để xử lý lỗi. Nó chỉ định một chức năng để chạy nếu nó không lấy được vị trí của người dùng

Ví dụ

hàm showError(lỗi) {
công tắc (lỗi. mã số) {
trường hợp lỗi. PERMISSION_DENIED
x. innerHTML = "Người dùng đã từ chối yêu cầu Định vị địa lý. "
phá vỡ;
trường hợp lỗi. VỊ TRÍ_KHÔNG CÓ SẴN
x. innerHTML = "Không có thông tin vị trí. "
phá vỡ;
trường hợp lỗi. HẾT GIỜ
x. innerHTML = "Yêu cầu lấy vị trí người dùng đã hết thời gian chờ. "
phá vỡ;
trường hợp lỗi. LỖI KHÔNG RÕ
x. innerHTML = "Đã xảy ra lỗi không xác định. "
phá vỡ;
}
}

Tự mình thử »

---

Thông tin cụ thể về vị trí

Trang này đã trình bày cách hiển thị vị trí của người dùng trên bản đồ

Vị trí địa lý cũng rất hữu ích cho thông tin cụ thể về vị trí, như

• Cập nhật thông tin địa phương
• Hiển thị Điểm ưa thích gần người dùng
• Điều hướng từng chặng (GPS)

---

Phương thức getCurrentPosition() - Trả về dữ liệu

Phương thức getCurrentPosition() trả về một đối tượng khi thành công. Các thuộc tính vĩ độ, kinh độ và độ chính xác luôn được trả về. Các thuộc tính khác được trả lại nếu có

Bất động sảnReturnscoords. vĩ độVĩ độ dưới dạng số thập phân (luôn được trả lại)tọa độ. kinh độ Kinh độ dưới dạng số thập phân (luôn được trả về) tọa độ. độ chính xác Độ chính xác của tọa độ vị trí (luôn được trả lại). độ cao Độ cao tính bằng mét so với mực nước biển trung bình (được trả về nếu có) tọa độ. độ chính xác Độ chính xác độ cao của tọa độ tọa độ (được trả về nếu có). tiêu đề Tiêu đề tính theo độ theo chiều kim đồng hồ từ Bắc (được trả lại nếu có) tọa độ. speedTốc độ tính bằng mét trên giây (được trả về nếu có)dấu thời gianNgày/thời gian trả lời (được trả về nếu có)

---

Đối tượng định vị địa lý - Các phương pháp thú vị khác

Đối tượng Geolocation còn có các phương thức thú vị khác

• watchPosition() - Trả về vị trí hiện tại của người dùng và tiếp tục trả về vị trí đã cập nhật khi người dùng di chuyển (như GPS trong ô tô)
• clearWatch() - Dừng phương thức watchPosition()

Ví dụ dưới đây cho thấy phương pháp watchPosition(). Bạn cần một thiết bị GPS chính xác để kiểm tra điều này (như điện thoại thông minh)

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 có khả năng 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

3 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 ta trong thư mục

django-admin startapp app_name

3. Cấu trúc dự án của bạn bây giờ nên là

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

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

5 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_name

6 đượ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_name

7 theo mặc định

Mở

django-admin startapp app_name

8 và tạo mô hình

django-admin startapp app_name

6

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

0

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

1

đừ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

2

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

3

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

python3 -m venv venv
source venv/bin/activate

4

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

5

Đợ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

0.

django-admin startapp leads

1 lấy mô hình

django-admin startapp app_name

6 của chúng tôi và một số trường

python3 -m venv venv
source venv/bin/activate

6

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

django-admin startapp leads

3. Một

django-admin startapp leads

3 trong Django REST giống như một

django-admin startapp leads

5. 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
• quan điểm dựa trên lớp học
• 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

6, lấy một bộ truy vấn và một serializer_class

Mở

django-admin startapp leads

7 và tạo chế độ xem

python3 -m venv venv
source venv/bin/activate

7

Đó 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

8 với

django-admin startapp leads

9. 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 leads

9 để 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
└── venv

1

python3 -m venv venv
source venv/bin/activate

8

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

2. Trong tệp này, chúng tôi sẽ kết nối LeadListCreate với

django-admin startapp leads

9

python3 -m venv venv
source venv/bin/activate

9

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

4. Mở

django-admin startapp app_name

5 và thêm ứng dụng vào đó

pip install django djangorestframework

0

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

pip install django djangorestframework

1

Đ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

2

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

3

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

4

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

5

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

pip install django djangorestframework

6

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

7

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

pip install django djangorestframework

8

Bây giờ hãy mở

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

6 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 djangorestframework

9

Đó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ờ định cấu hình babel với một

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

7 (vẫn bên trong

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

8)

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
└── venv

9 để 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_name

0

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

1

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

pip install django djangorestframework

1

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 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 ở đây