Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Nhận toàn quyền truy cập vào Phát triển Web Full-Stack với Vue và hơn 60.000 tựa game khác, với bản dùng thử miễn phí 10 ngày của O'Reilly

Ngoài ra còn có các sự kiện trực tuyến trực tiếp, nội dung tương tác, tài liệu chuẩn bị chứng nhận, v.v.

Ghi chú của biên tập viên. Hướng dẫn ngăn xếp MERN này được cập nhật lần cuối vào ngày 2 tháng 12 năm 2022 để mở rộng và cập nhật phần giao diện người dùng của hướng dẫn. Bản cập nhật này bao gồm các phần Axios, React Hook và ủy quyền mới

Hướng dẫn này là tất cả về ngăn xếp MERN. Chúng tôi sẽ phác thảo những điều cơ bản về ngăn xếp MERN và trình bày cách sử dụng nó bằng cách phát triển một ứng dụng CRUD đơn giản từ đầu

Để hiển thị cách ngăn xếp MERN hoạt động, trước tiên chúng tôi sẽ định cấu hình phía máy chủ bằng cách kết nối Nút. js và Express. js sang MongoDB trên phần phụ trợ. Sau đó, chúng tôi sẽ tạo một số API. Sau đó, chúng tôi sẽ hướng dẫn bạn xây dựng giao diện người dùng, sử dụng React để xây dựng giao diện người dùng của chúng tôi. Khi cả hai hoàn tất, chúng tôi sẽ kết nối giao diện người dùng với phần phụ trợ

Nhảy ra đằng trước

  • Ngăn xếp MERN là gì?
  • Thiết lập máy chủ với Express. js và nút. js
    • khởi tạo gói npm
    • Cài đặt các phụ thuộc
    • Đặt điểm vào
  • Quản lý cơ sở dữ liệu với MongoDB
  • Xây dựng API RESTful với ngăn xếp MERN
    • Mô hình cơ sở dữ liệu
    • Xác thực và ủy quyền
  • Xây dựng giao diện người dùng
    • Thiết lập Tạo ứng dụng React
    • Thêm Bootstrap và Font Awesome vào ứng dụng React của bạn
  • Tại sao lại là Axios?
  • Tệp
    $ npm install
    $ npm run app
    
    4
    • Tạo tập tin thành phần
  • Các thành phần chức năng và React Hook
  • Thiết lập tuyến đường
    • Cập nhật tệp CSS
  • Thêm các thành phần tính năng của chúng tôi
  • Kết nối và chạy frontend với backend
  • Thử nghiệm ứng dụng ngăn xếp MERN của chúng tôi trong trình duyệt

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

Cụm từ MERN stack bao gồm các công nghệ sau cho phép phát triển ứng dụng nhanh hơn

  • MongoDB. Một chương trình cơ sở dữ liệu định hướng tài liệu đa nền tảng
  • Thể hiện. js. Một khung ứng dụng web cho Node. js
  • Phản ứng. Thư viện JavaScript để xây dựng giao diện người dùng
  • Nút. js. Môi trường thời gian chạy JavaScript, đa nền tảng, mã nguồn mở thực thi mã JavaScript bên ngoài trình duyệt

MongoDB, Express. js và Nút. js giúp bạn xây dựng phần phụ trợ của ứng dụng, trong khi React cung cấp năng lượng cho phần đầu. Nút. js và React được xếp hạng là hai công nghệ và khung web phổ biến nhất, theo khảo sát gần đây nhất dành cho nhà phát triển Stack Overflow. Và MongoDB cũng là một trong những cơ sở dữ liệu phổ biến nhất dành cho các nhà phát triển. Khoảng 16.535.063 trang web sử dụng React để tăng sức mạnh cho giao diện người dùng của họ. Bạn có thể dễ dàng cho rằng các công nghệ này ổn định và phổ biến như thế nào

