Hướng dẫn can you use axios with mongodb? - bạn có thể sử dụng axios với mongodb không?

Giới thiệu

API REST và React đều là những công nghệ rất phổ biến trong các lĩnh vực tương ứng của chúng và chúng cũng rất thú vị để kết hợp trong một dự án. and React are both very popular technologies in their respective fields and they are also very interesting to combine in a project.

Vào cuối hướng dẫn này, bạn sẽ có một dự án phản ứng cơ bản có khả năng truy xuất danh sách các quốc gia thông qua API REST và hiển thị chúng trên trang web.

Trong bài đăng trên blog tiếp theo, tôi sẽ sử dụng dự án này làm điểm khởi đầu. Danh sách các quốc gia sẽ trở thành bộ lọc cho một loạt các biểu đồ được xây dựng với các biểu đồ MongoDB mà tôi sẽ có thể nhập vào một trang web bằng SDK của bảng xếp hạng MongoDB. Kết quả cuối cùng sẽ là bảng điều khiển Covid-19, sẽ dễ dàng được lọc theo quốc gia.MongoDB Charts SDK. The final result will be a COVID-19 dashboard which will be easy to filter by country.

Điều kiện tiên quyết

Để xây dựng dự án này, bạn sẽ cần một phiên bản gần đây của NodeJS.NodeJS.

Vui lòng kiểm tra xem các phiên bản node, npmnpx của bạn có gần với các phiên bản của tôi không:node, npm, and npx are close to my versions:

Hướng dẫn can you use axios with mongodb? - bạn có thể sử dụng axios với mongodb không?

Trong phần thân của bài đăng trên blog này, tôi sẽ bước qua cách xây dựng ứng dụng này. Nếu bạn không muốn theo dõi và bạn thích nhảy vào dự án cuối cùng, bạn có thể sao chép kho lưu trữ này từ GitHub:

Tạo một ứng dụng React

Lệnh cuối cùng sẽ tự động mở một tab mới trong trình duyệt yêu thích của bạn tại địa chỉ http: // localhost: 3000 và bạn sẽ thấy logo quay phản ứng mặc định. Trước khi chúng tôi tiếp tục, chúng tôi có thể đơn giản hóa dự án bằng cách xóa tất cả các tệp chúng tôi không cần.http://localhost:3000, and you should see the default React spinning logo. Before we continue, we can simplify the project by removing all the files we don't need.

Bây giờ chúng tôi có một tấm bạt sạch cho bước tiếp theo.

Cài đặt Axios

Axios là một ứng dụng khách HTTP dựa trên lời hứa cho Node.js và máy khách HTTP nổi tiếng nhất, theo như tôi biết, với hơn 14 triệu lượt tải xuống hàng tuần. Chúng tôi sẽ sử dụng nó để truy vấn API REST của chúng tôi và truy xuất danh sách các quốc gia để hiển thị.

Kiểm tra API còn lại

Như đã đề cập trong phần giới thiệu, API còn lại mà chúng tôi sẽ sử dụng trong bài đăng trên blog này đã tồn tại và được tạo bằng các dịch vụ ứng dụng MongoDB Atlas để nó có thể mở rộng dễ dàng và tự động. API REST này hiển thị siêu dữ liệu từ cụm dữ liệu mở Covid-19 mà chúng tôi đã cung cấp công khai. Kiểm tra bài viết trên blog này cho tất cả các chi tiết.COVID-19 Open Data Cluster that we made publicly available. Check out this blog post for all the details.

Kết quả từ việc truy cập API REST này là một tài liệu JSON trông như thế này:

Bây giờ chúng tôi có mọi thứ chúng tôi cần để xây dựng trang web React của chúng tôi, hãy mã hóa!

Xây dựng trang web

Nếu bạn đã làm theo tất cả các hướng dẫn cho đến nay, đây là thư mục làm việc của bạn sẽ trông như thế nào:

Favicon hiện tại là logo React. Bạn hoàn toàn có thể thay thế nó bằng một mongDB.MongoDB one 😎.

Bây giờ chúng ta hãy chỉnh sửa nội dung của public/index.html. Không có gì thực sự lạ mắt so với phiên bản gốc đi kèm với ứng dụng mẫu. Tôi vừa loại bỏ những gì không cần thiết.public/index.html. Nothing really fancy compared to the original version that came with the sample application. I just removed what wasn't necessary.

Điều duy nhất mà chúng ta cần nhận thấy trong tệp này là thực tế là chúng ta hiện có một div trống với ID root mà chúng ta sẽ sử dụng để tiêm nội dung React.div with an id root which we will use to inject our React content.

Hãy tạo một tệp mới src/index.js:src/index.js:

Chúng tôi hiện đang đưa nội dung React của chúng tôi vào trang web của chúng tôi và nội dung sẽ là những gì thành phần RestExample mới sẽ hiển thị.RestExample component will render.

Bây giờ bạn có thể bắt đầu dự án với lệnh:

Có một vài điều đáng để giải thích ở đây nếu bạn mới phản ứng:

  • Trên dòng 6, chúng tôi đang tạo một trạng thái, countries, được khởi tạo thành một mảng trống và hàm setCountries() có thể thay đổi giá trị của biến đó. Thêm tài liệu ở đây.countries, that is initialised to an empty array and a function setCountries() that can alter the value of that variable. More documentation here.

  • Với sự trợ giúp của hàm npm0 (bắt đầu từ dòng 8) và thư viện Axios, chúng tôi có thể thực thi chức năng một lần, trích xuất các quốc gia từ phản hồi và đặt các giá trị countries từ danh sách của chúng tôi. Thêm tài liệu ở đây.npm0 function (starting at line 8) and the Axios library, we can execute the function once, extract the countries from the response, and set the countries values from our list. More documentation here.

  • Cuối cùng, thành phần chức năng của chúng tôi sẽ hiển thị nội dung được trả về. Hàm npm2 lặp lại trong danh sách các quốc gia và chuyển đổi từng chuỗi thành thẻ npm3 để tạo danh sách HTML không theo thứ tự.npm2 function iterates over the list of countries and transforms each of the strings into an npm3 tag to create an HTML unordered list.

Kết quả cuối cùng

Trang web cuối cùng sẽ trông như thế này:

Hướng dẫn can you use axios with mongodb? - bạn có thể sử dụng axios với mongodb không?

Nếu bạn bị nhầm lẫn tại bất kỳ điểm nào và ứng dụng của bạn không hoạt động, chỉ cần sao chép dự án cuối cùng:

Bản tóm tắt

Trong bài đăng trên blog này, bạn đã học cách tạo một trang web React cơ bản sử dụng Axios để truy xuất dữ liệu từ cụm Atlas MongoDB bằng cách sử dụng API REST được triển khai với Dịch vụ ứng dụng MongoDB Atlas.

Trong bài đăng trên blog tiếp theo trong loạt bài này, chúng tôi sẽ mở rộng dự án này để chúng tôi có thể tích hợp một số biểu đồ từ biểu đồ MongoDB. Chúng tôi sẽ hiển thị dữ liệu Covid-19 cho một quốc gia và chọn quốc gia nào chúng tôi muốn lọc. Giữ nguyên!

Nếu bạn có thắc mắc, vui lòng truy cập trang web cộng đồng nhà phát triển của chúng tôi nơi các kỹ sư MongoDB và cộng đồng MongoDB sẽ giúp bạn xây dựng ý tưởng lớn tiếp theo của mình với MongoDB.developer community website where the MongoDB engineers and the MongoDB community will help you build your next big idea with MongoDB.

Làm thế nào chuyển dữ liệu từ MongoDB sang Axios?

Sử dụng Mongoose và Axios để tải dữ liệu APU lên MongoDB..
Đảm bảo bạn đã cài đặt NodeJS và NPM, NPM đi kèm với NodeJS ..
NPM Cài đặt Axios Mongoose ..
Yêu cầu các gói trong chỉ mục của bạn. ....
Nhận mã thông báo API và URL yêu cầu (Tôi sẽ sử dụng URL API kho lưu trữ của mình).
Kết nối với DB và lấy dữ liệu từ GitHub ..

Tôi có thể sử dụng React với MongoDB không?

Trước hết, chúng ta không thể kết nối React JS với MongoDB vì mọi thứ không hoạt động như thế này.Đầu tiên, chúng tôi tạo một ứng dụng React và sau đó để bảo trì phụ trợ, chúng tôi tạo API trong nút.JS và Express.JS đang chạy ở một cổng khác và ứng dụng React của chúng tôi chạy ở một cổng khác.we can not connect React JS to MongoDB because things don't work like this. First, we create a react app, and then for backend maintenance, we create API in node. js and express. js which is running at a different port and our react app running at a different port.

MongoDB có tốt cho API không?

MongoDB REST API rất đơn giản để thiết lập và cho phép bạn lưu trữ và truy xuất các tài liệu, làm cho nó tuyệt vời cho dữ liệu phi cấu trúc.great for Unstructured Data.

Làm thế nào gửi dữ liệu từ phản ứng với MongoDB?

Làm thế nào gửi dữ liệu từ phản ứng với MongoDB ?..
ứng dụng.post ('/lưu trữ', (req, res) => {.
Bảng điều khiển.Nhật ký (req. Body) ;.
db.bộ sưu tập ('trích dẫn').Chèn (req. Body, (err, data) => {.
if (err) bảng điều khiển trả về.log (err) ;.
res.Gửi (('được lưu vào db:' + dữ liệu)) ;.