Ví dụ đơn giản về đăng ký người dùng, đăng nhập và hành động CRUD với API phần còn lại phụ trợ bằng cách sử dụng mongoDB, Nodejs[Express. js] và cầy mangut, xác thực bằng mã thông báo JWT cũng như phân trang và giao diện người dùng bằng cách sử dụng phản ứng. js và gọi api material-ui với axios
Dự án này là một Dự án ReactJS đơn giản thể hiện như sau
phụ trợ- API để đăng ký và đăng nhập người dùng
- API sử dụng mà người dùng đã đăng nhập có thể thêm, chỉnh sửa và cập nhật sản phẩm của nó
- API phân trang để cung cấp danh sách sản phẩm đã thêm của người dùng cụ thể
- Xác thực mã thông báo JWT
- Tạo một Thành phần trong React và tạo định tuyến
- Sử dụng biểu mẫu tạo giao diện người dùng phản ứng và vật liệu để đăng nhập người dùng và có thể đăng ký người dùng mới
- Thêm, chỉnh sửa, xóa và phân trang sản phẩm, bạn cũng có thể tìm kiếm sản phẩm theo tên
- Thực hiện cuộc gọi HTTP bằng Axios
- Gọi api nhiều phần với tải lên hình ảnh
điều kiện tiên quyết
Dưới đây lưu ý những thứ bạn cần cài đặt để chạy dự án này trong hệ thống của bạn
- Nút. js
- NPM
- MongoDB
để thiết lập
Sao chép hoặc tải xuống kho lưu trữ này
cd Registration-and-Login-using-MERN-stack/backend
npm install
cd Registration-and-Login-using-MERN-stack/frontend
npm install
Chạy
Để chạy máy chủ nút
cd Registration-and-Login-using-MERN-stack/backend
node server.js
Để chạy giao diện người dùng phản ứng
cd Registration-and-Login-using-MERN-stack/frontend
- ________số 8
Đừng quên để lại một ngôi sao. 🤗
Một thẻ đã tồn tại với tên chi nhánh được cung cấp. Nhiều lệnh Git chấp nhận cả tên thẻ và tên nhánh, vì vậy việc tạo nhánh này có thể gây ra hành vi không mong muốn. Bạn có chắc chắn muốn tạo nhánh này không?
MongoDB là Cơ sở dữ liệu NoSQL và nó lưu trữ thông tin ở định dạng JSON. Nó là DB thường được sử dụng cho Node JS. MongoDb giúp phát triển nhanh và đơn giản về mặt cú pháp. Thật dễ dàng để thay đổi và bảo trì
Bạn có thể Cài đặt MongoDB [cho Ubuntu] từ đây. Cài đặt_MongoDB_Ubuntu
Bạn có thể Cài đặt MongoDB [dành cho Linux Mint - Sylvia] từ đây. Cài đặt_MongoDB_Sylvia
Bạn có thể kiểm tra, nếu mongoDb đã được cài đặt trong hệ thống của bạn bằng cách gõ lệnh này trong thiết bị đầu cuối của bạn
Bạn có thể tìm thấy đường dẫn của mongoDB được cài đặt trong hệ thống của mình thông qua. $ which mongod
Bạn có thể bắt đầu mongoDB thông qua. cd Registration-and-Login-using-MERN-stack/backend
0
Trong trường hợp có bất kỳ lỗi nào khi chạy mongoDB, trước tiên bạn có thể chạy lệnh này. cd Registration-and-Login-using-MERN-stack/backend
1 và sau đó chạy lại lệnh. cd Registration-and-Login-using-MERN-stack/backend
2
Bạn có thể xem danh sách các cơ sở dữ liệu thông qua. cd Registration-and-Login-using-MERN-stack/backend
3
Tạo cơ sở dữ liệu mới bằng cách gõ. cd Registration-and-Login-using-MERN-stack/backend
4 [trong đó nodeauth ở đây là tên của Cơ sở dữ liệu]
Tạo Bộ sưu tập mới cho cd Registration-and-Login-using-MERN-stack/backend
5 DB. cd Registration-and-Login-using-MERN-stack/backend
6
Bạn có thể xem danh sách các bộ sưu tập thông qua. cd Registration-and-Login-using-MERN-stack/backend
7
Bạn có thể CHÈN vào DB thông qua. $ which mongod
0
Để tìm tất cả các Bản ghi của Bộ sưu tập. $ which mongod
1 hoặc $ which mongod
2
Để cập nhật Bản ghi. $ which mongod
3
Để xóa Bản ghi. $ which mongod
4
Nếu bạn muốn tìm hiểu sâu về mongoDB, hãy truy cập liên kết này mongoDB
Các mô-đun nút cần cài đặt Trước khi chuyển sang Phần 2
Cài đặt tất cả các mô-đun được đề cập trong gói. json bằng cách chạy lệnh này
npm install [package-name] --save
Nếu bạn muốn có kiến thức chi tiết về các mô-đun nút này, hãy truy cập liên kết này npmJS
Phần 2 [Thiết lập ứng dụng và phần mềm trung gian]
Trong phần này, chúng tôi sẽ thiết lập ứng dụng và hệ thống phần mềm trung gian của mình bằng cách thực hiện theo các bước sau
Yêu cầu tất cả các mô-đun đã cài đặt trong tệp
$ which mongod
5 của bạnSử dụng tất cả các mô-đun cần thiết trong tệp
$ which mongod
5 của bạn
Phần 3 [Chế độ xem và Bố cục]
Trong Phần này, chúng ta sẽ Thiết lập Chủ đề Bootstrap và cập nhật chế độ xem bằng cách thay đổi nội dung trong bố cục. ngọc bích, chỉ số. ngọc bích trong Thư mục $ which mongod
7
Nếu bạn muốn tìm hiểu sâu về Jade Templating và Express Multiple Views Setup, thì hãy xem qua dự án này
Xây dựng trang web nhanh và thiết lập mẫu Jade
Chúng tôi sẽ thêm một số Mẫu Ngọc mới cho Trang Đăng ký và Đăng nhập
Phần 4 [Đăng ký người dùng]
Trong phần này, chúng tôi sẽ đăng ký người dùng mới bằng cách sử dụng mô hình cầy mangut và lưu dữ liệu của họ trong mongodb và xác thực dữ liệu biểu mẫu đăng ký bằng trình xác thực nhanh. Các mô-đun được sử dụng trong phần này được mô tả ngắn gọn như
$ which mongod
8. chuyển phát nhanh. phần mềm trung gian js để xác thực$ which mongod
9. Multer là một nút. js để xử lý dữ liệu nhiều phần/biểu mẫu, phần mềm này chủ yếu được sử dụng để tải tệp lêncd Registration-and-Login-using-MERN-stack/backend
00. Triển khai flash đơn giản nhất cho Express để hiển thị thông báo
Nếu bạn muốn biết chi tiết về các mô-đun này, chỉ cần truy cập liên kết này. npmJS
Chúng tôi đang xây dựng Mô hình Mongoose để xác định Lược đồ đăng ký người dùng mới trong phần này
Phần 5 [Mã hóa mật khẩu bằng Bcrypt]
Trong phần này, chúng ta sẽ sử dụng Bcrypt để mã hóa mật khẩu
Bcrypt tạo muối và hàm băm trên các lệnh gọi hàm riêng biệt hoặc tự động tạo muối và hàm băm để tạo hàm băm của mật khẩu an toàn hơn thay vì lưu trữ mật khẩu thực trong cơ sở dữ liệu
Cài đặt Bcrypt bằng lệnh này
cd Registration-and-Login-using-MERN-stack/backend
01
Để biết thông tin chi tiết, hãy truy cập liên kết này. npmJS
Phần 6 [Xác thực người dùng bằng Hộ chiếu]
Trong Phần này, chúng ta sẽ so sánh mật khẩu do người dùng nhập với mật khẩu băm bcrypt và xác thực người dùng, sau đó duy trì phiên cho người dùng đã đăng nhập hiện tại thông qua tuần tự hóa hộ chiếu
Passport là phần mềm trung gian xác thực cho Node. js. Cực kỳ linh hoạt và theo mô-đun, Passport có thể được đưa vào bất kỳ ứng dụng web dựa trên Express nào một cách kín đáo. Một bộ chiến lược toàn diện hỗ trợ xác thực bằng tên người dùng và mật khẩu, Facebook, Twitter, v.v.