Học MERN stack sẽ giúp bạn trở thành full-stack developer. Nhu cầu đối với các nhà phát triển ngăn xếp MERN cũng rất cao. Tuy nhiên, cần có thời gian để trở thành một nhà phát triển ngăn xếp MERN giỏi. Vì vậy, trước khi tìm hiểu các công nghệ như React hay Node. js, điều quan trọng là phải đảm bảo rằng các nguyên tắc cơ bản của bạn vững chắc. Rất nhiều nhà phát triển không thể trở thành nhà phát triển ngăn xếp MERN giỏi vì họ thiếu kiến ​​thức cơ bản về JavaScript

Nếu bạn là người học trực quan và có chút thời gian rảnh rỗi, hãy xem video hướng dẫn toàn diện về ngăn xếp MERN này

Thiết lập máy chủ với Express. js và nút. js

Bản trình diễn này được thiết kế để làm nổi bật thiết lập MERN. Mục tiêu là phát triển một dự án đơn giản với cấu trúc tốt nhất có thể để bạn có thể sử dụng nó như một bản soạn sẵn và nâng cao các dự án ngăn xếp MERN của bạn để đáp ứng các tiêu chuẩn ngành

Để bắt đầu hướng dẫn ngăn xếp MERN của chúng tôi, chúng tôi sẽ chỉ cho bạn cách thiết lập máy chủ với Express. js và nút. js

khởi tạo gói npm

Để tạo thư mục dự án, hãy nhập thư mục thông qua thiết bị đầu cuối, sau đó chạy

$ npm install
$ npm run app
5. Sau đó, nó sẽ hỏi bạn một số câu hỏi về tên gói, phiên bản, điểm vào, v.v.

Nhấn

$ npm install
$ npm run app
6 nếu bạn muốn giữ mặc định. Sau đó, bạn sẽ nhận được một cái gì đó như thế này

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Chọn

$ npm install
$ npm run app
7 và bạn đã sẵn sàng. Thao tác này sẽ tạo một tệp có tên
$ npm install
$ npm run app
8

Cài đặt các phụ thuộc

Tiếp theo, chúng tôi sẽ thêm một số phụ thuộc với

$ npm install
$ npm run app
9. Nhập hoặc sao chép lệnh trên và nhấn nút Enter. Bạn sẽ thấy một cái gì đó như thế này

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Đây là những gì chúng tôi nhận được trong đoạn mã trên

  • // default.json
    
    {
      "mongoURI":
        "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
    }
     /* Replace  with your database password */
    // db.js
    
    const mongoose = require('mongoose');
    const config = require('config');
    const db = config.get('mongoURI');
    
    const connectDB = async () => {
      try {
        mongoose.set('strictQuery', true);
        await mongoose.connect(db, {
          useNewUrlParser: true,
        });
    
        console.log('MongoDB is Connected...');
      } catch (err) {
        console.error(err.message);
        process.exit(1);
      }
    };
    
    module.exports = connectDB;
    
    0. Cho phép chúng tôi lấy dữ liệu trong suốt yêu cầu
  • // default.json
    
    {
      "mongoURI":
        "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
    }
     /* Replace  with your database password */
    // db.js
    
    const mongoose = require('mongoose');
    const config = require('config');
    const db = config.get('mongoURI');
    
    const connectDB = async () => {
      try {
        mongoose.set('strictQuery', true);
        await mongoose.connect(db, {
          useNewUrlParser: true,
        });
    
        console.log('MongoDB is Connected...');
      } catch (err) {
        console.error(err.message);
        process.exit(1);
      }
    };
    
    module.exports = connectDB;
    
    1. Là khuôn khổ chính của chúng tôi
  • // default.json
    
    {
      "mongoURI":
        "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
    }
     /* Replace  with your database password */
    // db.js
    
    const mongoose = require('mongoose');
    const config = require('config');
    const db = config.get('mongoURI');
    
    const connectDB = async () => {
      try {
        mongoose.set('strictQuery', true);
        await mongoose.connect(db, {
          useNewUrlParser: true,
        });
    
        console.log('MongoDB is Connected...');
      } catch (err) {
        console.error(err.message);
        process.exit(1);
      }
    };
    
    module.exports = connectDB;
    
    2. Được sử dụng để kết nối và tương tác với MongoDB
  • // default.json
    
    {
      "mongoURI":
        "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
    }
     /* Replace  with your database password */
    // db.js
    
    const mongoose = require('mongoose');
    const config = require('config');
    const db = config.get('mongoURI');
    
    const connectDB = async () => {
      try {
        mongoose.set('strictQuery', true);
        await mongoose.connect(db, {
          useNewUrlParser: true,
        });
    
        console.log('MongoDB is Connected...');
      } catch (err) {
        console.error(err.message);
        process.exit(1);
      }
    };
    
    module.exports = connectDB;
    
    3. Điều này cho phép bạn xác định các tham số mặc định cho ứng dụng của mình

Bây giờ, chúng tôi sẽ thêm gật đầu làm phụ thuộc

// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
4. Nếu bạn không muốn thêm phần này, bạn có thể bỏ qua nó - đó là tùy chọn. Cài đặt nó với
// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
5. Để sử dụng gật đầu, hãy thêm
// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
6 vào thẻ
// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
7 của bạn bên dưới tệp
$ npm install
$ npm run app
8

Nodemon là một tiện ích sẽ theo dõi mọi thay đổi trong nguồn của bạn và tự động khởi động lại máy chủ của bạn.

// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
9 là điểm đầu vào cho ứng dụng. Điều quan trọng nữa là xác định tập lệnh
$ npm install
$ npm run app
60 ở đây với
$ npm install
$ npm run app
61. Điều này sẽ xác định tập lệnh bắt đầu của ứng dụng

Sau đó,

$ npm install
$ npm run app
8 của bạn sẽ trông như thế này

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Đặt điểm vào

Bây giờ, hãy tạo một tệp có tên

// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
9 cho điểm vào của chúng tôi. Bạn có thể tạo cái này từ thư mục dự án bằng lệnh
$ npm install
$ npm run app
64 (trên macOS)

Sau đó, dán đoạn mã sau

$ npm install
$ npm run app
1

Sau đó, chạy lệnh

$ npm install
$ npm run app
65. Bạn sẽ thấy
$ npm install
$ npm run app
66. Bạn cũng có thể kiểm tra nó từ trình duyệt bằng cách mở trình duyệt và nhập
$ npm install
$ npm run app
67

Tại thời điểm này, nếu chúng tôi thay đổi bất cứ điều gì, chúng tôi sẽ cần khởi động lại máy chủ theo cách thủ công. Tuy nhiên, nếu chúng tôi thiết lập gật đầu, thì chúng tôi không phải khởi động lại nó mỗi lần. Nodemon sẽ theo dõi nếu có bất kỳ thay đổi nào và tự động khởi động lại máy chủ

Vì vậy, những gì bạn cần làm là thay đổi một chút đối với tập lệnh trong tệp

$ npm install
$ npm run app
8 của chúng tôi. Xem bên dưới

$ npm install
$ npm run app
6

Bây giờ, bạn có thể chạy dự án của mình bằng lệnh

$ npm install
$ npm run app
69. Nếu bạn gặp bất kỳ lỗi nào tại thời điểm này, hãy chạy các lệnh bên dưới

$ npm install
$ npm run app

Bạn sẽ thấy những thay đổi sau trong thiết bị đầu cuối của mình nếu mọi thứ suôn sẻ

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Quản lý cơ sở dữ liệu với MongoDB

Bây giờ, đã đến lúc thiết lập cơ sở dữ liệu MERN của chúng ta với MongoDB. Để đơn giản, chúng tôi sẽ sử dụng MongoDB Atlas. Đầu tiên, hãy tạo một tài khoản tại đây. Sau khi tạo tài khoản, bạn sẽ thấy như thế này

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Nhấp vào phần Dự án 0 (trên cùng bên trái) và bạn sẽ thấy nút Tạo dự án mới. Tạo một dự án và chọn dự án. Bây giờ, hãy nhấp vào nút Build a Cluster từ dự án bạn đã tạo. Nó sẽ cho bạn thấy tất cả các thông tin

