Nội dung
- Yêu cầu - Bước 1 - Tạo môi trường ảo Python và cài đặt các phụ thuộc - Bước 2 - Tạo Dự án Django - Bước 3 - Tạo React Frontend - Bước 4 - Tạo Mô hình Khách hàng và Dữ liệu Ban đầu - Bước 5 - Tạo API REST - Bước 6 - Sử dụng REST API với Axios - Bước 7 - Hiển thị dữ liệu từ API trong ứng dụng React - Bước 8 - Thêm Khách hàng Tạo và Cập nhật Thành phần React - Bước 9 - Cập nhật thành phần ứng dụng chính - Kết luận

Thứ hai, 22/10/2018 | 00:00 GMT+7

Cách xây dựng ứng dụng web hiện đại để quản lý thông tin khách hàng với Django và React trên Ubuntu 18.04

Mọi người sử dụng các loại thiết bị khác nhau để kết nối Internet và duyệt Web. Do đó, các ứng dụng cần được truy cập từ nhiều vị trí khác nhau. Đối với các trang web truyền thống, có giao diện user đáp ứng thường là đủ, nhưng các ứng dụng phức tạp hơn thường yêu cầu sử dụng các kỹ thuật và kiến trúc khác. Chúng bao gồm việc có các ứng dụng REST back-end và front-end riêng biệt có thể được triển khai dưới dạng ứng dụng web phía client , Ứng dụng web tiến bộ (PWA) hoặc ứng dụng di động root .

Một số công cụ mà bạn có thể sử dụng khi xây dựng các ứng dụng phức tạp hơn bao gồm:

React , một khung JavaScript cho phép các nhà phát triển xây dựng các giao diện user root và web cho các phần mềm backend API REST của họ.
Django , một khung công tác web Python miễn phí và open-souce tuân theo mẫu kiến trúc phần mềm của bộ điều khiển chế độ xem mô hình (MVC) .
Django REST framework , một bộ công cụ mạnh mẽ và linh hoạt để xây dựng các API REST trong Django.

Trong hướng dẫn này, bạn sẽ xây dựng một ứng dụng web hiện đại với phần backend và giao diện user REST API riêng biệt bằng cách sử dụng React, Django và Django REST Framework. Bằng cách sử dụng React với Django, bạn có thể hưởng lợi từ những tiến bộ mới nhất trong phát triển JavaScript và giao diện user . Thay vì xây dựng ứng dụng Django sử dụng công cụ mẫu tích hợp, bạn sẽ sử dụng React làm thư viện giao diện user , tận dụng Mô hình đối tượng tài liệu ảo (DOM), cách tiếp cận khai báo và các thành phần nhanh chóng hiển thị các thay đổi trong dữ liệu.

Ứng dụng web bạn sẽ xây dựng lưu trữ profile về khách hàng trong database và bạn có thể sử dụng nó làm điểm khởi đầu cho ứng dụng CRM. Khi hoàn tất, bạn có thể tạo, đọc, cập nhật và xóa các bản ghi bằng cách sử dụng giao diện React theo kiểu Bootstrap 4 .

Yêu cầu

Để hoàn thành hướng dẫn này, bạn cần :

Một máy phát triển với Ubuntu 18.04.
Python 3, pip và venv đã được cài đặt trên máy của bạn theo các Bước 1 và 2 của Cách cài đặt Python 3 và Cài đặt Môi trường Lập trình Cục bộ trên Ubuntu 18.04 .
Node.js 6+ và npm 5.2 trở lên được cài đặt trên máy của bạn. Bạn có thể cài đặt cả hai theo hướng dẫn trong Cách cài đặt Node.js trên Ubuntu 18.04 khi cài đặt từ PPA.

Bước 1 - Tạo môi trường ảo Python và cài đặt các phụ thuộc

Trong bước này, ta sẽ tạo một môi trường ảo và cài đặt các phụ thuộc cần thiết cho ứng dụng của ta , bao gồm Django, khung Django REST và django-cors-headers .

Ứng dụng của ta sẽ sử dụng hai server phát triển khác nhau cho Django và React. Chúng sẽ chạy trên các cổng khác nhau và sẽ hoạt động như hai domain riêng biệt. Do đó, ta cần bật chia sẻ tài nguyên nguồn root chéo (CORS) để gửi các yêu cầu HTTP từ React tới Django mà không bị trình duyệt chặn.

Điều hướng đến folder chính của bạn và tạo môi trường ảo bằng module venv Python 3:

cd ~ 
python3 -m venv ./env

Kích hoạt môi trường ảo đã tạo bằng source :

source env/bin/activate

Tiếp theo, cài đặt các phụ thuộc của dự án bằng pip . Chúng sẽ bao gồm:

Django : Khung web cho dự án.
Khung công tác Django REST : Một ứng dụng của bên thứ ba xây dựng các API REST với Django.
django-cors-headers : Một gói cho phép CORS.

Cài đặt khung công tác Django:

pip install django djangorestframework django-cors-headers

Với các phần phụ thuộc của dự án được cài đặt, bạn có thể tạo dự án Django và giao diện user React.

Bước 2 - Tạo Dự án Django

Trong bước này, ta sẽ tạo dự án Django bằng các lệnh và tiện ích sau:

django-admin startproject project-name : django-admin là một tiện ích dòng lệnh được sử dụng để hoàn thành các việc với Django. Lệnh startproject tạo một dự án Django mới.
python manage.py startapp myapp : manage.py là một kịch bản tiện ích, tự động thêm vào từng dự án Django, mà thực hiện một số nhiệm vụ hành chính: sáng tạo các ứng dụng mới, di chuyển các database , và phục vụ các dự án Django tại local . Lệnh startapp của nó tạo một ứng dụng Django bên trong dự án Django. Trong Django, ứng dụng thuật ngữ mô tả một gói Python cung cấp một số bộ tính năng trong một dự án.

