Cách kết nối mongodb với phản ứng js

Tôi đã viết một bài báo đầy đủ được cập nhật nhiều bằng cách sử dụng React + Relay modern + GraphQL + MongoDB + express. Kiểm tra nó ra ở đây

Khi tôi muốn nâng cấp từ Front End Developer lên Full Stack Developer, tôi đã gặp khó khăn khi tìm một bài viết bao gồm các khái niệm về tất cả các kỹ năng khác nhau mà tôi cần học để có thể trở thành một.

Kiến thức về cơ sở dữ liệu, làm quen với ngôn ngữ back-end và cách tích hợp back-end với ứng dụng front-end của tôi là những kỹ năng mà tôi chưa biết. Đó là những gì thúc đẩy tôi để tạo ra bài viết này. để giải quyết vấn đề đó để giúp bản thân tôi và các kỹ sư phần mềm đồng nghiệp của tôi ngoài kia

Tôi đã bao gồm liên kết kho lưu trữ git của toàn bộ mã ở cuối bài viết nhưng tôi khuyên bạn nên thực hiện từng bước bài viết này trước khi kiểm tra kho lưu trữ. Nó sẽ giúp bạn hiểu hướng dẫn tốt hơn. . )

“Chúng ta sẽ xây dựng cái gì”

Đây là ứng dụng của chúng ta sẽ trông như thế nào sau khi chúng ta xây dựng xong nó

Giao diện người dùng cho phép chúng tôi xem thông tin hiện tại bên trong cơ sở dữ liệu của chúng tôi. Nó cũng cho phép chúng tôi thêm dữ liệu mới vào đó, xóa dữ liệu hiện tại và cập nhật dữ liệu hiện có

Chúng tôi sẽ xây dựng nó từ không có gì. Chúng tôi sẽ thiết lập cơ sở dữ liệu của riêng mình, tạo mặt sau từ đầu và khởi động mặt trước của chúng tôi với mức tối thiểu

Vì vậy, hãy tự thắt dây an toàn và chuẩn bị sẵn sàng các ngón tay mã hóa của bạn

Những điều đầu tiên đầu tiên

Hãy tạo thư mục chính của dự án của chúng tôi. Điều này sẽ giữ cả mã cho mặt trước và mặt sau của ứng dụng của chúng tôi

mkdir fullstack_app && cd fullstack_app

Sau đó, hãy bắt đầu với giao diện người dùng của chúng tôi. Chúng tôi sẽ sử dụng ứng dụng tạo phản ứng để khởi động giao diện người dùng của chúng tôi, điều đó có nghĩa là chúng tôi sẽ không phải lo lắng về việc thiết lập Webpack hoặc Babel (vì ứng dụng tạo phản ứng sắp xếp tất cả điều này theo mặc định). Bây giờ chúng ta có thể tạo ứng dụng phản ứng của mình bằng ứng dụng tạo phản ứng (ý định chơi chữ). Để thực hiện việc này, chỉ cần nhập bất kỳ nội dung nào sau đây vào dòng lệnh

yarn create react-app client
npm init react-app my-app

Chúng tôi cũng sẽ cần Axios để thực hiện các yêu cầu nhận/đăng với ajax. Vì vậy, hãy cài đặt ngay bây giờ

npm i -S axios

Đợi nó hoàn thành và sau đó tiến hành tổ chức giao diện người dùng để sau này dễ dàng kết hợp với mặt sau của chúng ta

Đối với người dùng máy tính

del src\App.css src\App.test.js src\index.css src\logo.svg\

Đối với người dùng MAC

rm src/App.css src/App.test.js src/index.css src/logo.svg

Sau đó, hãy chỉnh sửa Ứng dụng của chúng tôi. js bên trong thư mục máy khách và để nó hiển thị một cái gì đó đơn giản. Chúng tôi sẽ chỉnh sửa thêm tệp này sau này khi chúng tôi đã sẵn sàng hỗ trợ

“Ứng dụng React đã sẵn sàng”

