Phản ứng Axios MongoDB

Tôi sẽ sử dụng Nút. js, Thể hiện. js và MongoDB làm nền tảng phụ trợ và cơ sở dữ liệu cho dự án demo này. Ở mặt trước, tôi sẽ sử dụng React. js và Bootstrap. Trong mọi dự án, chúng ta cần tạo API REST ở một số giai đoạn. Axios là ứng dụng khách HTTP nhẹ dựa trên tương tự như API tìm nạp

Axios là gì

Axios là ứng dụng khách HTTP phổ biến cho phép chúng tôi thực hiện các yêu cầu GET và POST từ trình duyệt. Do đó, chúng ta có thể sử dụng Axios với React để đưa ra yêu cầu đối với API, trả về dữ liệu từ API và sau đó thực hiện mọi việc với dữ liệu đó trong ứng dụng React của chúng ta.

Cơ sở dữ liệu và dịch vụ web có API (Giao diện lập trình ứng dụng), ứng dụng có thể giao tiếp với API này thông qua URL. Nói cách khác, API cho phép ứng dụng truy xuất hoặc gửi dữ liệu đến và từ cơ sở dữ liệu hoặc dịch vụ web.

Ứng dụng sử dụng các yêu cầu HTTP, chẳng hạn như GET, POST và PUT để giao tiếp với các API. Tóm lại, Axios giúp các ứng dụng của chúng tôi dễ dàng thực hiện các lệnh này

phản ứng trục

React là thư viện giao diện người dùng và Axios là thư viện async/await dựa trên lời hứa dành cho mã không đồng bộ có thể đọc được. Do đó, chúng tôi có thể dễ dàng tích hợp với React với bất kỳ khung phụ trợ nào bằng thư viện axios.

Nếu bạn chưa quen với React;

1. Đối tượng trạng thái được sử dụng để chứa các phần trạng thái của ứng dụng
2. Phương thức setState() để thay đổi giá trị trong đối tượng trạng thái
3. Móc vòng đời componentDidMount(). Điều này được thực thi khi thành phần React của bạn được chèn/gắn vào DOM
4. JSX để thêm HTML vào JavaScript

Chúng tôi bắt đầu ví dụ này bằng cách cài đặt React. js sử dụng ứng dụng tạo-phản ứng

Bước 1. Cài đặt phản ứng. js

Cài đặt ứng dụng tạo phản ứng trên toàn cầu bằng lệnh sau. Bạn cần nhập lệnh này ở chế độ quản trị

npm install -g create-react-app
create-react-app reactaxios

Bước 2. Cài đặt Bootstrap 4

Cài đặt Bootstrap 4 bằng lệnh sau

npm install bootstrap --save

Bao gồm bootstrap. tối thiểu. css bên trong Ứng dụng. tệp js

// App.js

import React, { Component } from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    return (
      

        React Axios Tutorial
      
    );
  }
}

export default App;

Okay, bây giờ chúng ta đã tích hợp thành công Bootstrap 4

Bước 3. Tạo các thành phần React

Trong thư mục src tạo một thư mục mới có tên là thành phần

Được rồi, bên trong thư mục thành phần, hãy tạo hai thành phần

1. Tạo ra. js
2. Mục lục. js

// Create.js

import React, { Component } from 'react';

export default class Create extends Component {
    render() {
        return (
            

                
Welcome to Create Component!!
            
        )
    }
}

// Index.js

import React, { Component } from 'react';

export default class Index extends Component {
    render() {
        return (
            

                
Welcome to Index Component!!
            
        )
    }
}

Bước 4. Tạo định tuyến của các thành phần

Cài đặt thư viện định tuyến sau

npm install react-router-dom --save

Chuyển đến chỉ mục. js và Bọc đối tượng BrowserRouter xung quanh Ứng dụng. js thành phần

// App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    
    
    , document.getElementById('root'));
registerServiceWorker();

Bây giờ, hãy xác định các tuyến đường cho từng thành phần

// App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Create from './components/Create';
import Index from './components/Index';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    return (
      
        

          
Welcome to React Express Tutorial
          

            
Create
            
List
          
          

          
              
              
          
        
      
    );
  }
}

export default App;

