Bây giờ chúng tôi đã hoàn thành việc phát triển một máy chủ REST API đầy đủ sử dụng Loopback,
câu hỏi tiếp theo ngay lập tức sẽ phát sinh trong tâm trí của bạn là,
làm thế nào để chúng tôi điều chỉnh ứng dụng React để sử dụng máy chủ REST API này?
Như chúng tôi đã thực hiện trong các trường hợp trước đó,
chúng tôi cũng sẽ cần cấu hình lại ứng dụng React của chúng tôi để đặc biệt sử dụng
các điểm cuối API REST và
các yêu cầu API REST khác nhau như được tiếp xúc bởi máy chủ Loopback của chúng tôi.
Để bắt đầu bài tập này, trước tiên,
sao chép kho git chứa
một ứng dụng lại hoàn thành giao tiếp với máy chủ Loopback của chúng tôi.
Vì vậy, để làm điều đó, hãy đi đến vị trí thuận tiện của bạn trên máy tính của bạn.
Tôi sẽ sao chép kho git bằng cách
gõ git clone
https://github.com/jmuppala/conFusion-React-Loopback.git,
và sau đó sao chép kho git này.
Một khi kho git được nhân bản,
sau đó chúng ta sẽ di chuyển vào thư mục Confusion-react-loopback và
sau đó thực hiện một cài đặt sợi để cài đặt tất cả các mô-đun nút cho ứng dụng này.
Trước khi bạn bắt đầu ứng dụng React,
hãy chắc chắn rằng máy chủ Loopback của bạn được cấu hình chính xác.
Trong máy chủ Loopback,
trong thư mục khách hàng,
di chuyển các hình ảnh mà chúng tôi đã đưa ra dưới dạng tệp images.zip,
giải nén nó, và sau đó di chuyển các hình ảnh vào thư mục
hình ảnh dưới thư mục khách hàng như được hiển thị ở đây.
Ngoài ra, đổi tên tệp root.js dưới dạng root.jsold hoặc xóa tệp root.js.
Chúng tôi không cần điều này nữa trong ứng dụng của chúng tôi bởi vì chúng tôi muốn đảm bảo rằng
máy chủ của chúng tôi đang lưu nội dung từ thư mục khách hàng.
Vì vậy, để đạt được điều đó,
hãy mở tập tin middleware.json,
và trong tập tin middleware.json,
trong phần tập tin,
thêm điều này vào phần tập tin của tập tin middleware.json của bạn.
Vì vậy, chúng ta sẽ nói, Loopback tĩnh và params: đồng đô la ngân hàng chấm dấu gạch chéo client”,
chỉ ra rằng máy chủ Loopback của bạn sẽ được lưu lên
nội dung tĩnh từ thư mục khách hàng ở đây.
Sau khi thực hiện những thay đổi này,
sau đó bạn có thể khởi chạy máy chủ của bạn.
Hãy chắc chắn rằng máy chủ MongoDB của bạn
cũng được khởi động và chạy trước khi bạn khởi động máy chủ Loopback của bạn.
Sau đó, sau đó, chúng tôi sẽ biên dịch và khởi chạy ứng dụng khách React của chúng tôi.
Bây giờ, một lần nữa đảm bảo rằng máy chủ MongoDB của bạn và máy chủ Loopback của bạn lên và chạy,
đi đến thiết bị đầu cuối và thêm thiết bị đầu cuối.
Loại sợi bắt đầu để bắt đầu ứng dụng Loopback của chúng tôi, ứng dụng React.
Vì vậy, khi ứng dụng khởi chạy trong trình duyệt,
bạn sẽ nhận thấy rằng ứng dụng Loopback-based React hoạt động
chính xác giống như các phiên bản trước của ứng dụng React.
Vì vậy, ở đây chúng tôi có Trang chủ,
sau đó chúng tôi có trang Giới thiệu như chúng tôi thấy ở đây,
sau đó trang Menu nơi các mục Menu được liệt kê ở đây,
trang Liên hệ với chúng tôi như mong đợi.
Sau đó, hãy để tôi quay lại Trang chủ và sau đó đăng nhập bản thân mình với tư cách là Quản trị viên.
Vì vậy, chúng ta hãy đăng nhập với tư cách Quản trị viên,
và sau đó bạn sẽ có thể xem Mục yêu thích của tôi.
Tôi đã đăng nhập trước đó và sau đó thêm một mục vào mục yêu thích của tôi.
Bây giờ chúng ta hãy vào Menu và sau đó thêm một mục thứ hai vào Mục yêu thích của tôi.
Vì vậy, ở đây chúng tôi sẽ thêm mục này vào mục yêu thích,
và sau đó bạn sẽ có thể thấy rằng cả hai mục này bây giờ trong mục yêu thích của tôi.
Tương tự như vậy, bạn có thể xóa các mục khỏi mục yêu thích.
Vì vậy, chúng ta hãy tiếp tục và xóa điều này khỏi Mục yêu thích của chúng tôi.
Quay trở lại mục Menu,
chúng ta hãy thêm nhận xét cho một trong các món ăn.
Vì vậy, hãy để tôi nhấp vào món ăn này,
và sau đó chúng tôi sẽ gửi một bình luận.
Vì vậy, khi chúng tôi gửi một nhận xét,
như bạn có thể thấy, nhận xét được thêm vào
máy chủ của chúng tôi ở đó như
mong đợi và kết quả được hiển thị trong trang Dish Detail ở đây.
Một lần nữa quay trở lại Trang chủ,
chúng tôi thấy rằng ứng dụng React của chúng tôi bây giờ có thể giao tiếp với
máy chủ Loopback và sau đó lấy
dữ liệu từ máy chủ và tương tác với máy chủ như mong đợi.
Bây giờ, tất nhiên, câu hỏi sẽ nảy sinh trong tâm trí của bạn là,
ứng dụng Loopback này giao tiếp với máy chủ Loopback như thế nào?
Bây giờ, đây là nơi chúng tôi sẽ lưu ý rằng đối với Loopback,
vì máy chủ Loopback phơi bày các điểm cuối API REST,
ứng dụng React của tôi có thể truy cập vào máy chủ Loopback tại
các điểm cuối API tương ứng và sau đó giao tiếp với máy chủ,
như chúng tôi đã làm với máy chủ REST API của chúng tôi mà chúng tôi đã thực hiện trước đó.
Vì vậy, chúng ta hãy đi trước và xem mã cho ứng dụng React đã sửa đổi.
Đi đến mã của ứng dụng của chúng tôi,
những thay đổi lớn mà bạn sẽ nhận thấy sẽ nằm trong tệp ActionCreators.js.
Ở đây, bạn sẽ lưu ý rằng chúng tôi đang giao tiếp với máy
chủ Loopback thay vì máy chủ REST API mà chúng tôi đã có trước đó.
Vì vậy, lấy bây giờ sẽ được truy cập vào máy chủ Loopback tại
điểm cuối api/comment hoặc điểm cuối api/dishes và vân vân.
Vì vậy, tất cả các yêu cầu lấy được tất cả đều được cập nhật để truy cập máy chủ Loopback của chúng tôi ngay lập tức.
Vì vậy, bạn sẽ nhận thấy những thay đổi tương tự ở đó.
Bây giờ, ngoài việc đăng nhập vào máy chủ Loopback của chúng tôi,
vì vậy chúng ta hãy đi đến mã đăng nhập ở đây.
Vì vậy, trong người dùng đăng nhập,
chúng tôi đang đăng tải một tải đến baseURL và API/khách hàng/đăng nhập điểm cuối,
và sau đó chúng tôi sẽ cung cấp các thông tin đăng nhập trong nội dung của thông báo yêu cầu đi ra ngoài.
Để đáp lại điều đó,
máy chủ sẽ gửi lại phản hồi.
Phản ứng sau đó chứa thông tin mã thông báo.
Thông tin mã thông báo được gửi trở lại dưới dạng
ID của tin nhắn trả lời.
Vì vậy, bản thân ID phục vụ như là mã thông báo.
Vì vậy, tin nhắn trả lời chính nó,
tôi sẽ lưu này vào lưu trữ cục bộ của tôi như được hiển thị ở đây.
Chúng tôi stringify thông điệp phản hồi và sau đó lưu trữ nó trong đó.
Thông báo phản ứng này, Response.id, chứa mã thông báo.
Vì vậy, response.id đóng vai trò như JSON Web Token để truy cập vào máy chủ Loopback.
Vì vậy, đó là lý do tại sao bạn sẽ nhận thấy rằng trong
những tình huống mà tôi cần phải truy cập vào máy chủ, vì vậy ví dụ,
chúng tôi sẽ nhận thấy rằng khi chúng tôi đang lấy hoặc đăng yêu thích của bạn vào máy chủ,
bạn sẽ nhận thấy rằng tôi có được mã thông báo bằng cách nói,
cho phép mã thông báo, phân tích JSON,
LocalStorage, GetItem, token ở đây,
và sau đó trong lĩnh vực tiêu đề ủy quyền,
tôi đã nói lĩnh vực ủy quyền để được token.id ở đây như được hiển thị ở đây.
Vì vậy, đó là cách chúng tôi sẽ có thể xác thực chính mình với máy chủ Loopback.
Vì vậy, ở đây bạn thấy rằng nó nói, BaseURL, api/yêu thích,
và sau đó có được danh sách các mục yêu thích từ máy chủ,
và sau đó lưu nó vào cửa hàng redux của chúng tôi.
Vì vậy, tốt, nhiều mã vẫn giữ nguyên,
ngoại trừ các bản cập nhật mà chúng tôi đã thực hiện để
truy cập vào các điểm cuối REST API Loopbacks.
Bây giờ, đối với Angular, chúng tôi có một Loopback SDK có thể được xây dựng cho ứng dụng Angular của chúng tôi.
Nhưng đối với React, không có hỗ trợ như vậy có sẵn từ Loopback,
và vì vậy chúng tôi phải sử dụng trực tiếp truy cập
các điểm cuối API Loopback như được hiển thị ở đây bằng cách sử dụng fetch,
và sau đó chúng tôi có thể giao tiếp với máy chủ Loopback.
Với sự hiểu biết nhanh chóng về cách
ứng dụng React của chúng tôi đã được cập nhật để truy cập vào máy chủ Loopback của
chúng tôi, chúng tôi hoàn thành việc kiểm tra máy chủ Loopback.
Hãy dành nhiều thời gian hơn để tìm kiếm một số thành phần và
xem chúng đang sử dụng thông tin thu được từ máy chủ Loopback như thế nào.
Bạn sẽ nhận thấy rằng hầu hết các thành phần vẫn chính xác giống như trước,
ngoại trừ một số sửa đổi nhỏ trong thành phần yêu thích để có được
thông tin từ máy chủ Loopback
và sau đó sử dụng nó để hiển thị danh sách các mục yêu thích.
Ngoài ra, nhiều thay đổi được giới hạn trong tập tin ActionCreators.js,
nơi chúng tôi đã cập nhật trình lấy để sử dụng URL cho
máy chủ Loopback của chúng tôi để có thể truy cập các điểm cuối REST API khác nhau.
Vì vậy, với điều này, tôi đã nhanh chóng chứng minh cho bạn cách bạn có thể xây dựng ứng dụng của bạn.
Với giới thiệu nhanh chóng này về cách chúng
ta có thể sử dụng Loopback trong ứng dụng của
chúng tôi, chúng tôi đi đến cuối bài tập này.