Ở phía dưới, bạn sẽ thấy một phần có tên là Tên cụm, nhấp vào đó và nhập tên cho cơ sở dữ liệu, sau đó nhấn nút Tạo cụm. Sau hai đến ba phút, nếu mọi thứ suôn sẻ, bạn sẽ tìm thấy một cái gì đó như thế này

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Nhấp vào nút KẾT NỐI và điền vào biểu mẫu tên người dùng và mật khẩu cho cơ sở dữ liệu của bạn

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Bây giờ, chọn nút Tạo người dùng MongoDB. Bạn cũng có thể chọn địa chỉ IP hiện tại của mình hoặc một địa chỉ IP khác; . Bây giờ, nếu bạn làm theo nút KẾT NỐI hoặc nút Chọn phương thức kết nối, bạn sẽ thấy một số phương thức khác nhau. Chọn cho phù hợp

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Trong trường hợp này, hãy chọn phần Kết nối ứng dụng của bạn. Bây giờ, bạn sẽ nhận được liên kết cơ sở dữ liệu của mình, chúng tôi sẽ sử dụng liên kết này trong bước tiếp theo

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Thêm cơ sở dữ liệu vào dự án của chúng tôi

Cơ sở dữ liệu của chúng tôi đã sẵn sàng và chúng tôi cần thêm nó vào dự án của mình. Bên trong thư mục

$ npm install
$ npm run app
90, tạo một thư mục khác có tên là
// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
3 và tạo hai tệp có tên là
$ npm install
$ npm run app
92 và
$ npm install
$ npm run app
93

Thêm đoạn mã sau

// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;

Chúng tôi cần một chút thay đổi trong tệp

// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
9 của mình để kết nối với cơ sở dữ liệu. Cập nhật
// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
9 của bạn với cái này

$ npm install
$ npm run app
6

Bây giờ, bạn có thể chạy dự án bằng lệnh

$ npm install
$ npm run app
69. Bạn nên xem những điều sau đây

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Tuyệt vời. Cho đến nay, chúng tôi đang đi đúng hướng và cơ sở dữ liệu của chúng tôi đã được kết nối thành công. Bây giờ, đã đến lúc hoàn thành thiết lập tuyến đường và sau đó, chúng ta sẽ xem cách tạo API RESTful

Xây dựng API RESTful với ngăn xếp MERN

Để bắt đầu, hãy tạo một thư mục có tên

$ npm install
$ npm run app
97. Trong đó, tạo một thư mục khác có tên
$ npm install
$ npm run app
98, thư mục này sẽ chứa tất cả các API của chúng tôi. Trong thư mục
$ npm install
$ npm run app
98, tạo một tệp có tên
$ npm install
$ npm run app
10. Chúng tôi sẽ tạo một số API tại đây để hiển thị cách thức hoạt động của nó trong giây lát


Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Tìm hiểu thêm →


Bây giờ, cập nhật

$ npm install
$ npm run app
10 của bạn với đoạn mã sau

$ npm install
$ npm run app
9

Mô hình cơ sở dữ liệu

Để tương tác với cơ sở dữ liệu của chúng tôi, chúng tôi cần tạo một mô hình cho từng tài nguyên của mình. Vì vậy, hãy tạo một thư mục có tên là

$ npm install
$ npm run app
12 trong thư mục gốc và bên trong thư mục
$ npm install
$ npm run app
12, tạo một tệp có tên là
$ npm install
$ npm run app
14 và cập nhật nó bằng tệp này

$ npm install
$ npm run app
1

Tiếp theo, hãy chạy dự án để xem mọi thứ có ổn không vào thời điểm này và bạn có thể kiểm tra tất cả các API thông qua Postman. Điều quan trọng cần lưu ý là trước khi thử nghiệm API bằng Postman, bạn cần chạy dự án trước

Xác thực và ủy quyền

Xác thực và ủy quyền là những phần quan trọng của ứng dụng web. Xác thực là quá trình xác minh ai đó cho biết họ là ai. Và ủy quyền là phương pháp kiểm tra cấp độ truy cập của người dùng

Khi sử dụng một nút. js và React frontend, hầu hết thời gian, các nhà phát triển có xu hướng sử dụng JWT làm phương thức xác thực. JWT là viết tắt của JSON Web Tokens. JWT là các chuỗi được mã hóa và an toàn cho URL có thể chứa lượng dữ liệu không giới hạn

