Hướng dẫn how do you post data in mysql using react js? - làm cách nào để bạn đăng dữ liệu trong mysql bằng cách sử dụng phản ứng js?

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 start

import React, { Component } from 'react'

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

function App() {
  return (
    

      
How to Add Custom Validatin with Forms in React
    
  );
}

export default App;

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('http://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 start

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 start

Để 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

Bước 2 - Cài đặt Trình xác thực và Bootstrap

Làm thế nào kết nối phản ứng JS với cơ sở dữ liệu MySQL?

Làm thế nào gửi dữ liệu đến cơ sở dữ liệu trong React JS?

Làm thế nào có thể sử dụng React JS Node JS MySQL cùng nhau?

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