使用 PHP API 和 MySQL 进行 React CRUD 操作

我们要学什么？

ReactJs 介绍、创建 React APP、NodeJs NPM 和 Homebrew 安装
在 React 中创建链接并处理路由 | react-router-dom 包安装
在 PHPMyAdmin 中创建数据库并在 React Component 中设计表单
创建 PHP API 并使用 axios | 处理本地主机上的 CORS 问题
使用 PDO 连接 MySQL 数据库 | 访问 React 表单数据并保存到数据库中
创建 GET PHP API 并使用 axios 在 React 中使用 | 在 React 表组件中列出
加载编辑表单的用户详细信息并创建 PHP PUT API 来更新用户数据
创建 DELETE PHP API，使用 axios 并从数据库中删除用户

什么是 ReactJs？

React 是一个免费的开源前端 JavaScript 库，用于基于 UI 组件构建用户界面。它由 Meta 以及由个人开发者和公司组成的社区维护。React 可以作为开发单页应用程序或移动应用程序的基础。ReactJs 的官方网站是https://reactjs.org/。

要创建 React 应用程序，您的机器上需要有 Node >= 14.0.0 和 npm >= 5.6。

什么是 NodeJs 和 NPM？

Node.js 是一个开源、跨平台的后端 JavaScript 运行时环境，它基于 V8 引擎运行，并在 Web 浏览器之外执行 JavaScript 代码。您可以从 Node.js 官方网站https://nodejs.org/en/下载。NPM 将随 Node.js 一起安装。NPM 是 JavaScript 运行时环境 Node.js 的默认包管理器。

Homebrew 是什么？

对于 Mac，您也可以使用 Homebrew 进行安装。Homebrew 是一个免费的开源软件包管理系统，可以简化在 Apple 操作系统 macOS 和 Linux 上安装软件的过程。其名称旨在体现根据用户喜好在 Mac 上构建软件的理念。Homebrew 的官方网站是https://brew.sh/。

安装 Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装 NodeJs
brew install nodejs

创建 ReactJS 应用
npx create-react-app react-crud

npx 不是一个拼写错误——它是 npm 5.2+ 附带的包运行工具。

Create React App 不处理后端逻辑或数据库；它只创建一个前端构建管道，因此您可以将其与任何所需的后端一起使用。它底层使用了 Babel 和 webpack，但您无需了解任何相关知识。

运行 React 应用

cd react-crud
npm start

现在访问以下链接，您应该能够看到 ReactApp 正在运行：
http://localhost:3000/

要创建 RestFull API，我们需要 PHP、MYSQL 和 Apache。您可以单独安装并配置每个软件，也可以使用堆叠应用程序。在本例中，我将使用 MAMP（Mac Apache MySQL PHP），它是为 Mac 设计的，并附带所有必需的软件。

什么是 PHP？

PHP 是一种开源的通用服务器端脚本语言，尤其适用于 Web 开发。它最初由丹麦裔加拿大程序员 Rasmus Lerdorf 于 1994 年创建。PHP 参考实现目前由 PHP 小组 (PHP Group) 提供。

什么是 MySQL？

MySQL 是一个开源关系型数据库管理系统。其名称由联合创始人 Michael Widenius 女儿的名字“My”和结构化查询语言的缩写“SQL”组合而成。

什么是 Apache？

Apache HTTP 服务器是一款免费的开源跨平台 Web 服务器软件，遵循 Apache 2.0 许可证发布。Apache 由 Apache 软件基金会支持下的开放开发者社区开发和维护。

堆叠应用程序

Windows 版 WAMP
https://www.wampserver.com/en/
Linux 版 LAMP
https://bitnami.com/stack/lamp/installer
Mac 版 MAMP
https://www.mamp.info/en/mac/
XAMPP：开源、跨平台
https://www.apachefriends.org/index.html

太棒了，现在一切准备就绪，可以开始了。用你最喜欢的代码编辑器打开你的项目，我使用的是 Visual Studio Code。

在 React 中创建链接并处理路由 | react-router-dom 包安装

在 src/ 目录下创建新目录组件，并创建 3 个新组件，我们将很快更新它们：
src/components/ListUser.js

export default function ListUser() {
  return (
      <h1>List Users</h1>
  );
}

src/components/CreateUser.js

export default function CreateUser() {
  return (
      <h1>Create User</h1>
  );
}

src/components/UpdateUser.js

export default function UpdateUser() {
  return (
      <h1>Update User</h1>
  );
}

现在让我们安装 React Router 来创建链接和配置路由
npm install react-router-dom

更新 App.js 以处理路由