Chúng tôi cũng phải chỉnh sửa chỉ mục của mình. js và xóa một dòng mã khỏi đó. Chúng tôi chỉ cần xóa phần nhập '. /mục lục. css’;

"mục lục. js”

Để bắt đầu giao diện người dùng của chúng tôi, chỉ cần nhập cái này vào dòng lệnh

yarn create react-app client
npm init react-app my-app

2

và vào trình duyệt của bạn và gõ http. //máy chủ cục bộ. 3000/. Bây giờ bạn có thể thấy rằng giao diện người dùng của chúng tôi đã hoạt động

Quay lại chỉ một chút

Thời gian để thiết lập back-end của chúng tôi. Quay trở lại thư mục chính của chúng tôi và hãy tạo thư mục phụ của chúng tôi từ đó. Chúng tôi cũng sẽ khởi tạo thư mục này để chúng tôi có gói của mình. json đã sẵn sàng để xây dựng. Thiết bị đầu cuối của bạn sẽ nhắc bạn nhập một số chi tiết cho gói. json, chỉ cần nhấn enter cho đến khi hoàn tất

mkdir backend && cd backend
npm init

Tạo một tệp mới sẽ đóng vai trò là mã chính của chúng tôi cho mặt sau và đặt tên là máy chủ. js. Sau đó, gõ như sau vào nó. Mã back-end này khá cùn và cơ bản, tôi chỉ tạo nó để những người mới bắt đầu không phải suy nghĩ nhiều về độ phức tạp của mã hơn là họ sẽ nghĩ về ý định của mã. Sau đó, họ có thể dễ dàng điều khiển nó sau khi quấn đầu quanh nó. Tôi đã đặt nhận xét bên cạnh mọi phương pháp để dễ hiểu

“Xương sống của mọi ứng dụng web”

Bạn có thể nhận thấy rằng một liên kết cơ sở dữ liệu đã được sử dụng trong mã phía sau của chúng tôi. Đừng lo lắng, đó là bước tiếp theo trong bài viết của chúng tôi. Việc thiết lập nó cũng sẽ dễ dàng như vài bước trước. Đầu tiên, hãy vào MongoDB atlas và tạo một tài khoản ở đó. MongoDB Atlas sẽ cho phép chúng tôi sử dụng cơ sở dữ liệu MongoDB 500 MB miễn phí và sử dụng nó từ xa. Nó cũng được lưu trữ trên đám mây. Đây là xu hướng hiện tại trong ngành của chúng tôi và việc có được các kỹ năng cho phép chúng tôi sử dụng cơ sở dữ liệu đám mây là một tài sản thực sự hiện nay

Sau khi thiết lập tài khoản của bạn, hãy đăng nhập vào tài khoản của bạn. Thực hiện theo các bước do trang web nhắc nhở để tạo người dùng cụm và cụm/cơ sở dữ liệu của riêng bạn. Đây là danh sách kiểm tra hoặc các bước để tạo cơ sở dữ liệu mongoDB của riêng bạn

1. Xây dựng cụm đầu tiên của bạn
2. Tạo người dùng cơ sở dữ liệu đầu tiên của bạn
3. Đưa địa chỉ IP của bạn vào danh sách trắng (trong trường hợp của chúng tôi là địa chỉ localhost. 3001)
4. Kết nối cụm của bạn

Chúng tôi cần lấy chuỗi kết nối của cơ sở dữ liệu của mình, vì vậy đối với bước 4, chúng tôi chỉ cần nhấp vào nút kết nối của cụm đã tạo như hình bên dưới

kết nối cụm

Sau đó nhấp vào “chọn phương thức kết nối” ở phần dưới cùng của phương thức, chọn “Kết nối ứng dụng của bạn”. Sau đó, sao chép chuỗi hiển thị theo phương thức

chuỗi kết nối

Dán chuỗi uri này vào máy chủ của bạn. tập tin js. Tìm biến dbRoute và đặt liên kết có thông tin đăng nhập của bạn ở đó dưới dạng chuỗi

Bây giờ, quay lại mã nguồn phía sau của chúng tôi. Bây giờ chúng ta sẽ định cấu hình cơ sở dữ liệu của mình, để làm như vậy, hãy tạo một tệp có tên data. js. Nó nên có đoạn mã sau bên trong nó

“MongoDB, em yêu”

Chúng ta đang gần hoàn tất. Hãy cài đặt gói và mô-đun phía sau của chúng tôi và chúng tôi sẽ sẵn sàng. Chỉ cần vượt qua dòng này trên dòng lệnh của bạn

npm i -S mongoose express body-parser morgan cors

Bây giờ, nếu chúng tôi khởi chạy phần cuối của mình bằng cách sử dụng

________số 8

Chúng ta có thể thấy trong bảng điều khiển của mình rằng nó đã sẵn sàng và đang lắng nghe trên cổng 3001. Hãy quay lại giao diện người dùng của chúng ta và bắt đầu tạo các giao diện người dùng cần thiết để gửi các hành động tới MongoDB + Node của chúng ta. JS + Express. hệ thống JS

Aww vâng

Quay lại /client/src/Ứng dụng. js và áp dụng các thay đổi sau

“Đá phản ứng”

Cuối cùng, chúng tôi chỉnh sửa gói giao diện người dùng của mình. json và thêm proxy ở đó để trỏ đến cổng nơi phần cuối của chúng tôi được triển khai

Hãy nhớ rằng, đây là gói giao diện người dùng của chúng tôi. json để cái này được bao gồm trong thư mục máy khách. Chỉnh sửa ở đó

Ở đó, tất cả những gì còn lại phải làm là tạo ra nó để chúng tôi có thể khởi chạy giao diện người dùng sau đó là giao diện người dùng của chúng tôi cùng một lúc

Để làm điều đó, hãy quay lại thư mục chính của dự án của chúng tôi và gõ như sau

npm init -y
npm i -S concurrently

chỉnh sửa gói. json của thư mục dự án chính của chúng tôi. Thay đổi nó như sau

Tại đây, bạn có thể thấy bên dưới phím “scripts”, phím “start” sử dụng gói chúng ta vừa cài đặt, gói concurrently. Gói đó cho phép chúng tôi chạy mã phía sau bằng cách sử dụng

________số 8

Và mã giao diện người dùng sử dụng

yarn create react-app client
npm init react-app my-app

0

Có rất nhiều điều xảy ra để có thể làm được điều này, nhưng hiện tại, chúng tôi sẽ để nó như vậy và vui mừng vì nó hoạt động. Bây giờ, để bắt đầu ứng dụng của chúng tôi, chỉ cần vào thư mục chính của dự án của chúng tôi, sau đó gõ

yarn create react-app client
npm init react-app my-app

0

Một trình duyệt sẽ mở có chứa ứng dụng của chúng tôi và voila. Chúng tôi đã tạo ứng dụng MERN (FULL STACK) của riêng mình từ đầu. Hãy chơi xung quanh với nó. Sử dụng nó như một hộp cát để nắm bắt các khái niệm khác nhau của cả hai đầu tại đây

Oh, và một điều nữa. Đảm bảo bật CORS trên trình duyệt của bạn vì chúng tôi đang gọi các API của riêng mình thông qua máy của chính chúng tôi. Đây là một plug-in tuyệt vời để làm điều đó. 😬

Như đã hứa, đây là git repo

Đó là tất cả mọi người, cổ vũ

Tôi hy vọng rằng tôi đã cung cấp các hướng dẫn rõ ràng và tôi có thể truyền đạt nhiều kiến ​​​​thức nhất có thể cho bạn, người đọc

Nếu bạn thấy điều này hữu ích, hãy chắc chắn để lại một vài tiếng vỗ tay. Ồ, và chia sẻ nó trên các nền tảng xã hội của bạn nữa. . )

Tôi có thể kết nối MongoDB với React không?

Ứng dụng React có thể kết nối với cơ sở dữ liệu không?

Chúng ta có thể kết nối MySQL với React JS không?

Cách lấy dữ liệu từ cơ sở dữ liệu trong phản ứng JS?