Bây giờ, hãy truy cập URL này. http. //máy chủ cục bộ. 3000/tạo

Bước 5. Tạo thanh điều hướng

Được rồi, bây giờ hãy viết đoạn mã sau vào trong Ứng dụng. tệp js

Bước 6. Tạo Biểu mẫu Bootstrap 4

Thêm mã Biểu mẫu HTML bên trong Tạo. js

// Create.js

import React, { Component } from 'react';

export default class Create extends Component {
    render() {
        return (
            

                
Add New Server
                

                    

                        Add Host Name:  
                        
                    
                    

                        Add Server Port: 
                        
                    
                    

                        
                    
                
            
        )
    }
}

Bước 7. Gửi Tạo. biểu mẫu js

Vì vậy, bây giờ chúng ta có hai lĩnh vực

1. tên máy chủ
2. cổng máy chủ

Vì vậy, chúng ta cần tạo hai hàm có thể theo dõi cả hai giá trị và đặt trạng thái theo nó. Ngoài ra, hãy tạo chức năng thứ ba sẽ gửi yêu cầu POST tới nút. máy chủ js

Bây giờ, tôi cần tạo một sự kiện theo dõi trạng thái của cả hai loại đầu vào

Cuối cùng, khi chúng tôi nhấp vào nút gửi, dữ liệu được cung cấp cho máy chủ

npm install bootstrap --save

Bước 8. Tạo máy chủ phụ trợ trongNode. js

Trước tiên, hãy khởi động máy chủ cơ sở dữ liệu MongoDB bằng lệnh sau

npm install bootstrap --save

Trong thư mục gốc, tạo một tệp có tên máy chủ. js

Bây giờ, cài đặt nút sau. phụ thuộc js

npm install bootstrap --save

Ngoài ra, chúng ta cần cài đặt gật đầu như một phụ thuộc phát triển

npm install bootstrap --save

Được rồi, bây giờ hãy viết đoạn mã sau bên trong máy chủ. tệp js

npm install bootstrap --save

Bây giờ, hãy tạo một DB. js bên trong thư mục gốc

npm install bootstrap --save

Bây giờ, nhập DB này. js vào máy chủ. js và kết nối một nút. js vào cơ sở dữ liệu MongoDB

npm install bootstrap --save

Bây giờ hãy mở thiết bị đầu cuối và bạn có thể thấy rằng cơ sở dữ liệu của chúng tôi được kết nối với ứng dụng Node Express của chúng tôi

Bước 9. Tạo lược đồ Mongoose

Tạo một thư mục bên trong thư mục gốc có tên models và bên trong thư mục đó, tạo một tệp có tên ServerPort. js

npm install bootstrap --save

Bước 10. Tạo các tuyến đường cao tốc

Tạo một thư mục có tên tuyến đường. Sau đó, bên trong thư mục định tuyến đó, hãy tạo một tệp có tên ServerPortRouter. js

npm install bootstrap --save

Ở đây, tôi đã xác định cả hai tuyến yêu cầu GET và POST

Tôi đã sử dụng Mongoose ORM để lưu dữ liệu trong cơ sở dữ liệu MongoDB

Bước cuối cùng là nhập ServerPortRouter. js trong máy chủ. tập tin js. Do đó, máy chủ. js có dạng như bên dưới

npm install bootstrap --save

Bước 11. Cài đặt thư viện Axios

Được rồi, chúng tôi sẽ cài đặt Axios qua npm bằng lệnh sau

// App.js

import React, { Component } from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    return (
      

        React Axios Tutorial
      
    );
  }
}

export default App;

Bây giờ, hãy gửi yêu cầu bài đăng và dữ liệu biểu mẫu tới nút và máy chủ tốc hành

Trước tiên, chúng ta cần nhập thư viện axios bên trong Create. js và sử dụng thư viện đó để gửi yêu cầu POST

// App.js

import React, { Component } from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    return (
      

        React Axios Tutorial
      
    );
  }
}

export default App;

Bây giờ, hãy nhập các giá trị và gửi biểu mẫu. Tiếp theo, hãy mở bảng điều khiển trình duyệt của bạn và xem phản hồi

Chúng ta có thể thấy rằng các giá trị được lưu trong cơ sở dữ liệu MongoDB

