Làm thế nào để mongodb gửi dữ liệu để phản ứng?

Trước khi chúng ta chuyển sang chủ đề chính về việc duy trì dữ liệu trong cơ sở dữ liệu, chúng ta sẽ xem xét một vài cách khác nhau để gỡ lỗi các ứng dụng Node

Gỡ lỗi các ứng dụng Node

Gỡ lỗi các ứng dụng Node khó hơn một chút so với gỡ lỗi JavaScript đang chạy trong trình duyệt của bạn. In ra bảng điều khiển là một phương pháp đã được thử nghiệm và đúng và nó luôn đáng để thực hiện. Một số người nghĩ rằng nên sử dụng các phương pháp tinh vi hơn để thay thế, nhưng tôi không đồng ý. Ngay cả các nhà phát triển nguồn mở ưu tú trên thế giới cũng sử dụng phương pháp này

Mã phòng thu trực quan

Trình gỡ lỗi Visual Studio Code có thể hữu ích trong một số trường hợp. Bạn có thể khởi chạy ứng dụng ở chế độ gỡ lỗi như thế này

Lưu ý rằng ứng dụng không được chạy trong bảng điều khiển khác, nếu không thì cổng đã được sử dụng

Lưu ý Phiên bản mới hơn của Visual Studio Code có thể Chạy thay vì Gỡ lỗi. Hơn nữa, bạn có thể phải định cấu hình khởi chạy của mình. json để bắt đầu gỡ lỗi. Điều này có thể được thực hiện bằng cách chọn Thêm cấu hình. trên menu thả xuống, nằm bên cạnh nút phát màu xanh lá cây và phía trên menu BIẾN, rồi chọn Chạy "npm start" trong thiết bị đầu cuối gỡ lỗi. Để biết hướng dẫn thiết lập chi tiết hơn, hãy truy cập tài liệu Gỡ lỗi của Visual Studio Code

Dưới đây, bạn có thể thấy một ảnh chụp màn hình trong đó quá trình thực thi mã đã bị tạm dừng khi đang lưu một ghi chú mới

Việc thực thi dừng lại ở điểm dừng trong dòng 69. Trong bảng điều khiển, bạn có thể thấy giá trị của biến ghi chú. Trong cửa sổ trên cùng bên trái, bạn có thể thấy những thứ khác liên quan đến trạng thái của ứng dụng

Các mũi tên ở trên cùng có thể được sử dụng để kiểm soát luồng trình gỡ lỗi

Vì một số lý do, tôi không sử dụng trình gỡ lỗi Visual Studio Code nhiều

Công cụ phát triển Chrome

Cũng có thể gỡ lỗi với bảng điều khiển dành cho nhà phát triển Chrome bằng cách khởi động ứng dụng của bạn bằng lệnh

Bạn có thể truy cập trình gỡ lỗi bằng cách nhấp vào biểu tượng màu lục - biểu tượng nút - xuất hiện trong bảng điều khiển dành cho nhà phát triển Chrome

Chế độ xem gỡ lỗi hoạt động giống như với các ứng dụng React. Tab Nguồn có thể được sử dụng để đặt các điểm dừng nơi việc thực thi mã sẽ bị tạm dừng

Tất cả giao diện điều khiển của ứng dụng. thông báo nhật ký sẽ xuất hiện trong tab Bảng điều khiển của trình gỡ lỗi. Bạn cũng có thể kiểm tra giá trị của các biến và thực thi mã JavaScript của riêng mình

Đặt câu hỏi về mọi thứ

Gỡ lỗi các ứng dụng Full Stack lúc đầu có vẻ phức tạp. Ứng dụng của chúng tôi sẽ sớm có cơ sở dữ liệu ngoài giao diện người dùng và phụ trợ, và sẽ có nhiều khu vực tiềm ẩn lỗi trong ứng dụng

Khi ứng dụng "không hoạt động", trước tiên chúng ta phải tìm ra vấn đề thực sự xảy ra ở đâu. Việc sự cố tồn tại ở một nơi mà bạn không ngờ tới là điều rất phổ biến và có thể mất vài phút, vài giờ hoặc thậm chí vài ngày trước khi bạn tìm ra nguồn gốc của sự cố

Điều quan trọng là phải có hệ thống. Vì vấn đề có thể tồn tại ở bất cứ đâu, bạn phải đặt câu hỏi về mọi thứ và loại bỏ từng khả năng một. Đăng nhập vào bảng điều khiển, Người đưa thư, trình gỡ lỗi và kinh nghiệm sẽ giúp ích

Khi lỗi xảy ra, chiến lược tồi tệ nhất có thể là tiếp tục viết mã. Nó sẽ đảm bảo rằng mã của bạn sẽ sớm có nhiều lỗi hơn và việc gỡ lỗi chúng sẽ còn khó khăn hơn. Nguyên tắc dừng và khắc phục của Hệ thống sản xuất Toyota cũng rất hiệu quả trong tình huống này.

MongoDB

Để lưu trữ các ghi chú đã lưu của chúng tôi vô thời hạn, chúng tôi cần một cơ sở dữ liệu. Hầu hết các khóa học được giảng dạy tại Đại học Helsinki đều sử dụng cơ sở dữ liệu quan hệ. Trong hầu hết các phần của khóa học này, chúng tôi sẽ sử dụng MongoDB được gọi là cơ sở dữ liệu tài liệu

Lý do sử dụng Mongo làm cơ sở dữ liệu là độ phức tạp thấp hơn so với cơ sở dữ liệu quan hệ. Phần 13 của khóa học hướng dẫn cách build node. js phụ trợ sử dụng cơ sở dữ liệu quan hệ

Cơ sở dữ liệu tài liệu khác với cơ sở dữ liệu quan hệ ở cách chúng tổ chức dữ liệu cũng như ngôn ngữ truy vấn mà chúng hỗ trợ. Cơ sở dữ liệu tài liệu thường được phân loại theo thuật ngữ chung NoSQL

Bạn có thể đọc thêm về cơ sở dữ liệu tài liệu và NoSQL từ tài liệu khóa học cho tuần 7 của khóa học Nhập môn cơ sở dữ liệu. Thật không may, tài liệu hiện chỉ có sẵn bằng tiếng Phần Lan

Đọc ngay các chương về bộ sưu tập và tài liệu từ hướng dẫn sử dụng MongoDB để có ý tưởng cơ bản về cách cơ sở dữ liệu tài liệu lưu trữ dữ liệu

Đương nhiên, bạn có thể cài đặt và chạy MongoDB trên máy tính của mình. Tuy nhiên, internet cũng có đầy đủ các dịch vụ cơ sở dữ liệu Mongo mà bạn có thể sử dụng. Nhà cung cấp MongoDB ưa thích của chúng tôi trong khóa học này sẽ là MongoDB Atlas

Khi bạn đã tạo và đăng nhập vào tài khoản của mình, hãy bắt đầu bằng cách chọn tùy chọn miễn phí

Chọn nhà cung cấp đám mây và vị trí và tạo cụm

Hãy đợi cụm sẵn sàng để sử dụng. Quá trình này có thể mất vài phút

Lưu ý không tiếp tục trước khi cụm sẵn sàng

Hãy sử dụng tab bảo mật để tạo thông tin xác thực người dùng cho cơ sở dữ liệu. Xin lưu ý rằng đây không phải là thông tin đăng nhập giống như bạn sử dụng để đăng nhập vào MongoDB Atlas. Chúng sẽ được sử dụng để ứng dụng của bạn kết nối với cơ sở dữ liệu

Tiếp theo, chúng ta phải xác định các địa chỉ IP được phép truy cập vào cơ sở dữ liệu. Để đơn giản, chúng tôi sẽ cho phép truy cập từ tất cả các địa chỉ IP

Cuối cùng, chúng tôi đã sẵn sàng để kết nối với cơ sở dữ liệu của chúng tôi. Bắt đầu bằng cách nhấp vào kết nối

và lựa chọn. Kết nối ứng dụng của bạn

Chế độ xem hiển thị URI MongoDB, là địa chỉ của cơ sở dữ liệu mà chúng tôi sẽ cung cấp cho thư viện máy khách MongoDB mà chúng tôi sẽ thêm vào ứng dụng của mình

Địa chỉ trông như thế này

mongodb+srv://fullstack:@cluster0.o1opl.mongodb.net/?retryWrites=true&w=majority

Bây giờ chúng tôi đã sẵn sàng để sử dụng cơ sở dữ liệu

