Hôm nay, chúng ta sẽ tìm hiểu cách triển khai Xác thực mật khẩu email đầy đủ trong React bằng cách tận dụng MongoDB Realm bằng cách nhập một dòng mã phía máy chủ
Thiết lập ứng dụng React của bạn
- Hãy tạo một ứng dụng React hoàn toàn mới. Khởi chạy thiết bị đầu cuối của bạn và thực hiện lệnh sau, trong đó “expengo” sẽ là tên của ứng dụng của chúng tôi
npx create-react-app expengo
Hãy chắc chắn rằng bạn có nút. js & npm được cài đặt trên máy của bạn
- Hãy cài đặt Realm-web vào ứng dụng React của chúng ta
MongoDB Realm Web SDK cho phép các ứng dụng dựa trên trình duyệt truy cập dữ liệu được lưu trữ trong MongoDB Atlas và tương tác với các dịch vụ MongoDB Realm như Chức năng, xác thực & GraphQL
npm install realm-web
Hãy cài đặt một vài gói npm khác để làm cho cuộc sống của chúng ta dễ dàng hơn
- React-router-dom để quản lý các yêu cầu liên quan đến điều hướng trong ứng dụng của chúng tôi, hãy chạy
npm install react-router-dom
2. UI UI để giúp chúng tôi xây dựng các thành phần đẹp mà không cần viết nhiều CSS, hãy chạy
npm install @mui/material @emotion/styled @emotion/react
Bây giờ, hãy tạo 3 thư mục mới với các tệp sau như bên dưới
- /src/trang
- /src/trang/Trang chủ. trang. js
- /src/pages/PrivateRoute. trang. js
- /src/trang/Đăng nhập. trang. js
- /src/pages/Đăng ký. trang. js
- /src/bối cảnh
- /src/bối cảnh/người dùng. định nghĩa bài văn. js
- /src/vương quốc
- /src/vương quốc/hằng số. js
Hãy mở thư mục expengo này trong trình chỉnh sửa mã của chúng tôi, nếu mọi thứ hoạt động tốt, thư mục của chúng tôi sẽ có cấu trúc sau
├── README.md
└──node_modules/
├── …
├── package-lock.json
├── package.json
└── public/
├── …
└──src/
└──contexts/
├──user.context.js
└──pages/
├──Home.page.js
├──PrivateRoute.page.js
├──Login.page.js
├──Signup.page.js
└── realm/
├──constants.js
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js
Kết nối Ứng dụng React của bạn với Realm và xử lý việc quản lý người dùngTrong phần này, chúng tôi sẽ tạo các chức năng & thành phần React trong ứng dụng của mình để cung cấp cho người dùng khả năng Đăng nhập, Đăng ký và Đăng xuất
- Sao chép ID ứng dụng Realm của bạn
Thiết lập MongoDB
Để bắt đầu, chúng tôi cần đăng nhập hoặc đăng ký vào tài khoản MongoDB của mình và làm theo tùy chọn áp dụng cho chúng tôi
Đối với một tài khoản mới [Đăng ký]
Trước tiên, chúng tôi cần trả lời một số câu hỏi để giúp MongoDB trợ giúp thiết lập tài khoản của chúng tôi. Sau đó bấm vào Kết thúc
Chọn Chia sẻ làm loại cơ sở dữ liệu
Nhấp vào Tạo để thiết lập một cụm. Điều này đôi khi có thể mất thời gian để thiết lập
Tiếp theo, chúng ta cần tạo một người dùng để truy cập cơ sở dữ liệu bên ngoài bằng cách nhập Tên người dùng, Mật khẩu rồi nhấp vào Tạo người dùng. Chúng tôi cũng cần thêm địa chỉ IP của mình để kết nối an toàn với cơ sở dữ liệu bằng cách nhấp vào nút Thêm địa chỉ IP hiện tại của tôi. Sau đó bấm vào Kết thúc và Đóng để lưu thay đổi
Khi lưu các thay đổi, chúng ta sẽ thấy màn hình Triển khai cơ sở dữ liệu, như hình bên dưới
Đối với tài khoản hiện tại [Đăng nhập]
Nhấp vào menu thả xuống dự án và nhấp vào nút Dự án mới
Nhập
{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
2 làm tên dự án, nhấp vào Tiếp theo rồi nhấp vào Tạo dự ánNhấp vào Xây dựng cơ sở dữ liệu
Chọn Chia sẻ làm loại cơ sở dữ liệu
Nhấp vào Tạo để thiết lập một cụm. Điều này đôi khi có thể mất thời gian để thiết lập
Tiếp theo, chúng ta cần tạo một người dùng để truy cập cơ sở dữ liệu bên ngoài bằng cách nhập Tên người dùng, Mật khẩu rồi nhấp vào Tạo người dùng. Chúng tôi cũng cần thêm địa chỉ IP của mình để kết nối an toàn với cơ sở dữ liệu bằng cách nhấp vào nút Thêm địa chỉ IP hiện tại của tôi. Sau đó bấm vào Kết thúc và Đóng để lưu thay đổi
Khi lưu các thay đổi, chúng ta sẽ thấy màn hình Triển khai cơ sở dữ liệu, như hình bên dưới
Đang tải dữ liệu mẫu
Tiếp theo, chúng ta cần điền dữ liệu mẫu của người dùng vào cơ sở dữ liệu của mình. Để thực hiện việc này, hãy nhấp vào nút Duyệt bộ sưu tập
Bấm vào Thêm dữ liệu của riêng tôi, nhập
{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
3 và {
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
4 làm cơ sở dữ liệu và tên bộ sưu tập, rồi bấm vào TạoTiếp theo, chúng ta cần chèn những dữ liệu mẫu này
{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Để thực hiện việc này, nhấp vào nút Chèn Tài liệu, điền các thông tin chi tiết ở trên và nhấp vào Chèn để lưu
Tạo và cấu hình ứng dụng MongoDB Realm
Với cơ sở dữ liệu của chúng tôi được điền, chúng tôi cần tạo các chức năng không có máy chủ để thực hiện Tạo, Đọc, Cập nhật và Xóa [CRUD] trên cơ sở dữ liệu của chúng tôi. Để thực hiện việc này, hãy chọn tab Vương quốc, nhấp vào Xây dựng ứng dụng của riêng bạn. Sau đó bấm vào Tạo ứng dụng Realm để thiết lập ứng dụng của chúng tôi
MongoDB Realm cũng cung cấp các mẫu mà chúng ta có thể sử dụng để xây dựng ứng dụng của mình một cách nhanh chóng. Đối với hướng dẫn này, chúng tôi sẽ xây dựng từ đầu
Tiếp theo, chúng ta cần thiết lập quyền và quy tắc cho các chức năng của mình. Để thực hiện việc này, hãy đóng hướng dẫn bật lên, nhấp vào Quy tắc, chọn ReacRealmCol và nhấp vào Cấu hình bộ sưu tập
MongoDB Realm lưu và triển khai
Khi đã xong, MongoDB Realm sẽ hiển thị cho chúng ta một tiện ích minh họa khái niệm Lưu và Triển khai
Khi viết một chức năng không có máy chủ, nhấp vào Lưu sẽ tạo một bản nháp phát triển mà chúng tôi có thể kiểm tra và sử dụng xung quanh. Đồng thời, Deploy công khai các thay đổi của chúng ta để ứng dụng khác sử dụng [React. js trong trường hợp của chúng tôi]
Nhấn Next rồi Got it để tiếp tục
Tiếp theo, chúng ta cần cấp quyền Đọc và Viết cho chức năng của mình rồi Lưu
Tiếp theo, điều hướng đến tab Xác thực, nhấp vào Cho phép người dùng đăng nhập ẩn danh, bật tính năng này và Lưu bản nháp
MongoDB Realm cũng cung cấp một số tùy chọn xác thực mà chúng ta có thể khám phá. Đối với hướng dẫn này, chúng tôi sẽ sử dụng tùy chọn ẩn danh
Tạo các hàm serverless trên MongoDB Realm
Nhận tất cả người dùng Chức năng không có máy chủ
Với việc cấu hình xong, bây giờ chúng ta có thể tạo một hàm serverless trả về danh sách người dùng. Để thực hiện việc này, hãy điều hướng đến tab Chức năng, nhấp vào Tạo chức năng mới và nhập
{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
5 làm tên hàmTiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau
exports = function[arg]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
return collection.find[{}];
};
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên thực hiện như sau
- Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu
3 và bộ sưu tập{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
4{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
- Trả về danh sách các tài liệu trong bộ sưu tập
Tiếp theo, chúng ta có thể kiểm tra chức năng của mình bằng cách nhấp vào nút Run để xem danh sách người dùng
Cuối cùng, chúng ta cần sao chép
{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
8 của bất kỳ người dùng nào đã trả lại và lưu nó ở đâu đó; . Sau đó nhấp vào Lưu bản nháp để tạo bản nháp triển khai cho chức năng của chúng tôiNhận chức năng không có máy chủ của người dùng
Để thực hiện việc này, hãy nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập
{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
9 làm tên hàmTiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau
exports = function[arg]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
return collection.findOne[{_id: BSON.ObjectId[arg]}];
};
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên thực hiện như sau
- Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu
3 và bộ sưu tập{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
4{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
- Trả về một người dùng duy nhất bằng cách tìm nó bằng
8 của nó. Vì MongoDB lưu tài liệu trong BSON, chúng tôi cần phân tích cú pháp{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
3 dưới dạng BSON bằng cách sử dụngexports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.find[{}]; };
4exports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.find[{}]; };
Để kiểm tra chức năng của chúng tôi, hãy điều hướng đến tab Bảng điều khiển, thay thế
exports = function[arg]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
return collection.find[{}];
};
5 trong chức năng xuất bằng {
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
8 của người dùng mà chúng tôi đã sao chép trước đó và sau đó nhấp vào ChạyCuối cùng, chúng ta cần lưu chức năng của mình bằng cách nhấp vào nút Lưu bản nháp
Chỉnh sửa chức năng không có máy chủ của người dùng
Để làm điều này, chúng ta cần làm theo các bước tương tự như trên
Đầu tiên, nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập ____14_______7 làm tên hàm
Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau
exports = function[id, name, location, title]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let updated = collection.findOneAndUpdate[
{_id: BSON.ObjectId[id]},
{ $set: { "name": name, "location": location, "title": title } },
{ returnNewDocument: true }
]
return updated;
};
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên thực hiện như sau
- Sửa đổi hàm để chấp nhận các đối số
8,exports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.find[{}]; };
9,exports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.find[{}]; };
0 vàexports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.findOne[{_id: BSON.ObjectId[arg]}]; };
1exports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.findOne[{_id: BSON.ObjectId[arg]}]; };
- Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu
3 và bộ sưu tập{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
4{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
- Tạo một biến
4 để tìm tài liệu trước ngàyexports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.findOne[{_id: BSON.ObjectId[arg]}]; };
8, cập nhật các trường bộ sưu tập và đặt cờ{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
6 để trả về tài liệu đã cập nhậtexports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.findOne[{_id: BSON.ObjectId[arg]}]; };
Tiếp theo, chúng ta có thể kiểm tra chức năng của mình bằng cách điều hướng đến tab Bảng điều khiển, thay thế
exports = function[arg]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
return collection.find[{}];
};
5 trong hàm xuất bằng các đối số được yêu cầu [_id, tên, vị trí và tiêu đề], nhấp vào Chạy, sau đó Lưu bản nhápTạo chức năng Serverless người dùng
Để làm điều này, chúng ta cần làm theo các bước tương tự như trước
Đầu tiên, nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập ____19_______8 làm tên hàm
Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau
exports = function[name, location, title]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let newUser = collection.insertOne[{"name": name, "location": location, "title": title}]
return newUser;
};
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên thực hiện như sau
- Sửa đổi hàm để chấp nhận các đối số
9,exports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.find[{}]; };
0 vàexports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.findOne[{_id: BSON.ObjectId[arg]}]; };
1exports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.findOne[{_id: BSON.ObjectId[arg]}]; };
- Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu
3 và bộ sưu tập{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
4{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
- Tạo người dùng mới bằng cách chèn đối số và trả về người dùng
Tiếp theo, chúng ta có thể kiểm tra chức năng của mình bằng cách điều hướng đến tab Bảng điều khiển, thay thế
exports = function[arg]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
return collection.find[{}];
};
5 trong hàm xuất bằng các đối số được yêu cầu [tên, vị trí và tiêu đề], nhấp vào Chạy, sau đó Lưu bản nhápXóa chức năng không có máy chủ của người dùng
Để làm điều này, chúng ta cần làm theo các bước tương tự như trước
Đầu tiên, nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập ____28_______5 làm tên hàm
Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau
exports = function[id]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}]
return deleteUser;
};
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên thực hiện như sau
- Sửa đổi chức năng để chấp nhận một đối số
- Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu
3 và bộ sưu tập{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
4{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
- Tạo một biến
5 để xóa bởiexports = function[id, name, location, title]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let updated = collection.findOneAndUpdate[ {_id: BSON.ObjectId[id]}, { $set: { "name": name, "location": location, "title": title } }, { returnNewDocument: true } ] return updated; };
8{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
Tiếp theo, chúng ta có thể kiểm tra chức năng của mình bằng cách điều hướng đến tab Bảng điều khiển, thay thế
exports = function[arg]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
return collection.find[{}];
};
5 trong hàm xuất bằng đối số được yêu cầu, nhấp vào Chạy, sau đó Lưu bản nhápTriển khai các chức năng serverless
Để bắt đầu sử dụng các chức năng serverless trong ứng dụng của mình, chúng ta cần triển khai chúng. Để thực hiện việc này, nhấp vào nút Xem lại bản nháp & triển khai, cuộn xuống và sau đó nhấp vào Triển khai
Chúng tôi sẽ nhận được lời nhắc hiển thị trạng thái triển khai của chúng tôi
Cuối cùng. Tích hợp với React. js
Để tích hợp MongoDB Realm trong ứng dụng của chúng tôi, chúng tôi cần cài đặt các phụ thuộc với
npm i realm-web
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
exports = function[name, location, title]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let newUser = collection.insertOne[{"name": name, "location": location, "title": title}]
return newUser;
};
1 là để truy cập MongoDB Realm từ trình duyệt webThiết lập biến môi trường
Trước tiên, chúng ta cần tạo một tệp
exports = function[name, location, title]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let newUser = collection.insertOne[{"name": name, "location": location, "title": title}]
return newUser;
};
2 trong thư mục gốc của dự án và trong tệp này, hãy thêm đoạn mã bên dướiREACT_APP_REALM_APP_ID=
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Để lấy ID ứng dụng Realm của chúng tôi, chúng tôi cần nhấp vào biểu tượng sao chép như hình bên dưới
Thiết lập Vương quốc MongoDB
Tiếp theo, chúng ta cần tạo một thư mục
exports = function[name, location, title]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let newUser = collection.insertOne[{"name": name, "location": location, "title": title}]
return newUser;
};
3 trong thư mục exports = function[name, location, title]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let newUser = collection.insertOne[{"name": name, "location": location, "title": title}]
return newUser;
};
4, và trong thư mục này, tạo tệp exports = function[name, location, title]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let newUser = collection.insertOne[{"name": name, "location": location, "title": title}]
return newUser;
};
5 và thêm đoạn mã bên dướinpm start
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên thực hiện như sau
- Nhập các phụ thuộc cần thiết
- Tạo một biến để lưu trữ Realm App ID
- Tạo và xuất một phiên bản của MongoDB Realm và chuyển ID ứng dụng. Bang
6 ở phía trước củaexports = function[name, location, title]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let newUser = collection.insertOne[{"name": name, "location": location, "title": title}] return newUser; };
7 yêu cầu trình biên dịch loại bỏ lỗi ràng buộc không null [Có nghĩa là tham số không được rỗng hoặc không xác định]exports = function[name, location, title]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let newUser = collection.insertOne[{"name": name, "location": location, "title": title}] return newUser; };
- Tạo và xuất loại thông tin xác thực mà chúng tôi sẽ sử dụng cho ứng dụng này. Chúng tôi định cấu hình tùy chọn xác thực này trước đó
Nhận tất cả người dùng
Để có được tất cả người dùng, chúng ta cần tạo một giao diện để mô tả các thuộc tính phản hồi. Để làm điều này, chúng ta cần tạo một thư mục
exports = function[name, location, title]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let newUser = collection.insertOne[{"name": name, "location": location, "title": title}]
return newUser;
};
8 trong thư mục exports = function[name, location, title]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let newUser = collection.insertOne[{"name": name, "location": location, "title": title}]
return newUser;
};
4, và trong thư mục này, tạo tệp exports = function[id]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}]
return deleteUser;
};
0 và thêm đoạn mã bên dướinpm start
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tái bút. Dấu hỏi phía trước _id cho TypeScript biết rằng thuộc tính này là tùy chọn vì MongoDB tự động tạo nó
Tiếp theo, chúng ta cần sửa đổi
exports = function[id]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}]
return deleteUser;
};
1 bằng cách cập nhật nó với đoạn trích bên dướinpm start
2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên thực hiện như sau
- Nhập giao diện
2,exports = function[id]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}] return deleteUser; };
3 vàexports = function[id]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}] return deleteUser; };
4exports = function[id]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}] return deleteUser; };
- Tạo các biến trạng thái để quản lý danh sách người dùng
- Tạo một hàm
5 bên trong hookexports = function[id]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}] return deleteUser; };
6 để xác thực ứng dụng của chúng ta bằng cách sử dụngexports = function[id]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}] return deleteUser; };
4 đã nhập, lấy danh sách người dùng bằng cách truy cập hàm serverlessexports = function[id]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}] return deleteUser; };
5 mà chúng ta đã tạo trước đó, sau đó cập nhật trạng thái{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
9. Tái bút. Chức năng không có máy chủ [getAllUsers trong trường hợp của chúng tôi] được gọi phải giống với chức năng được xác định trên MongoDB Realmexports = function[id]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}] return deleteUser; };
- Cập nhật đánh dấu để hiển thị danh sách người dùng
Ứng dụng hoàn chỉnh. tsx
npm start
3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tạo người dùng
Để tạo người dùng, trước tiên chúng ta phải sửa đổi
exports = function[id]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}]
return deleteUser;
};
1 bằng cách tạo biến trạng thái để quản lý giá trị trả về khi người dùng được tạo. Chúng ta cũng cần thêm trạng thái dưới dạng phụ thuộc vào móc exports = function[id]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}]
return deleteUser;
};
6; . Cuối cùng, chúng ta cần cập nhật thành phần npm i realm-web
2 bằng hàm trạng thái để cập nhật giá trịnpm start
4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tái bút. TypeScript sẽ phàn nàn về thành phần
npm i realm-web
3 không có thuộc tính setUserValue. Chúng tôi sẽ khắc phục điều nàyTiếp theo, điều hướng đến tệp
npm i realm-web
4 bên trong thư mục npm i realm-web
5, cập nhật giao diện và tạo người dùngnpm start
5Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên thực hiện như sau
- Nhập các phụ thuộc cần thiết
- Sửa đổi chức năng
6 để xác thực ứng dụng của chúng tôi bằng cách sử dụngnpm i realm-web
4 đã nhập. Tạo người dùng bằng cách truy cập chức năng serverlessexports = function[id]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}] return deleteUser; };
8 mà chúng tôi đã tạo trước đó, chuyển các đối số bắt buộc [tên, vị trí và tiêu đề], sau đó cập nhật trạng thái biểu mẫu vàexports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.findOne[{_id: BSON.ObjectId[arg]}]; };
9npm i realm-web
Chỉnh sửa người dùng
Để chỉnh sửa người dùng, trước tiên chúng tôi phải sửa đổi
exports = function[id]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}]
return deleteUser;
};
1 bằng cách tạo một biến trạng thái để quản lý {
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
8 của người dùng mà chúng tôi muốn chỉnh sửa. Chúng tôi cũng đã cập nhật sự kiện REACT_APP_REALM_APP_ID=
2 để cập nhật biến trạng thái và chuyển nó dưới dạng đạo cụ cho thành phần npm i realm-web
2npm start
6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tiếp theo, chúng ta cần điền vào biểu mẫu của mình khi nhấp vào nút Chỉnh sửa. Để làm điều này, hãy mở
npm i realm-web
4 và cập nhật như hình bên dướinpm start
7Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên thực hiện như sau
- Nhập các phụ thuộc cần thiết
- Sửa đổi giao diện và đạo cụ để bao gồm
5REACT_APP_REALM_APP_ID=
- Sử dụng
6 để kiểm tra có điều kiện xem nó có đang chỉnh sửa hay tạo hay không, lấy thông tin chi tiết về người dùng đã chọn bằng cách sử dụng chức năng không có máy chủ củaexports = function[id]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}] return deleteUser; };
9, sau đó cập nhật các giá trị của biểu mẫu. Hàm{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
9 cũng yêu cầu chúng tôi chuyển đổi{ "name": "daniel mark" "location": "new york" "title": "software engineer" } { "name": "clara patrick" "location": "lisbon" "title": "data engineer" }
5 thành chuỗi bằng hàmREACT_APP_REALM_APP_ID=
00npm start
- Dọn dẹp hiệu ứng bằng cách cập nhật trạng thái biểu mẫu thành một chuỗi trống
Tiếp theo, chúng ta cần cập nhật chức năng
npm i realm-web
6 để bao gồm cập nhật thông tin chi tiết của người dùng bằng cách kiểm tra có điều kiện xem đó có phải là hành động cập nhật hay không. Tiếp theo, chúng ta cần gọi hàm exports = function[arg]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
return collection.find[{}];
};
7 serverless và truyền vào các tham số cần thiết. Cuối cùng, cập nhật npm i realm-web
9, khôi phục biểu mẫu về mặc định và đóng thành phần npm i realm-web
2npm start
8Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Phương thức hoàn chỉnh. tsx
npm start
9Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Xóa người dùng
Để xóa user ta cần sửa lại
exports = function[id]{
let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"];
let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}]
return deleteUser;
};
1 bằng cách tạo hàm npm start
06 như hình bên dưới{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên thực hiện như sau
- Nhập các phụ thuộc cần thiết
- Tạo một hàm
06 lấy một đối số lànpm start
8, xác thực ứng dụng của chúng ta bằng cách sử dụngexports = function[arg]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; return collection.find[{}]; };
4. Xóa người dùng đã chọn bằng hàmexports = function[id]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let deleteUser = collection.deleteOne[{_id: BSON.ObjectId[id]}] return deleteUser; };
5 serverless và cập nhật trạng tháiexports = function[id, name, location, title]{ let collection = context.services.get["mongodb-atlas"].db["reactRealmDB"].collection["reactRealmCol"]; let updated = collection.findOneAndUpdate[ {_id: BSON.ObjectId[id]}, { $set: { "name": name, "location": location, "title": title } }, { returnNewDocument: true } ] return updated; };
9npm i realm-web
Ứng dụng hoàn chỉnh. tsx
{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Cuối cùng, chúng ta có thể kiểm tra ứng dụng của mình bằng cách khởi động máy chủ phát triển và thực hiện các thao tác CRUD
Bài đăng này đã thảo luận về cách tạo cơ sở dữ liệu trên MongoDB, tạo và triển khai các chức năng không có máy chủ bằng MongoDB Realm và sử dụng các điểm cuối trong React. ứng dụng js