Cách lấy dữ liệu từ MongoDB trong Node js và hiển thị trong React

Trong hướng dẫn này, bạn sẽ học cách tạo một ứng dụng CRUD đầy đủ bằng cách sử dụng nút. js, express, MongoDB và React JS

Không chỉ có vậy,

Trong hướng dẫn này, bạn cũng sẽ học cách sử dụng Bulma CSS để tạo kiểu cho giao diện người dùng

Do đó, ứng dụng được xây dựng trở nên thân thiện hơn với giao diện người dùng (UI) thanh lịch và nhạy bén

Bắt đầu nào

#1. Cài đặt Express, Mongoose, Nodemon và Cors

Tạo một thư mục trên máy tính, ở đây mình đặt tên là “fullstack”

Nếu bạn tạo một thư mục có cùng tên thì càng tốt

Bạn có thể tự do tạo nó ở bất cứ đâu, dù ở C, D hay trên Desktop

Sau đó mở thư mục "fullstack" bằng code editor, ở đây mình dùng Visual Studio Code

Tôi cũng khuyên bạn nên sử dụng Visual Studio Code

Bạn có thể download Visual Studio Code tại link sau, sau đó cài đặt vào máy tính

https. //mã số. Visual Studio. com/

Sau khi mở thư mục "fullstack" bằng Visual Studio Code, hãy tạo một thư mục con có tên "backend" bên trong thư mục "fullstack"

Tiếp theo, mở một thiết bị đầu cuối trên Visual Studio Code. Sau đó, vào thư mục “backend” bằng cách gõ lệnh sau trong terminal

cd backend

Sau đó, gõ lệnh sau trong terminal để tạo “gói. tập tin json”

npm init -y

Tiếp theo, cài đặt express, cầy mangut và cors bằng cách gõ lệnh sau vào terminal

npm i express mongoose cors

Tiếp theo, cài đặt gật đầu trên toàn cầu bằng cách gõ lệnh sau trong thiết bị đầu cuối

npm i -g nodemon

Tiếp theo, thêm đoạn mã sau vào “gói. tập tin json”

"type": "module",

Vì vậy, tập tin "gói. json" trông giống như sau

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.3",
    "mongoose": "^6.2.2"
  }
}

Điều này là để chúng ta có thể sử dụng Cú pháp mô-đun ES6 để xuất và nhập các mô-đun

#2. Tạo một chỉ mục. tập tin js

Tạo một tệp có tên là “index. js” trong thư mục “backend”, sau đó nhập đoạn mã sau

import express from "express";
import mongoose from "mongoose";
import cors from "cors";
import UserRoute from "./routes/UserRoute.js";

const app = express();
mongoose.connect('mongodb://localhost:27017/fullstack_db',{
    useNewUrlParser: true,
    useUnifiedTopology: true
});
const db = mongoose.connection;
db.on('error', (error) => console.log(error));
db.once('open', () => console.log('Database Connected...'));

app.use(cors());
app.use(express.json());
app.use(UserRoute);

app.listen(5000, ()=> console.log('Server up and running...'));

Đoạn code trên mình kết nối với cơ sở dữ liệu "fullstack_db"

Bạn không cần tạo cơ sở dữ liệu “fullstack_db”, cầy mangut sẽ tự động tạo cho bạn

Nếu bạn chưa cài đặt mongoDB trên máy tính của mình, vui lòng truy cập trang web chính thức. https. //mongodb. com, sau đó tải xuống phiên bản Community Server của mongoDB hoặc truy cập liên kết sau

https. //www. mongodb. com/thử/tải xuống/cộng đồng

#3. Lộ trình

Tạo một thư mục có tên là “tuyến đường”, sau đó tạo một tệp có tên là “UserRoute. js” trong thư mục đó

Giống như hình ảnh sau đây

Sau đó nhập mã sau vào "UserRoute. js" có trong thư mục "tuyến đường"

import express from "express";
import { 
    getUsers, 
    getUserById,
    saveUser,
    updateUser,
    deleteUser
} from "../controllers/UserController.js";

const router = express.Router();

router.get('/users', getUsers);
router.get('/users/:id', getUserById);
router.post('/users', saveUser);
router.patch('/users/:id', updateUser);
router.delete('/users/:id', deleteUser);

export default router;

#4. người mẫu

Tạo một thư mục có tên là “models”, sau đó tạo một tệp có tên là “UserModel. js” trong thư mục đó

Giống như hình ảnh sau đây

Sau đó nhập mã sau vào "UserRoute. js" có trong thư mục "models"

#5. Bộ điều khiển

Tạo một thư mục có tên là “bộ điều khiển”, sau đó tạo một tệp có tên là “UserController. js” trong thư mục đó

Giống như hình ảnh sau đây

Sau đó nhập đoạn mã sau vào "UserController. js" có trong thư mục "bộ điều khiển"

import User from "../models/UserModel.js";

export const getUsers = async (req, res) => {
    try {
        const users = await User.find();
        res.json(users);
    } catch (error) {
        res.status(500).json({message: error.message});
    }
}

export const getUserById = async (req, res) => {
    try {
        const user = await User.findById(req.params.id);
        res.json(user);
    } catch (error) {
        res.status(404).json({message: error.message});
    }
}

export const saveUser = async (req, res) => {
    const user = new User(req.body);
    try {
        const inserteduser = await user.save();
        res.status(201).json(inserteduser);
    } catch (error) {
        res.status(400).json({message: error.message});
    }
}

export const updateUser = async (req, res) => {
    try {
        const updateduser = await User.updateOne({_id:req.params.id}, {$set: req.body});
        res.status(200).json(updateduser);
    } catch (error) {
        res.status(400).json({message: error.message});
    }
}

export const deleteUser = async (req, res) => {
    try {
        const deleteduser = await User.deleteOne({_id:req.params.id});
        res.status(200).json(deleteduser);
    } catch (error) {
        res.status(400).json({message: error.message});
    }
}

Để đảm bảo ứng dụng chạy bình thường, hãy chạy ứng dụng bằng cách gõ lệnh sau vào terminal

npm init -y

Nếu suôn sẻ thì nó sẽ như hình sau

Đến đây là bạn đã tạo thành công một "backend"

Để đảm bảo backend chạy tốt, bạn có thể dùng POSTMAN hoặc REST Client extension trong VS Code để test

#6. Giao diện người dùng

Đối với front-end, tôi sẽ sử dụng React JS

Có nhiều cách để tạo project React js. Tuy nhiên, cách dễ nhất là "tạo ứng dụng phản ứng"

Mở một thiết bị đầu cuối mới và tạo một dự án phản ứng mới bằng cách gõ lệnh sau trong thiết bị đầu cuối

npm init -y

Và đảm bảo rằng bạn đang ở trong thư mục “fullstack” như hình sau

Nếu cài xong sẽ có thư mục "frontend" trong thư mục "fullstack"

Vì vậy, trong thư mục "fullstack" có hai thư mục, đó là. "backend" và "frontend" như hình bên dưới

Thư mục “phụ trợ” là thư mục ứng dụng đã được tạo trước đó bằng cách sử dụng nút. js express, trong khi “frontend” là thư mục ứng dụng được tạo bằng React JS

Tiếp theo, vào thư mục “frontend” bằng cách gõ lệnh sau trong terminal

npm init -y

Sau đó, cài đặt react-router-dom, axios và bulma bằng cách gõ lệnh sau trong terminal

npm init -y

Sau khi cài đặt hoàn tất và để đảm bảo mọi thứ diễn ra tốt đẹp, hãy gõ lệnh sau để chạy dự án

npm init -y

Nếu suôn sẻ thì nó sẽ như hình sau

#7. Các thành phần

Tạo một thư mục có tên là “các thành phần” bên trong thư mục “frontend/src”

Sau đó, tạo các tệp thành phần “UserList. js”, “Thêm người dùng. js” và “Người dùng chỉnh sửa. js” trong thư mục “frontend/src/components”

Giống như hình ảnh sau đây

Sau đó mở "Danh sách người dùng. js", sau đó gõ đoạn mã sau

npm init -y

Tiếp theo, mở “AddUser. js”, sau đó gõ đoạn mã sau

npm init -y

Tiếp theo, mở “EditUser. js”, sau đó gõ đoạn mã sau

npm init -y

#số 8. Ứng dụng. js

Mở "Ứng dụng. js" trong thư mục "frontend/src", sau đó thay đổi nó thành như sau

npm init -y

#9. mục lục. js

Mở “chỉ mục. js” trong thư mục “frontend/src”, sau đó thay đổi nó thành một cái gì đó như thế này

npm init -y

#10. thử nghiệm

#ĐỌC

Quay lại trình duyệt và truy cập URL sau

npm i express mongoose cors

Nếu suôn sẻ thì nó sẽ như hình sau

#TẠO RA

Click vào nút "Thêm mới" sẽ hiện ra form như sau

Nhập "Tên, Email" và "Giới tính", sau đó nhấp vào nút "LƯU"

Nếu thao tác chèn thành công sẽ hiển thị thêm dữ liệu vào danh sách người dùng như hình bên dưới

#CẬP NHẬT

Để cập nhật dữ liệu, bấm vào một trong các nút "Sửa", một biểu mẫu như sau sẽ xuất hiện

Thay đổi “Tên, Email” hoặc “Giới tính”, sau đó nhấp vào nút “CẬP NHẬT”

Nếu cập nhật thành công, bạn sẽ thấy thay đổi dữ liệu trong danh sách người dùng như hình bên dưới

#XÓA BỎ

Để xóa dữ liệu, hãy nhấp vào một trong các nút "Xóa"

Nếu xóa thành công, dữ liệu sẽ bị mất khỏi danh sách người dùng

Phần kết luận

Thảo luận hôm nay là làm thế nào để xây dựng một ứng dụng full-stack với một nút. js express backend, mongoDB và frontend sử dụng React JS

Bằng cách đó, bạn có ý tưởng về cách tạo một ứng dụng web hiện đại tách biệt phần phụ trợ và phần đầu

Làm cách nào để nút js hiển thị dữ liệu từ MongoDB?

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

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