import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import './App.css';
import CreateUser from './components/CreateUser';
import EditUser from './components/EditUser';
import ListUser from './components/ListUser';
function App() {
  return (
    <div className="App">
      <h5>React CRUD operations using PHP API and MySQL</h5>
      <BrowserRouter>
        <nav>
          <ul>
            <li>
              <Link to="/">List Users</Link>
            </li>
            <li>
              <Link to="user/create">Create User</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route index element={<ListUser />} />
          <Route path="user/create" element={<CreateUser />} />
          <Route path="user/:id/edit" element={<EditUser />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

在 PHPMyAdmin 中创建数据库并在 React Component 中设计表单

CREATE DTAABASE react_crud;

CREATE TABLE `react_crud`.`users` 
(
`id` int NOT NULL auto_increment,
`name` varchar(50),
`email` varchar(60),
`mobile` bigint(10),
`created_at` timestamp,
`updated_at` timestamp, PRIMARY KEY (id)
);

更新 src/components/CreateUser.js

import { useState } from "react";
export default function ListUser() {
    const [inputs, setInputs] = useState([]);
    const handleChange = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({...values, [name]: value}));
    }
    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(inputs);
    }
    return (
        <div>
            <h1>Create user</h1>
            <form onSubmit={handleSubmit}>
                <table cellSpacing="10">
                    <tbody>
                        <tr>
                            <th>
                                <label>Name: </label>
                            </th>
                            <td>
                                <input type="text" name="name" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Email: </label>
                            </th>
                            <td> 
                                <input type="text" name="email" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Mobile: </label>
                            </th>
                            <td>
                                <input type="text" name="mobile" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <td colSpan="2" align ="right">
                                <button>Save</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    )
}

创建 PHP API 并使用 axios | 处理本地主机上的 CORS 问题

安装 axios 以便从 ReactJs 进行 API 调用
npm install axios

现在再次更新 src/components/CreateUser.js 文件以进行 POST API 调用

import axios from "axios";
const handleSubmit = (event) => {
    event.preventDefault();
    axios.post('http://localhost:8888/api/user/save', inputs).then(function(response){
        console.log(response.data);
    });
}

创建用于编写 API 的 PHP 文件并将其命名为 index.php

<?php
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: *");
    echo "Testing";
?>

注意，我们在顶部添加了 headers 来解决 CORS 问题。
另外，让我们创建 .htaccess 文件来处理类似 PHP Lumen 框架的美化 URL，并在其中添加以下代码行。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

Hoola，我们的 API 文件终于准备好了。

使用 PDO 连接 MySQL 数据库 | 访问 React 表单数据并保存到数据库中

现在，让我们创建一个数据库连接文件，并将其命名为 DbConnect.php，并在其中添加以下代码片段。根据您的凭据更新，它将使用 PDO（PHP 数据对象）连接到您的数据库。

<?php
    /**
    * Database Connection
    */
    class DbConnect {
        private $server = 'localhost';
        private $dbname = 'react_crud';
        private $user = 'root';
        private $pass = '';
        public function connect() {
            try {
                $conn = new PDO('mysql:host=' .$this->server .';dbname=' . $this->dbname, $this->user, $this->pass);
                $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                return $conn;
            } catch (\Exception $e) {
                echo "Database Error: " . $e->getMessage();
            }
        }

    }
?>

创建 POST API

include("DbConnect.php");
    $conn = new DbConnect();
    $db = $conn->connect();
    $method = $_SERVER['REQUEST_METHOD'];
    switch($method) {
        case 'POST':
            $user = json_decode(file_get_contents('php://input'));
            $sql = "INSERT INTO users(id, name, email, mobile, created_at) values(null, :name, :email, :mobile, :created_at)";
            $stmt = $db->prepare($sql);
            $date = date('Y-m-d');
            $stmt->bindParam(':name', $user->name);
            $stmt->bindParam(':email', $user->email);
            $stmt->bindParam(':mobile', $user->mobile);
            $stmt->bindParam(':created_at', $date);
            if($stmt->execute()) {
                $data = ['status' => 1, 'message' => "Record successfully created"];
            } else {
                $data = ['status' => 0, 'message' => "Failed to create record."];
            }
            echo json_encode($data);
            break;
}

// Reference database connection class file and connect to MySQL Database
include("DbConnect.php");
$conn = new DbConnect();
$db = $conn->connect();

// Give you Method used to hit API
$method = $_SERVER['REQUEST_METHOD'];

// Read the POST JSON data and convert it into PHP Object
$user = json_decode(file_get_contents('php://input'));

创建 GET PHP API 并使用 axios 在 React 中使用 | 在 React 表组件中列出

更新 src/components/ListUser.js