Để bắt đầu, hãy tạo dự án Django với django-admin startproject . Ta sẽ gọi dự án của ta là djangoreactproject :

django-admin startproject djangoreactproject

Trước khi tiếp tục, hãy xem cấu trúc folder của dự án Django của ta bằng cách sử dụng lệnh tree .

Mẹo: tree là một lệnh hữu ích để xem cấu trúc file và folder từ dòng lệnh. Bạn có thể cài đặt nó bằng lệnh sau:

sudo apt-get install tree

Để sử dụng nó, hãy cd vào folder bạn muốn và nhập tree hoặc cung cấp đường dẫn đến điểm bắt đầu bằng tree /home/ sammy / sammys-project .

Điều hướng đến folder djangoreactproject trong folder root dự án của bạn và chạy lệnh tree :

cd ~/djangoreactproject 
tree

Bạn sẽ thấy kết quả sau:

Output
├── djangoreactproject │   ├── __init__.py │   ├── settings.py │   ├── urls.py │   └── wsgi.py └── manage.py

Thư mục ~/djangoreactproject là folder root của dự án. Trong folder này, có một số file quan trọng đối với công việc của bạn:

manage.py : Tập lệnh tiện ích thực hiện một số tác vụ quản trị.
settings.py : Tệp cấu hình chính cho dự án Django nơi bạn có thể sửa đổi cài đặt của dự án. Các cài đặt này bao gồm các biến như INSTALLED_APPS , một danh sách các chuỗi chỉ định các ứng dụng được bật cho dự án của bạn. Tài liệu Django có thêm thông tin về các cài đặt có sẵn .
urls.py : Tệp này chứa danh sách các mẫu URL và các chế độ xem có liên quan. Mỗi mẫu ánh xạ một kết nối giữa một URL và hàm sẽ được gọi cho URL đó. Để biết thêm về URL và chế độ xem, vui lòng tham khảo hướng dẫn của ta về Cách tạo Chế độ xem Django .

Bước đầu tiên của ta khi làm việc với dự án sẽ là cấu hình các gói mà ta đã cài đặt ở bước trước, bao gồm khuôn khổ Django REST và gói Django CORS, bằng cách thêm chúng vào settings.py . Mở file bằng nano hoặc editor bạn quen dùng :

nano ~/djangoreactproject/djangoreactproject/settings.py

Điều hướng đến INSTALLED_APPS thiết và thêm rest_framework và corsheaders ứng dụng để dưới cùng của danh sách:

~ / djangoreactproject / djangoreactproject / settings.py

... INSTALLED_APPS = [     'django.contrib.admin',     'django.contrib.auth',     'django.contrib.contenttypes',     'django.contrib.sessions',     'django.contrib.messages',     'django.contrib.staticfiles',     'rest_framework',     'corsheaders' ]

Tiếp theo, thêm phần mềm trung gian corsheaders.middleware.CorsMiddleware từ gói CORS đã được cài đặt trước đó vào cài đặt MIDDLEWARE . Cài đặt này là danh sách các phần mềm trung gian , một lớp Python chứa mã được xử lý mỗi khi ứng dụng web của bạn xử lý một yêu cầu hoặc phản hồi:

~ / djangoreactproject / djangoreactproject / settings.py

...  MIDDLEWARE = [ ... 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'corsheaders.middleware.CorsMiddleware' ]

Tiếp theo, bạn có thể kích hoạt CORS. Cài đặt CORS_ORIGIN_ALLOW_ALL chỉ định xem bạn có muốn cho phép CORS cho tất cả các domain hay không và CORS_ORIGIN_WHITELIST là bộ mã Python chứa các URL được phép. Trong trường hợp của ta , vì server phát triển React sẽ chạy tại http://localhost:3000 , ta sẽ thêm CORS_ORIGIN_ALLOW_ALL = False và CORS_ORIGIN_WHITELIST('localhost:3000',) vào file settings.py của ta . Thêm các cài đặt này vào bất kỳ đâu trong file :

~ / djangoreactproject / djangoreactproject / settings.py

 ... CORS_ORIGIN_ALLOW_ALL = False  CORS_ORIGIN_WHITELIST = (        'localhost:3000', ) ...

Bạn có thể tìm thấy các tùy chọn cấu hình khác trong tài liệu django-cors-headers .

Lưu file và thoát khỏi editor khi bạn hoàn tất.

Vẫn trong folder ~/djangoreactproject , hãy tạo một ứng dụng Django mới có tên là customers :

python manage.py startapp customers

Điều này sẽ chứa các mô hình và chế độ xem để quản lý khách hàng. Mô hình xác định các trường và hành vi của dữ liệu ứng dụng của ta , trong khi các chế độ xem cho phép ứng dụng của ta xử lý đúng các yêu cầu web và trả lại các phản hồi cần thiết.

Tiếp theo, thêm ứng dụng này vào danh sách các ứng dụng đã cài đặt trong file settings.py của dự án của bạn để Django nhận ra nó là một phần của dự án. Mở lại settings.py :

nano ~/djangoreactproject/djangoreactproject/settings.py

Thêm ứng dụng customers :

~ / djangoreactproject / djangoreactproject / settings.py

... INSTALLED_APPS = [     ...     'rest_framework',     'corsheaders',     'customers' ] ...

Tiếp theo, di chuyển database và khởi động server phát triển local . Di chuyển là cách Django truyền bá những thay đổi bạn thực hiện đối với các mô hình của bạn vào schemas database của bạn. Ví dụ: những thay đổi này có thể bao gồm những thứ như thêm trường hoặc xóa một mô hình. Để biết thêm về mô hình và di chuyển, hãy xem Cách tạo mô hình Django .

