Hướng dẫn how do you fetch data from mongodb in node js and display in react js? - làm thế nào để bạn tìm nạp dữ liệu từ mongodb trong nút js và hiển thị trong js phản ứng?

Có nhiều cách mà bạn có thể truy vấn để lấy dữ liệu từ máy chủ API của mình. Vì vậy, ở đây tôi đang cố gắng mô tả hai người họ.

1. Theo trình duyệt gốc

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

8 API:

const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    
      {children}
    
  )
}

2. bởi

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

9:

Điều này sẽ cung cấp cho bạn khả năng xử lý đồng bộ hơn như

mkdir mern
cd mern
npx create-react-app client

0,

mkdir mern
cd mern
npx create-react-app client

1,

mkdir mern
cd mern
npx create-react-app client

2, và nhiều hơn nữa.

Đầu tiên, ở cấp cao nhất của

mkdir mern
cd mern
npx create-react-app client

3 của bạn, bạn nên cung cấp nó.

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

Sau đó,

mkdir mern
cd mern
npx create-react-app client

4 của bạn có thể tìm nạp dữ liệu dưới đây:

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

Bạn sẽ cần truy cập vào cơ sở dữ liệu MongoDB Atlas cho hướng dẫn này. Nếu bạn không có tài khoản, bạn có thể đăng ký miễn phí để theo dõi.

Hướng dẫn này sẽ chỉ cho bạn cách xây dựng một ứng dụng MERN đầy đủ trong trường hợp này, cơ sở dữ liệu nhân viên với các công cụ mới nhất hiện có. Trước khi bạn bắt đầu, hãy đảm bảo rằng bạn đã quen thuộc với Node.js và React.js Basics và có nút và tạo ứng dụng React được cài đặt. Bạn cũng sẽ cần truy cập vào cơ sở dữ liệu MongoDB Atlas cho hướng dẫn này. Mã đầy đủ có sẵn trên repo GitHub này.

Ngăn xếp Mern là gì?

Mern Stack là một khung phát triển web được tạo thành từ ngăn xếp của MongoDB, Express.js, React.js và NodeJS. Đây là một trong một số biến thể của ngăn xếp trung bình. Khi bạn sử dụng ngăn xếp MERN, bạn làm việc với React để thực hiện lớp trình bày, biểu thị và nút để tạo lớp giữa hoặc lớp ứng dụng và MongoDB để tạo lớp cơ sở dữ liệu.

When you use the MERN stack, you work with React to implement the presentation layer, Express and Node to make up the middle or application layer, and MongoDB to create the database layer.

Trong hướng dẫn Stack này, chúng tôi sẽ sử dụng bốn công nghệ này để phát triển một ứng dụng cơ bản có khả năng ghi lại thông tin của nhân viên và sau đó hiển thị nó bằng phản ứng.

Làm thế nào để bắt đầu với Stack Mern

Để bắt đầu, bạn sẽ cần phải làm như sau:

1. Cài đặt nút cài đặt Nodeto, truy cập https://nodejs.org/en/ và tải xuống phiên bản LTS hoặc phiên bản hiện tại.
   To install Node, go to https://nodejs.org/en/ and download either the LTS version or the current version.

2. Có hoặc cài đặt một mã Editcherou có thể sử dụng bất kỳ trình soạn thảo mã nào bạn chọn cho hướng dẫn này. Tuy nhiên, để trình diễn, chúng tôi sẽ sử dụng trình chỉnh sửa mã VS với các biểu tượng plugin Prettier và VSCode.
   You can use any code editor of your choice for this tutorial. However, for the sake of demonstration, we will be using VS Code editor with the plugin prettier and vscode icons.

Thiết lập dự án

(Vui lòng mã theo hoặc tải xuống mã đầy đủ từ repo GitHub này.)

Mern cho phép chúng tôi tạo ra các giải pháp đầy đủ. Vì vậy, để tận dụng toàn bộ tiềm năng của nó, chúng tôi sẽ tạo ra một dự án Stack. Đối với dự án này, chúng tôi sẽ tạo ra cả mặt sau và mặt trước. Mặt trước sẽ được thực hiện với React và phần cuối sẽ được triển khai với MongoDB, Node và Express. Chúng tôi sẽ gọi máy khách phía trước và máy chủ phía sau.client and the back end server.

