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ỡ;
}
}
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ó
Đố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ứcwatchPosition[]
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 độngBâ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_APPSINSTALLED_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 địnhMở
django-admin startapp app_name
8 và tạo mô hình django-admin startapp app_name
6from 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
0Tuyệ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
2Sau đó, 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
3Sau đó tạo báo cáo
python3 -m venv venv
source venv/bin/activate
4Bạ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ườngpython3 -m venv venv
source venv/bin/activate
6Như 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ếplư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_classMở
django-admin startapp leads
7 và tạo chế độ xempython3 -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
1python3 -m venv venv
source venv/bin/activate
8Tiế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
9python3 -m venv venv
source venv/bin/activate
9Cuố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
0Bâ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
2Trong 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
3Bạ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
4Hã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
5và các tập tin tĩnh
pip install django djangorestframework
6Tiế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
7Tiếp theo cài đặt webpack và webpack cli
pip install django djangorestframework
8Bâ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ểnpip 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 .
0Tiếp theo kéo vào React
django-admin startproject django_react .
1Bâ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 .
2GHI 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-loaderdjango-admin startproject django_react .
3Bâ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
]
0django-admin startproject django_react .
4Sau đó, 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
]
1django-admin startproject django_react .
5Như 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
]
3django-admin startproject django_react .
6Tiế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
]
4django-admin startproject django_react .
7Cuố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
]
5django-admin startproject django_react .
8Tạ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ệudjango-admin startproject django_react .
9GHI 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
]
7lư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ạndjango-admin startapp app_name
0Bâ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
1khởi động máy chủ phát triển
pip install django djangorestframework
1và đ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