Di chuyển database :

python manage.py migrate

Khởi động server phát triển local :

python manage.py runserver

Bạn sẽ thấy kết quả tương tự như sau:

Output
Performing system checks...  System check identified no issues (0 silenced). October 22, 2018 - 15:14:50 Django version 2.1.2, using settings 'djangoreactproject.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C.

Ứng dụng web của bạn sẽ chạy từ http://127.0.0.1:8000 . Nếu bạn chuyển đến địa chỉ này trong trình duyệt web của bạn , bạn sẽ thấy trang sau:

Trang demo Django

Lúc này, hãy để ứng dụng đang chạy và mở một terminal mới để tiếp tục phát triển dự án.

Bước 3 - Tạo React Frontend

Trong phần này, ta sẽ tạo ứng dụng front-end của dự án bằng React.

React có một tiện ích chính thức cho phép bạn nhanh chóng tạo các dự án React mà không cần phải cấu hình trực tiếp Webpack . Webpack là một trình gói module được sử dụng để gói các nội dung web như mã JavaScript, CSS và hình ảnh. Thông thường, trước khi có thể sử dụng Webpack, bạn cần đặt các tùy chọn cấu hình khác nhau, nhưng nhờ tiện ích create-react-app bạn không phải xử lý trực tiếp với Webpack cho đến khi quyết định rằng mình cần kiểm soát nhiều hơn. Để chạy create-react-app bạn có thể sử dụng npx , một công cụ thực thi mã binary gói npm .

Trong terminal thứ hai, hãy đảm bảo bạn đang ở trong folder dự án của bạn :

cd ~/djangoreactproject

Tạo một dự án React có tên là frontend bằng cách sử dụng create-react-app npx create-react-app và npx :

npx create-react-app frontend

Tiếp theo, chuyển bên trong ứng dụng React của bạn và khởi động server phát triển:

cd ~/djangoreactproject/frontend 
npm start

Ứng dụng của bạn sẽ chạy từ http://localhost:3000/ :

React trang demo

Để server phát triển React đang chạy và mở một cửa sổ terminal khác để tiếp tục.

Để xem cấu trúc folder của toàn bộ dự án tại thời điểm này, hãy chuyển đến folder root và chạy lại tree :

cd ~/djangoreactproject 
tree

Bạn sẽ thấy một cấu trúc như thế này:

Output
├── customers │   ├── admin.py │   ├── apps.py │   ├── __init__.py │   ├── migrations │   │   └── __init__.py │   ├── models.py │   ├── tests.py │   └── views.py ├── djangoreactproject │   ├── __init__.py │   ├── __pycache__ │   ├── settings.py │   ├── urls.py │   └── wsgi.py ├── frontend │   ├── package.json │   ├── public │   │   ├── favicon.ico │   │   ├── index.html │   │   └── manifest.json │   ├── README.md │   ├── src │   │   ├── App.css │   │   ├── App.js │   │   ├── App.test.js │   │   ├── index.css │   │   ├── index.js │   │   ├── logo.svg │   │   └── registerServiceWorker.js │   └── yarn.lock └── manage.py

Ứng dụng của ta sẽ sử dụng Bootstrap 4 để tạo kiểu cho giao diện React, vì vậy ta sẽ đưa nó vào file frontend/src/App.css , quản lý cài đặt CSS của ta . Mở tập tin:

nano ~/djangoreactproject/frontend/src/App.css

Thêm nhập sau vào đầu file . Bạn có thể xóa nội dung hiện có của file , mặc dù không bắt buộc:

~ / djangoreactproject / frontend / src / App.css

@import  'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

Ở đây, @import là một hướng dẫn CSS được sử dụng để nhập các luật kiểu từ các trang định kiểu khác.

Bây giờ ta đã tạo cả ứng dụng back-end và front-end, hãy tạo mô hình Khách hàng và một số dữ liệu demo.

Bước 4 - Tạo Mô hình Khách hàng và Dữ liệu Ban đầu

Sau khi tạo ứng dụng Django và giao diện user React, bước tiếp theo của ta sẽ là tạo mô hình Khách hàng, mô hình này đại diện cho bảng database sẽ chứa thông tin về khách hàng. Bạn không cần bất kỳ SQL nào vì Django Object Relational Mapper (ORM) sẽ xử lý các hoạt động database bằng cách ánh xạ các lớp và biến Python vào bảng và cột SQL. Bằng cách này, Django ORM tóm tắt các tương tác SQL với database thông qua giao diện Python.

Chạy lại môi trường ảo của bạn:

cd ~ 
source env/bin/activate

Di chuyển đến folder customers và mở models.py , một file Python chứa các mô hình ứng dụng của bạn:

cd ~/djangoreactproject/customers/ 
nano models.py

Tệp sẽ chứa nội dung sau:

~ / djangoreactproject / customer / models.py

from django.db import models # Create your models here.

API của mô hình Khách hàng đã được nhập vào file nhờ câu lệnh nhập from django.db import models nhập from django.db import models . Đến đây bạn sẽ thêm lớp Customer , lớp này mở rộng các mô models.Model . Mỗi mô hình trong Django là một lớp Python mở rộng django.db.models.Model .

Mô hình Customer sẽ có các trường database sau:

first_name - Tên đầu tiên của khách hàng.
last_name - Họ của khách hàng.
email - Địa chỉ email của khách hàng.
phone - Số điện thoại của khách hàng.
address - Địa chỉ của khách hàng.
description - Mô tả của khách hàng.
createdAt - Ngày khách hàng được thêm vào.