Trong hầu hết các trường hợp, giao diện người dùng React sẽ gửi JWT đến phần phụ trợ. Chương trình phụ trợ xác minh mã thông báo và nếu mã thông báo hợp lệ, chương trình phụ trợ sẽ thực hiện các hoạt động được yêu cầu. Hãy xem video dưới đây để tìm hiểu thêm về cách triển khai xác thực cho ứng dụng của bạn

Xây dựng giao diện người dùng

Càng xa càng tốt. Bây giờ chúng tôi đã thiết lập phần phụ trợ của mình, đã đến lúc chuyển sang phần giao diện người dùng của hướng dẫn ngăn xếp MERN này. Trong phần này, chúng ta sẽ sử dụng React để xây dựng giao diện người dùng. Chúng tôi sẽ sử dụng Tạo ứng dụng phản ứng để tạo thiết lập tệp ban đầu của chúng tôi

Chúng tôi cũng sẽ sử dụng webpack và Babel để đóng gói các mô-đun và biên dịch JavaScript tương ứng. Nếu bạn không biết rõ về webpack hoặc Babel, không vấn đề gì; . Chúng được định cấu hình sẵn và ẩn để bạn có thể tập trung vào mã

Chỉ cần tạo một dự án, và bạn đã sẵn sàng để bắt đầu. Bạn cũng sẽ cần bất kỳ phiên bản Node nào. js lớn hơn v8. 10 và bất kỳ phiên bản nào của npm lớn hơn v5. 6 được cài đặt trên máy phát triển cục bộ của bạn

Thiết lập Tạo ứng dụng React

Đặt bất kỳ thư mục nào bằng thiết bị đầu cuối nơi bạn muốn giữ tất cả các tệp của dự án này và chạy

$ npm install
$ npm run app
15 để lấy tệp thiết lập ban đầu

Bạn có thể thay thế

$ npm install
$ npm run app
16 bằng bất cứ thứ gì bạn muốn sử dụng làm tên dự án của mình. Ví dụ: tên dự án của tôi là
$ npm install
$ npm run app
17 và lệnh của tôi là
$ npm install
$ npm run app
18

Ghi chú. Tên dự án phải viết thường. Nếu mọi thứ suôn sẻ, thì bạn sẽ thấy một cái gì đó giống như hình ảnh sau đây, nơi bạn sẽ tìm thấy một số hướng dẫn cùng với các lệnh

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Trước khi sử dụng bất kỳ lệnh tích hợp nào, chúng ta cần vào bên trong thư mục dự án với

$ npm install
$ npm run app
19

Bây giờ chúng ta đang ở trong thư mục dự án, chúng ta có thể sử dụng các lệnh có sẵn đó. Nếu bạn đang sử dụng Sợi, hãy nhập

$ npm install
$ npm run app
30. Nếu bạn đang sử dụng npm, hãy sử dụng
$ npm install
$ npm run app
31

Để chạy ứng dụng ở chế độ phát triển, bạn có thể sử dụng bất kỳ lệnh nào ở trên và bạn sẽ thấy thông báo sau trong thiết bị đầu cuối của mình

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Bây giờ, hãy mở

$ npm install
$ npm run app
32 để xem nó trong trình duyệt. Trang này sẽ tự động tải lại nếu bạn thay đổi mã

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Bên trong thư mục dự án, cấu trúc tệp ban đầu của chúng tôi sẽ trông như thế này

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Thêm Bootstrap và Font Awesome vào ứng dụng React của bạn

Chúng tôi đã có tệp thiết lập ban đầu cho phần giao diện người dùng. Bây giờ, chúng ta có thể bắt đầu tích hợp backend với frontend của mình. Trước đó, tôi muốn thêm CDN của Bootstrap và Font Awesome vào dự án của mình

Mở tệp có tên

$ npm install
$ npm run app
33, nằm trong thư mục chung
$ npm install
$ npm run app
34 và thay thế mọi thứ bằng mã sau

$ npm install
$ npm run app
3

Frontend của chúng tôi sẽ có các tính năng sau

  1. Thêm, tạo hoặc lưu sách mới
  2. Hiển thị tất cả các sách chúng tôi đã lưu trữ trong cơ sở dữ liệu
  3. Hiển thị một cuốn sách duy nhất
  4. Cập nhật sách
  5. Xóa sách

