Cách lấy dữ liệu từ mongodb trong phản ứng js

Question

Trong hướng dẫn này, chúng ta sẽ xây dựng ngăn xếp MERN (React. js + Nút. js + Express + MongoDB) Ví dụ ứng dụng CRUD. Máy chủ back-end sử dụng Node. js + Express cho REST API, phía front-end là ứng dụng khách React với React Router, Axios & Bootstrap

Nội dung chính Show

Phản ứng. js + Nút. js + Express + Ví dụ MongoDB Tổng quan
Kiến trúc ngăn xếp MERN
Băng hình
Nút. js Express Phần cuối MongoDB
Tổng quan
Cấu trúc dự án
Thực hiện
Phản ứng. Giao diện người dùng js
Tổng quan
Công nghệ
Cấu trúc dự án
Thực hiện
Mã nguồn
Phần kết luận
Làm cách nào để lấy dữ liệu từ MongoDB?
Làm cách nào để lấy dữ liệu từ MongoDB trong React js bằng axios?
Bạn có thể kết nối với MongoDB trong phản ứng không?

Bài viết liên quan.
– Xác thực và ủy quyền ngăn xếp MERN
– Tải lên tệp phản ứng với Axios và API thanh tiến trình để nghỉ ngơi

Chạy cả hai dự án ở một nơi.
Cách tích hợp React với Node. js Express trên cùng một Máy chủ/Cổng

Dockerize. Docker Soạn. Phản ứng, nút. js Express, ví dụ về MongoDB

nội dung

Phản ứng. js + Nút. js + Express + Ví dụ MongoDB Tổng quan

Chúng tôi sẽ xây dựng một Ứng dụng hướng dẫn đầy đủ trong đó

Hướng dẫn có id, tiêu đề, mô tả, trạng thái đã xuất bản
Người dùng có thể tạo, truy xuất, cập nhật, xóa Hướng dẫn
Có một hộp tìm kiếm để tìm Hướng dẫn theo tiêu đề

– Thêm một mục

Cách lấy dữ liệu từ mongodb trong phản ứng js

– Hiển thị tất cả các mục

– Bấm vào nút Sửa để xem thông tin chi tiết của một mặt hàng

Trên Trang này, bạn có thể

thay đổi trạng thái thành Đã xuất bản/Đang chờ xử lý bằng nút Xuất bản/Chưa xuất bản
xóa đối tượng khỏi Cơ sở dữ liệu MongoDB bằng nút Xóa
cập nhật thông tin chi tiết của đối tượng này trên Cơ sở dữ liệu bằng nút Cập nhật

– Tìm kiếm các mục theo trường 'tiêu đề'

– Kiểm tra cơ sở dữ liệu MongoDB

Kiến trúc ngăn xếp MERN

phản ứng của chúng tôi. js + Nút. ứng dụng js + Express + MongoDB sẽ theo kiến trúc này

– Nút. js Express xuất API REST và tương tác với Cơ sở dữ liệu MongoDB bằng Mongoose ODM.
– Ứng dụng khách React gửi Yêu cầu HTTP và truy xuất Phản hồi HTTP bằng Axios, sử dụng dữ liệu trên các thành phần. React Router được sử dụng để điều hướng đến các trang.

Băng hình

Đây là hướng dẫn ngắn gọn về React Node. ứng dụng js Express chạy với cơ sở dữ liệu MongoDB

Nút. js Express Phần cuối MongoDB

Tổng quan

Đây là những API mà Node. Ứng dụng js Express sẽ xuất

MethodsUrlsActionsGETapi/tutorialsget all TutorialsGETapi/tutorials/. Hướng dẫn idget của

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

7POSTapi/tutorials thêm mới Hướng dẫn OUTapi/tutorials/. idupdate Hướng dẫn của

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

7DELETEapi/tutorials/. idremove Hướng dẫn của

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

7DELETEapi/tutorialsxóa tất cả Hướng dẫnGETapi/tutorials?title=[kw]tìm tất cả Hướng dẫn có tiêu đề chứa

npm install express mongoose body-parser cors --save

0

Cấu trúc dự án

– db. cấu hình. js xuất tham số cấu hình cho kết nối MongoDB & Mongoose.
– Máy chủ web cấp tốc trong máy chủ. js nơi chúng tôi định cấu hình CORS, khởi tạo và chạy API Express REST.
– Tiếp theo, chúng ta thêm cấu hình cho cơ sở dữ liệu MongoDB trong models/index. js, tạo mô hình dữ liệu Mongoose trong mô hình/hướng dẫn. kiểu mẫu. js.
– Bộ điều khiển hướng dẫn trong bộ điều khiển.
– Các tuyến để xử lý tất cả các hoạt động CRUD (bao gồm cả công cụ tìm tùy chỉnh) trong hướng dẫn. tuyến đường. js.

Thực hiện

Tạo nút. ứng dụng js

Đầu tiên, chúng ta tạo một thư mục

$ mkdir nodejs-express-mongodb
$ cd nodejs-express-mongodb

Tiếp theo, chúng tôi khởi tạo Node. Ứng dụng js có gói. tập tin json

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

Chúng ta cần cài đặt các mô-đun cần thiết.

npm install express mongoose body-parser cors --save

1,

npm install express mongoose body-parser cors --save

2,

npm install express mongoose body-parser cors --save

3 và

npm install express mongoose body-parser cors --save

4.
Chạy lệnh.

npm install express mongoose body-parser cors --save

Cài đặt máy chủ web Express

Trong thư mục gốc, hãy tạo một máy chủ mới. tập tin js

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

1

Những gì chúng tôi làm là.
– nhập các mô-đun

npm install express mongoose body-parser cors --save

1,

npm install express mongoose body-parser cors --save

3 và

npm install express mongoose body-parser cors --save

4.

Express là để xây dựng Rest apis
body-parser giúp phân tích cú pháp yêu cầu và tạo đối tượng
```
npm install express mongoose body-parser cors --save
```
8
cors cung cấp phần mềm trung gian Express để kích hoạt CORS với nhiều tùy chọn khác nhau

– tạo ứng dụng Express, sau đó thêm phần mềm trung gian

npm install express mongoose body-parser cors --save

3 và

npm install express mongoose body-parser cors --save

4 bằng phương pháp

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

11. Lưu ý rằng chúng tôi đặt nguồn gốc.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

12.
– xác định tuyến GET đơn giản để kiểm tra.
– lắng nghe trên cổng 8080 để biết các yêu cầu đến.

Bây giờ hãy chạy ứng dụng bằng lệnh.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

13.
Mở trình duyệt của bạn bằng url http. //máy chủ cục bộ. 8080/, bạn sẽ thấy.

Vâng, bước đầu tiên đã xong. Chúng ta sẽ làm việc với Mongoose trong phần tiếp theo

Định cấu hình cơ sở dữ liệu MongoDB & Mongoose

Trong thư mục app ta tạo 1 thư mục config riêng để cấu hình với db. cấu hình. tập tin js như thế này

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

1

Định nghĩa Mongoose

Chúng ta sẽ định nghĩa mô hình Mongoose (hướng dẫn. kiểu mẫu. js) cũng trong thư mục ứng dụng/mô hình trong bước tiếp theo

Bây giờ hãy tạo ứng dụng/mô hình/chỉ mục. js với đoạn mã sau

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

2

Đừng quên gọi phương thức

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

14 trong máy chủ. js

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

4

Xác định mô hình Mongoose

Trong thư mục mô hình, tạo hướng dẫn. kiểu mẫu. tập tin js như thế này

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

5

Mô hình Mongoose này đại diện cho bộ sưu tập hướng dẫn trong cơ sở dữ liệu MongoDB. Các trường này sẽ được tạo tự động cho từng tài liệu Hướng dẫn. _id, tiêu đề, mô tả, xuất bản, tạoAt, cập nhậtAt, __v

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

6

Nếu bạn sử dụng ứng dụng này với giao diện người dùng cần trường id thay vì _id, bạn phải ghi đè phương thức

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

15 ánh xạ đối tượng mặc định thành đối tượng tùy chỉnh. Vì vậy, mô hình Mongoose có thể được sửa đổi như mã sau

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

8

Và kết quả sẽ như thế này-

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

0

Xong các bước trên ta không cần viết hàm CRUD nữa, Mongoose Model hỗ trợ hết

tạo một Hướng dẫn mới. vật
tìm Hướng dẫn theo id. (Tôi)
truy xuất tất cả các Hướng dẫn.
cập nhật Hướng dẫn theo id. (id, dữ liệu)
xóa Hướng dẫn. (Tôi)
xóa tất cả Hướng dẫn.
tìm tất cả các Hướng dẫn theo tiêu đề. tìm ({ tiêu đề. { $regex. RegExp mới (tiêu đề), tùy chọn $. "tôi" } })

Các chức năng này sẽ được sử dụng trong Bộ điều khiển của chúng tôi

Tạo bộ điều khiển

