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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vuex 的原理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store&#xff08;仓库&#xff09;。“store” 基本上就是一个容器&#xff0c;它包含着你的应用中大部分的状态 ( state )。 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的…

在Vue项目使用kindEditor富文本编译器以及上传图片

第一步 npm install kindeditor第二步&#xff0c;建立kindeditor.vue组件 <template><div class"kindeditor"><textarea :id"id" name"content" v-model"outContent"></textarea></div> </templa…

【C语言__结构体__复习篇5】

目录 前言 一、结构体基础知识 1.1 结构体的语法形式 1.2 创建结构体变量 1.3 结构体变量的初始化 1.4 点(.)操作符和箭头(->)操作符 二、匿名结构体 三、结构体自引用 四、结构体内存对齐 4.1 内存对齐的规则 4.2 出现结构体内存对齐的原因 4.3 修改默认对齐数 五、结…

JavaScript高级

一、JavaScript 面向对象 面向对象编程介绍ES6 中的类和对象类的继承面向对象案例 1. 面向对象编程介绍 1.1 两大编程思想 面向过程面向对象 1.2 面向过程编程 POP(Process-oriented programming) 面向过程 就是分析出解决问题所需要的步骤&#xff0c;然后用函数把这些步…

shell脚本编程的例子(50例子)-1

前言 为了提高教学质量&#xff0c;并且能够让童鞋们更好的理解和运用shell脚本以及相关编程&#xff0c;特编写了50个shell例子&#xff0c;目前还在整理过程ing&#xff0c;计划分三期完成。请有需要的同学收藏。后续会申请VIP阅读。…… ^.^ …… ^…^ 实验环境&#xff1…

javaWeb项目-智慧餐厅点餐管理系统功能介绍

项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a;Vue、ElementUI 关键技术&#xff1a;springboot、SSM、vue、MYSQL、MAVEN 数据库工具&#xff1a;Navicat、SQLyog 1、JavaScript Java…

C语言进阶课程学习记录-内存操作经典问题分析

C语言进阶课程学习记录-内存操作经典问题分析 实验-示例1优化 实验-示例2优化 实验-示例3实验-示例4小结 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图片全部来源于课程PPT&#xff0c;仅用于个人学习记录 实验-示例1 #include <stdio.h> #include…

ChatGPT研究论文提示词集合1-【主题选择与问题研究、文献综述】

点击下方▼▼▼▼链接直达AIPaperPass &#xff01; AIPaperPass - AI论文写作指导平台 目录 1.主题选择与问题定义 2.文献综述 3.书籍介绍 AIPaperPass智能论文写作平台 近期小编按照学术论文的流程&#xff0c;精心准备一套学术研究各个流程的提示词集合。总共14个步骤…

HTTP请求中的cookie与session(servlet实现登录页面的表单验证)

一、cookie 与 session 1&#xff09;cookie 与 session 的定义 2&#xff09;相关的servlet中的 方法 二、代码实现 登录页面 1&#xff09;先用 vscode 编写登录页面 注意文件的路径 在webapp路径下 <!DOCTYPE html> <html lang"en"><head>&…

ai写作强大,ai写作哪个软件最好用?

在当今数字化时代&#xff0c;ai技术的发展正以惊人的速度改变着我们的生活和工作方式。其中&#xff0c;ai写作作为一项令人瞩目的创新&#xff0c;展示了强大的文本生成能力。然而&#xff0c;随着各种ai写作软件的涌现&#xff0c;人们不禁困惑&#xff1a;哪个软件才是最好…

【网络设备巡检命令】--思科、华为、H3C、锐捷

【网络设备巡检命令】--思科、华为、H3C、锐捷 一、思科二、华为三、H3C四、锐捷 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 一、思科 1、查看系统信息&#xff1a; show version2、查看时间&#xff1a; show clock3、查看序列号&a…

Zed 捕获图像+测距

Zed 捕获图像测距 1. 导入相关库2. 相机初始化设置3. 获取中心点深度数据4. 计算中心点深度值5. 完整代码5. 实验效果 此代码基于官方代码基础上进行改写&#xff0c;主要是获取zed相机深度画面中心点的深度值&#xff0c;为yolo测距打基础。 1. 导入相关库 import pyzed.sl …

C语言 ─── 操作符详解

目录 1. 算术操作符 2. 移位操作符 2.1 左移操作符 2.2 右移操作符 3. 位操作符 4. 复合赋值符 5. 单目操作符 6. 逗号表达式 7. 隐式类型转换 7.1 整型提升的意义&#xff1a; 7.2 如何进行整体提升呢&#xff1f; 8. 算术转换 ★★★数组名 1. 算术操作符 -…

redis与etcd的对比

1.redis是一种高级的key&#xff1a;value存储系统&#xff0c;其中value支持五种数据类型&#xff1a; 1.1 字符串&#xff08;strings&#xff09; 1.2 字符串列表&#xff08;lists&#xff09; 1.3 字符串集合&#xff08;sets&#xff09; 1.4 有序字符串集合&#xff08;…

管理 nodejs 版本工具 nvm

nvm 方便切换不同版本的 node 及 对应的 npm 版本 一、安装nvm nvm官网 &#xff08;内含下载的文件&#xff0c;点击进去下载&#xff0c;并按照 网站文档步骤 操作即可&#xff09; 二、nvm 基础命令 nvm arch&#xff1a;显示node是运行在32位还是64位。nvm install <…

centos修改启动项加载不同内核

一.背景&#xff1a; 虚拟机中有时需要编译好几个内核版本&#xff0c;make install后系统存在几个内核版本。需要再哪个内核上开发调试就启动特定的内核版本。这就需要修改启动时的内核版本&#xff0c;再物理机或虚拟机启动时可以上下键选择。但有时是docket云环境中或远程时…

CANoe中LIN工程主节点的配置(如何切换调度表)

1&#xff1a;前置条件 1&#xff09;工程已经建立&#xff0c;simulation窗口已经配置好&#xff08;包括且不限于通道mappin好&#xff0c;数据库文件已经添加&#xff09; 2&#xff09;我已系统自带sampleCfg工程&#xff0c;作为例子。如下图 2 &#xff1a;主节点的配置…

前端css中table表格的属性使用

前端css中table表格的属性使用 一、前言二、常见的表格属性1.边框的样式2.布局和对齐3.间距和填充4.背景和颜色5.字体的样式6.边框的圆角 三、简单的表格&#xff0c;例子11.源码12.源码1效果截图 四、给表格添加动画效果&#xff0c;例子21.源码22.源码2的运行效果 五、结语六…

【热门话题】探索与心得:深入体验Microsoft Edge浏览器

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 探索与心得&#xff1a;深入体验Microsoft Edge浏览器一、Edge浏览器概述1.1 发…

通快霍廷格TruPlasma MF中频电源培训PPT课件内容下图

通快霍廷格TruPlasma MF中频电源培训PPT课件内容下图
最新文章