Bây giờ, sử dụng lệnh sau để thêm một số phụ thuộc cần thiết

$ npm install
$ npm run app
9

Tại sao lại là Axios?

Axios là ứng dụng khách HTTP nhẹ dành cho Node. js và trình duyệt, tương tự như Fetch API. Axios là thư viện async/await dựa trên lời hứa dành cho mã không đồng bộ có thể đọc được. Chúng tôi có thể dễ dàng tích hợp nó với React và dễ dàng sử dụng trong bất kỳ khung giao diện người dùng nào. Chúng tôi sẽ gọi các API của mình thông qua Axios

Có nhiều lý do tại sao Axios được sử dụng rộng rãi. Một trong những lợi ích lớn nhất của Axios là khả năng tương thích ngược. Các trình duyệt cũ như IE11 cũng có thể dễ dàng chạy Axios vì gói phát hành

$ npm install
$ npm run app
35 bên trong

Axios cũng tự động xâu chuỗi tải trọng khi gửi yêu cầu. Tuy nhiên, khi bạn đang sử dụng Fetch API, điều quan trọng là bạn phải chuyển đổi tải trọng thành JSON

Tệp $ npm install $ npm run app 4

Tại thời điểm này, tệp

$ npm install
$ npm run app
8 của chúng ta phải giống (nhưng có thể khác) với mã bên dưới

// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
3

Tạo tập tin thành phần

Bên trong thư mục

$ npm install
$ npm run app
38 (
$ npm install
$ npm run app
39), tạo một thư mục khác có tên là
$ npm install
$ npm run app
90 và bên trong đó, tạo năm tệp khác nhau

  1. $ npm install
    $ npm run app
    
    91
  2. $ npm install
    $ npm run app
    
    92
  3. $ npm install
    $ npm run app
    
    93
  4. $ npm install
    $ npm run app
    
    94
  5. $ npm install
    $ npm run app
    
    95

Chúng tôi sẽ làm việc với năm tệp này một lát sau


Các bài viết hay khác từ LogRocket

  • Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
  • Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
  • Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
  • Chuyển đổi giữa nhiều phiên bản của Node
  • Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
  • Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
  • So sánh NestJS với. Thể hiện. js

Các thành phần chức năng và React Hook

Các thành phần chức năng phản ứng là một bổ sung tương đối mới hơn cho khung. Trước đó, chúng tôi chỉ có các thành phần dựa trên lớp. Một thành phần chức năng trong React về cơ bản là một hàm JavaScript trả về phần tử React hoặc JSX. Một thành phần chức năng có thể được viết bằng từ khóa thông thường hoặc chức năng mũi tên. Đạo cụ dựa trên đối số chức năng. Một thành phần chức năng chỉ có thể được sử dụng trên các tệp khác sau khi xuất chúng

$ npm install
$ npm run app
60

Chức năng hiển thị ở trên là một thành phần chức năng React hợp lệ. Trong hướng dẫn này, chúng ta sẽ sử dụng các thành phần chức năng của React. Để tìm hiểu sâu hơn về các thành phần chức năng của React, hãy xem bài viết này để tìm hiểu thêm

Trước phản ứng v16. 8, các nhà phát triển chỉ được phép quản lý trạng thái và các tính năng khác của React trong các thành phần dựa trên lớp. Trong phản ứng v16. 8, nhóm React đã giới thiệu Hook. Móc cho phép nhà phát triển quản lý mã và các tính năng khác của React bên trong một thành phần chức năng

Kiểm tra cheat sheet của chúng tôi để biết thêm thông tin về React Hooks

Thiết lập tuyến đường

Mở thư mục

$ npm install
$ npm run app
96 bên trong thư mục
$ npm install
$ npm run app
38 (
$ npm install
$ npm run app
98) và thay thế bằng mã sau

$ npm install
$ npm run app
61

Ở đây, chúng tôi định nghĩa tất cả các

