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
3 mới bằng cách sử dụng lệnh sau. 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
0 cho bộ sưu tập Mongo của bạn và một mô hình có tên 1npm i mongoose express body-parser
1, as shown below, and export it using 1npm i mongoose express body-parser
2.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
3 trên mô hình của bạn và xuất nó ở cuối. 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 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
5 và chuyển tuyến đường . 1npm i mongoose express body-parser
1npm i mongoose express body-parser
0jav
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
6 . 1npm i mongoose express body-parser
1npm i mongoose express body-parser
2jav
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
7 trong thiết bị đầu cuối. 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
4json
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
8 và 1npm i mongoose express body-parser
9 . Móc ______18 được sử dụng để tạo trạng thái lưu trữ đối tượng JSON từ điểm cuối. Thực hiện một yêu cầu XHR bên trong 1npm i mongoose express body-parser
9 chức năng gọi lại của móc vòng đời bằng cách sử dụng 1npm i mongoose express body-parser
2 . Hãy xem đoạn mã sau. 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
0jsx
Bên trong hàm gọi lại của
3 , hãy tạo một phiên bản mớ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;
2 object. Then call the endpoint with the request method type [which is GET in this example] to create a gateway to that request. This step is essential as it tells the browser that you are now open for making requests to an endpoint to get some resources back. By calling the 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;
5 , bạn gọi hàm được kích hoạt bởi 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;
6 . 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;
7 and 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;
8 of the request. The 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;
7 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;
0 cho biết rằng yêu cầu đã sẵn sàng để được xử lý và 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}
1 . Bên trong khối is received from the endpoint, indicating everything is okay. Inside the 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}
2 , phân tích đối tượng 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}
3 từ yêu cầu thành một . Đây là cách bạn thực hiện một yêu cầu XHR để lấy JSON của bộ sưu tập Mongo của bạn và lưu trữ nó bên trong trạng thái cục bộ của thành phần của bạn. Bước cuối cùng, bạn có thể hiển thị chi tiết của bộ sưu tập này trên DOM bằng cách lặp qua trạng thái. 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
2jsx
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