Hướng dẫn về nút js MongoDB
Cuối cùng tôi đã hiểu cách làm việc với Node, Express và MongoDB. Tôi muốn viết một bài hướng dẫn toàn diện để bạn không phải đau đầu như tôi đã trải qua Show
CRUD, Express và MongoDBCRUD, Express và MongoDB là những từ lớn đối với một người chưa bao giờ chạm vào bất kỳ chương trình phía máy chủ nào trong đời. Hãy nhanh chóng giới thiệu chúng là gì trước khi chúng ta đi sâu vào hướng dẫn Express là một framework để xây dựng các ứng dụng web trên Node. js. Nó đơn giản hóa quá trình tạo máy chủ đã có sẵn trong Node. Trong trường hợp bạn đang thắc mắc, Node cho phép bạn sử dụng JavaScript làm ngôn ngữ phía máy chủ của mình MongoDB là một cơ sở dữ liệu. Đây là nơi bạn lưu trữ thông tin cho trang web (hoặc ứng dụng) của mình CRUD là từ viết tắt của Tạo, Đọc, Cập nhật và Xóa. Đó là một tập hợp các hoạt động mà chúng tôi yêu cầu các máy chủ thực hiện (các yêu cầu lần lượt là ____00, 1, 2 và 3). Đây là những gì mỗi hoạt động làm
Các yêu cầu 0, 1, 2 và 3 hãy để chúng tôi xây dựng API nghỉ ngơiNếu chúng ta đặt CRUD, Express và MongoDB cùng nhau thành một sơ đồ duy nhất, thì nó sẽ như thế này Bây giờ CRUD, Express và MongoDB có ý nghĩa hơn với bạn không? Tuyệt quá. Tiếp tục nào Chúng ta sẽ cùng nhau xây dựng một ứng dụng đơn giảnHãy xây dựng một ứng dụng đơn giản cho phép bạn theo dõi danh sách các trích dẫn từ các nhân vật trong Chiến tranh giữa các vì sao. Đây là những gì nó trông giống như Miễn phí để xem bản demo trước khi tiếp tục với hướng dẫn này Bài này DÀI. Hãy nhớ lấy mã nguồn bằng cách để lại tên và địa chỉ email của bạn trong biểu mẫu này. Tôi cũng sẽ gửi cho bạn bài viết này dưới dạng PDF để bạn có thể đọc nó khi rảnh rỗi Nhân tiện, tôi sẽ không tập trung vào các phong cách vì chúng ta đang tập trung vào việc học Crud, Express và MongoDB trong hướng dẫn này điều kiện tiên quyếtBạn sẽ cần hai thứ để bắt đầu với hướng dẫn này
Để kiểm tra xem bạn đã cài đặt Node chưa, hãy mở Dòng lệnh của bạn và chạy đoạn mã sau
Bạn sẽ nhận được số phiên bản nếu đã cài đặt Node. Nếu không, bạn có thể cài đặt Node bằng cách tải xuống trình cài đặt từ trang web của Node hoặc tải xuống thông qua các trình quản lý gói như Homebrew (Mac) và Chocolatey (Windows). Bắt đầuBắt đầu bằng cách tạo một thư mục cho dự án này. Hãy gọi nó là bất cứ điều gì bạn muốn. Sau khi bạn đã tạo thư mục, hãy điều hướng vào thư mục đó bằng Terminal và chạy 8 8 tạo một tệp 10 giúp bạn quản lý các phụ thuộc (chúng tôi sẽ cài đặt tệp này khi chúng tôi xem qua hướng dẫn) 2Chỉ cần nhấn enter qua mọi thứ xuất hiện. Tôi sẽ nói về những điều bạn cần biết khi chúng ta tiếp tục. Chạy Node lần đầu tiên trong đờiCách đơn giản nhất để sử dụng nút là chạy lệnh 11 và chỉ định đường dẫn đến tệp. Hãy tạo một tệp có tên 12 để chạy nút với 5Tiếp theo, đặt câu lệnh 13 này vào 12. Điều này cho chúng tôi biết liệu Node có chạy đúng cách hay không 8Bây giờ, hãy chạy 15 trong dòng lệnh của bạn và bạn sẽ thấy điều này Tuyệt vời. nút hoạt động. Bước tiếp theo là học cách sử dụng Express. Sử dụng ExpressĐầu tiên, chúng ta phải cài đặt Express. Chúng ta có thể làm điều này bằng cách chạy lệnh 16. ( 17 được cài đặt với Node, đó là lý do tại sao bạn sử dụng các lệnh như 8 và 16)Chạy lệnh 200 trong dòng lệnh của bạnCờ ________ 1201 lưu _______ 1202 dưới dạng ________ 1203 trong ________ 110. Điều quan trọng là phải biết các phần phụ thuộc này vì 17 có thể truy xuất các phần phụ thuộc bằng một lệnh 16 khác khi bạn cần sau này 1 Tiếp theo, chúng ta sử dụng express trong 12 bằng cách yêu cầu. 3Chúng tôi cần tạo một máy chủ mà các trình duyệt có thể kết nối với. Chúng tôi thực hiện việc này bằng cách sử dụng phương thức _______1208 của Express 5Bây giờ, hãy chạy 15 và điều hướng đến 210 trên trình duyệt của bạn. Bạn sẽ thấy một thông báo có nội dung 211 Đó là một dấu hiệu tốt. Điều đó có nghĩa là giờ đây chúng tôi có thể giao tiếp với máy chủ tốc hành của mình thông qua trình duyệt. Đây là nơi chúng tôi bắt đầu hoạt động CRUD. CRUD - ĐỌCCác trình duyệt thực hiện thao tác ĐỌC khi bạn truy cập một trang web. Dưới vỏ bọc, họ gửi yêu cầu GET đến máy chủ để thực hiện thao tác ĐỌC này Bạn thấy 211 vì máy chủ của chúng tôi không gửi gì trở lại trình duyệtTrong Express, chúng tôi xử lý yêu cầu GET bằng phương thức 213 1 214 là điểm cuối được yêu cầu. Đó là giá trị xuất hiện sau tên miền của bạn. Dưới đây là một số ví dụ
222 cho máy chủ biết phải làm gì khi điểm cuối được yêu cầu khớp với điểm cuối đã nêu. Phải mất hai đối số. Một đối tượng 223 và một đối tượng 224
Bây giờ, hãy viết 225 trở lại trình duyệt. Chúng tôi làm như vậy bằng cách sử dụng phương thức 226 đi kèm với đối tượng 224 1Tôi sẽ bắt đầu viết mã ES6 và đồng thời chỉ cho bạn cách chuyển đổi sang ES6. Trước hết, tôi đang thay thế 228 bằng chức năng mũi tên ES6. Mã dưới đây giống như mã trên 20Bây giờ, khởi động lại máy chủ của bạn bằng cách làm như sau
Sau đó, điều hướng đến 210 trên trình duyệt của bạn. Bạn sẽ có thể thấy một chuỗi có nội dung “Xin chào thế giới” Tuyệt vời. Tiếp theo, hãy thay đổi 12 để chúng tôi cung cấp trang 233 trở lại trình duyệt. Để làm điều này, chúng ta sử dụng phương thức 234 được cung cấp bởi đối tượng 235 21Trong phương pháp 234 ở trên, chúng tôi đã yêu cầu Express cung cấp tệp 233 có thể tìm thấy trong thư mục gốc của thư mục dự án của bạn. Chúng tôi chưa có tệp đó. Hãy thực hiện nó ngay bây giờ 22Hãy thêm một số văn bản vào tệp 233 của chúng tôi 23Khởi động lại máy chủ của bạn và làm mới trình duyệt của bạn. Bạn sẽ có thể xem tệp HTML của mình ngay bây giờ Đây là cách Express xử lý tóm tắt yêu cầu GET (thao tác ĐỌC). Tại thời điểm này, có lẽ bạn đã nhận ra rằng bạn cần khởi động lại máy chủ của mình bất cứ khi nào bạn thực hiện thay đổi đối với 12. Quá trình này cực kỳ tẻ nhạt, vì vậy, hãy nhanh chóng đi đường vòng và hợp lý hóa nó bằng cách sử dụng một công cụ có tên là gật đầuNhập NodemonNodemon tự động khởi động lại máy chủ khi bạn lưu tệp được sử dụng bởi 12. Chúng ta có thể cài đặt Nodemon bằng lệnh sau 24Chúng tôi sử dụng cờ 241 ở đây vì chúng tôi chỉ sử dụng Nodemon khi chúng tôi đang phát triển nội dung. Chúng tôi sẽ không sử dụng Nodemon trên một máy chủ thực tế. 241 ở đây thêm Nodemon dưới dạng 243 trong tệp 10Nodemon hoạt động như Node. Vì vậy, bạn có thể chạy 245 và bạn sẽ thấy điều tương tự. Thật không may, điều này chỉ hoạt động nếu bạn đã cài đặt gật đầu trên toàn cầu với cờ 246 (và chúng tôi đã không làm điều này)Chúng tôi có những cách khác để chạy Nodemon. Ví dụ: bạn có thể thực thi Nodemon trực tiếp từ thư mục 247. Điều này là siêu khó sử dụng, nhưng nó hoạt động 25Chúng ta có thể làm mọi thứ đơn giản hơn bằng cách thêm khóa 248 vào tệp 10. Điều này cho phép chúng tôi chạy 245 mà không cần phần mở đầu 251 26Bây giờ, bạn có thể chạy 252 để kích hoạt 245Quay lại chủ đề chính. Tiếp theo chúng ta sẽ đề cập đến thao tác CREATE CRUD - TẠOCác trình duyệt chỉ có thể thực hiện thao tác TẠO nếu chúng gửi yêu cầu POST tới máy chủ. Yêu cầu 0 này có thể được kích hoạt thông qua JavaScript hoặc thông qua phần tử 255Bây giờ chúng ta hãy tìm hiểu cách sử dụng phần tử 255 để tạo các mục nhập mới cho ứng dụng báo giá Chiến tranh giữa các vì sao này. Chúng ta sẽ kiểm tra cách gửi yêu cầu qua JavaScript sauĐể gửi yêu cầu POST qua ________ 1255, bạn cần thêm phần tử ________ 1255 vào tệp 233 của mìnhBạn cần ba điều trên phần tử biểu mẫu này
27 261 cho trình duyệt biết loại yêu cầu gửi. Trong trường hợp này, chúng tôi sử dụng 0 vì chúng tôi đang gửi yêu cầu 0Thuộc tính 260 cho trình duyệt biết nơi gửi yêu cầu 0. Trong trường hợp này, chúng tôi sẽ gửi yêu cầu 0 tới 270Chúng tôi có thể xử lý yêu cầu 0 này bằng phương pháp 272 trong 12. Đường dẫn 274 phải là giá trị bạn đã đặt trong thuộc tính 260 28Khởi động lại máy chủ của bạn (hy vọng bạn đã thiết lập Nodemon để nó tự động khởi động lại) và làm mới trình duyệt của bạn. Sau đó, nhập nội dung nào đó vào phần tử 255 và gửi biểu mẫu. Tiếp theo, nhìn vào dòng lệnh của bạn. Bạn sẽ thấy 277 trong dòng lệnh của mình Tuyệt vời, chúng tôi biết rằng Express hiện đang xử lý biểu mẫu cho chúng tôi. Câu hỏi tiếp theo là, làm cách nào để chúng tôi nhận được các giá trị đầu vào bằng Express? Hóa ra, Express không tự xử lý việc đọc dữ liệu từ phần tử 255. Chúng ta phải thêm một gói khác gọi là body-parser để có được chức năng này 29Body-parser là một phần mềm trung gian. Chúng giúp dọn dẹp đối tượng 223 trước khi chúng ta sử dụng chúng. Express cho phép chúng tôi sử dụng phần mềm trung gian với phương pháp 280 50Phương thức 281 trong body-parser yêu cầu body-parser trích xuất dữ liệu từ phần tử 255 và thêm chúng vào thuộc tính 283 trong đối tượng 223Bạn sẽ có thể xem các giá trị từ phần tử 255 bên trong 286 ngay bây giờ. Hãy thử làm một 13 và xem nó là gì 51Bạn sẽ thấy một đối tượng tương tự như sau Hừm Sư phụ Yoda đã lên tiếng. Hãy chắc chắn rằng chúng ta nhớ những lời của Yoda. Nó quan trọng. Chúng tôi muốn có thể truy xuất nó vào lần tới khi chúng tôi tải trang chỉ mục của mình Nhập cơ sở dữ liệu, MongoDB MongoDBMongoDB là một cơ sở dữ liệu. Chúng tôi có thể lưu trữ thông tin vào cơ sở dữ liệu này để ghi nhớ các từ của Yoda. Sau đó, chúng tôi có thể truy xuất thông tin này và hiển thị cho những người xem ứng dụng của chúng tôi Tôi thường sử dụng Mongoose (là một khung cho MongoDB) khi tôi sử dụng MongoDB. Tôi sẽ hướng dẫn bạn cách sử dụng MongoDB cơ bản trong bài viết này. Nếu bạn muốn tìm hiểu Mongoose, hãy cân nhắc đọc bài viết của tôi về Mongoose Trước tiên, chúng ta cần cài đặt MongoDB qua npm 52Sau khi cài đặt, chúng tôi có thể kết nối với MongoDB thông qua phương thức kết nối của 288 như được hiển thị trong mã bên dưới 53 54Phần tiếp theo là lấy liên kết chính xác đến cơ sở dữ liệu của chúng tôi. Hầu hết mọi người lưu trữ cơ sở dữ liệu của họ trên các dịch vụ đám mây như MongoDB Atlas. Chúng tôi cũng sẽ làm như vậy. (Nó miễn phí) Bạn cũng có thể tạo cơ sở dữ liệu trên máy tính của mình cho công việc phát triển. Đọc “Cách thiết lập Kết nối MongoDB cục bộ” để được hướng dẫn Thiết lập bản đồ MongoDBHãy tiếp tục và tạo một tài khoản trên MongoDB Atlas. Sau khi hoàn tất, bạn cần tạo một “Tổ chức”. Nó giống như một tên công ty. Bạn có thể đặt tên cho nó bất cứ điều gì bạn muốn. (Bạn có thể thay đổi nó sau) Bạn cũng cần chọn một dịch vụ đám mây. Hãy tiếp tục với MongoDB Atlas trong trường hợp này Tiếp theo, bạn cần đặt quyền cho người dùng. MongoDB Atlas sẽ tự động điền địa chỉ email hiện tại của bạn với tư cách là người dùng. Vì vậy, chỉ cần tiếp tục bước tiếp theo. Bạn sẽ kết thúc với một màn hình trông như thế này Tiếp theo, bạn cần tạo Cơ sở dữ liệu trong MongoDB Atlas. Có một số bước để làm điều này Đầu tiên, bạn cần tạo một Project mới. Bạn có thể thực hiện việc này bằng cách vào phần “Ngữ cảnh” ở menu trên cùng bên trái. Nhấp vào menu thả xuống. Sau đó, chọn Dự án mới Tiếp theo, bạn sẽ cần đặt tên cho dự án của mình. Gọi nó là bất cứ điều gì bạn muốn. Tôi sẽ gọi đây là 289Sau đó, bạn sẽ cần thêm thành viên. Một lần nữa, bạn đã được thêm vào, vì vậy hãy tiếp tục và nhấp vào “Tạo dự án” để tiếp tục Bạn sẽ kết thúc với một màn hình có nội dung Tạo cụm Nhấp vào “Xây dựng cụm”. Bạn sẽ thấy màn hình này Chọn cụm miễn phí (tùy chọn bên trái) và tiếp tục. Bây giờ bạn sẽ thấy một màn hình để định cấu hình một cụm. Cuộn xuống. Hãy chắc chắn rằng bạn nhìn thấy hai điều này
Nhấp vào Tạo cụm tiếp theo. Bạn sẽ thấy “Cụm của bạn đang được tạo” Bạn phải đợi khoảng 5 phút để tạo cụm. Khi cụm đã sẵn sàng, bạn sẽ thấy điều này Bây giờ, chúng tôi cần kết nối ứng dụng Chiến tranh giữa các vì sao với cụm này Kết nối với MongoDB AtlasNhấp vào nút Kết nối Một phương thức sẽ bật lên Bạn cần đưa địa chỉ IP của mình vào danh sách trắng trước khi có thể kết nối với cụm của mình. Đây là một tính năng bảo mật được tích hợp trong MongoDB Atlas. Hãy tiếp tục và nhấp vào “Thêm địa chỉ IP hiện tại của bạn” Tiếp theo, bạn cần tạo một người dùng MongoDB. Tên người dùng và mật khẩu này khác với tên người dùng và mật khẩu bạn đã sử dụng để đăng nhập vào MongoDB Atlas. Tên người dùng và mật khẩu này CHỈ được sử dụng cho cơ sở dữ liệu Đảm bảo bạn nhớ người dùng và mật khẩu MongoDB. Chúng tôi sẽ sử dụng nó để kết nối với cơ sở dữ liệu Tiếp theo, nhấp vào chọn phương thức kết nối của bạn. Chọn “Kết nối với ứng dụng của bạn” và sao chép chuỗi kết nối Chuỗi kết nối sẽ trông giống như thế này 55Bạn cần thay thế 2 thứ ở đây
292 trong chuỗi kết nối trỏ đến cơ sở dữ liệu 292. Bạn sẽ cần thay thế 292 bằng tên cơ sở dữ liệu của mình nếu bạn sử dụng Mongoose. Bạn có thể để nó là 292 nếu bạn sử dụng MongoClient như những gì chúng tôi đang làm trong hướng dẫn nàyĐặt chuỗi kết nối này bên trong 296 56Chúng tôi biết chúng tôi đã kết nối với cơ sở dữ liệu nếu không có lỗi. Hãy tạo câu lệnh 13 có nội dung “Đã kết nối với cơ sở dữ liệu”. Điều này sẽ giúp chúng tôi biết chúng tôi đã kết nối với cơ sở dữ liệu khi chúng tôi khởi động lại máy chủ 57Bạn sẽ thấy một cái gì đó như thế này Bạn có thể xóa cảnh báo không dùng nữa bằng cách thêm tùy chọn vào 296 58MongoDB hỗ trợ các lời hứa. Nếu bạn muốn sử dụng lời hứa thay vì gọi lại, bạn có thể viết 296 như thế này. Nó hoạt động chính xác như đoạn mã trên. 59Hãy đọc bài viết này nếu bạn muốn tìm hiểu về promise trong JavaScript Thay đổi cơ sở dữ liệuChúng ta cần thay đổi cơ sở dữ liệu từ 292 sang thứ khác. Bạn có thể đặt tên cho nó bất cứ điều gì bạn muốn. Tôi đã chọn đặt tên cho cơ sở dữ liệu mới của mình là 501 vì nó giúp tôi nhớ những gì tôi đang xây dựng 80MongoDB và máy chủChúng tôi cần biến 502 từ kết nối để truy cập MongoDB. Điều này có nghĩa là chúng tôi cần đặt trình xử lý yêu cầu rõ ràng của mình vào lệnh gọi 503 của MongoClient 81Cuối cùng thì chúng ta cũng có thể lưu trữ trích dẫn của Yoda vào cơ sở dữ liệu ngay bây giờ CRUD - TẠO (còn tiếp)Chúng tôi cần tạo một 504 trước khi có thể lưu trữ các mục vào cơ sở dữ liệu. Đây là một phép loại suy đơn giản để giúp bạn làm rõ các thuật ngữ trong MongoDB
Giống như Cơ sở dữ liệu, bạn có thể đặt tên cho bộ sưu tập theo bất kỳ thứ gì bạn muốn. Trong trường hợp này, hãy lưu trữ báo giá vào bộ sưu tập 506. Chúng tôi sử dụng 507 để chỉ định bộ sưu tập 82Chúng ta có thể sử dụng phương thức 508 để thêm các mục vào bộ sưu tập MongoDB 83Hãy thử gửi 255 từ trình duyệt. Bạn sẽ thấy một 510 trông rất đáng sợ trong TerminalNếu bạn thấy điều này, xin chúc mừng. Bạn đã thêm thành công báo giá vào cơ sở dữ liệu Bạn có thể kiểm tra các mục bên trong cơ sở dữ liệu bằng cách đi tới “Bộ sưu tập” trong MongoDB Atlas Bạn sẽ thấy một tài liệu trong cơ sở dữ liệu của bạn. (Mỗi mục cơ sở dữ liệu được gọi là một tài liệu) Nếu bạn quay lại Trình duyệt, bạn sẽ thấy nó vẫn đang cố tải nội dung nào đó Điều này xảy ra vì trình duyệt mong đợi một cái gì đó trở lại từ máy chủ Trong trường hợp này, chúng tôi không cần gửi thông tin trình duyệt. Thay vào đó, hãy yêu cầu trình duyệt chuyển hướng trở lại 217. Chúng tôi làm điều này với 512 84Yay. Vì chúng tôi có một số trích dẫn trong bộ sưu tập, hãy hiển thị chúng cho người dùng của chúng tôi khi họ truy cập trang Hiển thị báo giá cho người dùng (thao tác ĐỌC)Chúng tôi cần thực hiện hai việc để hiển thị trích dẫn từ MongoDB Atlas cho người dùng của mình
Hãy đi từng bước một Nhận báo giá từ MongoDBChúng tôi có thể lấy các trích dẫn mà chúng tôi đã lưu trữ trong MongoDB bằng phương pháp 513. Phương pháp này từ mLab bằng cách sử dụng phương pháp 513 có sẵn trong phương pháp 504 85Phương thức 513 trả về một 517 sẽ không hợp lý nếu bạn đã thử đăng nhập nó Nhưng đối tượng 517 này chứa tất cả các trích dẫn từ cơ sở dữ liệu của chúng tôi. Nó có một loạt phương thức cho phép chúng tôi lấy dữ liệu của mình. Ví dụ: chúng ta có thể sử dụng 519 để chuyển đổi dữ liệu thành một mảng. 86 Tuyệt vời. Chúng tôi thấy các trích dẫn chúng tôi đã thêm. (Bạn thấy rất nhiều trích dẫn giống nhau vì tôi đã thêm tất cả chúng khi viết hướng dẫn này 😆). Tiếp theo, chúng tôi muốn tạo một HTML chứa tất cả các trích dẫn của chúng tôi Kết xuất HTMLChúng tôi không thể cung cấp tệp 233 và mong đợi các trích dẫn xuất hiện một cách kỳ diệu vì không có cách nào để thêm nội dung động vào tệp HTMLThay vào đó, những gì chúng ta có thể làm là sử dụng một công cụ mẫu để tạo HTML. Các công cụ mẫu phổ biến bao gồm Pug, JavaScript nhúng và Nunjucks Tôi đã viết rất nhiều về cách thức và lý do của các công cụ mẫu trong một bài viết riêng. Bạn có thể muốn kiểm tra nếu bạn không biết công cụ mẫu là gì Tôi sử dụng Nunjucks làm công cụ mẫu mà tôi lựa chọn. Hãy xem bài viết để tìm hiểu lý do tại sao Đối với hướng dẫn này, chúng tôi sẽ sử dụng Embedded JavaScript (EJS) làm công cụ mẫu của chúng tôi vì đây là công cụ dễ bắt đầu nhất. Bạn sẽ thấy nó quen thuộc ngay từ đầu vì bạn sẽ viết HTML và JavaScript Sử dụng EJSĐầu tiên, chúng ta cần cài đặt EJS 87Tiếp theo, chúng ta cần đặt 521 thành 522. Điều này cho Express biết chúng tôi đang sử dụng EJS làm công cụ mẫu. Bạn cần đặt nó trước bất kỳ phương thức 523, 524 hoặc 525 nào 88Bây giờ chúng ta có thể tạo HTML có chứa dấu ngoặc kép. Quá trình này được gọi là hiển thị HTML Chúng tôi sẽ sử dụng phương pháp 526 được tích hợp trong Express's 224. Nó cần tuân theo cú pháp sau 89
Hãy tạo một khung nhìn. Chúng tôi sẽ tạo một tệp 531 bên trong thư mục lượt xem 10Chúng tôi sẽ sao chép/dán mọi thứ từ 233 vào 531 11Tiếp theo, chúng tôi sẽ sử dụng 534 để hiển thị tệp 531 này 12Nếu bạn làm mới trang, bạn vẫn sẽ thấy điều tương tự. Không có gì nên thay đổi, không có gì nên phá vỡ Hãy đặt các trích dẫn vào 531. Để làm điều này, chúng ta cần chuyển các trích dẫn vào phương thức 526 13Trong 531, chúng tôi có thể sử dụng các biến vị trí giữa các thẻ 539 và 540. Hãy thử đưa 506 vào HTML 14Bạn nên xem thứ này Chúng tôi thấy rất nhiều 542 vì mỗi trích dẫn bên trong 543 là một đối tượng JavaScript. 522 không thể tự động chuyển đổi đối tượng đó thành HTMLChúng ta cần lặp qua các trích dẫn. Chúng ta có thể làm điều này với vòng lặp 545. Trong EJS, chúng tôi viết một vòng lặp for giống như cách chúng tôi viết một vòng lặp JavaScript 545. Sự khác biệt duy nhất là chúng ta cần đặt các câu lệnh vòng lặp 545 giữa 548 và 540 15CRUD - CẬP NHẬTChúng tôi sử dụng thao tác CẬP NHẬT khi chúng tôi muốn thay đổi điều gì đó. Nó có thể được kích hoạt với yêu cầu PUT. Giống như 0, 2 có thể được kích hoạt thông qua JavaScript hoặc thông qua phần tử 255Hãy thay đổi mọi thứ và sử dụng JavaScript vì bạn đã biết cách sử dụng các phần tử 255Đối với thao tác cập nhật này, chúng tôi sẽ tạo một nút thay thế câu trích dẫn đầu tiên của Yoda thành một cái gì đó được viết bởi Darth Vader Để làm điều này, chúng ta cần thêm một 554 vào tệp 531 16Chúng tôi cũng sẽ tạo một tệp JavaScript bên ngoài để thực hiện yêu cầu 2. Theo quy ước của Express, JavaScript này được giữ trong một thư mục có tên là 557 17Sau đó, chúng tôi phải yêu cầu Express cung cấp công khai thư mục ________ 1557 này bằng cách sử dụng phần mềm trung gian tích hợp có tên là ________ 1559 18Bây giờ chúng ta có thể thêm tệp 560 vào tệp 531 19Chúng tôi sẽ gửi yêu cầu 2 khi nút được nhấp. Điều này có nghĩa là chúng ta cần lắng nghe sự kiện 563Tiếp theo, chúng tôi sẽ gửi yêu cầu PUT khi nhấp vào nút 30Gửi yêu cầu PUTCách dễ nhất để kích hoạt yêu cầu PUT trong các trình duyệt hiện đại là sử dụng Fetch API Fetch có cú pháp sau 31Trong trường hợp này, giả sử chúng tôi muốn gửi yêu cầu tới 270. Chúng tôi sẽ đặt 214 thành 270 32Lần này chúng ta cần gửi một yêu cầu 2. Chúng ta có thể làm điều này bằng cách đặt phương thức của Fetch thành 568 33Các ứng dụng hiện đại gửi dữ liệu JSON đến máy chủ. Họ cũng nhận dữ liệu JSON trở lại máy chủ. JSON là viết tắt của Ký hiệu đối tượng JavaScript. Chúng giống như các đối tượng JavaScript, nhưng mỗi thuộc tính và giá trị được viết giữa hai dấu ngoặc kép Đây là một ví dụ về dữ liệu JavaScript 34Và đối tác JSON của nó trông như thế nào. (Lưu ý cách mọi thứ được bao bọc giữa hai 569) 35Chúng tôi cần thông báo cho máy chủ rằng chúng tôi đang gửi dữ liệu JSON bằng cách đặt các tiêu đề 570 thành 571 36Tiếp theo, chúng tôi cần chuyển đổi dữ liệu chúng tôi gửi thành JSON. Chúng ta có thể làm điều này với 572. Dữ liệu này được truyền qua thuộc tính 283 37Chấp nhận yêu cầu PUTMáy chủ của chúng tôi chưa chấp nhận dữ liệu JSON. Chúng ta có thể dạy nó đọc JSON bằng cách thêm phần mềm trung gian 575 của 574 38Tiếp theo, chúng ta có thể xử lý yêu cầu 2 bằng phương thức 568. Bạn sẽ có thể thấy các giá trị chúng tôi gửi từ yêu cầu tìm nạp 39Bước tiếp theo là thay đổi câu trích dẫn đầu tiên của Yoda thành câu trích dẫn này của Darth Vader. Thay đổi trích dẫn của YodaBộ sưu tập MongoDB đi kèm với một phương thức gọi là 578. Phương pháp này cho phép chúng tôi tìm và thay đổi một mục trong cơ sở dữ liệu. Nó có cú pháp sau 50 579 cho phép chúng tôi lọc bộ sưu tập bằng các cặp khóa-giá trị. Nếu chúng tôi muốn lọc các trích dẫn cho những trích dẫn do Yoda viết, chúng tôi có thể đặt 580 làm truy vấn 51 581, cho MongoDB biết những gì cần thay đổi. Nó sử dụng các toán tử cập nhật MongoDB như ________ 1582, ________ 1583 và ________ 1584Chúng tôi sẽ sử dụng toán tử 582 vì chúng tôi đang thay đổi các trích dẫn của Yoda thành các trích dẫn của Darth Vader 52 586 yêu cầu MongoDB xác định các tùy chọn bổ sung cho yêu cầu cập nhật nàyTrong trường hợp này, có thể không có trích dẫn Yoda nào tồn tại trong cơ sở dữ liệu. Chúng tôi có thể buộc MongoDB tạo một trích dẫn Darth Vader mới nếu không có trích dẫn Yoda nào tồn tại. Chúng tôi thực hiện việc này bằng cách đặt 587 thành 588. 587 có nghĩa là. Chèn tài liệu nếu không có tài liệu nào có thể được cập nhật 53Cuối cùng, hãy đăng nhập 510 vào dòng lệnh 54Hãy thử nhấp vào nút “thay thế trích dẫn Yoda đầu tiên” trong trình duyệt. Bạn sẽ thấy kết quả này trong dòng lệnh của mình. Điều này nói rằng chúng tôi đã thay đổi một trong những trích dẫn của Yoda Nếu bạn làm mới trình duyệt, bạn sẽ thấy câu nói của Darth Vader là câu nói đầu tiên Bạn có thấy 578 phức tạp không? . Đây là lý do tại sao tôi sử dụng Mongoose thay vì MongoDB. Bạn có thể tìm hiểu thêm về Mongoose trong bài viết nàyCuối cùng, chúng tôi cần phản hồi JavaScript đã gửi yêu cầu 2. Trong trường hợp này, chúng tôi chỉ cần gửi thông báo 593 55Tiếp theo, chúng ta có thể xử lý phản hồi từ máy chủ thông qua đối tượng 503. (Chúng tôi làm điều này vì 595 thực hiện lại lời hứa). Tuy nhiên, Tìm nạp hơi khác so với hầu hết các lời hứa. Bạn cần sử dụng một đối tượng 503 khác để nhận phản hồi từ máy chủĐây là những gì bạn nên làm 56Bạn sẽ có thể thấy thông báo 597 từ máy chủ trong bảng điều khiểnTôi đã viết một bài báo về Fetch API nếu bạn đang thắc mắc tại sao chúng ta cần hai cuộc gọi 503. Cho nó một đọc. Nó sẽ giúp củng cố sự hiểu biết của bạnNếu bạn đang làm việc trên một ứng dụng web ưa thích, bạn có thể sử dụng JavaScript để cập nhật DOM, để người dùng thấy những thay đổi mới ngay lập tức Tuy nhiên, việc cập nhật DOM nằm ngoài phạm vi của bài viết này, vì vậy chúng tôi sẽ làm mới trình duyệt để xem các thay đổi 57Nếu bạn muốn học cách sử dụng JavaScript để cập nhật DOM, tôi khuyên bạn nên tham gia khóa học Tìm hiểu JavaScript của tôi. Tôi thậm chí còn dạy bạn cách làm cho giao diện của bạn nhanh và linh hoạt. (Kiểm tra Thành phần Todolist) Đó là nó cho hoạt động CẬP NHẬT. Hãy chuyển sang xóa CRUD - XÓAThao tác XÓA có thể được kích hoạt thông qua yêu cầu XÓA. Nó tương tự như yêu cầu 599, vì vậy điều này sẽ đơn giản nếu bạn hiểu những gì chúng tôi đã làm ở trênĐối với điều này, hãy xóa trích dẫn đầu tiên của Darth Vader Đầu tiên, chúng ta cần thêm nút xóa vào 531 58Sau đó, chúng tôi sẽ kích hoạt yêu cầu XÓA thông qua Tìm nạp khi người dùng nhấp vào nút xóa. 59Vì chúng tôi đang xóa một trích dẫn của Darth Vader, nên chúng tôi chỉ cần gửi tên của Darth Vader đến máy chủ 10Sau đó, chúng tôi có thể xử lý sự kiện ở phía máy chủ của mình bằng phương pháp 801 11Xóa tài liệu khỏi MongoDBBộ sưu tập MongoDB có một phương thức gọi là 802. Nó cho phép chúng tôi xóa một tài liệu khỏi cơ sở dữ liệu. Nó nhận hai tham số. 579 và 586 12 579 hoạt động giống như 579 trong 578. Nó cho phép chúng tôi lọc bộ sưu tập theo các mục mà chúng tôi đang tìm kiếm. Trong trường hợp này, chúng ta có thể đặt 262 thành Darth Vader 13Tuy nhiên, vì chúng tôi đã chuyển tên 809 từ Fetch, chúng tôi không cần mã hóa nó trong Express nữa. Chúng ta chỉ có thể sử dụng 810 14Trong trường hợp này, chúng tôi không cần thay đổi bất kỳ tùy chọn nào, vì vậy chúng tôi có thể bỏ qua 586 15Sau đó, chúng tôi có thể gửi phản hồi lại cho JavaScript trong cuộc gọi 503 16Bây giờ, khi bạn nhấp vào nút xóa, trình duyệt sẽ gửi yêu cầu XÓA thông qua Tìm nạp tới máy chủ Express của chúng tôi. Sau đó, máy chủ phản hồi bằng cách gửi lại lỗi hoặc tin nhắn Điều gì sẽ xảy ra nếu không có thêm trích dẫn nào của Darth Vader?Nếu không có thêm câu trích dẫn nào của Darth Vader, ________ 1813 sẽ là _______ 1814. Chúng tôi có thể gửi một thông báo cho trình duyệt biết rằng không còn trích dẫn Darth Vader nào để xóa 17Nếu JavaScript nhận được phản hồi 815, chúng tôi có thể thông báo cho người dùng rằng không có câu trích dẫn nào của Darth Vader để xóaĐể làm điều này, hãy thêm một yếu tố mà chúng tôi có thể cho người dùng biết về thông báo này 18Nếu chúng tôi nhận được 815, chúng tôi có thể thay đổi 817 của div 818 này 19Đó là thao tác XÓA. Làm cho nó trông đẹp hơn…Bước cuối cùng là làm cho ứng dụng trông đẹp hơn một chút bằng cách thêm một số kiểu kết thúcChúng tôi đã trình bày RẤT NHIỀU trong hướng dẫn lớn này. Đây là danh sách những việc chúng ta đã làm cùng nhau
Bây giờ bạn đã học được tất cả những gì bạn cần biết về cách tạo các ứng dụng đơn giản với Node, Express và MongoDB. Bây giờ, hãy tiếp tục và tạo ra nhiều ứng dụng hơn, bạn trẻ. mạnh mẽ lên Lấy mã nguồnBạn có thể lấy mã nguồn bằng cách để lại tên và địa chỉ email của mình trong biểu mẫu này. Tôi cũng sẽ gửi cho bạn bài viết này dưới dạng PDF để bạn có thể đọc nó khi rảnh rỗi đọc thêmĐây là một số bài đọc thêm nếu bạn muốn tiếp tục với hành trình Node, Express, MongoDB
Nếu bạn thích bài viết này, hãy ủng hộ tôi bằng cách chia sẻ bài viết này trên Twitter hoặc mua cho tôi một ly cà phê 😉. Nếu bạn phát hiện lỗi đánh máy, tôi đánh giá cao nếu bạn có thể sửa nó trên GitHub. Cảm ơn bạn Làm cách nào để sử dụng nút js với MongoDB?Làm cách nào để khởi động MongoDB trong Node. js? . Cài đặt trình điều khiển MongoDB, sử dụng npm Nhập MongoClient ở đầu tệp của bạn Tạo một phiên bản MongoClient mới và chuyển chuỗi kết nối của bạn làm tham số Kết nối bằng cách sử dụng phương pháp kết nối. Để biết thêm chi tiết, hãy làm theo hướng dẫn này MongoDB có tốt cho nút JS không?Có thể xử lý nhiều loại dữ liệu và lượng dữ liệu khổng lồ . Nó cung cấp một Nút MongoDB. js cung cấp API JavaScript và triển khai giao thức mạng cần thiết để đọc và ghi từ cơ sở dữ liệu MongoDB cục bộ hoặc từ xa. Tất cả những gì bạn phải làm là cài đặt gói NPM -mongodb trong Mã ứng dụng của mình.
Tại sao MongoDB được sử dụng với nút js?Nút MongoDB. trình điều khiển js sử dụng MongoDB với Node. js trải nghiệm liền mạch . Trình điều khiển tự động ánh xạ các đối tượng JavaScript sang tài liệu BSON, nghĩa là các nhà phát triển có thể dễ dàng làm việc với dữ liệu của họ.
Nút JS và MongoDB có giống nhau không?MongoDB là một cơ sở dữ liệu NoSQL được sử dụng rộng rãi. Khả năng lưu trữ dữ liệu ở một số định dạng làm cho MongoDB trở thành một công cụ hữu ích để quản lý lượng lớn dữ liệu. Mặt khác, Nodejs là một môi trường thời gian chạy nổi tiếng hỗ trợ thực thi mã JavaScript bên ngoài trình duyệt . |