Bên trong thư mục ứng dụng/bộ điều khiển, hãy tạo hướng dẫn. bộ điều khiển. js với các hàm CRUD này

tạo ra
tìm tất cả
tìm một
cập nhật
xóa bỏ
xóa hết
findAllPublished

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

1

Bạn có thể tiếp tục từng bước triển khai Nút này. Ứng dụng js Express trong bài viết.
Nút. js, Express & MongoDb. Xây dựng ví dụ CRUD Rest Api

Chạy nút. Máy chủ tốc hành js

Chạy nút của chúng tôi. ứng dụng js bằng lệnh.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

13

Phản ứng. Giao diện người dùng js

Tổng quan

– Thành phần

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

17 là một thùng chứa có React

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

18. Nó có

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

19 liên kết đến các đường dẫn tuyến đường

– Thành phần

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

10 nhận và hiển thị Hướng dẫn.
– Thành phần

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

11 có biểu mẫu để chỉnh sửa chi tiết của Hướng dẫn dựa trên

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

12.
– Thành phần

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

13 có biểu mẫu để gửi Hướng dẫn mới.

– Các Thành phần này gọi các phương thức

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

14 sử dụng

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

15 để thực hiện các yêu cầu HTTP và nhận phản hồi

Hoặc bạn có thể sử dụng React với Redux

Thêm chi tiết tại. Phản ứng ví dụ ứng dụng Redux CRUD với Rest API

Công nghệ

Phản ứng 18/17
Reac-router-dom 6
trục 0. 27. 2
khởi động 4

Cấu trúc dự án

– gói. json chứa 4 mô-đun chính. ________ 216, ________ 217, ________ 215 và ________ 219.
–

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

17 là vùng chứa có

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

18 & thanh điều hướng.
– Có 3 thành phần.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

10,

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

11,

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

13.
– http-chung. js khởi tạo axios với tiêu đề và Url cơ sở HTTP.
–

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

14 có các phương thức gửi yêu cầu HTTP tới Apis.
–. env định cấu hình cổng cho ứng dụng React CRUD này.

Đối với phiên bản TypeScript

Vui lòng truy cập.
Ví dụ về React Typescript CRUD với Web API

Thực hiện

Thiết lập phản ứng. dự án js

Mở cmd tại thư mục muốn lưu thư mục Project, chạy lệnh.
______226

Sau khi quá trình được thực hiện. Ta tạo thêm thư mục và file như cây sau

công cộng

src

các thành phần

hướng dẫn bổ sung. thành phần. js

hướng dẫn. thành phần. js

danh sách hướng dẫn. thành phần. js

dịch vụ

hướng dẫn. dịch vụ. js

Ứng dụng. css

Ứng dụng. js

mục lục. js

bưu kiện. json

Nhập Bootstrap vào ứng dụng React CRUD

Chạy lệnh.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

27

Mở src/Ứng dụng. js và sửa đổi mã bên trong nó như sau-

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

2

Thêm React Router vào ứng dụng React CRUD

– Chạy lệnh.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

28.
– Mở src/index. js và bọc thành phần

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

17 bằng đối tượng

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

40.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

3

Thêm thanh điều hướng vào ứng dụng React CRUD

Mở src/Ứng dụng. js, thành phần

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

17 này là vùng chứa gốc cho ứng dụng của chúng ta, nó sẽ chứa một đối tượng

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

19 và một đối tượng

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

43 với một số đối tượng

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

44. Mỗi

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

44 trỏ đến một Thành phần phản ứng

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

4

Khởi tạo Axios cho React CRUD HTTP Client

Hãy cài đặt axios bằng lệnh.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

46.
Trong thư mục src, chúng ta tạo http-common. js với đoạn mã sau.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

5

Bạn có thể thay đổi

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

47 tùy thuộc vào url API REST mà Máy chủ của bạn định cấu hình

Tạo dịch vụ dữ liệu

Trong bước này, chúng ta sẽ tạo một dịch vụ sử dụng đối tượng axios ở trên để gửi các yêu cầu HTTP

dịch vụ/hướng dẫn. dịch vụ. js

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

6

Chúng tôi gọi phương thức axios

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

48,

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

49,

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

50,

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

51 tương ứng với Yêu cầu HTTP. GET, POST, PUT, DELETE để thực hiện các thao tác CRUD

Tạo các thành phần/trang phản ứng

Bây giờ chúng ta sẽ xây dựng 3 thành phần tương ứng với 3 Route đã xác định trước đó

Thêm mục mới
Danh sách các mục
Mục chi tiết

Bạn có thể tiếp tục từng bước triển khai Ứng dụng React này trong bài đăng.
– Phản ứng. js CRUD để sử dụng API Web
– hoặc ví dụ React Hooks CRUD để sử dụng API Web

Sử dụng React với Redux.
– Ví dụ React Redux CRUD với Rest API
– React Hooks + Redux. Ví dụ CRUD với Rest API

Dành cho phiên bản TypeScript.
Ví dụ React Typescript CRUD để sử dụng API Web

Chạy ứng dụng React CRUD

Bạn có thể chạy Ứng dụng của chúng tôi bằng lệnh.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

52.
Nếu quá trình thành công, hãy mở Trình duyệt bằng Url.

npm init

name: (nodejs-express-mongodb) 
version: (1.0.0) 
description: Node.js Restful CRUD API with Node.js, Express and MongoDB
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, mongodb, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

53 và kiểm tra nó.

Mã nguồn

Bạn có thể tìm thấy mã nguồn Github cho hướng dẫn này tại. Ứng dụng phản ứng + nút Github

Phần kết luận

Hôm nay chúng ta có một cái nhìn tổng quan về ví dụ ngăn xếp MERN (React. js + Nút. js Express + MongoDB) khi xây dựng Ứng dụng CRUD

Chúng tôi cũng xem xét kiến trúc máy khách-máy chủ cho API REST bằng Express và Mongoose ODM, cũng như React. cấu trúc dự án js để xây dựng ứng dụng giao diện người dùng để thực hiện các yêu cầu HTTP và sử dụng các phản hồi

Làm cách nào để lấy dữ liệu từ MongoDB?

Bạn có thể sử dụng thao tác đọc để truy xuất dữ liệu từ cơ sở dữ liệu MongoDB của mình. Có nhiều loại thao tác đọc truy cập dữ liệu theo những cách khác nhau. Nếu bạn muốn yêu cầu kết quả dựa trên một bộ tiêu chí từ bộ dữ liệu hiện có, bạn có thể sử dụng thao tác tìm chẳng hạn như phương thức find() hoặc findOne().

Làm cách nào để lấy dữ liệu từ MongoDB trong React js bằng axios?

Thêm đoạn mã sau vào máy chủ/chỉ mục. tập tin js. Tất cả chúng ta đã sẵn sàng với nút, máy chủ tốc hành cùng với cơ sở dữ liệu mongoDB. Hãy để chúng tôi bắt đầu mongoDB, chạy lệnh dưới đây trong thiết bị đầu cuối. .

Xác định kết nối cơ sở dữ liệu MongoDB

Xác định PORT máy chủ với Express

Cài đặt máy chủ nút/Express

Bạn có thể kết nối với MongoDB trong phản ứng không?

Trước hết, chúng tôi không thể kết nối React JS với MongoDB vì mọi thứ không hoạt động như thế này. Đầu tiên, chúng tôi tạo một ứng dụng phản ứng, sau đó để bảo trì phụ trợ, chúng tôi tạo API trong nút. js và thể hiện. js đang chạy ở một cổng khác và ứng dụng phản ứng của chúng tôi đang chạy ở một cổng khác.

programming mongodb

Cách lấy dữ liệu từ mongodb trong phản ứng js

Phản ứng. js + Nút. js + Express + Ví dụ MongoDB Tổng quan

Kiến trúc ngăn xếp MERN

Băng hình

Nút. js Express Phần cuối MongoDB

Tổng quan

Cấu trúc dự án

Thực hiện

Tạo nút. ứng dụng js

Cài đặt máy chủ web Express

Định cấu hình cơ sở dữ liệu MongoDB & Mongoose

Định nghĩa Mongoose

Xác định mô hình Mongoose

Tạo bộ điều khiển

Chạy nút. Máy chủ tốc hành js

Phản ứng. Giao diện người dùng js

Tổng quan

Công nghệ

Cấu trúc dự án

Thực hiện

Thiết lập phản ứng. dự án js

Nhập Bootstrap vào ứng dụng React CRUD

Thêm React Router vào ứng dụng React CRUD

Thêm thanh điều hướng vào ứng dụng React CRUD

Khởi tạo Axios cho React CRUD HTTP Client

Tạo dịch vụ dữ liệu

Tạo các thành phần/trang phản ứng

Chạy ứng dụng React CRUD

Mã nguồn

Phần kết luận

Làm cách nào để lấy dữ liệu từ MongoDB?

Làm cách nào để lấy dữ liệu từ MongoDB trong React js bằng axios?

Bạn có thể kết nối với MongoDB trong phản ứng không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội