Bây giờ chúng tôi đã hoàn thành việc phát triển một máy chủ API Rest đầ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 ta thích ứng với ứng dụng Angular để 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 phải cấu hình lại ứng dụng Angular 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ây giờ, đây là nơi chúng tôi sẽ tận dụng lợi thế của
một LoopBack SDK có thể được tự động xây dựng cho chúng tôi bằng cách sử dụng một mô-đun Node.
Chúng tôi sẽ xem xét các máy chủ LoopBack của chúng tôi,
các điểm cuối API Rest khác nhau và tự động xây dựng SDK,
sau đó chúng tôi có thể kết hợp vào
ứng dụng Angular của chúng tôi và sau đó có thể giao tiếp với máy chủ LoopBack của chúng tôi,
cả để xác thực và cũng có thể trao đổi dữ liệu.
Để bắt đầu bài tập này,
trước tiên hãy sao chép kho git chứa
một ứng dụng Angular hoàn thành một phần 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.
Vì vậy, ở đây tôi đang ở trong thư mục Coursera Angular của tôi.
Tôi sẽ sao chép các kho lưu trữ git bằng cách
gõ git clone
https://github.com/jmuppala/conFusion-Angular6-LoopBack.git,
và sau đó sao chép kho lưu trữ 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 Confance Angular6 LoopBack và sau đó
thực hiện một cài đặt NPM để cài đặt
tất cả các module nút cho ứng dụng Angular hoàn thành một phần này.
Để tự động xây dựng bộ phát triển phần mềm LoopBack cho máy chủ LoopBack của
chúng tôi, chúng tôi sẽ có sự trợ giúp của mô-đun nút LoopBack SDK Builder này.
Vì vậy, LoopBack SDK Builder này
là một mô-đun nút theo hướng cộng đồng thực sự được phát triển
từ LoopBack SDK Angular chính thức mà các nhà phát triển LoopBack đã phát hành.
Loopback SDK Angular hỗ trợ Angular JS.
Vì vậy, điều này đã được sửa đổi trong Loopback SDK Builder này
để hỗ trợ Angular two và về các ứng dụng.
Vì vậy, LoopBack SDK Builder,
mô-đun nút chính nó một khi nó được cài đặt vào thư mục dự án máy chủ của bạn,
sau đó bạn có thể sử dụng LoopBack SDK Builder để
tự động đi qua ứng dụng LoopBack của bạn mà bạn đã xây dựng.
Điều này sẽ tự động xây dựng mọi thứ chúng ta
cần để bắt đầu trên ứng dụng Angular của chúng tôi.
Vì vậy, nó xây dựng bộ phát triển phần mềm.
Vì vậy, trong bộ phát triển phần mềm,
LoopBack SDK Builder xuất khẩu tất cả các giao diện,
tất cả các mô hình cho các dữ liệu khác nhau mà chúng tôi sẽ được lưu trữ trên
máy chủ LoopBack của chúng tôi và cũng
tất cả các dịch vụ API có thể được sử dụng trong ứng dụng Angular của bạn.
Vì vậy, các mô hình và dịch vụ của bạn sẽ tự động đi xe một khi bạn xây dựng SDK.
Bây giờ nó chỉ là vấn đề kết hợp SDK này vào ứng dụng Angular của chúng tôi,
và sau đó nhanh chóng bắt đầu.
Kể từ khi chúng tôi đã xây dựng ứng dụng Angular của chúng
tôi trong một khóa học trước đó, tôi sẽ trang bị thêm ứng dụng đó để sử dụng
LoopBack SDK mà chúng tôi sẽ xuất khẩu từ này LoopBack SDK Builder.
Trong bước trước,
bạn vừa cài đặt
ứng dụng Angular đã hoàn thành một phần
đã được điều chỉnh để sử dụng LoopBack SDK.
Vì vậy, chúng ta hãy đi trước và xây dựng
LoopBack SDK và sau đó triển khai nó vào ứng dụng Angular của chúng tôi,
và sau đó đi trước và biên dịch ứng dụng Angular của chúng tôi và bắt đầu với nó.
Để thiết lập LoopBack SDK,
hãy vào thư mục máy chủ LoopBack trong tab thiết bị đầu cuối của bạn hoặc trong cửa sổ lệnh của bạn.
Vì vậy, ở đây tôi đang ở trong thư mục máy chủ LoopBack của tôi.
Vì vậy, trong thư mục này,
hãy để tôi đi trước và cài đặt LoopBack
SDK Builder.
Một khi trình xây dựng được cài đặt,
chúng ta hãy đi trước và xây dựng LoopBack SDK.
Để xây dựng LoopBack SDK,
chúng tôi sẽ lấy sự trợ giúp của công cụ dòng lệnh LB-SDK mà mô-đun LoopBack SDK này,
tự động cấu hình cho chúng tôi.
Vì vậy, để truy cập vào đó, chúng tôi sẽ nói,. /nút mô-đun.
Vì vậy, trong các mô-đun nút,
có thư mục a.bin được tự động tạo ra bất cứ khi nào bạn
cài đặt các mô-đun nút khác nhau vào thư mục đó.
Vì vậy, để đi đến thư mục the.bin,
chúng tôi sẽ truy cập lệnh LB-SDK này ở
đó, được cài đặt tự động,
sau đó chúng tôi sẽ gọi máy chủ chiều rộng này. /server.js,
và chúng ta cần xác định đường dẫn đến ứng dụng Angular mà chúng ta vừa cấu hình.
Vì vậy, ứng dụng Angular của tôi hiện đang trong
tài liệu của tôi Coursera góc Confect thư mục LoopBack góc.
Vậy, để tôi sao chép phần đó lại.
Sau đó, cho phép tôi đi vào thiết bị đầu cuối của tôi hoặc cửa sổ lệnh
nơi tôi đang cố gắng để cấu hình LoopBack SDK của tôi.
Vì vậy, tại dấu nhắc,
vì nó nằm trong thư mục My Documents,
tôi sẽ gõ vào đường dẫn đầy đủ để điều này bắt đầu từ thư mục gốc của tôi trong mac của tôi.
Nếu bạn đang sử dụng Windows của họ,
hãy chắc chắn rằng đường dẫn này cho biết đường dẫn hoàn chỉnh bắt đầu từ dấu hai chấm C hoặc dấu hai chấm D,
bất cứ ổ đĩa nào bạn đang cài đặt nó trên máy Windows của bạn.
Vì vậy, đường dẫn hoàn chỉnh đến thư mục LoopBack góc cạnh của bạn,
và sau đó chúng ta sẽ nói,
/SRC, thư mục nguồn ở đó, và sau đó ứng dụng.
Sau đó, chúng tôi sẽ triển khai SDK vào thư
mục được chia sẻ trong thư mục con SDK ở đó.
Chúng tôi muốn LoopBack SDK Builder này
tự động triển khai phiên bản web NG2 của SDK.
Vì vậy, đây là phiên bản sẽ hỗ trợ các
ứng dụng web và ứng dụng Angular của chúng tôi trong trường hợp này.
Nếu bạn đang xây dựng điều này cho một ứng dụng kịch bản gốc, sau đó bạn sẽ nói,
NG2 gốc để xây dựng SDK cho ứng dụng Native Script.
Kể từ khi tôi đang xây dựng ứng dụng Angular của
tôi, tôi sẽ chỉ nói, NG2 web,
và sau đó để cho Loopback SDK Builder tự động
xây dựng bộ phát triển phần mềm và sau đó triển khai nó
vào ứng dụng Angular của tôi nguồn/shared/sdk thư mục đó.
Vì vậy, sau một vài giây,
SDK được xây dựng và triển khai ứng dụng Angular của tôi.
Bây giờ trước khi tôi bắt đầu ứng dụng Angular của tôi,
hãy để tôi khởi động máy chủ LoopBack của
tôi, và trước khi tôi làm điều đó tôi sẽ đi đến một tab thiết bị đầu cuối
ở đây và sau đó khởi động máy chủ MongoDB của tôi,
vì vậy tôi sẽ nói,
Mongod —dbpath=data, và sau đó
khởi động máy chủ MongoDB của tôi.
Trước tiên, hãy để tôi khởi động máy chủ LoopBack của mình.
Vì vậy, tại dấu nhắc NPM bắt đầu,
và máy chủ LoopBack của tôi nên được lên và chạy trong một thời gian ngắn.
Sau đó, bây giờ đi đến ứng dụng LoopBack của
tôi, cho phép tôi mở ứng dụng này trong
mã Visual Studio của tôi để chúng ta có thể nhìn vào mã nguồn.
Một khi ứng dụng của tôi được mở trong Visual Studio mã,
hãy để tôi đưa vào một cửa sổ máy tính để bàn mới.
Sau đó, cho phép tôi cũng bắt đầu triển khai ứng dụng Angular của tôi
bằng cách gõ NGServe tại dấu nhắc và chờ cho ứng dụng Angular của tôi để được biên dịch.
Một khi ứng dụng Angular của tôi được biên dịch và áp dụng,
hãy để tôi đi đến một trình duyệt,
và sau đó đầu tiên kiểm tra ứng dụng Angular này.
Đi đến trình duyệt,
hãy để tôi mở một tab mới ở đây,
và sau đó nhập localhost: 4200 và bạn sẽ thấy
ứng dụng Angular được triển khai vào cửa sổ trình duyệt này,
và bạn có thể thấy rằng
Trang chủ, trang Giới thiệu về chúng tôi với tất cả các dữ liệu,
sau đó Menu và cũng yêu thích của tôi.
Hiện nay không hiển thị bất cứ điều gì vì
không có người dùng đăng nhập và trang liên hệ, giống như trước đây.
Vì vậy, để đăng nhập, hãy để tôi đăng nhập như một người dùng và sau đó tôi sẽ gõ
vào tên người dùng và mật khẩu của tôi ở đây,
và sau đó một khi tôi đăng nhập sau đó bạn sẽ có thể thấy rằng khi tôi đi đến mục yêu thích của tôi, yêu
thích của người dùng cụ thể này sẽ được hiển thị ở đây.
Giống như trước đây, chúng tôi có thể nhập nhận xét và sau đó gửi nhận xét,
và sau đó cũng thêm các mục vào mục yêu thích và vân vân.
Tất cả các chức năng mà bạn đã thấy với các phiên bản trước
của ứng dụng Angular cũng được hỗ trợ trong phiên bản này của ứng dụng Angular.
Ngoài ra để máy chủ LoopBack của bạn có thể phục vụ lên hình ảnh,
tất cả dữ liệu này sẽ được lưu trữ trong mã máy chủ của bạn trong thư mục khách hàng của mã máy chủ.
Vì vậy, trong thư mục khách hàng của máy chủ LoopBack của tôi,
chú ý rằng tôi đã tạo ra thư mục phụ này có
tên là hình ảnh và sau đó lưu trữ tất cả các hình ảnh vào thư mục con.
Bây giờ, để những hình ảnh này được phục vụ và cũng cho
thư mục khách hàng được sử dụng làm thư mục công cộng cho máy chủ LoopBack
của tôi, sau đó trong một vài thay đổi mà tôi cần phải thực hiện cho máy chủ LoopBack của tôi.
Bây giờ, điều đầu tiên mà bạn cần làm là,
đi vào thư mục khởi động và trong thư mục khởi động,
bạn sẽ thấy tệp root.js này ở đây,
chứa thông tin này ở đây.
Bây giờ, bạn có thể xóa tệp root.js
hoặc chỉ cần đổi tên tệp root.js thành tệp khác.
Vì vậy, ở đây, bạn thấy rằng tôi đã đổi tên tập tin này để root.jsold với jsold mở rộng.
Bây giờ, tập tin này không nên chứa phần mở rộng the.js nữa.
Vì vậy, bất cứ điều gì khác hơn là the.js mở rộng là tốt.
Vì vậy, điều này có nghĩa là trong trường hợp này,
máy chủ LoopBack của tôi, khi nó khởi động sẽ không thực thi mã trong thư mục này.
Bây giờ, khi bạn nhìn vào mã trong tệp root.js được cấu hình trước đó,
bạn thấy rằng bộ định tuyến đã được cấu hình như vậy mà,
khi bạn truy cập vào dấu gạch chéo là thư mục gốc của máy chủ của bạn,
sau đó nó sẽ chỉ đơn giản phục vụ lên trạng thái máy chủ LoopBack và thực sự,
đó là những gì chúng ta thấy máy chủ LoopBack của chúng tôi phục vụ
thời gian hoạt động và thời gian khởi động lại cuối cùng cho máy chủ của chúng tôi.
Chúng tôi không muốn nó để làm điều đó,
thay vào đó chúng tôi muốn máy chủ LoopBack của chúng tôi để có thể sử dụng bất cứ điều gì chúng tôi
đặt trong thư mục khách hàng như là thư mục công cộng và do đó
bất kỳ ứng dụng khách hàng có thể được triển khai vào
thư mục khách hàng của máy chủ LoopBack của tôi và nên được
truy cập khi chúng tôi truy cập LoopBack máy chủ tại điểm kết thúc dấu gạch chéo tiêu chuẩn của nó.
Vì vậy, đó là thư mục gốc của thư mục máy chủ.
Vì vậy, để làm điều đó, điều đầu tiên mà bạn cần làm là để
thay đổi tên tập tin root.js này để root.
ví dụ, bạn chỉ cần đổi tên nó thành
root.jsold hoặc bạn chỉ có thể xóa tập tin đó.
Tập tin đó sẽ không cần thiết trong phiên bản này của máy chủ LoopBack của tôi.
Bây giờ, không chỉ vậy,
phần thứ hai mà bạn cần cấu hình lại là đi vào tập tin middleware.json ở đây.
Tệp middleware.json.
Trong tập tin middleware.json,
nếu bạn di chuyển xuống,
bạn sẽ thấy rằng ở đây,
ban đầu điều này sẽ chỉ đơn giản chứa các tập tin: và sau đó một cú đúp trống ở đây.
Bây giờ, vào cú đúp trống ở đây,
chỉ cần thêm mã này ở đây,
trong đó nói loopback #static và nó nói params$!.. /client.
Vì vậy, điều này sẽ chỉ ra cho máy chủ LoopBack của tôi
rằng thư mục khách hàng có sẵn ở đây
nên được sử dụng như là thư mục công cộng tĩnh cho máy chủ LoopBack của tôi.
Vì vậy, bất cứ điều gì được đặt trong thư mục khách hàng có thể được truy cập từ máy chủ của tôi.
Vì vậy, đây là sự thay đổi bổ sung mà bạn cần làm đối với tập tin middleware.json.
Vì vậy, một khi bạn thực hiện hai thay đổi này,
sau đó máy chủ LoopBack của bạn sẽ được tất cả cấu hình để phục vụ lên dữ liệu bao gồm
các hình ảnh mà bạn sẽ đưa
vào thư mục con hình ảnh dưới thư mục khách hàng ở đây.
Vì vậy, hãy chắc chắn để sao chép các hình ảnh vào thư mục khách hàng ở đây và thứ hai là để
đi đến tập tin middleware.json trong thư mục máy chủ,
và sau đó cập nhật phần này.
Một khi chúng tôi làm điều đó, sau đó những hình ảnh này có thể được truy cập bằng cách đơn giản truy cập vào
các /images/ tên tập tin hình ảnh để truy cập vào
những hình ảnh này bởi vì các món ăn
, nhà lãnh đạo của chúng tôi, và các chương trình khuyến mãi sẽ yêu cầu các tập tin hình ảnh này và
do đó sẽ có sẵn cho chúng tôi từ
máy chủ LoopBack và cũng bất cứ điều gì bạn đặt trong thư mục khách hàng.
Vì vậy, ví dụ, bạn có thể chuẩn bị thư mục phân phối
cho ứng dụng Angular của bạn và chỉ cần sao chép
toàn bộ nội dung thư mục phân phối vào thư mục khách hàng ở đây,
và sau đó nếu bạn truy cập vào máy chủ LoopBack tại
điểm cuối gốc tiêu chuẩn của nó
sau đó ứng dụng Angular của bạn sẽ tự động phục vụ bởi máy chủ LoopBack của bạn.
Vì vậy, đây là hai thay đổi mà bạn cần thực hiện cho máy chủ LoopBack của bạn.
Tất nhiên, bạn phải tò mò về cách chính xác SDK này được xây dựng,
đâu chính xác là SDK này và
làm thế nào tôi thực sự sẽ sử dụng nó trong ứng dụng Angular của tôi.
Vì vậy, để làm điều đó, chúng ta hãy đi đến ứng dụng Angular của chúng tôi và trong thư mục
nguồn, dưới thư mục ứng dụng nguồn,
bây giờ khi bạn mở thư mục chia sẻ,
bạn sẽ thấy rằng có một thư mục con ở đây có tên là SDK và bên trong thư mục con SDK này,
bạn sẽ tìm thấy một bó toàn bộ các tập tin ở đây,
lb.config.ts. index.t và trong các ổ cắm lưu trữ,
các dịch vụ, và bên trong dịch vụ,
bạn có các dịch vụ tùy chỉnh và các dịch vụ cốt lõi ở đây,
và các mô hình khác nhau được triển khai ở đây.
Các mô hình thực sự chứa các cấu trúc mô hình
cho các mô hình khác nhau mà chúng tôi đang thực hiện.
Bây giờ, đây là LoopBack SDK.
Mã này được tự động xây dựng cho bạn và nếu bạn muốn,
bạn có thể chỉ cần đi vào và sau đó đi
qua các tập tin này để chỉ xem những gì có sẵn ở đó.
Đảm bảo không sửa đổi bất kỳ tệp nào trong
thư mục con SDK này vì điều này được
tự động xây dựng cho bạn bởi Loopback SDK Builder,
và điều này sẽ chứa tất cả mọi thứ được cấu hình để
máy chủ LoopBack của bạn có thể được truy cập từ ứng dụng Angular của bạn.
Các dịch vụ mà tôi sẽ sử dụng đều có sẵn ở đây.
Bây giờ, làm thế nào để chúng ta sử dụng nó?
Vì vậy, để giúp bạn hiểu cách chúng tôi sử dụng điều này,
hãy truy cập thành phần nhà của chúng tôi và sau đó xem cách các thành phần nhà bây giờ được cập nhật.
Vì vậy, khi bạn đi đến các thành phần nhà,
bạn sẽ nhận thấy rằng tôi bây giờ nhập khẩu các món ăn từ.. /shared/sdk/mô hình.
Vì vậy, đây là các mô hình được tự động xuất khẩu
vào SDK bởi Loopback SDK Builder của tôi.
Vì vậy, đây là nơi mô hình món ăn của tôi sẽ được xác định ở đó.
Vì vậy, tôi sẽ tận dụng mô hình món ăn.
Tương tự như vậy, các dịch vụ chính nó có sẵn như DishesAPI này,
như bạn có thể nhìn thấy ở đây và DishesAPI này là trong.. /shared/sdk/services thư mục ở đây.
Tương tự như vậy, các chương trình khuyến mãi và API chương trình khuyến mãi,
và các nhà lãnh đạo và các nhà lãnh đạo API.
Vì vậy, tất cả đều được xây dựng tự động cho tôi bởi Loopback SDK Builder.
Bây giờ, sau đó bạn đi vào mã,
bây giờ bạn sẽ nhận thấy rằng tôi sẽ tuyên bố các món ăn như các món ăn, khuyến
mãi như chương trình khuyến mãi, và lãnh đạo như /leaders.
Ba là những mô hình được xuất khẩu bởi Loopback SDK Builder.
Cũng lưu ý làm thế nào tôi đã cấu hình lại ba dịch vụ ở đây.
Bây giờ, dịch vụ món ăn của tôi là đề cập đến món ăn API,
dịch vụ khuyến mãi đề cập đến API chương trình khuyến mãi,
và dịch vụ lãnh đạo để API lãnh đạo,
và cũng nhận thấy làm thế nào tôi truy cập vào các dịch vụ món ăn ở đây.
Vì vậy, tôi sẽ nói dịch vụ món ăn này tìm thấy một và nơi đặc trưng bằng đúng.
Vì vậy, đây là nơi bạn nhớ lại rằng trong phần còn lại LoopBack của tôi API Explorer,
Tôi đã gõ này vào bộ lọc có,
sau đó tôi đã cố gắng để tìm các món ăn có.
Vì vậy, đó là chính xác những gì tôi đang làm ở đây cũng trong mã của tôi ở đây.
Vì vậy, Find
One này, sau đó cung cấp với điều này, sẽ tìm thấy một mục và sau đó trả lại rằng ở đây,
và sau đó tôi đang gán mỗi món ăn này ở đây và
phần còn lại của ứng dụng Angular của tôi hoạt động chính xác theo cách tương tự như trước đây.
Bây giờ, cũng nhận thấy rằng trong constructor,
lưu ý làm thế nào tôi đã cấu hình này được gọi là cấu hình LoopBack.
Bây giờ, để làm cấu hình LoopBack trong mọi thành phần mà bạn đang sử dụng,
bạn cần phải nhập cấu hình LoopBack này từ thư mục SDK chia sẻ này ở đây và cũng có thể,
phiên bản API này mà tôi khai báo.
Tôi đã cập nhật tập tin baseurl.t này.
Vì vậy, trong thư mục URL cơ sở,
tôi đã cập nhật này để tên của tôi của tôi dấu hai chấm máy tính của tôi 3.000.
Vì vậy, một trong những đảm bảo để thay thế này với
địa chỉ IP hoặc tên của máy tính cụ thể của bạn mà bạn đang chạy.
Vì vậy, hãy chắc chắn để cập nhật URL cơ sở ở đây và phiên bản API ở đây chỉ đơn giản là một chuỗi.
Nói API ở đây.
Vì vậy, hai sẽ được sử dụng trong tập tin thành phần nhà của tôi.
Vì vậy, tôi đang nhập khẩu phiên bản API này ở đây và Loopbackconfig.
BaseURL tôi đã tiêm
vào constructor của tôi ở đây để đã có sẵn ở đây,
và sau đó trong constructor của tôi của thành phần của tôi,
tôi đã cần phải làm hai báo cáo ở đây.
Vì vậy, chúng ta sẽ nói, “LoopBack thiết lập URL
cơ sở để URL cơ sở” đó là giống như một trong những mà tôi vừa
tiêm có và sau đó nhìn lại trên thiết lập phiên bản API để phiên bản API ở đây.
Vì vậy, hai tôi cần phải cấu hình trong thành phần nhà của tôi
và cũng có bất kỳ thành phần khác mà tôi đang truy cập vào máy chủ LoopBack của
tôi, tôi cần phải cấu hình này.
Bây giờ, LoopBack SDK xây dựng gợi ý rằng chúng ta cần phải
làm điều này trong mỗi một trong những thành phần ở đây.
Ngoài ra, bạn sẽ nhận thấy rằng nếu bạn đi đến các tập tin module.t ứng dụng trong tập tin module.t ứng dụng,
Tôi đã gỡ bỏ tất cả các đầu vào của tất cả các dịch vụ khác và thay vào đó tôi đang nhập khẩu
này ở đây gọi là nhập khẩu SDK trình duyệt module từ chia sẻ SDK đây.
SDK Browser module ở đây,
và nếu bạn đi xuống vào các đầu vào ở đây,
bạn sẽ thấy rằng tôi đã cấu hình này SDK Browser module.ForRoot ở đây trong đầu vào.
Vì vậy, mô-đun SDK Browser này được tự động cấu hình khi chúng tôi xây dựng LoopBack SDK của
chúng tôi và chúng tôi chỉ cần nhập khẩu vào
tập tin module.t ứng dụng của chúng tôi và cũng nhận thấy rằng các nhà cung cấp,
đây là nơi chúng tôi cấu hình dịch vụ
của chúng tôi, không chứa bất kỳ dịch vụ nữa bởi vì điều đó
đi kèm như là một phần của LoopBack SDK của tôi,
vì vậy điều duy nhất mà tôi cung cấp là URL cơ sở ở đây.
Tôi đã gỡ bỏ tất cả những người khác từ tập tin module.t ứng dụng của tôi ở đây.
Vì vậy, đó là một sự thay đổi mà bạn sẽ nhận thấy.
Vì vậy, tương tự như vậy nếu bạn đi đến các tập tin về
thành phần phần, các tập tin thành phần DishDetail,
các tập tin thành phần phần yêu thích và cũng là tập tin thành phần trình đơn.
Vì vậy, chúng ta hãy nhìn vào các thành phần trình đơn tập tin.
Vì vậy, bạn sẽ thấy ở đây một lần nữa tôi nhập khẩu này
bốn và sau đó trong thành phần menu của tôi tôi tôi nói,
món ăn dịch vụ món ăn API và sau đó tôi đang
cấu hình LoopBackConfig thiết lập phiên bản BaseURL SetAPI.
Tôi đã làm điều đó trong kho Angular mà tôi đã cung cấp cho
bạn cho ứng dụng góc cạnh của tôi cho máy chủ LoopBack,
và cũng có thể, bạn sẽ thấy rằng tôi vừa thực hiện một số sửa đổi ở đây.
Vì vậy, nếu bạn muốn tìm tất cả các mục từ các dịch vụ món ăn vì vậy bạn chỉ đơn giản là nói D
ishService.Find và đó sẽ trả lại
tất cả các món ăn có trong máy chủ LoopBack của tôi ở đây.
Vì vậy, đó là những gì tôi đang tìm kiếm ở đây.
Vì vậy, phần còn lại của mã nên trông quen thuộc ở đây ngoại trừ ở đây tôi gọi
món ăn là bằng các món ăn và mảng các món ăn ở đây.
Vì vậy, đó là sự thay đổi mà bạn sẽ thấy trong thành phần menu.
Bây giờ, bạn phải tự hỏi làm thế nào để xác thực người dùng hoạt động trong trường hợp này.
Để xác thực người dùng, hãy để tôi thu hút sự chú ý của bạn đến
hai nơi mà tôi đang sử dụng xác thực người dùng.
Trước tiên hãy đi đến thành phần đăng nhập.
Vì vậy, trong thành phần đăng nhập,
bạn sẽ thấy rằng trong thành phần đăng nhập tôi đang nhập hai ở đây,
API khách hàng là các dịch vụ cho phép tôi thực hiện
xác thực người dùng và đăng nhập và đăng xuất,
và tôi cũng nhập mô hình khách hàng và
truy cập mã thông báo mô hình và trong thành phần đăng nhập,
bạn sẽ thấy rằng bởi Auth dịch vụ bây giờ là không có gì ngoài API khách hàng và
bạn cũng sẽ nhận thấy rằng trong thành phần đăng nhập khi biểu mẫu đăng nhập được gửi,
tôi gọi Authservice.login này.
Chức năng đăng nhập này có sẵn thông qua API của khách hàng.
Nhớ lại khi chúng tôi cố gắng đăng nhập bằng trình thám hiểm API phần còn lại của LoopBack,
chúng tôi đã sử dụng điểm cuối của khách hàng để đăng nhập vào hệ thống.
Vì vậy, đó là chính xác những gì tôi đang làm trong mã ở đây.
Vì vậy, chúng tôi sẽ nói authservice.Login này và ở đây bạn thấy rằng
nó mất những tham số miễn phí ở đây,
tên người dùng và mật khẩu là đối tượng JavaScript đầu tiên ở đây,
và sau đó tôi cũng chỉ định user.remember này., .remember là lá cờ
từ hộp kiểm nhớ tôi mà chúng tôi có trong chúng tôi hộp thoại thành phần đăng nhập ở đó.
Vì vậy, khi người dùng kiểm tra rằng trong thông tin của người dùng sẽ được
tự động duy trì bởi SDK.
Dịch vụ Auth được cung cấp bên trong SDK.
Vì vậy, bây giờ bạn thấy rằng tôi không cần phải
thực hiện rõ ràng bất kỳ dịch vụ ủy quyền đó là
tự động có sẵn cho tôi
thông qua API khách hàng có sẵn như một dịch vụ ở đây.
Vì vậy, đó là cách tôi đăng nhập vào người dùng ở đây,
và khi người dùng đăng nhập này sẽ trả lại
một đối tượng JavaScript và từ đối tượng JavaScript tôi nhận được
res.user.. người dùng cung cấp thông tin của người dùng cho tôi và tôi
chỉ đơn giản là gửi này đến headerComponent của tôi ở đây.
Vì vậy, đi vào HeaderComponent.
Vì vậy, chúng ta hãy đi vào các thành phần tiêu đề,
và trong tập tin HeaderComponent.Ts,
bạn sẽ thấy rằng một lần nữa ở đây tôi nhập khẩu API khách
hàng và khách hàng ở đây và bạn cũng sẽ nhận thấy rằng trong API khách hàng,
tôi chỉ định ở đây lưu ý rằng tôi đang nói rằng
khách hàng này là AuthService GetCachedCurrent.
Vì vậy, nếu một người dùng bị khóa trong
thông tin người dùng hiện đang đăng nhập được đúc trong AuthService đó là không có gì ngoài API khách hàng.
Vì vậy, khi tôi gọi này getCachedCurrent này sẽ trả lại người dùng đang đăng nhập.
Nếu không có người dùng nào được đăng nhập,
điều này sẽ trả về null.
Vì vậy, đó là một cách tôi có thể kiểm tra để xem nếu một người dùng hiện đang đăng nhập hay không.
Vì vậy, nếu người dùng hiện đang đăng nhập sau đó this.customer sẽ
nhận được thông tin về khách hàng được nạp vào.
Thông tin khách hàng bao gồm tên họ, họ,
email và hồ sơ của người dùng khác sẽ có sẵn cho đối tượng này này.customer.
Vì vậy, ở đây tôi đang kiểm tra để đảm bảo rằng this.customer không phải là null.
Nếu nó không phải là null sau đó tôi sẽ lưu tên người dùng vào
this.customer.username và theo cách đó khi tên người
dùng được thiết lập sau đó tiêu đề của tôi trong
thanh công cụ trong headerComponent của tôi sẽ phản ánh tên của người dùng ở đó.
Bây giờ, để đăng xuất người dùng tất cả những gì tôi đang làm là tôi đang thiết lập tên người dùng và
các biến khách hàng để null và sau đó tôi chỉ đơn giản là gọi là authService.log,
AuthServices là Customerapi.Lokout, và đó là cách tôi đăng xuất người dùng.
Khi người dùng đăng xuất,
thông tin đăng nhập của mình bị phá hủy tất cả.
Bây giờ, tất cả điều này được thực hiện chăm sóc tự động bởi các dịch vụ API khách hàng
có sẵn trong LoopBack SDK của tôi mà tôi vừa xây dựng ở đó.
Vì vậy, bạn nhận thấy rằng làm thế nào LoopBack SDK Builder xây dựng
các dịch vụ và các mô hình và tất cả mọi thứ mà tôi cần và trong ứng dụng Angular của tôi,
tôi chỉ đơn giản là nhập khẩu những và sau đó sử dụng
chúng để cấu hình ứng dụng Angular của tôi.
Vì vậy, một khi tôi xây dựng
LoopBack SDK sử dụng LoopBack SDK Builder tất cả những gì tôi còn lại với là
thực hiện các thành phần và các mẫu xem của họ mà ngồi tất cả các phần còn lại.
Các dịch vụ được tự động xây dựng cho tôi bởi LoopBack SDK Builder,
các mô hình được tự động xây dựng cho tôi và tất cả
những gì tôi cần làm là nhập chúng vào tất cả các thành phần mà tôi cần phải sử dụng chúng.
Vì vậy, lưu ý cách ứng dụng góc này đã được cập nhật để sử dụng LoopBack SDK.
Bây giờ nếu bạn muốn biết thêm thông tin về cách LoopBack SDK nên được sử dụng,
bạn cũng có thể kiểm tra tài liệu được cung cấp bởi LoopBack SDK Builder.
Vì vậy, nếu bạn đi đến LoopBack SDK Builder,
một liên kết đến điều này có sẵn trong các tài nguyên bổ sung cho bài học này,
và trong LoopBack SDK Builder,
bạn sẽ có tất cả các thông tin mà bạn cần
để sử dụng SDK được xây dựng bởi LoopBack SDK Builder.
Vì vậy, nếu bạn đi đến tài liệu wiki.
Trong tài liệu wiki, rất nhiều lời giải thích về cách LoopBack SDK Builder có thể
được hoặc SDK được tạo ra bởi LoopBack SDK Builder nên được sử dụng là tất cả được đưa ra ở đây.
Vì vậy, tôi chỉ cần đi qua tài liệu này để tìm ra cách
sử dụng SDK được xây dựng bởi LoopBack SDK Builder,
và sau đó cấu hình lại ứng dụng Angular của tôi để sử dụng
điều đó để tương tác với máy chủ LoopBack của tôi.
Vì vậy, với điều này, tôi đã nhanh chóng chứng minh nó cho bạn làm thế nào
bạn có thể xây dựng ứng dụng Angular
của bạn và tận dụng lợi thế của SDK được xây dựng bởi LoopBack SDK Builder
để truy cập máy chủ LoopBack của bạn từ trong ứng dụng Angular của bạn.
Một cách tiếp cận tương tự cũng sẽ thích hợp cho ứng dụng Ionic của bạn.
Đối với ứng dụng Native Script bạn xây dựng SDK với NG2 gốc
trong dòng lệnh thay vì web NG2 như chúng tôi đã sử dụng khi chúng tôi xây dựng SDK này.
Với giới thiệu nhanh chóng này về cách chúng tôi có thể sử dụng
LoopBack SDK Builder để xây dựng SDK và
sau đó sử dụng nó trong ứng dụng Angular
của chúng tôi, họ đi đến cuối bài tập này.