$ npm install
$ npm run app
97. Đối với một định nghĩa đường dẫn cụ thể, thành phần tương ứng của nó sẽ được hiển thị. Chúng tôi chưa triển khai các tệp và thành phần này — chúng tôi vừa hoàn thành thiết lập đường dẫn

Cập nhật tệp CSS

Tiếp theo, cập nhật tệp CSS có tên là

// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
30 trong thư mục
$ npm install
$ npm run app
38 với mã sau

$ npm install
$ npm run app
62

Thêm các thành phần tính năng của chúng tôi

Bây giờ, đã đến lúc thêm các thành phần tính năng vào dự án ngăn xếp MERN của chúng tôi. Tệp

$ npm install
$ npm run app
91 của chúng tôi chịu trách nhiệm thêm, tạo hoặc lưu sách mới hoặc thông tin về sách

$ npm install $ npm run app 91

Vì vậy, hãy cập nhật

$ npm install
$ npm run app
91 với đoạn mã sau

$ npm install
$ npm run app
63

$ npm install $ npm run app 92

Thành phần

$ npm install
$ npm run app
92 sẽ chịu trách nhiệm hiển thị tất cả các sách chúng tôi đã lưu trữ trong cơ sở dữ liệu của mình. Cập nhật
$ npm install
$ npm run app
92 với mã này

$ npm install
$ npm run app
64

$ npm install $ npm run app 93

Ở đây, chúng tôi sử dụng một thành phần chức năng có tên là

$ npm install
$ npm run app
93, thành phần này lấy thông tin của một cuốn sách từ
$ npm install
$ npm run app
92 và tạo một thẻ cho mỗi cuốn sách. Viết đoạn mã sau để cập nhật tệp
$ npm install
$ npm run app
93 của bạn

$ npm install
$ npm run app
65

GHI CHÚ. Ở đây, tôi đã sử dụng cùng một

$ npm install
$ npm run app
602 cho mỗi cuốn sách, vì không phải lúc nào hình ảnh tương ứng của mỗi cuốn sách cũng có sẵn. Thay đổi nguồn hình ảnh và bạn cũng có thể sử dụng một hình ảnh khác nhau cho mỗi cuốn sách

Thành phần

$ npm install
$ npm run app
603 có một nhiệm vụ. nó hiển thị tất cả thông tin chúng tôi có về bất kỳ cuốn sách nào. Chúng tôi có cả hai nút
$ npm install
$ npm run app
604 và
$ npm install
$ npm run app
605 ở đây để truy cập

$ npm install
$ npm run app
66

$ npm install $ npm run app 95

$ npm install
$ npm run app
95, như tên gọi của nó, chịu trách nhiệm cập nhật thông tin của sách. Nút Chỉnh sửa sách sẽ kích hoạt thành phần này thực hiện. Sau khi nhấp vào Chỉnh sửa sách, chúng tôi sẽ thấy một biểu mẫu có thông tin cũ, chúng tôi sẽ có thể chỉnh sửa hoặc thay thế

$ npm install
$ npm run app
67

Kết nối và chạy frontend với backend

Chúng tôi vừa triển khai tất cả các thành phần của mình. Bây giờ, chúng tôi cần một chút thay đổi trong dự án phụ trợ phía máy chủ của chúng tôi

Nếu chúng tôi cố gắng gọi API phụ trợ của mình từ phần giao diện người dùng, nó sẽ báo lỗi

$ npm install
$ npm run app
68

Để giải quyết vấn đề này, chúng tôi cần cài đặt

$ npm install
$ npm run app
608 trong dự án phía máy chủ phụ trợ của chúng tôi. Chuyển đến thư mục dự án và chạy
$ npm install
$ npm run app
609

Bây giờ, hãy cập nhật

// default.json

{
  "mongoURI":
    "mongodb+srv://mern123:@mernatoz-9kdpd.mongodb.net/test?retryWrites=true&w=majority"
}
 /* Replace  with your database password */
