实战篇：（二）React 创建项目并连接 MySQL 后台的实战教程

React 创建项目并连接 MySQL 后台的实战教程

一、项目概述

本篇博客将介绍如何使用 React 搭建前端项目，并通过 Node.js 和 MySQL 实现简单的后台数据连接。通过这个项目，你将掌握从前端到后端数据库的基础开发流程，适合初学者或正在项目实战中的开发者。

二、项目准备

1. 环境搭建

• Node.js：确保已经安装 Node.js，可以通过命令 node -v 检查。
• npm 或 yarn：用于管理项目的依赖包。
• MySQL：作为数据库管理工具。
• VSCode：代码编辑工具，安装必要的插件如 ESLint、Prettier 等。

2. 初始化 React 项目

使用 create-react-app 快速创建一个 React 项目：

npx create-react-app my-react-project
cd my-react-project

项目初始化完成后，可以使用以下命令启动开发服务器：

npm start

现在你可以在浏览器中访问 http://localhost:3000，查看 React 应用是否运行成功。

三、项目搭建 - 实战步骤

注：工具篇：（三）MacOS 两种方式下载 Node.js 并进行测试教程
注：工具篇：（一）MacOS 下使用 Navicat 管理 MySQL 数据库：详细图文教程与常见问题解决
注：工具篇：（二）MacOS 下载 MySQL 并进行配置连接，使用 VSCode 创建 Node 项目-亲测有效
注：工具篇：（五）MacOS使用Postman 测试接口：从 创建MySQL数据库到 Node 项目

1. 创建后端（Node + Express）

初始化 Node 项目

首先在项目根目录下创建一个新的文件夹用于后端代码：

mkdir my-react-node
cd my-react-node
npm init -y

然后安装必要的依赖包：

npm install express mysql2 dotenv

创建 Express 服务器

在 server 文件夹中创建 index.js 文件，配置一个简单的 Express 服务器：

const express = require('express');
const app = express();
const mysql = require('mysql2');
require('dotenv').config();

const db = mysql.createConnection({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME
});

db.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL database');
});

app.use(express.json());

app.get('/api/users', (req, res) => {
  db.query('SELECT * FROM users', (err, result) => {
    if (err) throw err;
    res.json(result);
  });
});

app.listen(5000, () => {
  console.log('Server is running on port 5000');
});

配置 .env 文件

在 server 文件夹中创建 .env 文件，添加数据库配置信息：

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=yourpassword
DB_NAME=mydatabase

数据库表设计

使用 Navicat 或 MySQL 命令行创建一个 users 表：

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) NOT NULL
);

四、React 前端与 Node 后端的连接

1. 安装 Axios

在前端项目中使用 axios 进行 API 请求：

npm install axios

2. 创建 API 请求

在 React 项目中创建一个简单的组件用于显示用户数据：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Users = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/users')
      .then(response => {
        setUsers(response.data);
      })
      .catch(error => {
        console.error('There was an error fetching the users!', error);
      });
  }, []);

  return (
    <div>
      <h1>Users List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default Users;

3. 跨域配置

为了让 React 前端能够访问 Node 后端 API，需要在服务器端添加 CORS 中间件：

npm install cors

在 index.js 中添加以下代码：

const cors = require('cors');
app.use(cors());

五、总结

通过本篇博客的实战步骤，成功搭建了一个 React 前端项目，并使用 Node.js 和 MySQL 作为后端服务。这种全栈开发的模式适合中小型项目开发，同时也为学习前后端分离架构打下坚实的基础。后续可以考虑增加更多功能，如用户注册、登录等。

你可以根据需求进一步扩展和定制项目。希望这篇教程对你有所帮助！