Chúng tôi có thể sử dụng cơ sở dữ liệu trực tiếp từ mã JavaScript của mình với Nút MongoDB chính thức. thư viện trình điều khiển js, nhưng nó khá cồng kềnh để sử dụng. Thay vào đó, chúng tôi sẽ sử dụng thư viện Mongoose cung cấp API cấp cao hơn

Mongoose có thể được mô tả như một trình ánh xạ tài liệu đối tượng (ODM) và việc lưu các đối tượng JavaScript dưới dạng tài liệu Mongo rất đơn giản với thư viện này

Hãy cài đặt Mongoose

Chúng ta đừng thêm bất kỳ mã nào xử lý Mongo vào chương trình phụ trợ của chúng ta. Thay vào đó, hãy tạo một ứng dụng thực hành bằng cách tạo một tệp mới, mongo. js

const mongoose = require('mongoose')

if (process.argv.length<3) {
  console.log('give password as argument')
  process.exit(1)
}

const password = process.argv[2]

const url =
  `mongodb+srv://fullstack:${password}@cluster0.o1opl.mongodb.net/?retryWrites=true&w=majority`

mongoose.set('strictQuery',false)
mongoose.connect(url)

const noteSchema = new mongoose.Schema({
  content: String,
  important: Boolean,
})

const Note = mongoose.model('Note', noteSchema)

const note = new Note({
  content: 'HTML is Easy',
  important: true,
})

note.save().then(result => {
  console.log('note saved!')
  mongoose.connection.close()
})

NB. Tùy thuộc vào khu vực bạn đã chọn khi xây dựng cụm của mình, URI MongoDB có thể khác với ví dụ được cung cấp ở trên. Bạn nên xác minh và sử dụng đúng URI được tạo từ MongoDB Atlas

Mã này cũng giả định rằng nó sẽ được chuyển mật khẩu từ thông tin đăng nhập mà chúng tôi đã tạo trong MongoDB Atlas, dưới dạng tham số dòng lệnh. Chúng ta có thể truy cập tham số dòng lệnh như thế này

const password = process.argv[2]

Khi mã được chạy với nút lệnh mongo. js, Mongo sẽ thêm một tài liệu mới vào cơ sở dữ liệu

NB. Xin lưu ý rằng mật khẩu là mật khẩu được tạo cho người dùng cơ sở dữ liệu, không phải mật khẩu MongoDB Atlas của bạn. Ngoài ra, nếu bạn đã tạo mật khẩu có các ký tự đặc biệt, thì bạn cần phải

Chúng ta có thể xem trạng thái hiện tại của cơ sở dữ liệu từ MongoDB Atlas từ Duyệt các bộ sưu tập, trong tab Cơ sở dữ liệu

Như trạng thái dạng xem, tài liệu phù hợp với ghi chú đã được thêm vào bộ sưu tập ghi chú trong cơ sở dữ liệu myFirstDatabase

Thay vào đó, hãy hủy kiểm tra cơ sở dữ liệu mặc định và thay đổi tên của cơ sở dữ liệu được tham chiếu trong chuỗi kết nối của chúng ta thành noteApp bằng cách sửa đổi URI

const url =
  `mongodb+srv://fullstack:${password}@cluster0.o1opl.mongodb.net/noteApp?retryWrites=true&w=majority`

Hãy chạy lại mã của chúng tôi

Dữ liệu hiện được lưu trữ trong cơ sở dữ liệu phù hợp. Chế độ xem cũng cung cấp chức năng tạo cơ sở dữ liệu, có thể được sử dụng để tạo cơ sở dữ liệu mới từ trang web. Việc tạo cơ sở dữ liệu như thế này là không cần thiết, vì MongoDB Atlas tự động tạo cơ sở dữ liệu mới khi một ứng dụng cố gắng kết nối với cơ sở dữ liệu chưa tồn tại

Lược đồ

Sau khi thiết lập kết nối với cơ sở dữ liệu, chúng tôi xác định lược đồ cho ghi chú và mô hình phù hợp

const noteSchema = new mongoose.Schema({
  content: String,
  important: Boolean,
})

const Note = mongoose.model('Note', noteSchema)

Đầu tiên, chúng tôi xác định lược đồ của ghi chú được lưu trữ trong biến noteSchema. Lược đồ cho Mongoose biết cách lưu trữ các đối tượng ghi chú trong cơ sở dữ liệu

Trong định nghĩa kiểu máy Note, tham số "Note" đầu tiên là tên riêng của kiểu máy. Tên của bộ sưu tập sẽ là các ghi chú số nhiều viết thường, bởi vì quy ước Mongoose là tự động đặt tên cho các bộ sưu tập là số nhiều (e. g. ghi chú) khi lược đồ đề cập đến chúng ở số ít (e. g. Ghi chú)

Cơ sở dữ liệu tài liệu như Mongo không có lược đồ, nghĩa là bản thân cơ sở dữ liệu không quan tâm đến cấu trúc của dữ liệu được lưu trữ trong cơ sở dữ liệu. Có thể lưu trữ các tài liệu với các trường hoàn toàn khác nhau trong cùng một bộ sưu tập

Ý tưởng đằng sau Mongoose là dữ liệu được lưu trữ trong cơ sở dữ liệu được cung cấp một lược đồ ở cấp ứng dụng xác định hình dạng của tài liệu được lưu trữ trong bất kỳ bộ sưu tập cụ thể nào

Tạo và lưu đối tượng

Tiếp theo, ứng dụng tạo một đối tượng ghi chú mới với sự trợ giúp của mô hình Ghi chú

const note = new Note({
  content: 'HTML is Easy',
  important: false,
})

Các mô hình được gọi là các hàm xây dựng tạo các đối tượng JavaScript mới dựa trên các tham số được cung cấp. Vì các đối tượng được tạo bằng hàm tạo của mô hình nên chúng có tất cả các thuộc tính của mô hình, bao gồm các phương thức để lưu đối tượng vào cơ sở dữ liệu

Lưu đối tượng vào cơ sở dữ liệu xảy ra với phương thức lưu được đặt tên thích hợp, phương thức này có thể được cung cấp cùng với trình xử lý sự kiện với phương thức then

note.save().then(result => {
  console.log('note saved!')
  mongoose.connection.close()
})

Khi đối tượng được lưu vào cơ sở dữ liệu, trình xử lý sự kiện được cung cấp sau đó được gọi. Trình xử lý sự kiện đóng kết nối cơ sở dữ liệu bằng lệnh mongoose.connection.close(). Nếu kết nối không được đóng, chương trình sẽ không bao giờ kết thúc quá trình thực hiện

Kết quả của thao tác lưu nằm trong tham số kết quả của trình xử lý sự kiện. Kết quả không thú vị lắm khi chúng ta lưu trữ một đối tượng trong cơ sở dữ liệu. Bạn có thể in đối tượng ra bàn điều khiển nếu bạn muốn xem xét kỹ hơn đối tượng đó trong khi triển khai ứng dụng của mình hoặc trong khi gỡ lỗi

Chúng ta cũng hãy lưu thêm một vài ghi chú bằng cách sửa đổi dữ liệu trong mã và bằng cách thực hiện lại chương trình

NB. Thật không may, tài liệu Mongoose không nhất quán lắm, với các phần của nó sử dụng các lệnh gọi lại trong các ví dụ của nó và các phần khác, các kiểu khác, vì vậy không nên sao chép và dán mã trực tiếp từ đó. Không nên kết hợp các lời hứa với các cuộc gọi lại trường học cũ trong cùng một mã

Tìm nạp các đối tượng từ cơ sở dữ liệu

Hãy bình luận mã để tạo ghi chú mới và thay thế nó bằng đoạn mã sau

Note.find({}).then(result => {
  result.forEach(note => {
    console.log(note)
  })
  mongoose.connection.close()
})

Khi mã được thực thi, chương trình sẽ in tất cả các ghi chú được lưu trữ trong cơ sở dữ liệu

Các đối tượng được lấy từ cơ sở dữ liệu bằng phương thức của mô hình Note. Tham số của phương thức là đối tượng thể hiện điều kiện tìm kiếm. Vì tham số là một đối tượng trống_______9_______, nên chúng tôi nhận được tất cả các ghi chú được lưu trữ trong bộ sưu tập ghi chú

MongoDB kết nối với trang phản ứng như thế nào?

React JS lấy dữ liệu từ cơ sở dữ liệu như thế nào?

Làm cách nào để gửi dữ liệu đến cơ sở dữ liệu trong phản ứng?

Làm cách nào để lấy dữ liệu từ MongoDB lên giao diện người dùng?