Hướng dẫn how do i link my react js node js and mongodb? - làm cách nào để liên kết nút js phản ứng của tôi với js và mongodb?

Trước hết, chúng ta không thể kết nối React JS với MongoDB vì mọi thứ không có tác dụng như thế này. Đầu tiên, chúng tôi tạo một ứng dụng React và sau đó để bảo trì phụ trợ, chúng tôi tạo API trong Node.js và Express.js đang chạy ở một cổng khác và ứng dụng React của chúng tôi chạy ở một cổng khác. Để kết nối React với cơ sở dữ liệu (MongoDB), chúng tôi tích hợp thông qua API. Bây giờ hãy xem cách chúng tôi tạo một ứng dụng React đơn giản lấy tên và email đầu vào từ người dùng và lưu nó vào cơ sở dữ liệu.

Prerequisite:

  • Nodejs được cài đặt trong hệ thống của bạn (cài đặt)
  • MongoDB được cài đặt trong hệ thống của bạn (cài đặt)

Các tệp và thư mục Setum: Thiết lập các tệp và thư mục cần thiết cho frontend và phụ trợ cả một.Setting up the required files and folders for the frontend and backend both one by one.

  • Tạo ứng dụng React: Để xây dựng ứng dụng React, hãy theo các bước dưới đây: To build a react application follow the below steps:

Bước 1: Tạo ứng dụng React bằng lệnh sau & NBSP; Create a react application using the following command  

npx create-react-app foldername

Bước 2: Sau khi thực hiện, hãy thay đổi thư mục của bạn thành ứng dụng mới được tạo bằng lệnh sau & nbsp; Once it is done change your directory to the newly created application using the following command  

cd foldername

Bước để chạy ứng dụng: Nhập lệnh sau để chạy ứng dụng. Enter the following command to run the application.

npm start

Cài đặt phụ trợ với NodeJS: Cài đặt NodeJS để phụ trợ để tích hợp với Frontend.Setup NodeJs for Backend to integrate with frontend.

Bước1: Tạo thư mục trong thư mục gốc bằng lệnh sau Make a folder in the root directory using the following command

mkdir backend

Bước 2: Sau khi hoàn thành, hãy thay đổi thư mục của bạn thành thư mục mới được tạoOnce it is done change your directory to the newly created folder called backend using the following command

cd backend

Bước 3: Chạy lệnh sau để tạo tệp cấu hìnhRun the following command to create configure file

npm init -y 

& nbsp; Bước 3: Bây giờ cài đặt MongoDB Mongoose bằng lệnh sau.Step 3: Now Install the mongoose MongoDB using the following command.

npm i express mongoose mongodb cors

Bước 4: Tạo một tệp là index.jsCreate a file that is index.js

touch index.js

Cấu trúc dự án: Nó sẽ trông giống như sau: It will look like the following:

Hướng dẫn how do i link my react js node js and mongodb? - làm cách nào để liên kết nút js phản ứng của tôi với js và mongodb?

Bước để chạy ứng dụng: Nhập lệnh sau để chạy ứng dụng. Enter the following command to run the application.

nodemon index.js 

Cài đặt phụ trợ với NodeJS: Cài đặt NodeJS để phụ trợ để tích hợp với Frontend. Now write down the following code in the following files:

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.

Hướng dẫn how do i link my react js node js and mongodb? - làm cách nào để liên kết nút js phản ứng của tôi với js và mongodb?
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.

cd foldername
0

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 foldername
1

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

cd foldername
2

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

cd foldername
3

Ở đâ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 backend
4 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 backend
5 và
mkdir backend
6 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

cd foldername
4

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

cd foldername
5

Đ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:

cd foldername
6

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

mern/server/routes/record.js

cd foldername
7

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.

cd foldername
8

Đó 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ướng dẫn how do i link my react js node js and mongodb? - làm cách nào để liên kết nút js phản ứng của tôi với js và mongodb?

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 backend
7 và
mkdir backend
8.

cd foldername
9

mkdir backend
7 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 backend
8 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.

npm start
0

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

npm start
1

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

cd backend
1 để 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.

npm start
2

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

npm start
3

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

npm start
4

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

npm start
5

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

npm start
6

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

npm start
7

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

cd backend
2. 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.

npm start
8

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.

npm start
9

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.

mkdir backend
0

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.

mkdir backend
1

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:
mkdir backend
2
  • Quay lại thư mục máy khách và chạy lệnh:
mkdir backend
3

Đâ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.

Hướng dẫn how do i link my react js node js and mongodb? - làm cách nào để liên kết nút js phản ứng của tôi với js và mongodb?

Đâ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.

Hướng dẫn how do i link my react js node js and mongodb? - làm cách nào để liên kết nút js phản ứng của tôi với js và mongodb?

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 để React JS kết nối với MongoDB bằng cách sử dụng Node JS?

Bước để chạy ứng dụng: Nhập lệnh sau để chạy ứng dụng. Cài đặt phụ trợ với NodeJS: Cài đặt NodeJS để phụ trợ để tích hợp với Frontend. Bước 3: Bây giờ cài đặt MongoDB Mongoose bằng lệnh sau. Bước để chạy ứng dụng: Nhập lệnh sau để chạy ứng dụng.Setup NodeJs for Backend to integrate with frontend. Step 3: Now Install the mongoose MongoDB using the following command. Step to run the application: Enter the following command to run the application.

Tôi có thể kết hợp React và NodeJS không?

Bạn có thể kết hợp React với Node JS bằng cách thiết lập back-end của ứng dụng thông qua trình tạo tốc hành, nhận trợ giúp của app-react-app để phát triển mặt trước dựa trên phản ứng, sử dụng Axios cho các cuộc gọi API, xử lý hiệu quả các yêu cầu POST trênMáy chủ, sử dụng tải lên tệp Express và cuối cùng kết nối React với Node., taking the help of create-react-app for React-based front-end development, using Axios for API calls, effectively handling POST requests on the server, using express-file upload, and finally connecting React with Node.

Tôi có thể kết nối cơ sở dữ liệu với React JS không?

SDK không phụ trợ cho JavaScript cung cấp cho bạn mọi thứ bạn cần để tạo phần phụ trợ cho ứng dụng React JS của bạn.Bạn có thể kết nối với cơ sở dữ liệu thời gian thực và quản lý tài khoản người dùng.Bạn thậm chí có thể gửi thông báo đẩy cho người dùng của bạn.You can connect to a real-time database and manage user accounts. You can even send push notifications to your users.

Làm thế nào có thể sử dụng React JS Node JS MySQL cùng nhau?

React + Node ...
Tạo ứng dụng Node.js ..
Thiết lập máy chủ web Express ..
Định cấu hình cơ sở dữ liệu MySQL & phần tiếp theo ..
Khởi tạo phần tiếp theo ..
Xác định mô hình phần tiếp theo ..
Tạo bộ điều khiển ..
Chạy Node.js Express Server ..