Hãy bắt đầu bằng cách tạo một thư mục trống: Mern. Thư mục này sẽ giữ tất cả các tệp của chúng tôi sau khi chúng tôi tạo một dự án mới. Sau đó, chúng tôi sẽ tạo ra một ứng dụng React, Client Client trong đó.mern. This folder will hold all our files after we create a new project. Then we will create a React app—client—in it.

mkdir mern
cd mern
npx create-react-app client

Sau đó, chúng tôi tạo một thư mục cho phần cuối và đặt tên cho máy chủ.server.

mkdir server

Chúng tôi sẽ nhảy vào thư mục máy chủ mà chúng tôi đã tạo trước đó và tạo máy chủ. Sau đó, chúng tôi sẽ khởi tạo pack.json bằng NPM init.server folder that we created previously and create the server. Then, we will initialize package.json using npm init.

cd server
npm init -y

Chúng tôi cũng sẽ cài đặt các phụ thuộc.

npm install mongodb express cors dotenv

Lệnh trên sử dụng một vài từ khóa:

• Commodb Command cài đặt trình điều khiển cơ sở dữ liệu MongoDB cho phép các ứng dụng Node.js của bạn kết nối với cơ sở dữ liệu và làm việc với dữ liệu. command installs MongoDB database driver that allows your Node.js applications to connect to the database and work with data.
• Express Cài đặt khung web cho Node.js. (Nó sẽ làm cho cuộc sống của chúng ta dễ dàng hơn.) installs the web framework for Node.js. (It will make our life easier.)
• CORS cài đặt gói Node.js cho phép chia sẻ tài nguyên gốc chéo. installs a Node.js package that allows cross origin resource sharing.
• dotenv cài đặt mô -đun tải các biến môi trường từ tệp .ENV vào tệp process.env. Điều này cho phép bạn tách các tệp cấu hình khỏi mã. installs the module that loads environment variables from a .env file into process.env file. This lets you separate configuration files from the code.

Chúng tôi có thể kiểm tra các phụ thuộc đã cài đặt bằng tệp pack.json. Nó nên liệt kê các gói cùng với các phiên bản của họ.

Sau khi chúng tôi đảm bảo rằng các phụ thuộc đã được cài đặt thành công, chúng tôi tạo một tệp có tên server.js với mã sau .:server.js with the following code.:

mern/server/server.js

const express = require("express");
const app = express();
const cors = require("cors");
require("dotenv").config({ path: "./config.env" });
const port = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
app.use(require("./routes/record"));
// get driver connection
const dbo = require("./db/conn");
 
app.listen(port, () => {
  // perform a database connection when server starts
  dbo.connectToServer(function (err) {
    if (err) console.error(err);
 
  });
  console.log(`Server is running on port: ${port}`);
});

Ở đây, chúng tôi đang yêu cầu rõ ràng và CORS được sử dụng. Const Port Process.Env.Port sẽ truy cập biến cổng từ config.env mà chúng tôi yêu cầu.

Kết nối với MongoDB Atlas

Đó là thời gian để kết nối máy chủ của chúng tôi với cơ sở dữ liệu. Chúng tôi sẽ sử dụng MongoDB Atlas làm cơ sở dữ liệu. MongoDB Atlas là một dịch vụ cơ sở dữ liệu dựa trên đám mây cung cấp bảo mật và độ tin cậy dữ liệu mạnh mẽ. MongoDB Atlas cung cấp một cụm cấp miễn phí không bao giờ hết hạn và cho phép bạn truy cập một tập hợp các tính năng và chức năng của Atlas.

Thực hiện theo Get Begin với Atlas Guide để tạo tài khoản, triển khai cụm đầu tiên của bạn và xác định vị trí chuỗi kết nối cụm của bạn.

Bây giờ bạn có chuỗi kết nối, hãy quay lại thư mục ‘máy chủ và tạo tệp‘ config.env. Ở đó, gán chuỗi kết nối cho biến

mkdir mern
cd mern
npx create-react-app client

5 mới. Sau khi hoàn thành, tệp của bạn sẽ trông tương tự như tệp dưới đây. Thay thế

mkdir mern
cd mern
npx create-react-app client

6 và

mkdir mern
cd mern
npx create-react-app client

7 bằng tên người dùng và mật khẩu cơ sở dữ liệu của bạn.

mern/server/config.env

ATLAS_URI=mongodb+srv://:@sandbox.jadwj.mongodb.net/employees?retryWrites=true&w=majority
PORT=5000