import axios from "axios"
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
export default function ListUser() {
    const [users, setUsers] = useState([]);
    useEffect(() => {
        getUsers();
    }, []);
    function getUsers() {
        axios.get('http://localhost:8888/api/users/').then(function(response) {
            console.log(response.data);
            setUsers(response.data);
        });
    }
    return (
        <div>
            <h1>List Users</h1>
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Mobile</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {users.map((user, key) =>
                        <tr key={key}>
                            <td>{user.id}</td>
                            <td>{user.name}</td>
                            <td>{user.email}</td>
                            <td>{user.mobile}</td>
                            <td>
                                <Link to={`user/${user.id}/edit`} style={{marginRight: "10px"}}>Edit</Link>
                                <button>Delete</button>
                            </td>
                        </tr>
                    )}

                </tbody>
            </table>
        </div>
    )
}

更新 index.php 文件以添加新的 GET API 来获取所有用户

case 'GET':
    $sql = "SELECT * FROM users";
    $stmt = $db->prepare($sql);
    $stmt->execute();
    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);        
    echo json_encode($users);
    break;

加载编辑表单的用户详细信息并创建 PHP PUT API 来更新用户数据

更新 src/components/UpdateUser.js

import { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
export default function ListUser() {
    const navigate = useNavigate();
    const [inputs, setInputs] = useState([]);
    const {id} = useParams();
    useEffect(() => {
        getUser();
    }, []);
    function getUser() {
        axios.get(`http://localhost:8888/api/user/${id}`).then(function(response) {
            console.log(response.data);
            setInputs(response.data);
        });
    }
    const handleChange = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({...values, [name]: value}));
    }
    const handleSubmit = (event) => {
        event.preventDefault();
        axios.put(`http://localhost:8888/api/user/${id}/edit`, inputs).then(function(response){
            console.log(response.data);
            navigate('/');
        });

    }
    return (
        <div>
            <h1>Edit user</h1>
            <form onSubmit={handleSubmit}>
                <table cellSpacing="10">
                    <tbody>
                        <tr>
                            <th>
                                <label>Name: </label>
                            </th>
                            <td>
                                <input value={inputs.name} type="text" name="name" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Email: </label>
                            </th>
                            <td> 
                                <input value={inputs.email} type="text" name="email" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Mobile: </label>
                            </th>
                            <td>
                                <input value={inputs.mobile} type="text" name="mobile" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <td colSpan="2" align ="right">
                                <button>Save</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    )
}

更新 get 方法以通过 ID 返回特定用户的详细信息

case "GET": 
        $sql = "SELECT * FROM users";
        $path = explode('/', $_SERVER['REQUEST_URI']);
        if(isset($path[3]) && is_numeric($path[3])) {
            $sql .= " WHERE id = :id";
            $stmt = $conn->prepare($sql);
            $stmt->bindParam(':id', $path[3]);
            $stmt->execute();
            $users = $stmt->fetch(PDO::FETCH_ASSOC);
        } else {
            $stmt = $conn->prepare($sql);
            $stmt->execute();
            $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }

        echo json_encode($users);
        break;

现在创建更新 API 来处理 PUT 请求

case "PUT": 
            $user = json_decode( file_get_contents('php://input') );
            $sql = "UPDATE users SET name= :name, email =:email, mobile =:mobile, updated_at =:updated_at WHERE id = :id";
            $stmt = $conn->prepare($sql);
            $updated_at = date('Y-m-d');
            $stmt->bindParam(':id', $user->id);
            $stmt->bindParam(':name', $user->name);
            $stmt->bindParam(':email', $user->email);
            $stmt->bindParam(':mobile', $user->mobile);
            $stmt->bindParam(':updated_at', $updated_at);

            if($stmt->execute()) {
                $response = ['status' => 1, 'message' => 'Record updated successfully.'];
            } else {
                $response = ['status' => 0, 'message' => 'Failed to update record.'];
            }
            echo json_encode($response);
            break;

创建 DELETE PHP API，使用 axios 并从数据库中删除用户

更新 src/components/ListUser.js

const deleteUser = (id) => {
        axios.delete(`http://localhost:8888/api/user/${id}/delete`).then(function(response){
        console.log(response.data);
        getUsers();
    });
}
<button onClick={() => deleteUser(user.id)}>Delete</button>

再次更新index.php以编写删除API

case "DELETE": 
        $sql = "DELETE FROM users WHERE id = :id";
        $path = explode('/', $_SERVER['REQUEST_URI']);

        $stmt = $conn->prepare($sql);
        $stmt->bindParam(':id', $path[3]);
        if($stmt->execute()) {
            $response = ['status' => 1, 'message' => 'Record deleted successfully.'];
        } else {
            $response = ['status' => 0, 'message' => 'Failed to delete record.'];
        }
        echo json_encode($response);
        break;

太棒了，您刚刚使用 PHP 和 MySQL 完成了 REACT-CRUD，现在运行您的应用程序并构建一些漂亮的东西。

您可以从 GitHub 下载完整的源代码：
https://github.com/durgesh-sahani/react-crud-php-api-mysql

感谢您阅读本博客。

文章来源：https://dev.to/durgeshsahani/react-crud-operations-using-php-api-and-mysql-13da