用 Node.js + React 从头开始构建一个简单的 CRUD 应用

构建一个完整的 CRUD 应用的优点

构建一个完整的 CRUD 应用有很多优点，包括：

• 数据管理 ：CRUD 应用允许您轻松地管理数据，例如创建、读取、更新和删除记录。
• 数据安全 ：CRUD 应用可以帮助您保护数据，防止未经授权的访问和修改。
• 数据一致性 ：CRUD 应用可以帮助您确保数据的一致性，这意味着数据在所有系统中都是相同的。
• 数据可用性 ：CRUD 应用可以帮助您确保数据可用，这意味着数据可以在需要时被访问。

使用 Node.js + React 构建 CRUD 应用的步骤

1. 设置项目

首先，我们需要设置我们的项目。

1.1 创建 Node.js 项目

$ mkdir my-crud-app
$ cd my-crud-app
$ npm init -y

1.2 安装依赖项

$ npm install express mysql2 body-parser cors

1.3 创建数据库

$ mysql -u root -p
CREATE DATABASE my_crud_db;

1.4 创建数据表

$ mysql -u root -p my_crud_db
CREATE TABLE products (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  price DECIMAL(10, 2) NOT NULL,
  PRIMARY KEY (id)
);

2. 创建 Node.js 服务器

现在，我们需要创建一个 Node.js 服务器。

// server.js

const express = require('express');
const mysql = require('mysql2');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(bodyParser.json());
app.use(cors());

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'my_crud_db'
});

// Create a product
app.post('/products', (req, res) => {
  const { name, price } = req.body;

  connection.query('INSERT INTO products (name, price) VALUES (?, ?)', [name, price], (err, result) => {
    if (err) {
      res.status(500).send({ error: 'An error occurred while creating the product.' });
    } else {
      res.status(201).send({ success: 'Product created successfully.' });
    }
  });
});

// Get all products
app.get('/products', (req, res) => {
  connection.query('SELECT * FROM products', (err, results) => {
    if (err) {
      res.status(500).send({ error: 'An error occurred while getting the products.' });
    } else {
      res.status(200).send({ products: results });
    }
  });
});

// Get a single product by id
app.get('/products/:id', (req, res) => {
  const id = req.params.id;

  connection.query('SELECT * FROM products WHERE id = ?', [id], (err, result) => {
    if (err) {
      res.status(500).send({ error: 'An error occurred while getting the product.' });
    } else {
      res.status(200).send({ product: result[0] });
    }
  });
});

// Update a product by id
app.put('/products/:id', (req, res) => {
  const id = req.params.id;
  const { name, price } = req.body;

  connection.query('UPDATE products SET name = ?, price = ? WHERE id = ?', [name, price, id], (err, result) => {
    if (err) {
      res.status(500).send({ error: 'An error occurred while updating the product.' });