Tạo một thư mục trong thư mục máy chủ, DB DB và bên trong nó, một tệp conn.js. Ở đó chúng tôi có thể thêm mã sau để kết nối với cơ sở dữ liệu của chúng tôi.server directory—db—and inside it, a file—conn.js. There we can add the following code to connect to our database.

mern/server/db/conn.js

const { MongoClient } = require("mongodb");
const Db = process.env.ATLAS_URI;
const client = new MongoClient(Db, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
 
var _db;
 
module.exports = {
  connectToServer: function (callback) {
    client.connect(function (err, db) {
      // Verify we got a good "db" object
      if (db)
      {
        _db = db.db("employees");
        console.log("Successfully connected to MongoDB."); 
      }
      return callback(err);
         });
  },
 
  getDb: function () {
    return _db;
  },
};

Điểm cuối API máy chủ

Cơ sở dữ liệu được thực hiện. Máy chủ xong. Bây giờ là lúc điểm cuối API của máy chủ. Hãy bắt đầu bằng cách tạo thư mục tuyến và thêm record.js trong đó. Điều hướng trở lại thư mục máy chủ của bạn và tạo thư mục và tệp mới:

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

0

Tệp Routes/Record.js cũng sẽ có các dòng mã sau trong đó.

mern/server/routes/record.js

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

1

Nếu bạn chạy ứng dụng tại thời điểm này, bạn sẽ nhận được thông báo sau trong thiết bị đầu cuối của mình khi kết nối thiết lập.

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

2

Đó là nó cho phần cuối. Bây giờ, chúng tôi sẽ bắt đầu làm việc ở mặt trước.

Thiết lập ứng dụng React

Vì chúng tôi đã thiết lập ứng dụng React của mình bằng lệnh created-react-app, chúng tôi có thể điều hướng đến thư mục máy khách và kiểm tra mã ứng dụng React của chúng tôi.

Hãy để xác định ứng dụng, nhưng trước khi chúng tôi làm, chúng tôi cần cài đặt hai phụ thuộc bổ sung sẽ được sử dụng trong dự án của chúng tôi. Mở một trình giả lập thiết bị đầu cuối mới, điều hướng đến thư mục máy khách trên mạng và cài đặt

mkdir mern
cd mern
npx create-react-app client

8 và

mkdir mern
cd mern
npx create-react-app client

9.

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

3

mkdir mern
cd mern
npx create-react-app client

8 cho phép bạn nhanh chóng triển khai một mẫu và các thành phần cho ứng dụng web mới của bạn mà không phải làm mọi thứ từ đầu. Và,

mkdir mern
cd mern
npx create-react-app client

9 cài đặt các thành phần bộ định tuyến React cho các ứng dụng web. Hãy chắc chắn rằng ứng dụng máy chủ của bạn vẫn đang chạy!

Thiết lập bộ định tuyến React

Hãy bắt đầu bằng cách làm trống thư mục SRC và thêm hai tệp mới trong đó: index.js và app.js.src folder and adding two new files in it: index.js and App.js.

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

4

Bên trong src/index.js, chúng tôi thêm mã sau:src/index.js, we add the following code:

mern/client/src/index.js

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

5

Chúng tôi đã sử dụng

mkdir server

2 để giữ UI của chúng tôi đồng bộ với URL. Browserrouter giúp chuyển tiếp liền mạch trong khi chuyển đổi giữa các thành phần. Về cơ bản, nó sẽ chỉ tải lại/làm mới thành phần cần được thay đổi thay vì làm mới/tải lại toàn bộ trang. Mặc dù Browserrouter không phải là một điều cần thiết, nhưng đó là điều bắt buộc nếu bạn muốn ứng dụng của mình phản ứng nhanh.

Tạo các thành phần

Sau khi thêm mã vào các tệp index.js, chúng tôi sẽ tạo một thư mục thành phần bên trong SRC. Đối với mỗi thành phần chúng tôi tạo, chúng tôi sẽ thêm một tệp .js mới bên trong thư mục thành phần. Trong trường hợp này, chúng tôi sẽ thêm created.js, edit.js, navbar.js và recordlist.js.components folder inside src. For each component we create, we will add a new .js file inside the components folder. In this case, we will add create.js, edit.js, navbar.js, and recordList.js.

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

6

Một ảnh chụp nhanh của mỗi tệp sẽ trông giống như sau.

create.js

Mã sau đây sẽ phục vụ như một thành phần tạo cho hồ sơ của chúng tôi. Sử dụng thành phần này, người dùng có thể tạo một bản ghi mới. Thành phần này sẽ gửi lệnh tạo đến máy chủ của chúng tôi.

mern/client/src/components/create.js

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

7

edit.js

Mã sau đây sẽ phục vụ như một thành phần chỉnh sửa cho hồ sơ của chúng tôi. Nó sẽ sử dụng một bố cục tương tự như thành phần tạo và cuối cùng sẽ gửi lệnh cập nhật cho máy chủ của chúng tôi.

mern/client/src/components/edit.js

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

8

recordList.js

Mã sau đây sẽ phục vụ như một thành phần xem cho hồ sơ của chúng tôi. Nó sẽ tìm nạp tất cả các bản ghi trong cơ sở dữ liệu của chúng tôi thông qua một phương thức GET.

mern/client/src/components/recordList.js

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      

        
      
    
  );
}

9

navbar.js

Trong thành phần Navbar.js, chúng tôi sẽ tạo một thanh điều hướng sẽ liên kết chúng tôi với các thành phần cần thiết bằng cách sử dụng mã sau.

mern/client/src/components/navbar.js

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

0

Bây giờ, chúng tôi thêm phần sau vào tệp src/app.js mà chúng tôi đã tạo trước đó.

mern/client/src/App.js

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

1

Kết nối đầu trước với đầu sau

Chúng tôi đã hoàn thành tạo ra các thành phần. Chúng tôi cũng kết nối ứng dụng React của chúng tôi với phần cuối bằng

mkdir server

3. Fetch cung cấp các cách sạch hơn và dễ dàng hơn để xử lý các yêu cầu HTTP. Tìm nạp được sử dụng trong created.js, edit.js và recordList.js khi chúng xử lý các yêu cầu HTTP. Trong created.js, chúng tôi đã thêm mã sau vào khối onsubmit (e). Khi một yêu cầu bài đăng được gửi đến URL Tạo, Fetch sẽ thêm một bản ghi mới vào cơ sở dữ liệu.

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

2

Tương tự, trong EDIT.js, chúng tôi đã thêm mã sau vào khối onsubmit (e).edit.js, we appended the following code to the onSubmit(e) block.

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

3

Chúng tôi cũng đã đặt khối mã sau để chỉnh sửa.js bên dưới khối cấu trúc.edit.js beneath the constructor block.

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

4

Cuối cùng, chúng tôi có Danh sách ghi. RecordList.js tìm nạp các bản ghi từ cơ sở dữ liệu, vì vậy chúng tôi sẽ sử dụng phương thức GET của Fetch để truy xuất các bản ghi từ cơ sở dữ liệu. Để đạt được điều này, chúng tôi đã thêm các dòng mã sau đây trên hàm reginationList () trong repordlist.js.recordList.js. recordList.js fetches the records from the database, so we will be using fetch's get method to retrieve records from the database. To achieve this, we added the following lines of code above the recordList() function in recordList.js.

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

5

Sau khi đóng tất cả mọi thứ, để bắt đầu ứng dụng, hãy làm theo các bước này.

• Đảm bảo rằng ứng dụng máy chủ vẫn đang chạy. Nếu nó không, hãy bắt đầu bằng cách thực thi lệnh sau trong máy chủ/ thư mục:

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

6

• Quay lại thư mục máy khách và chạy lệnh:

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

7

Đây là những gì trang đích của thành phần bản ghi sẽ trông như thế nào sau khi chúng tôi thêm hai bản ghi cho của Richard Richard, và Billy Billy, thông qua nút Tạo bản ghi.

Đây là những gì màn hình cho phép bạn thêm một nhân viên sẽ trông như thế nào.

Chúc mừng bạn đã xây dựng ứng dụng Mern đầu tiên của bạn. Để biết thêm ý tưởng và khái niệm nâng cao, hãy truy cập trung tâm nhà phát triển của chúng tôi hoặc theo dõi hội thảo Mern này để lấy một ứng dụng cần làm cơ bản thông qua một ứng dụng tự động được quản lý đầy đủ.

Bắt đầu tự do thêm

Làm thế nào để bạn tìm nạp dữ liệu từ cơ sở dữ liệu trong Node JS và hiển thị trong React?

Làm thế nào để bạn tìm nạp dữ liệu từ MongoDB và hiển thị nó trong bảng bằng Node JS?

Node JS hiển thị dữ liệu từ MongoDB như thế nào?

Làm thế nào để MongoDB gửi dữ liệu để phản ứng?