REACT+PHP课程项目血泪史

PHP

php??老师让用php写后端。什么？写惯了java、python。这个看起来像html标签语言的东西写后端是个什么鬼，看起来想落后几千年的原始语言（手动滑稽）。

大概介绍一下，php主要是后端语言，用来连接数据库，写API的。但是PHP也能够镶嵌到前端页面HTML里面像JS一样，也可以单独地写一个文件demo.php,文件里写HTML返回页面，作为初学者的我表示怎么会有这种奇怪的语言。

1.安装

1.首先，需要下载php（也可以使用集成环境XAMPP，那这里我前端使用REACT写的，并且只是课程项目，那我感觉我并没有那么大的需求，就直接下载PHP扔前端项目里了，主打一个能连接就行），官网链接如下，记得添加php到环境变量。

PHP: Hypertext Preprocessor

如果一切顺利，在cmd里敲php -V，你会看到对应的版本，如果不对会报错，请正确添加环境变量。(搜一下怎么配置把)

自己安装的php在连接数据库比如mysql的时候会失败，因为需要新增一个php.ini文件在php安装根目录里面，你可以看到php.ini_developemnt和php.ini_production两个文件，这是官网给推荐的版本，你要用用哪个版本就把相应的文件粘贴复制到php.ini文件里取，然后连接数据库需要自己在最后一行加上

extension=mysqli
extension=php_pdo_mysql.dll
extension_dir = "E:\software\php\ext" //这换上你自己的目录，ext代表扩展包的目录

如果还不行，请查看ext扩展目录下是否存在php_mysqli.dll这个扩展文件。

2.连接

在任意目录下新建一个php文件，test.php

连接数据库方法1

// conn.php

<?php
$servername = "localhost:3306";
$username = "root";
$password = "123456";
 
// 创建连接
$conn = new mysqli($servername, $username, $password);
 
// 检测连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
} 
echo "连接成功";
?>

方法2-pdo操作（建议，这种时候直觉一般企业都会要求用这个把，用这个准有好处）

把extension=php_pdo.dll放php根目录php.ini文件最后边

我是把api直接放react目录里了，然后在vscode里下载php扩展，1.php debug 2.php server（这能让php在浏览器中显示）

直接在vscode里面右->php server:server project,在浏览器就会看到连接成功。

$servername="localhost";
$username = "root";
$password = "123456";
$dbname = "petShop";
 
try {
    $pdo = new PDO("mysql:host=$servername", $username, $password);

    // 设置 PDO 错误模式为异常
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    echo "数据库连接成功<br>";
}
catch(PDOException $e)
{
    echo "<br>connect DB error: " . $e->getMessage();
}

3.创建数据库DB

// 1.create Database function petShop
function createDB($pdo){
    $sql = "CREATE DATABASE IF NOT EXISTS petShop";
    if ( $pdo->query($sql) === TRUE) {
        echo "Databse created successfully";
    } else {
        echo "database already existed ";
    }
};

4.插入表和数据

记得把$pdo连上新建的数据库

function seedUsers($pdo,$users)
{
    try{
        // create table
        $pdo->query("CREATE TABLE IF NOT EXISTS users (
                    id VARCHAR(36) DEFAULT (UUID()) PRIMARY KEY, 
                    name VARCHAR(255) NOT NULL,
                    email VARCHAR(255) NOT NULL UNIQUE,
                    password TEXT NOT NULL,
                    image_url VARCHAR(255) NOT NULL
                );");
        echo "<br />Created 'users' table";
        // insert users data
        foreach ($users as $user) {
            $hashedPassword = password_hash($user["password"],PASSWORD_DEFAULT); // hash encryption,default using bcrypt and cost 10
            $pdo->query("INSERT INTO users (id, name, email, password,image_url)
                  VALUES ('{$user["id"]}', '{$user["name"]}', '{$user["email"]}', '{$hashedPassword}','{$user["image_url"]}');");
        }
        echo "<br> Seeded  users successfully";
    }catch(PDOException $e)
    {
        echo "<br>" . "error in seedUsers:".$e->getMessage();
    }
}
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
seedUsers($conn,$users);

• 这里的数组循环注意形式，用到了数组映射，因为PHP没有字典，只有数组映射，用了$users = [["id"=>2],["id"=>3]]这样的形式。数组索引是两种方法，映射索引key,正常数组索引下标，越界不会报错,能用{}代替[]。
• 字符串的拼接有3种形式

        1.双引号里使用$自动解析变量，“$name”,但是“$name["id"]”这样索引要加{}，不加报错，正确形式为{$name["id"]}；2.使用.的拼接符，"I am ".$name."!" ;3. 在1的基础上加上{}，"I am{$name}".

$conn = null //pdo关闭连接的方式，连接也会自动关闭

（一些过程中的问题：MySQL不支持默认值为函数UUID（），所以快速一点还是改成id INT AUTO_INCREMENT PRIMARY KEY吧。MySQL和原先的Postgresql语句差很多...改吧）

成功了，接着写吧！！

5.写一个删除接口API

<?php
header("Access-Control-Allow-Origin:*");
$servername="localhost";
$username = "root";
$password = "123456";
$dbname = "petShop";
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // 设置 PDO 错误模式，用于抛出异常
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = "DELETE FROM users WHERE id='{$_GET["id"]}'";
    // 使用 exec() ，没有结果返回 
    $conn->exec($sql);
    echo "suc";
}
catch(PDOException $e)
{
    echo $sql . "<br>" . $e->getMessage();
}
$conn = null;
?>

6.增加数据接口

<?php
header("Access-Control-Allow-Origin:*");
$servername="localhost";
$username = "root";
$password = "123456";
$dbname = "petShop";
 
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // 设置 PDO 错误模式，用于抛出异常
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = "INSERT INTO users (name, email, password,image_url)
    VALUES ('{$_POST["name"]}', '{$_POST["email"]}', '{$_POST["password"]}', '{$_POST["image_url"]}');";
    $conn->exec($sql);
    echo "suc";
}
catch(PDOException $e)
{
    echo $sql . "<br>" . $e->getMessage();
}
 
$conn = null;
?>

我下载了一个navicat,方便管理mysql。Navicat16安装和激活详细讲解（全网最简单且靠谱）-CSDN博客

跨域问题

header("Access-Control-Allow-Origin:*");

前端REACT

next.js切换port，在package.json中编辑scripts下面的"dev": "next dev -p 3001"

接收php代码
我选的是axios去获取
我对异步不是很熟悉
在组件下面写这个useEffect钩子是可以是实现数据调用得
import { useState, useEffect } from 'react';

import axios from "axios"
const [order,setOrder] = useState([])
  useEffect(() => {
    axios.get("http://localhost:3000/food/readAllFood.php").then((response) => {
      setOrder((response.data)); //异步数据获取，设置数据
      console.log(response.data)
    });
  }, []);

最主要得就是这段代码，这样子数据能获取，直接插在 return 模板里，页面就能显示。前后连通！！祝学习之路一路顺风~~

另外注意在写onclick函数，有函数参数必须用箭头函数得形式，不能写函数调用得形式

<button className="btn btn-primary w-1/2" onClick={()=>{addFun(mockData.id)}}>Add to Cart</button>

以及我得php后端获取参数全是post属性名获取参数,所以前端axios要用form得数据格式，如下

const BASE_URL = "http://localhost"
const apiName = `${BASE_URL}/invoices/addInvoice.php`
    const {data} = await axios.post( apiName, {
      id:id
    }, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });