Cách lấy dữ liệu từ mongodb và hiển thị trong phản ứng

Khi bạn đang làm việc trong ứng dụng ngăn xếp MERN (MongoDB, Express, React và Node), bạn thường được yêu cầu tìm nạp JSON của bộ sưu tập Mongo và sử dụng dữ liệu đó trên giao diện người dùng. Với sự phổ biến của cơ sở dữ liệu NoSQL, việc tìm nạp dữ liệu từ bộ sưu tập Mongo thông qua ứng dụng React thông qua máy chủ tốc hành thực sự đơn giản

Hướng dẫn này hướng dẫn bạn các yếu tố cần thiết để thực hiện yêu cầu XHR tới điểm cuối trên máy chủ cấp tốc để nhận JSON của bộ sưu tập Mongo trong cơ sở dữ liệu MongoDB của bạn

Thiết lập phụ trợ

Nếu bạn đã có máy chủ cấp tốc với điểm cuối nơi bạn có thể tìm nạp bộ sưu tập Mongo của mình, thì bạn có thể bỏ qua bước này. Nếu không, bạn có thể dễ dàng thiết lập máy chủ cấp tốc bằng NodeJS bằng các bước sau

Đầu tiên, tạo một dự án

1npm i mongoose express body-parser 

1npm init -y 

vỏ bọc

Cài đặt mongoose, body-parser và express

1npm i mongoose express body-parser 

vỏ bọc

Tạo một lược đồ

Tạo lược đồ có tên

1npm i mongoose express body-parser 

1npm i mongoose express body-parser 

1npm i mongoose express body-parser 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

jav

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

Tạo bộ điều khiển để tìm nạp tất cả việc cần làm từ bộ sưu tập Mongo của bạn bằng phương thức

1npm i mongoose express body-parser 

1const Todo=require('./../models/Todo'); 
2 
3 
4const getTodos=(req,res)=>{ 
5 
6 Todo.find() 
7 .then(result=>{ 
8 console.log('result: ',result) 
9 res.send(result.length>0?result:'No Todos'); 
10 }) 
11 .catch(err=>{ 
12 console.log(err); 
13 }) 
14} 
15 
16module.exports={ 
17 getTodos 
18} 

jav

Thiết lập Bộ định tuyến tốc hành

Tạo phiên bản bộ định tuyến của express bằng cách gọi phương thức ______14 trên đó. Tiếp theo, tạo một tuyến đường sẽ đóng vai trò là điểm cuối API để nhận tất cả việc cần làm từ bộ sưu tập Mongo của bạn bằng cách gọi phương thức

1npm i mongoose express body-parser 

1npm i mongoose express body-parser 

jav

Cuối cùng, kết hợp tất cả lại với nhau bằng cách tạo một ứng dụng cấp tốc và kết nối cơ sở dữ liệu MongoDB của bạn. Ví dụ này sử dụng MongoDB Atlas để tạo và kết nối với cơ sở dữ liệu đám mây bằng cách sử dụng chuỗi

1npm i mongoose express body-parser 

1npm i mongoose express body-parser 

jav

Bây giờ bạn có thể truy cập bộ sưu tập mongo của mình bằng cách sử dụng điểm cuối http. //máy chủ cục bộ. 5000/todos sau khi chạy

1npm i mongoose express body-parser 

Tạo giao diện người dùng

Bộ sưu tập Mongo bạn sẽ sử dụng trông như thế này

1npm i mongoose express body-parser 

json

Bộ sưu tập JSON này được trả về từ điểm cuối được tạo trong phần trước sau khi thêm dữ liệu vào cơ sở dữ liệu theo cách thủ công. Nếu bạn muốn sử dụng bộ sưu tập của mình, hãy sử dụng API được tạo trong phần trước hoặc sử dụng bộ sưu tập ở trên bên trong tệp văn bản cục bộ dưới dạng mô hình API. Phương pháp thực hiện yêu cầu XHR trong cả ba trường hợp đều giống nhau

Yêu cầu XHR

Bên trong ứng dụng React của bạn, hãy nhập

1npm i mongoose express body-parser 

1npm i mongoose express body-parser 

1npm i mongoose express body-parser 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1npm i mongoose express body-parser 

jsx

Bên trong hàm gọi lại của

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const Todo=require('./../models/Todo'); 
2 
3 
4const getTodos=(req,res)=>{ 
5 
6 Todo.find() 
7 .then(result=>{ 
8 console.log('result: ',result) 
9 res.send(result.length>0?result:'No Todos'); 
10 }) 
11 .catch(err=>{ 
12 console.log(err); 
13 }) 
14} 
15 
16module.exports={ 
17 getTodos 
18} 

1const Todo=require('./../models/Todo'); 
2 
3 
4const getTodos=(req,res)=>{ 
5 
6 Todo.find() 
7 .then(result=>{ 
8 console.log('result: ',result) 
9 res.send(result.length>0?result:'No Todos'); 
10 }) 
11 .catch(err=>{ 
12 console.log(err); 
13 }) 
14} 
15 
16module.exports={ 
17 getTodos 
18} 

1const Todo=require('./../models/Todo'); 
2 
3 
4const getTodos=(req,res)=>{ 
5 
6 Todo.find() 
7 .then(result=>{ 
8 console.log('result: ',result) 
9 res.send(result.length>0?result:'No Todos'); 
10 }) 
11 .catch(err=>{ 
12 console.log(err); 
13 }) 
14} 
15 
16module.exports={ 
17 getTodos 
18} 

1const Todo=require('./../models/Todo'); 
2 
3 
4const getTodos=(req,res)=>{ 
5 
6 Todo.find() 
7 .then(result=>{ 
8 console.log('result: ',result) 
9 res.send(result.length>0?result:'No Todos'); 
10 }) 
11 .catch(err=>{ 
12 console.log(err); 
13 }) 
14} 
15 
16module.exports={ 
17 getTodos 
18} 

1npm i mongoose express body-parser 

jsx

Bây giờ bạn có thể xem việc cần làm từ bộ sưu tập Mongo của mình trên trang

Phần kết luận

Mặc dù tạo yêu cầu XHR là phương pháp nguyên thủy nhất để tạo yêu cầu AJAX, nhưng bạn phải luôn sử dụng các phương pháp hiện đại như tìm nạp API hoặc Axios để thực hiện lệnh gọi API. Chúng dễ sử dụng, có đường cong học tập nông và có thể xử lý nhiều yêu cầu cồng kềnh bằng cách sử dụng các tính năng nâng cao như chuỗi lời hứa. Ví dụ tương tự được sử dụng trong hướng dẫn này có thể được mã hóa theo cách gọn gàng hơn bằng cách sử dụng Axios hoặc API tìm nạp. Hãy thử điều đó như một bài tập

Làm cách nào để tìm nạp dữ liệu từ MongoDB và hiển thị trong React js?

Làm cách nào để tìm nạp dữ liệu từ MongoDB và hiển thị trong HTML?

Làm cách nào để tìm nạp dữ liệu từ MongoDB?

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