Ta cũng sẽ thêm hàm __str__() , hàm này xác định cách mô hình sẽ được hiển thị. Trong trường hợp của ta , nó sẽ là tên của khách hàng. Để biết thêm về cách xây dựng lớp và định nghĩa đối tượng, vui lòng xem Cách tạo lớp và xác định đối tượng trong Python 3 .

Thêm mã sau vào file :

~ / djangoreactproject / customer / models.py

from django.db import models  class Customer(models.Model):     first_name = models.CharField("First name", max_length=255)     last_name = models.CharField("Last name", max_length=255)     email = models.EmailField()     phone = models.CharField(max_length=20)     address =  models.TextField(blank=True, null=True)     description = models.TextField(blank=True, null=True)     createdAt = models.DateTimeField("Created At", auto_now_add=True)      def __str__(self):         return self.first_name

Tiếp theo, di chuyển database để tạo các bảng database . Lệnh makemigrations tạo file di chuyển nơi các thay đổi mô hình sẽ được thêm vào và migrate sẽ áp dụng các thay đổi trong file di chuyển vào database .

Điều hướng trở lại folder root của dự án:

cd ~/djangoreactproject

Chạy các bước sau để tạo file di chuyển:

python manage.py makemigrations

Bạn sẽ nhận được kết quả giống như sau:

Output
customers/migrations/0001_initial.py     - Create model Customer

Áp dụng những thay đổi này cho database :

python manage.py migrate

Bạn sẽ thấy kết quả cho biết di chuyển thành công:

Output
Operations to perform:   Apply all migrations: admin, auth, contenttypes, customers, sessions Running migrations:   Applying customers.0001_initial... OK

Tiếp theo, bạn sẽ sử dụng tệp di chuyển dữ liệu để tạo dữ liệu khách hàng ban đầu. Tệp di chuyển dữ liệu là sự di chuyển bổ sung hoặc thay đổi dữ liệu trong database . Tạo file di chuyển dữ liệu trống cho ứng dụng customers :

python manage.py makemigrations --empty --name customers customers

Bạn sẽ thấy xác nhận sau với tên file di chuyển của bạn :

Output
Migrations for 'customers':   customers/migrations/0002_customers.py

Lưu ý tên file di chuyển của bạn là 0002_customers.py .

Tiếp theo, chuyển bên trong folder di chuyển của ứng dụng customers :

cd ~/djangoreactproject/customers/migrations

Mở file di chuyển đã tạo:

nano 0002_customers.py

Đây là nội dung ban đầu của file :

~ / djangoreactproject / customer / migrations / 0002_customers.py

from django.db import migrations  class Migration(migrations.Migration):     dependencies = [         ('customers', '0001_initial'),     ]     operations = [     ]

Câu lệnh nhập nhập API migrations , một API Django để tạo di chuyển, từ django.db , một gói tích hợp có chứa các lớp để làm việc với database .

Lớp Migration là một lớp Python mô tả các hoạt động được thực thi khi di chuyển database . Lớp này mở rộng migrations.Migration và có hai danh sách:

dependencies : Chứa các di chuyển phụ thuộc.
operations : Chứa các thao tác sẽ được thực thi khi ta áp dụng việc di chuyển.

Tiếp theo, thêm một phương pháp để tạo dữ liệu khách hàng demo. Thêm phương thức sau vào trước định nghĩa của lớp Migration :

~ / djangoreactproject / customer / migrations / 0002_customers.py

... def create_data(apps, schema_editor):     Customer = apps.get_model('customers', 'Customer')     Customer(first_name="Customer 001", last_name="Customer 001", email="customer001@email.com", phone="00000000", address="Customer 000 Address", description= "Customer 001 description").save()  ...

Trong phương pháp này, ta đang lấy lớp Customer của ứng dụng customers của ta và tạo một khách hàng demo để chèn vào database .

Để có được lớp Customer , lớp sẽ cho phép tạo khách hàng mới, ta sử dụng phương thức get_model() của đối tượng apps . Đối tượng apps đại diện cho register của các ứng dụng đã cài đặt và các mô hình database của chúng.

Đối tượng apps sẽ được chuyển từ phương thức RunPython() khi ta sử dụng nó để chạy create_data() . Thêm phương thức migrations.RunPython() vào danh sách operations trống:

~ / djangoreactproject / customer / migrations / 0002_customers.py

 ...     operations = [         migrations.RunPython(create_data),     ]

RunPython() là một phần của API Migrations cho phép bạn chạy mã Python tùy chỉnh trong quá trình di chuyển. Danh sách operations của ta chỉ định rằng phương thức này sẽ được thực thi khi ta áp dụng di chuyển.

Đây là file hoàn chỉnh:

~ / djangoreactproject / customer / migrations / 0002_customers.py

from django.db import migrations  def create_data(apps, schema_editor):     Customer = apps.get_model('customers', 'Customer')     Customer(first_name="Customer 001", last_name="Customer 001", email="customer001@email.com", phone="00000000", address="Customer 000 Address", description= "Customer 001 description").save()  class Migration(migrations.Migration):     dependencies = [         ('customers', '0001_initial'),     ]     operations = [         migrations.RunPython(create_data),     ]

Để biết thêm thông tin về di chuyển dữ liệu, hãy xem tài liệu về di chuyển dữ liệu trong Django

Để di chuyển database của bạn, trước tiên hãy chuyển trở lại folder root của dự án của bạn:

cd ~/djangoreactproject

Di chuyển database của bạn để tạo dữ liệu demo:

python manage.py migrate

Bạn sẽ thấy kết quả xác nhận việc di chuyển:

Output
Operations to perform:   Apply all migrations: admin, auth, contenttypes, customers, sessions Running migrations:   Applying customers.0002_customers... OK

Để biết thêm chi tiết về quy trình này, hãy tham khảo Cách tạo mô hình Django .

Với mô hình Khách hàng và dữ liệu demo được tạo, ta có thể chuyển sang xây dựng API REST.

Bước 5 - Tạo API REST

Trong bước này, ta sẽ tạo REST API bằng cách sử dụng Django REST Framework. Ta sẽ tạo một số chế độ xem API khác nhau. Chế độ xem API là một hàm xử lý yêu cầu hoặc lệnh gọi API , trong khi điểm cuối API là một URL duy nhất đại diện cho một điểm tiếp xúc với hệ thống REST. Ví dụ: khi user gửi một yêu cầu GET đến một điểm cuối API, Django sẽ gọi hàm hoặc chế độ xem API tương ứng để xử lý yêu cầu và trả về bất kỳ kết quả nào có thể.

Ta cũng sẽ sử dụng bộ tuần tự . Một bộ tuần tự hóa trong Django REST Framework cho phép các version mô hình phức tạp và Bộ truy vấn được chuyển đổi thành định dạng JSON để sử dụng API. Lớp serializer cũng có thể hoạt động theo hướng khác, cung cấp các cơ chế phân tích cú pháp và giải mã dữ liệu thành các mô hình Django và QuerySets.

Các điểm cuối API của ta sẽ bao gồm:

api/customers : Điểm cuối này được sử dụng để tạo khách hàng và trả về group khách hàng được phân trang.
api/customers/<pk> : Điểm cuối này được sử dụng để lấy, cập nhật và xóa các khách hàng đơn lẻ bằng khóa chính hoặc id.

Ta cũng sẽ tạo URL trong file urls.py của dự án cho các điểm cuối tương ứng (tức là api/customers và api/customers/<pk> ).

Hãy bắt đầu bằng cách tạo lớp tuần tự cho mô hình Customer của ta .

Thêm lớp Serializer

Việc tạo lớp serializer cho mô hình Customer của ta là cần thiết để chuyển đổi các version khách hàng và Bộ truy vấn sang và từ JSON. Để tạo lớp serializer, trước tiên hãy tạo một file serializers.py bên trong ứng dụng customers :

cd ~/djangoreactproject/customers/ 
nano serializers.py

Thêm mã sau để nhập API bộ tuần tự hóa và mô hình Customer :

~ / djangoreactproject / customer / serializers.py

from rest_framework import serializers from .models import Customer

Tiếp theo, tạo một lớp serializer mở rộng serializers.ModelSerializer và chỉ định các trường sẽ được tuần tự hóa:

~ / djangoreactproject / customer / serializers.py

 ... class CustomerSerializer(serializers.ModelSerializer):      class Meta:         model = Customer          fields = ('pk','first_name', 'last_name', 'email', 'phone','address','description')

Lớp Meta chỉ định mô hình và các trường để tuần tự hóa: pk , first_name , last_name , email , phone , address , description .

Đây là toàn bộ nội dung của file :

~ / djangoreactproject / customer / serializers.py

from rest_framework import serializers from .models import Customer  class CustomerSerializer(serializers.ModelSerializer):      class Meta:         model = Customer          fields = ('pk','first_name', 'last_name', 'email', 'phone','address','description')

Bây giờ ta đã tạo lớp serializer của bạn , ta có thể thêm các chế độ xem API.

Thêm Chế độ xem API

Trong phần này, ta sẽ tạo các chế độ xem API cho ứng dụng của ta sẽ được gọi bởi Django khi user truy cập vào điểm cuối tương ứng với hàm chế độ xem.

Mở ~/djangoreactproject/customers/views.py :

nano ~/djangoreactproject/customers/views.py

Xóa những gì ở đó và thêm các mục nhập sau:

~ / djangoreactproject / customer / views.py

from rest_framework.response import Response from rest_framework.decorators import api_view from rest_framework import status  from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger from .models import Customer  from .serializers import *

Ta đang nhập bộ tuần tự mà ta đã tạo, cùng với mô hình Customer và các API khung Django và Django REST.

Tiếp theo, thêm chế độ xem để xử lý các yêu cầu POST và GET HTTP:

~ / djangoreactproject / customer / views.py

...  @api_view(['GET', 'POST']) def customers_list(request):     """  List  customers, or create a new customer.  """     if request.method == 'GET':         data = []         nextPage = 1         previousPage = 1         customers = Customer.objects.all()         page = request.GET.get('page', 1)         paginator = Paginator(customers, 10)         try:             data = paginator.page(page)         except PageNotAnInteger:             data = paginator.page(1)         except EmptyPage:             data = paginator.page(paginator.num_pages)          serializer = CustomerSerializer(data,context={'request': request} ,many=True)         if data.has_next():             nextPage = data.next_page_number()         if data.has_previous():             previousPage = data.previous_page_number()          return Response({'data': serializer.data , 'count': paginator.count, 'numpages' : paginator.num_pages, 'nextlink': '/api/customers/?page=' + str(nextPage), 'prevlink': '/api/customers/?page=' + str(previousPage)})      elif request.method == 'POST':         serializer = CustomerSerializer(data=request.data)         if serializer.is_valid():             serializer.save()             return Response(serializer.data, status=status.HTTP_201_CREATED)         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Đầu tiên, ta sử dụng trình trang trí @api_view(['GET', 'POST']) để tạo chế độ xem API có thể chấp nhận các yêu cầu GET và POST. Decorator là một hàm nhận một chức năng khác và mở rộng nó một cách động.

Trong phần thân phương thức, ta sử dụng biến request.method để kiểm tra phương thức HTTP hiện tại và thực thi logic tương ứng tùy thuộc vào loại yêu cầu:

Nếu đó là yêu cầu GET, phương thức này sẽ phân trang dữ liệu bằng cách sử dụng Django Paginator và trả về trang dữ liệu đầu tiên sau khi tuần tự hóa, số lượng khách hàng có sẵn, số lượng trang có sẵn và các liên kết đến trang trước đó và trang tiếp theo. Paginator là một lớp Django được tích hợp sẵn để phân trang danh sách dữ liệu thành các trang và cung cấp các phương thức để truy cập các mục cho mỗi trang.
Nếu đó là một yêu cầu POST, phương thức này sẽ tuần tự hóa dữ liệu khách hàng đã nhận và sau đó gọi phương thức save() của đối tượng serializer. Sau đó, nó trả về một đối tượng Response, một version của HttpResponse , với mã trạng thái 201. Mỗi dạng xem bạn tạo có trách nhiệm khôi phục một đối tượng HttpResponse . Phương thức save() lưu dữ liệu được tuần tự hóa trong database .

Để biết thêm về HttpResponse và các dạng xem, hãy xem phần thảo luận này về việc tạo các hàm dạng xem .

Bây giờ, hãy thêm chế độ xem API sẽ chịu trách nhiệm xử lý các yêu cầu GET, PUT và DELETE để nhận, cập nhật và xóa khách hàng bằng pk (khóa chính):

~ / djangoreactproject / customer / views.py

 ... @api_view(['GET', 'PUT', 'DELETE']) def customers_detail(request, pk):  """  Retrieve, update or delete a customer by id/pk.  """     try:         customer = Customer.objects.get(pk=pk)     except Customer.DoesNotExist:         return Response(status=status.HTTP_404_NOT_FOUND)      if request.method == 'GET':         serializer = CustomerSerializer(customer,context={'request': request})         return Response(serializer.data)      elif request.method == 'PUT':         serializer = CustomerSerializer(customer, data=request.data,context={'request': request})         if serializer.is_valid():             serializer.save()             return Response(serializer.data)         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)      elif request.method == 'DELETE':         customer.delete()         return Response(status=status.HTTP_204_NO_CONTENT)

Phương thức này được trang trí bằng @api_view(['GET', 'PUT', 'DELETE']) để biểu thị rằng đó là chế độ xem API có thể chấp nhận các yêu cầu GET, PUT và DELETE.

Việc kiểm tra trong trường request.method xác minh phương thức yêu cầu và tùy thuộc vào giá trị của nó gọi logic phù hợp:

Nếu đó là một yêu cầu GET, dữ liệu khách hàng được tuần tự hóa và gửi bằng đối tượng Phản hồi.
Nếu đó là một yêu cầu PUT, phương pháp này sẽ tạo một bộ tuần tự cho dữ liệu khách hàng mới. Tiếp theo, nó gọi phương thức save() của đối tượng serializer đã tạo. Cuối cùng, nó gửi một đối tượng Phản hồi với khách hàng được cập nhật.
Nếu đó là một yêu cầu DELETE, phương thức này sẽ gọi phương thức delete() của đối tượng khách hàng để xóa nó, sau đó trả về một đối tượng Phản hồi không có dữ liệu.

Tệp đã hoàn thành trông giống như sau:

~ / djangoreactproject / customer / views.py

from rest_framework.response import Response from rest_framework.decorators import api_view from rest_framework import status  from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger from .models import Customer  from .serializers import *   @api_view(['GET', 'POST']) def customers_list(request):     """  List  customers, or create a new customer.  """     if request.method == 'GET':         data = []         nextPage = 1         previousPage = 1         customers = Customer.objects.all()         page = request.GET.get('page', 1)         paginator = Paginator(customers, 5)         try:             data = paginator.page(page)         except PageNotAnInteger:             data = paginator.page(1)         except EmptyPage:             data = paginator.page(paginator.num_pages)          serializer = CustomerSerializer(data,context={'request': request} ,many=True)         if data.has_next():             nextPage = data.next_page_number()         if data.has_previous():             previousPage = data.previous_page_number()          return Response({'data': serializer.data , 'count': paginator.count, 'numpages' : paginator.num_pages, 'nextlink': '/api/customers/?page=' + str(nextPage), 'prevlink': '/api/customers/?page=' + str(previousPage)})      elif request.method == 'POST':         serializer = CustomerSerializer(data=request.data)         if serializer.is_valid():             serializer.save()             return Response(serializer.data, status=status.HTTP_201_CREATED)         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)  @api_view(['GET', 'PUT', 'DELETE']) def customers_detail(request, pk):     """  Retrieve, update or delete a customer by id/pk.  """     try:         customer = Customer.objects.get(pk=pk)     except Customer.DoesNotExist:         return Response(status=status.HTTP_404_NOT_FOUND)      if request.method == 'GET':         serializer = CustomerSerializer(customer,context={'request': request})         return Response(serializer.data)      elif request.method == 'PUT':         serializer = CustomerSerializer(customer, data=request.data,context={'request': request})         if serializer.is_valid():             serializer.save()             return Response(serializer.data)         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)      elif request.method == 'DELETE':         customer.delete()         return Response(status=status.HTTP_204_NO_CONTENT)

Bây giờ ta có thể chuyển sang tạo các điểm cuối của bạn .

Thêm điểm cuối API

Bây giờ ta sẽ tạo các điểm cuối API: api/customers/ , để truy vấn và tạo khách hàng, và api/customers/<pk> , để lấy, cập nhật hoặc xóa các khách hàng đơn lẻ theo pk của họ.

Mở ~/djangoreactproject/djangoreactproject/urls.py :

nano ~/djangoreactproject/djangoreactproject/urls.py

Để lại những gì ở đó, nhưng thêm nhập vào chế độ xem customers ở đầu file :

~ / djangoreactproject / djangoreactproject / urls.py

from django.contrib import admin from django.urls import path from customers import views from django.conf.urls import url

Tiếp theo, thêm các URL api/customers/ và api/customers/<pk> vào danh sách urlpatterns có chứa các URL của ứng dụng:

~ / djangoreactproject / djangoreactproject / urls.py

...  urlpatterns = [     path('admin/', admin.site.urls),     url(r'^api/customers/$', views.customers_list),     url(r'^api/customers/(?P<pk>[0-9]+)$', views.customers_detail), ]

Với các điểm cuối REST của ta được tạo, hãy xem cách ta có thể sử dụng chúng.

Bước 6 - Sử dụng REST API với Axios

Trong bước này, ta sẽ cài đặt Axios , ứng dụng client HTTP mà ta sẽ sử dụng để thực hiện các lệnh gọi API. Ta cũng sẽ tạo một lớp để sử dụng các điểm cuối API mà ta đã tạo.

Đầu tiên, hủy kích hoạt môi trường ảo của bạn:

deactivate

Tiếp theo, chuyển đến folder frontend của bạn:

cd ~/djangoreactproject/frontend

Cài đặt axios từ npm sử dụng:

npm install axios --save

Tùy chọn --save thêm phần phụ thuộc axios vào file package.json của ứng dụng của bạn.

Tiếp theo, tạo một file JavaScript có tên là CustomersService.js , file này sẽ chứa mã để gọi các API REST. Ta sẽ tạo điều này bên trong folder src , nơi mã ứng dụng cho dự án của ta sẽ hoạt động:

cd src 
nano CustomersService.js

Thêm mã sau, chứa các phương thức để kết nối với API Django REST:

~ / djangoreactproject / frontend / src / CustomerService.js

import axios from 'axios'; const API_URL = 'http://localhost:8000';  export default class CustomersService{      constructor(){}       getCustomers() {         const url = `${API_URL}/api/customers/`;         return axios.get(url).then(response => response.data);     }       getCustomersByURL(link){         const url = `${API_URL}${link}`;         return axios.get(url).then(response => response.data);     }     getCustomer(pk) {         const url = `${API_URL}/api/customers/${pk}`;         return axios.get(url).then(response => response.data);     }     deleteCustomer(customer){         const url = `${API_URL}/api/customers/${customer.pk}`;         return axios.delete(url);     }     createCustomer(customer){         const url = `${API_URL}/api/customers/`;         return axios.post(url,customer);     }     updateCustomer(customer){         const url = `${API_URL}/api/customers/${customer.pk}`;         return axios.put(url,customer);     } }

Lớp CustomersService sẽ gọi các phương thức Axios sau:

getCustomers() : Có được trang đầu tiên của khách hàng.
getCustomersByURL() : Thu hút khách hàng bằng URL. Điều này giúp bạn có thể nhận được các trang tiếp theo của khách hàng bằng cách chuyển các liên kết như /api/customers/?page=2 .
getCustomer() : Có được khách hàng bằng khóa chính.
createCustomer() : Tạo khách hàng.
updateCustomer() : Cập nhật khách hàng.
deleteCustomer() : Xóa một khách hàng.

Như vậy, ta có thể hiển thị dữ liệu từ API của bạn trong giao diện React UI bằng cách tạo thành phần Danh sách CustomersList .

Bước 7 - Hiển thị dữ liệu từ API trong ứng dụng React

Trong bước này, ta sẽ tạo thành phần CustomersList React. Thành phần React đại diện cho một phần của giao diện user ; nó cũng cho phép bạn chia giao diện user thành các phần độc lập, có thể tái sử dụng.

Bắt đầu bằng cách tạo CustomersList.js trong frontend/src :

nano ~/djangoreactproject/frontend/src/CustomersList.js

Bắt đầu bằng lệnh React và Component để tạo một thành phần React:

~ / djangoreactproject / frontend / src / CustomerList.js

import  React, { Component } from  'react';

Tiếp theo, nhập và khởi tạo module CustomersService mà bạn đã tạo ở bước trước, module này cung cấp các phương thức giao diện với phần backend API REST:

~ / djangoreactproject / frontend / src / CustomerList.js

 ... import  CustomersService  from  './CustomersService';  const  customersService  =  new  CustomersService();

Tiếp theo, tạo một thành phần Danh sách CustomersList mở rộng Component để gọi API REST. Một thành phần React nên mở rộng hoặc phân lớp lớp Component . Để biết thêm về các lớp E6 và tính kế thừa, vui lòng xem hướng dẫn của ta về Hiểu các lớp trong JavaScript .

Thêm đoạn mã sau để tạo một thành phần React mở rộng react.Component .

~ / djangoreactproject / frontend / src / CustomerList.js

 ... class  CustomersList  extends  Component {      constructor(props) {         super(props);         this.state  = {             customers: [],             nextPageURL:  ''         };         this.nextPage  =  this.nextPage.bind(this);         this.handleDelete  =  this.handleDelete.bind(this);     } } export  default  CustomersList;

Bên trong hàm tạo , ta đang khởi tạo đối tượng state . Điều này giữ các biến trạng thái của thành phần của ta bằng cách sử dụng mảng customers trống. Mảng này sẽ giữ khách hàng và một nextPageURL sẽ giữ URL của trang tiếp theo để truy xuất từ API back-end. Ta cũng đang liên kết các phương thức nextPage() và handleDelete() phương thức this để chúng có thể truy cập được từ mã HTML.

Tiếp theo, thêm phương thức componentDidMount() và một lệnh gọi đến getCustomers() trong lớp CustomersList , trước dấu ngoặc nhọn đóng.

Phương thức componentDidMount() là một phương thức vòng đời của thành phần được gọi khi thành phần được tạo và chèn vào DOM. getCustomers() gọi đối tượng Dịch vụ Khách hàng để lấy trang dữ liệu đầu tiên và liên kết của trang tiếp theo từ chương trình backend Django:

~ / djangoreactproject / frontend / src / CustomerList.js

 ... componentDidMount() {     var  self  =  this;     customersService.getCustomers().then(function (result) {         self.setState({ customers:  result.data, nextPageURL:  result.nextlink})     }); }

Bây giờ, hãy thêm phương thức handleDelete() để xử lý việc xóa khách hàng, bên dưới componentDidMount() :

~ / djangoreactproject / frontend / src / CustomerList.js

 ... handleDelete(e,pk){     var  self  =  this;     customersService.deleteCustomer({pk :  pk}).then(()=>{         var  newArr  =  self.state.customers.filter(function(obj) {             return  obj.pk  !==  pk;         });         self.setState({customers:  newArr})     }); }

Phương thức handleDelete() gọi phương thức deleteCustomer() để xóa khách hàng bằng cách sử dụng pk (khóa chính) của nó. Nếu thao tác thành công, mảng customers sẽ được lọc ra cho khách hàng bị loại bỏ.

Tiếp theo, thêm phương thức nextPage() để lấy dữ liệu cho trang tiếp theo và cập nhật liên kết trang tiếp theo:

~ / djangoreactproject / frontend / src / CustomerList.js

 ... nextPage(){     var  self  =  this;     customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {         self.setState({ customers:  result.data, nextPageURL:  result.nextlink})     }); }

Phương thức nextPage() gọi phương thức getCustomersByURL() , phương thức này lấy URL trang tiếp theo từ đối tượng trạng thái, this.state.nextPageURL và cập nhật mảng customers với dữ liệu trả về.

Cuối cùng, thêm phương thức render() thành phần render() , phương thức này hiển thị một bảng khách hàng từ trạng thái thành phần:

~ / djangoreactproject / frontend / src / CustomerList.js

 ... render() {      return (     <div  className="customers--list">         <table  className="table">             <thead  key="thead">             <tr>                 <th>#</th>                 <th>First Name</th>                 <th>Last Name</th>                 <th>Phone</th>                 <th>Email</th>                 <th>Address</th>                 <th>Description</th>                 <th>Actions</th>             </tr>             </thead>             <tbody>                 {this.state.customers.map( c  =>                 <tr  key={c.pk}>                     <td>{c.pk}  </td>                     <td>{c.first_name}</td>                     <td>{c.last_name}</td>                     <td>{c.phone}</td>                     <td>{c.email}</td>                     <td>{c.address}</td>                     <td>{c.description}</td>                     <td>                     <button  onClick={(e)=>  this.handleDelete(e,c.pk) }> Delete</button>                     <a  href={"/customer/" + c.pk}> Update</a>                     </td>                 </tr>)}             </tbody>         </table>         <button  className="btn btn-primary"  onClick=  {  this.nextPage  }>Next</button>     </div>     ); }

Đây là toàn bộ nội dung của file :

~ / djangoreactproject / frontend / src / CustomerList.js

import  React, { Component } from  'react'; import  CustomersService  from  './CustomersService';  const  customersService  =  new  CustomersService();  class  CustomersList  extends  Component {  constructor(props) {     super(props);     this.state  = {         customers: [],         nextPageURL:  ''     };     this.nextPage  =  this.nextPage.bind(this);     this.handleDelete  =  this.handleDelete.bind(this); }  componentDidMount() {     var  self  =  this;     customersService.getCustomers().then(function (result) {         console.log(result);         self.setState({ customers:  result.data, nextPageURL:  result.nextlink})     }); } handleDelete(e,pk){     var  self  =  this;     customersService.deleteCustomer({pk :  pk}).then(()=>{         var  newArr  =  self.state.customers.filter(function(obj) {             return  obj.pk  !==  pk;         });          self.setState({customers:  newArr})     }); }  nextPage(){     var  self  =  this;     console.log(this.state.nextPageURL);             customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {         self.setState({ customers:  result.data, nextPageURL:  result.nextlink})     }); } render() {      return (         <div  className="customers--list">             <table  className="table">             <thead  key="thead">             <tr>                 <th>#</th>                 <th>First Name</th>                 <th>Last Name</th>                 <th>Phone</th>                 <th>Email</th>                 <th>Address</th>                 <th>Description</th>                 <th>Actions</th>             </tr>             </thead>             <tbody>             {this.state.customers.map( c  =>                 <tr  key={c.pk}>                 <td>{c.pk}  </td>                 <td>{c.first_name}</td>                 <td>{c.last_name}</td>                 <td>{c.phone}</td>                 <td>{c.email}</td>                 <td>{c.address}</td>                 <td>{c.description}</td>                 <td>                 <button  onClick={(e)=>  this.handleDelete(e,c.pk) }> Delete</button>                 <a  href={"/customer/" + c.pk}> Update</a>                 </td>             </tr>)}             </tbody>             </table>             <button  className="btn btn-primary"  onClick=  {  this.nextPage  }>Next</button>         </div>         );   } } export  default  CustomersList;

Bây giờ ta đã tạo CustomersList thành phần để hiển thị danh sách các khách hàng, ta có thể thêm các thành phần sáng tạo và cập nhật xử lý khách hàng.

Bước 8 - Thêm Khách hàng Tạo và Cập nhật Thành phần React

Trong bước này, ta sẽ tạo thành phần CustomerCreateUpdate , thành phần này sẽ xử lý việc tạo và cập nhật khách hàng. Nó sẽ thực hiện điều này bằng cách cung cấp một biểu mẫu mà user có thể sử dụng để nhập dữ liệu về một khách hàng mới hoặc cập nhật một mục nhập hiện có.

Trong frontend/src , hãy tạo file CustomerCreateUpdate.js :

nano ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

Thêm mã sau để tạo thành phần React, nhập React và Component :