Bước 12. Gửi Axios NHẬN yêu cầu

Loại yêu cầu HTTP phổ biến nhất là yêu cầu GET. Nó cho phép chúng tôi truy xuất dữ liệu từ API và sử dụng nó trong ứng dụng React

Thêm một phương thức componentDidMount() bên trong Index. js, sau đó thêm đoạn mã sau

// App.js

import React, { Component } from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    return (
      

        React Axios Tutorial
      
    );
  }
}

export default App;

Bây giờ hãy viết thành phần không trạng thái, TableRow. js mà chúng ta cần tạo bên trong thư mục components

// App.js

import React, { Component } from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    return (
      

        React Axios Tutorial
      
    );
  }
}

export default App;

Được rồi, bây giờ hãy truy cập http. //máy chủ cục bộ. 3000/chỉ số

Chúng ta có thể thấy rằng chúng ta đã gửi thành công một yêu cầu Axios GET từ React. thành phần js

Vì vậy, trong ví dụ này, chúng ta đã thấy React with Axios Get và React with Axios post request

Xử lý lỗi trong Axios với Async/Await

Cách thông thường để xử lý lỗi trong JavaScript khi sử dụng lời hứa là thông qua. phương pháp bắt (). Cái hay của việc sử dụng async/await là chúng ta có thể quên nó đi và thay vào đó sử dụng các câu lệnh try/catch

Đây là cách yêu cầu ở trên sẽ được viết lại bằng try/catch. Yêu cầu cũng được điều chỉnh để nó sẽ thất bại

// App.js

import React, { Component } from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    return (
      

        React Axios Tutorial
      
    );
  }
}

export default App;

Và, tất nhiên, chúng tôi gặp lỗi khi đăng nhập vào bảng điều khiển của mình

Khối bắt là nơi lý tưởng để phân tích lỗi được trả về. Đây cũng là một nơi tuyệt vời để hiển thị cho người dùng của bạn một thông báo phản hồi thích hợp

Mã Github

Các bước sử dụng Mã Github

1. Khởi động máy chủ MongoDB bằng lệnh này. mongod
2. Sao chép kho lưu trữ. Đi vào thư mục dự án
3. Cài đặt tất cả các phụ thuộc bằng lệnh này. cài đặt npm
4. Bắt đầu nút. máy chủ js sử dụng lệnh này. máy chủ gật đầu
5. Bắt đầu phản ứng. máy chủ phát triển js bằng lệnh này. bắt đầu sợi
6. Chuyển đến URL này. http. //máy chủ cục bộ. 3000/tạo

Sự kết luận

Xử lý các yêu cầu React với Axios rất dễ hiểu

Vì vậy, trong ví dụ về React Axios này, tôi đã mô tả những điều sau

1. Axios là gì, cài đặt và cấu hình nó như thế nào?
2. Cài đặt phản ứng. js và cấu hình React với Axios
3. Cấu hình nút. cơ sở dữ liệu và phụ trợ js, Express và MongoDB
4. Gửi yêu cầu Axios Post từ React frontend
5. Gửi yêu cầu Axios Get để lấy dữ liệu từ máy chủ

Đó là nó cho hướng dẫn này

Mọi Người Cũng Hỏi

React Redux Node MongoDB Xác thực JWT

Phản ứng Redux Axios

Cách kết nối React và Redux

phản ứng CRUD

Redux Thunk

Facebook

Twitter

Pinterest

WhatsApp

Bài viết trước Cách tạo tiện ích con có trạng thái trong Flutter

Bài viết tiếp theo Phản ứng Datepicker. Hướng dẫn đầy đủ

kranal

https. //appdividend. com/

Krunal Lathiya là một kỹ sư công nghệ thông tin. Theo chuyên môn, anh ấy là một nhà phát triển web có kiến ​​thức về nhiều nền tảng back-end (e. g. , PHP, Nút. js, Python) và các khung JavaScript giao diện người dùng (e. g. , Góc, Phản ứng và Vue)

Tôi có thể sử dụng Axios trong React không?

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

Làm cách nào để chuyển dữ liệu từ MongoDB sang Axios?

Làm cách nào để tìm nạp dữ liệu từ cơ sở dữ liệu trong phản ứng JS bằng Axios?