实战篇:(二)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 项目:

bash 复制代码
npx create-react-app my-react-project
cd my-react-project

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

bash 复制代码
npm start

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

三、项目搭建 - 实战步骤

注:工具篇:(三)MacOS 两种方式下载 Node.js 并进行测试教程

注:工具篇:(一)MacOS 下使用 Navicat 管理 MySQL 数据库:详细图文教程与常见问题解决

注:工具篇:(二)MacOS 下载 MySQL 并进行配置连接,使用 VSCode 创建 Node 项目-亲测有效

注:工具篇:(五)MacOS使用Postman 测试接口:从 创建MySQL数据库到 Node 项目

1. 创建后端(Node + Express)

初始化 Node 项目

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

bash 复制代码
mkdir my-react-node
cd my-react-node
npm init -y

然后安装必要的依赖包:

bash 复制代码
npm install express mysql2 dotenv
创建 Express 服务器

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

javascript 复制代码
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 文件,添加数据库配置信息:

bash 复制代码
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=yourpassword
DB_NAME=mydatabase
数据库表设计

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

sql 复制代码
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 请求:

bash 复制代码
npm install axios

2. 创建 API 请求

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

javascript 复制代码
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 中间件:

bash 复制代码
npm install cors

index.js 中添加以下代码:

javascript 复制代码
const cors = require('cors');
app.use(cors());

五、总结

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


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

相关推荐
魔芋红茶37 分钟前
MySQL 从入门到精通 16:主从复制
android·mysql·adb
2501_915106323 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
柯南二号4 小时前
【大前端】React Native 调用 Android、iOS 原生能力封装
android·前端·react native
九皇叔叔5 小时前
【7】SQL 语句基础应用
数据库·sql·mysql
睡美人的小仙女1275 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
yuanyxh5 小时前
React Native 初体验
前端·react native·react.js
程序视点5 小时前
2025最佳图片无损放大工具推荐:realesrgan-gui评测与下载指南
前端·后端
程序视点7 小时前
2023最新HitPaw免注册版下载:一键去除图片视频水印的终极教程
前端
喔烨鸭7 小时前
前后端分离情况下,将本地vue项目和Laravel项目以及mysql放到自己的云服务器
vue.js·mysql·laravel
小只笨笨狗~8 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui