React JS truyền dữ liệu đến ứng dụng Node JS Express; Hướng dẫn này sẽ hướng dẫn bạn cách gửi hoặc truyền dữ liệu biểu mẫu từ ứng dụng React JS sang nút JS Express Ứng dụng và lưu trữ trên cơ sở dữ liệu MySQL bằng Fetch [].
Hướng dẫn này sẽ tạo một biểu mẫu đơn giản trong ứng dụng React JS và gửi dữ liệu của biểu mẫu này đến ứng dụng Node JS Express. Ngoài ra, dữ liệu sẽ được lưu trong cơ sở dữ liệu MySQL.
Trong ứng dụng React JS, rất dễ gọi API API của ứng dụng Node JS. Trong hướng dẫn này, bạn sẽ tìm hiểu cách gọi API của ứng dụng Node JS Express từ ứng dụng React JS và cũng cách gửi dữ liệu trong ứng dụng Node JS từ ứng dụng React và lưu trữ trên cơ sở dữ liệu MySQL.
- Tạo ứng dụng Frontend React JS
- Bước 1 - Tạo ứng dụng React
- Bước 2 - Cài đặt Trình xác thực và Bootstrap
- Bước 3 - Tạo lớp xác thực biểu mẫu
- Bước 4 - Tạo biểu mẫu đăng ký trong App.js
- Tạo Node JS Express phụ trợ
- Bước 5 - Tạo ứng dụng Node JS
- Bước 6 - Tạo bảng trong cơ sở dữ liệu
- Bước 7 - Cài đặt phụ thuộc phân tích cú pháp cơ thể Express CORS và MySQL
- Bước 8 - Tạo API trong tệp JS Server JS
- Bước 9 - Bắt đầu ứng dụng Node JS Express
Tạo ứng dụng Frontend React JS
Bước 1 - Tạo ứng dụng React
Bước 2 - Cài đặt Trình xác thực và Bootstrap
npx create-react-app my-react-app
Bước 3 - Tạo lớp xác thực biểu mẫu
npm start
Bước 4 - Tạo biểu mẫu đăng ký trong App.js
Tạo Node JS Express phụ trợ
Bước 5 - Tạo ứng dụng Node JS
npm install bootstrap --save npm install --save validator
Bước 6 - Tạo bảng trong cơ sở dữ liệubootstrap.min.css file in
npm start1 file:
import React, { Component } from 'react' import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; function App[] { return []; } export default App;How to Add Custom Validatin with Forms in React
Bước 3 - Tạo lớp xác thực biểu mẫu
Bước 4 - Tạo biểu mẫu đăng ký trong App.jsMyForm.js file. So, visit the src directory of your react js app and create a custom validation component file named MyForm.js. And add the following code into it:
import React from 'react' class MyForm extends React.Component { constructor[props] { super[props]; this.state = { name: '' }; } handleChange = [event] => { this.setState[{[event.target.name]: event.target.value}]; } handleSubmit = [event] => { alert['A form was submitted: ' + this.state]; fetch['//localhost:3000/store-data', { method: 'POST', // We convert the React state to JSON and send it as the POST body body: JSON.stringify[this.state] }].then[function[response] { console.log[response] return response.json[]; }]; event.preventDefault[]; } render[] { return [ Name: ]; } } export default MyForm;
Tạo Node JS Express phụ trợ
Bước 5 - Tạo ứng dụng Node JS
Bước 6 - Tạo bảng trong cơ sở dữ liệu MyForm.js file in
npm start1 file:
import React from 'react'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import MyForm from './MyForm' function App[] { return []; } export default App;
Tạo Node JS Express phụ trợ
Bước 5 - Tạo ứng dụng Node JS
Bước 6 - Tạo bảng trong cơ sở dữ liệu
mkdir my-app cd my-app npm init -y
Bước 6 - Tạo bảng trong cơ sở dữ liệu
Bước 7 - Cài đặt phụ thuộc phân tích cú pháp cơ thể Express CORS và MySQL
CREATE TABLE users[ id INT[11] PRIMARY KEY AUTO_INCREMENT, name VARCHAR[200] ]ENGINE=INNODB;
Bước 7 - Cài đặt phụ thuộc phân tích cú pháp cơ thể Express CORS và MySQL
Bước 8 - Tạo API trong tệp JS Server JS
npm install --save express cors mysql body-parser npm install nodemon --save-dev
Bước 8 - Tạo API trong tệp JS Server JS
Bước 9 - Bắt đầu ứng dụng Node JS Express
const express = require["express"]; const bodyParser = require['body-parser']; const cors = require["cors"]; const app = express[]; app.use[cors[]]; // parse application/json app.use[bodyParser.json[]]; //create database connection const conn = mysql.createConnection[{ host: 'localhost', user: 'root', password: '', database: 'my_db' }]; //connect to database conn.connect[[err] =>{ if[err] throw err; console.log['Mysql Connected...']; }]; //add new user app.post['/store-data',[req, res] => { let data = {name: req.body.name}; let sql = "INSERT INTO users SET ?"; let query = conn.query[sql, data,[err, results] => { if[err] throw err; res.send[JSON.stringify[{"status": 200, "error": null, "response": results}]]; }]; }]; app.listen[3000, [] => { console.log["Server running successfully on 3000"]; }];
Bước 9 - Bắt đầu ứng dụng Node JS Express
Trong bước này, hãy mở thiết bị đầu cuối của bạn và thực hiện lệnh sau trên thiết bị đầu cuối của bạn để tạo ứng dụng React mới:
npm start0
Để chạy ứng dụng React, hãy thực hiện lệnh sau trên thiết bị đầu cuối của bạn:
Kiểm tra ứng dụng React của bạn trên url này: localhost: 3000