// db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    mongoose.set('strictQuery', true);
    await mongoose.connect(db, {
      useNewUrlParser: true,
    });

    console.log('MongoDB is Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;
9, điểm vào của phụ trợ với đoạn mã sau

$ npm install
$ npm run app
69

Điều quan trọng nữa là bạn phải thêm dòng này,

$ npm install
$ npm run app
611. Phương thức
$ npm install
$ npm run app
612 cho phép Express đọc dữ liệu được gửi bằng yêu cầu
$ npm install
$ npm run app
613 hoặc
$ npm install
$ npm run app
614. Nó được sử dụng để nhận dạng các đối tượng đến dưới dạng các đối tượng JSON

Chạy frontend và backend

Thực hiện theo các bước bên dưới để chạy cả giao diện người dùng và phụ trợ của ví dụ ngăn xếp MERN của chúng tôi

Đầu tiên, chạy máy chủ (bên trong thư mục dự án)

$ npm install
$ npm run app
0

Nếu bạn gặp bất kỳ lỗi nào, hãy làm theo các lệnh bên dưới (bên trong thư mục dự án)

$ npm install
$ npm run app

Để chạy ứng dụng khách, hãy chạy lệnh bên dưới từ thư mục dự án giao diện người dùng

$ npm install
$ npm run app
2

Nếu bạn gặp lại lỗi, hãy làm theo các lệnh tương tự bên dưới

$ npm install
$ npm run app
3

Thử nghiệm ứng dụng ngăn xếp MERN của chúng tôi trong trình duyệt

Hãy kiểm tra mọi thứ trong trình duyệt. mở http. //máy chủ cục bộ. 3000 trong trình duyệt của bạn. Giờ đây, bạn có thể thêm sách, xóa sách, hiển thị danh sách sách và chỉnh sửa sách. Các tuyến đường sau đây nên thực hiện tương ứng

Thêm một cuốn sách mới

http. //máy chủ cục bộ. 3000/tạo sách

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Hiển thị danh sách sách

http. //máy chủ cục bộ. 3000/

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Hiển thị thông tin của bất kỳ cuốn sách nào

http. //máy chủ cục bộ. 3000/show-book/. Tôi

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Cập nhật thông tin sách

http. //máy chủ cục bộ. 3000/sửa-sách/. Tôi

Hướng dẫn phát triển web full stack 2022 với nodejs mongodb
Hướng dẫn phát triển web full stack 2022 với nodejs mongodb

Phần kết luận

Xin chúc mừng. Bạn đã hoàn thành thành công hướng dẫn ngăn xếp MERN này. Bạn có thể truy cập GitHub của tôi để xem các phần phía máy chủ và phía máy khách của hướng dẫn ngăn xếp MERN này. Bạn cũng có thể tìm thấy repo hoàn chỉnh cho ứng dụng mẫu ngăn xếp MERN của chúng tôi tại đây

Làm cách nào để tôi có thể trở thành nhà phát triển web toàn diện vào năm 2022?

Để trở thành nhà phát triển phần mềm fullstack, bạn cần học một hoặc hai điều về một hoặc hai điều . Bạn cần học cách tạo phụ trợ bằng PHP hoặc Javascript hoặc Java, cách tạo giao diện người dùng bằng HTML, CSS và JavaScript và cách viết một số SQL.

MongoDB trong ngăn xếp đầy đủ là gì?

Phát triển toàn bộ ngăn xếp đề cập đến việc phát triển phần mềm ứng dụng từ đầu đến cuối, bao gồm cả giao diện người dùng và giao diện người dùng sau . Mặt trước bao gồm giao diện người dùng và mặt sau đảm nhận logic nghiệp vụ và quy trình làm việc của ứng dụng.

NodeJS có phải là ngăn xếp đầy đủ không?

Cảm ơn Nút. js, các nhà phát triển JavaScript ngăn xếp đầy đủ có thể tận dụng tối đa lợi thế của lập trình không chặn và tạo các ứng dụng không đồng bộ hoàn toàn . Điều này cho phép các ứng dụng kết quả chạy đồng thời nhiều quy trình độc lập.

MongoDB trong ngăn xếp MERN là gì?

MERN là viết tắt của MongoDB, Express, React, Node, sau bốn công nghệ chính tạo nên ngăn xếp. MongoDB — cơ sở dữ liệu tài liệu . Thể hiện(. js) — Nút. khung web js. Phản ứng(. js) — một khung JavaScript phía máy khách.