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 dataforeach ($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'}});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/826168.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

deepinV23 Beta3安装cuda

文章目录 下载CUDA安装,以cuda11.6为例运行.run文件安装选项配置环境变量查看cuda版本重启计算机 卸载cuda deepinV23 Beta3对应的debian版本是12&#xff1a; bookworm指的是debian12&#xff0c; sid代表不稳定版。 下载CUDA 官网&#xff1a;https://developer.nvidia.com…

中华环保联合会获得国家“绿色制造体系” 第三方评价机构资格

近日&#xff0c;中华环保联合会成功获得工业和信息化部“绿色制造体系”第三方评价机构资格&#xff0c;可为企业、园区及相关机构提供全面的绿色制造体系评价服务&#xff0c;包括绿色工厂、绿色园区、绿色供应链等方面。 “绿色制造体系建设”是由工业和信息化部负责统筹推进…

redis异常:OOM command not allowed when used memory > ‘maxmemory‘

redis存储数据太多,内存溢出,导致异常 1.查看redis内存使用情况 登录redis后 info memory2.查看分配给redis的最大内存 config get maxmemory3.处理方式:拓展redis的最大内存 打开redis.conf文件,修改maxmemory 4.删掉键值重启redis后,发现删掉的数据又恢复了? redis根目录…

Midjourney是什么?Midjourney怎么用?怎么注册Midjourney账号?国内怎么使用Midjourney?多人合租Midjourney拼车

Midjourney是什么 OpenAI发布的ChatGPT4引领了聊天机器人的竞争浪潮&#xff0c;随后谷歌推出了自己的AI聊天机器人Bard&#xff0c;紧接着微软推出了Bing Chat&#xff0c;百度也推出了文心一言&#xff0c;这些聊天机器人的推出&#xff0c;标志着对话式AI技术已经达到了一个…

月球地形数据介绍(LOLA)

月球地形数据介绍 LOLA介绍LOLA数据的处理与发布数据类型和格式投影坐标系SIMPLE CYLINDRICALPOLAR STEREOGRAPHIC 数据下载与浏览 LOLA介绍 目前最新的月球地形高程数据来源于美国2009年发射的LRO探测器。 “月球勘测轨道器”(Lunar Reconnaissance Orbiter&#xff0c;LRO)…

7.2 跳跃表(skiplist)

文章目录 前言一、跳跃表——查找操作二、跳跃表——插入操作三、代码演示3.1 输出结果3.2 代码细节 四、总结&#xff1a;参考文献&#xff1a; 前言 本章内容参考海贼宝藏胡船长的数据结构与算法中的第七章——查找算法&#xff0c;侵权删。 查找的时间复杂度能从原来链表的…

线上真实案例之执行一段逻辑后报错Communications link failure

1.问题发现 在开发某个项目的一个定时任务计算经销商返利的功能时&#xff0c;有一个返利监测的调度&#xff0c;如果某一天返利计算调度失败了&#xff0c;需要重新计算&#xff0c;这个监测的调度就会重新计算某天的数据。 在UAT测试通过&#xff0c;发布生产后&#xff0c…

CSS动画(css、js动画库:各种动画效果)

第一种方法&#xff1a;文字从上到下显示动画&#xff1b; <div class"text-container"><div class"text">文字从上到下显示</div></div><style scoped> /*确保 keyframes 规则在引用它的任何选择器之前定义&#xff0c;以避…

Android开发:应用百度智能云中的身份证识别OCR实现获取个人信息的功能

百度智能云&#xff1a; 百度智能云是百度提供的公有云平台&#xff0c;于2015年正式开放运营。该平台秉承“用科技力量推动社会创新”的愿景&#xff0c;致力于将百度在云计算、大数据、人工智能的技术能力向社会输出。 百度智能云为金融、城市、医疗、客服与营销、能源、制造…

C语言数据结构之顺序表

目录 1.线性表2.顺序表2.1顺序表相关概念及结构2.2增删查改等接口的实现 3.数组相关例题 1.线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性&#xff08;数据类型相同&#xff09;的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff…

2024年阿里云服务器明细报价整理总结

2024年阿里云服务器租用费用&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核4G服务…

Zynq 7000 SoC器件的复位系统

Zynq7000 SoC器件中的复位系统包括由硬件、看门狗定时器、JTAG控制器和软件生成的复位。每个模块和系统都包括一个由复位系统驱动的复位。硬件复位由上电复位信号&#xff08;PS_POR_B&#xff09;和系统复位信号&#xff08;PS_SRST_B&#xff09;驱动。 在PS中&#xff0c;有…

JAVA基础面试题(第九篇)中! 集合与数据结构

JAVA集合和数据结构也是面试常考的点&#xff0c;内容也是比较多。 在看之前希望各位如果方便可以点赞收藏&#xff0c;给我点个关注&#xff0c;创作不易&#xff01; JAVA集合 11. HashMap 中 key 的存储索引是怎么计算的&#xff1f; 首先根据key的值计算出hashcode的值…

隧道代理的优势与劣势分析

“随着互联网的快速发展&#xff0c;网络安全已经成为一个重要的议题。为了保护个人和组织的数据&#xff0c;隧道代理技术逐渐成为网络安全的重要工具。隧道代理通过在客户端和服务器之间建立安全通道&#xff0c;加密和保护数据的传输&#xff0c;有效地防止黑客入侵和信息泄…

15-partition table (分区表)

ESP32-S3的分区表 什么是分区表&#xff1f;&#x1f914; ESP32-S3的分区表是用来确定在ESP32-S3的闪存中数据和应用程序的布局。每个ESP32-S3的闪存可以包含多个应用程序&#xff0c;以及多种不同类型的数据&#xff08;例如校准数据、文件系统数据、参数存储数据等&#x…

Scala 第一篇 基础篇

Scala 第一篇 基础篇 一、变量与常量 1、变量2、常量 二、数据类型 1、数据基本类型概览2、元组的声明与使用3、Range介绍和使用4、Option 类型的使用和设计5、类型别名 三、运算符四、程序逻辑 1、一切都是表达式2、分支语句3、循环语句 五、集合 1、List2、Set3、Map4、Arra…

MySQL高级(索引-性能分析-explain执行计划)

explain 或者 desc 命令获取 MySQL 如何执行 select 语句的信息&#xff0c;包括在 select 语句执行过程中表如何连接和连接的顺序。 -- 直接在 select 语句之前加上关键字 explain / desc explain select 字段列表 from 表名 where 条件 &#xff1b; explain select * …

电机控制专题(一)——最大转矩电流比MTPA控制

文章目录 电机控制专题(一)——最大转矩电流比MTPA控制前言理论推导仿真验证轻载1Nm重载30Nm 总结 电机控制专题(一)——最大转矩电流比MTPA控制 前言 MTPA全称为Max Torque Per Ampere&#xff0c;从字面意思就可以知道MTPA算法的目的是一个寻优最值问题&#xff0c;可以从以…

SQL Server 2022 安装及使用

SQL Server 2022 前言一、安装SQL Server 2022下载SQL Server 2022安装SQL Server 2022配置SQL Server 2022 二、安装SQL Server Management Studio下载SQL Server Management Studio安装SSMS-Setup-CHS 三、使用SQL Server 2022四、解决连接到服务器报错问题 前言 SQL Serve…

git 快问快答

我在实习的时候&#xff0c;是用本地开发&#xff0c;然后 push 到 GitHub 上&#xff0c;之后再从 Linux 服务器上拉 GitHub 代码&#xff0c;然后就可以了。一般程序是在 Linux 服务器上执行的&#xff0c;我当时使用过用 Linux 提供的命令来进行简单的性能排查。 在面试的时…