React.js与PHP后端集成:构建RESTful API应用教程

碧海醫心
发布: 2025-10-16 12:30:02
原创
491人浏览过

React.js与PHP后端集成:构建RESTful API应用教程

本教程详细介绍了如何将react.js前端php后端通过restful api进行连接。文章将涵盖后端api的构建、前端数据请求与处理,以及跨域资源共享(cors)等关键配置,旨在帮助开发者高效地构建全栈web应用。

在现代Web开发中,前端与后端分离已成为主流实践。React.js作为流行的前端库,负责构建用户界面;而PHP则常用于处理服务器端逻辑、数据库交互和API服务。通过RESTful API,两者可以无缝协作,共同构建功能强大的Web应用程序。

理解React.js与PHP的协作模式

React.js应用通常运行在用户的浏览器中,负责渲染UI和响应用户操作。它通过HTTP请求(如GET、POST、PUT、DELETE)与后端API进行通信,获取或提交数据。PHP后端则接收这些请求,处理业务逻辑,与数据库交互,并以JSON等格式返回数据给前端。这种模式的核心是RESTful API,它定义了一套标准化的接口,使得不同技术栈的组件能够互相理解和通信。

构建PHP后端API

为了将原始的PHP CLI脚本转换为可供React.js调用的Web API,我们需要进行以下改造:

  1. 接收HTTP请求参数:将CLI参数($_SERVER['argv'])替换为HTTP请求参数(如$_GET或$_POST)。
  2. 输出JSON数据:将纯文本输出改为JSON格式,并设置正确的Content-Type头。
  3. 处理HTTP方法:虽然本示例主要使用GET请求,但在实际应用中,后端应能根据HTTP方法(GET、POST、PUT、DELETE)执行不同的操作。

假设我们有一个data.json文件作为数据源:

立即学习PHP免费学习笔记(深入)”;

[
    { "offerId": 1, "productTitle": "Laptop", "vendorId": 101, "price": 1200 },
    { "offerId": 2, "productTitle": "Mouse", "vendorId": 101, "price": 25 },
    { "offerId": 3, "productTitle": "Keyboard", "vendorId": 102, "price": 75 },
    { "offerId": 4, "productTitle": "Monitor", "vendorId": 103, "price": 300 },
    { "offerId": 5, "productTitle": "Webcam", "vendorId": 102, "price": 50 },
    { "offerId": 6, "productTitle": "Headphones", "vendorId": 101, "price": 150 }
]
登录后复制

我们将原有的PHP代码封装为一个API入口文件 api.php:

集简云
集简云

软件集成平台,快速建立企业自动化与智能化

集简云 22
查看详情 集简云
<?php

// 设置CORS头,允许React开发服务器访问
header("Access-Control-Allow-Origin: http://localhost:3000"); // 替换为你的React应用地址
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

// 处理OPTIONS请求,用于CORS预检
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit();
}

/**
 * The interface provides the contract for different readers
 * E.g. it can be XML/JSON Remote Endpoint, or CSV/JSON/XML local files
 */
interface ReaderInterface
{
    /**
     * Read in incoming data and parse to objects
     */
    public function read(string $input): OfferCollectionInterface;
}

/**
 * Interface of Data Transfer Object, that represents external JSON data
 */
interface OfferInterface
{
}

/**
 * Interface for The Collection class that contains Offers
 */
interface OfferCollectionInterface
{
    public function get(int $index): OfferInterface;
    public function getIterator(): Iterator;
}

/* *********************************** */

class Offer implements OfferInterface
{
    public $offerId;
    public $productTitle;
    public $vendorId;
    public $price;

    public function __toString(): string
    {
        return "$this->offerId | $this->productTitle | $this->vendorId | $this->price\n";
    }
}

class OfferCollection implements OfferCollectionInterface
{
    private $offersList = array();

    public function __construct($data)
    {
        if (is_array($data)) {
            foreach ($data as $json_object) {
                $offer = new Offer();
                $offer->offerId = $json_object->offerId;
                $offer->productTitle = $json_object->productTitle;
                $offer->vendorId = $json_object->vendorId;
                $offer->price = $json_object->price;

                array_push($this->offersList, $offer);
            }
        }
    }

    public function get(int $index): OfferInterface
    {
        return $this->offersList[$index];
    }

    public function getIterator(): Iterator
    {
        return new ArrayIterator($this->offersList);
    }

    public function __toString(): string
    {
        return implode("\n", $this->offersList);
    }

    // 新增方法:将OfferCollection转换为数组,以便json_encode
    public function toArray(): array
    {
        $result = [];
        foreach ($this->offersList as $offer) {
            $result[] = [
                'offerId' => $offer->offerId,
                'productTitle' => $offer->productTitle,
                'vendorId' => $offer->vendorId,
                'price' => $offer->price,
            ];
        }
        return $result;
    }
}

class Reader implements ReaderInterface
{
    /**
     * Read in incoming data and parse to objects
     */
    public function read(string $input): OfferCollectionInterface
    {
        if ($input != null) {
            $content = file_get_contents($input);
            $json = json_decode($content);
            $result = new OfferCollection($json);

            return $result;
        }

        return new OfferCollection(null);
    }
}

class Logger
{
    private $filename = "logs.txt";

    public function info($message): void
    {
        $this->log($message, "INFO");
    }

    public function error($message): void
    {
        $this->log($message, "ERROR");
    }

    private function log($message, $type): void
    {
        $myfile = fopen($this->filename, "a") or die("Unable to open file!");
        $txt = "[$type] $message\n";
        fwrite($myfile, $txt);
        fclose($myfile);
    }
}

$json_url = 'data.json';

$json_reader = new Reader();
$offers_list = $json_reader->read($json_url);


function count_by_price_range($price_from, $price_to)
{
    global $offers_list;
    $count = 0;
    foreach ($offers_list->getIterator() as $offer) {
        if ($offer->price >= $price_from && $offer->price <= $price_to) {
            $count++;
        }
    }
    return $count;
}

function count_by_vendor_id($vendorId)
{
    global $offers_list;
    $count = 0;
    foreach ($offers_list->getIterator() as $offer) {
        if ($offer->vendorId == $vendorId) {
            $count++;
        }
    }
    return $count;
}

// 获取请求路径和参数
$request_uri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$path_segments = explode('/', trim($request_uri, '/'));
$api_endpoint = end($path_segments); // 假设API路径的最后一段是功能名称

$logger = new Logger();
$response_data = [];
$status_code = 200;

switch ($api_endpoint) {
    case "count_by_price_range": {
        $price_from = $_GET['from'] ?? null;
        $price_to = $_GET['to'] ?? null;

        if ($price_from !== null && $price_to !== null) {
            $logger->info("Getting Count By Price Range From: $price_from TO $price_to");
            $response_data = ['count' => count_by_price_range((float)$price_from, (float)$price_to)];
        } else {
            $status_code = 400;
            $response_data = ['error' => 'Missing price range parameters (from, to).'];
        }
        break;
    }
    case "count_by_vendor_id": {
        $vendorId = $_GET['vendorId'] ?? null;
        if ($vendorId !== null) {
            $logger->info("Getting Count By vendor Id: $vendorId");
            $response_data = ['count' => count_by_vendor_id((int)$vendorId)];
        } else {
            $status_code = 400;
            $response_data = ['error' => 'Missing vendorId parameter.'];
        }
        break;
    }
    case "offers": { // 新增一个获取所有offer的接口
        $response_data = ['offers' => $offers_list->toArray()];
        break;
    }
    default: {
        $status_code = 404;
        $response_data = ['error' => 'API endpoint not found.'];
        break;
    }
}

http_response_code($status_code);
echo json_encode($response_data);

?>
登录后复制

将 api.php 和 data.json 放在一个支持PHP的Web服务器(如Apache或Nginx)的根目录下。 现在,你可以通过访问类似 http://localhost/api.php/count_by_price_range?from=50&to=200 或 http://localhost/api.php/offers 来测试API。

创建React.js前端应用

接下来,我们创建一个简单的React组件来调用这个PHP API并显示数据。

  1. 初始化React项目 如果你还没有React项目,可以使用Create React App快速搭建:

    npx create-react-app react-php-app
    cd react-php-app
    npm start
    登录后复制
  2. 编写React组件 修改 src/App.js 文件,添加一个组件来获取并展示数据:

    import React, { useState, useEffect } from 'react';
    import './App.css';
    
    function App() {
      const [offers, setOffers] = useState([]);
      const [priceRangeCount, setPriceRangeCount] = useState(0);
      const [vendorIdCount, setVendorIdCount] = useState(0);
      const [loading, setLoading] = useState(true);
      const [error, setError] = useState(null);
    
      // PHP API 的基础URL,请根据你的实际部署修改
      const API_BASE_URL = 'http://localhost/api.php'; 
    
      useEffect(() => {
        const fetchData = async () => {
          try {
            // 获取所有Offers
            const offersResponse = await fetch(`${API_BASE_URL}/offers`);
            if (!offersResponse.ok) {
              throw new Error(`HTTP error! status: ${offersResponse.status}`);
            }
            const offersData = await offersResponse.json();
            setOffers(offersData.offers || []);
    
            // 获取价格区间统计
            const priceRangeResponse = await fetch(`${API_BASE_URL}/count_by_price_range?from=50&to=200`);
            if (!priceRangeResponse.ok) {
              throw new Error(`HTTP error! status: ${priceRangeResponse.status}`);
            }
            const priceRangeData = await priceRangeResponse.json();
            setPriceRangeCount(priceRangeData.count || 0);
    
            // 获取供应商ID统计
            const vendorIdResponse = await fetch(`${API_BASE_URL}/count_by_vendor_id?vendorId=101`);
            if (!vendorIdResponse.ok) {
              throw new Error(`HTTP error! status: ${vendorIdResponse.status}`);
            }
            const vendorIdData = await vendorIdResponse.json();
            setVendorIdCount(vendorIdData.count || 0);
    
          } catch (error) {
            console.error("Error fetching data:", error);
            setError(error);
          } finally {
            setLoading(false);
          }
        };
    
        fetchData();
      }, []); // 空数组表示只在组件挂载时运行一次
    
      if (loading) return <div>Loading data...</div>;
      if (error) return <div>Error: {error.message}</div>;
    
      return (
        <div className="App">
          <h1>React.js & PHP API 集成示例</h1>
    
          <h2>所有商品列表</h2>
          {offers.length > 0 ? (
            <ul>
              {offers.map(offer => (
                <li key={offer.offerId}>
                  ID: {offer.offerId}, Title: {offer.productTitle}, Vendor: {offer.vendorId}, Price: ${offer.price}
                </li>
              ))}
            </ul>
          ) : (
            <p>没有商品数据。</p>
          )}
    
          <h2>统计信息</h2>
          <p>价格在 $50 到 $200 之间的商品数量: {priceRangeCount}</p>
          <p>供应商ID为 101 的商品数量: {vendorIdCount}</p>
        </div>
      );
    }
    
    export default App;
    登录后复制

处理跨域资源共享 (CORS)

在开发阶段,React应用通常运行在 http://localhost:3000,而PHP后端可能运行在 http://localhost 或 http://localhost:80。由于它们端口或域名不同,浏览器会阻止React应用直接访问PHP API,这就是所谓的“跨域”问题。

为了解决这个问题,PHP后端需要发送特定的HTTP响应头,告知浏览器允许来自React应用源的请求。在 api.php 的开头,我们已经添加了以下CORS头:

header("Access-Control-Allow-Origin: http://localhost:3000"); // 允许来自React开发服务器的请求
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); // 允许的HTTP方法
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

// 处理OPTIONS请求,用于CORS预检
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit();
}
登录后复制
  • Access-Control-Allow-Origin: 指定允许访问资源的源。在生产环境中,应将其设置为你的前端域名,或者根据需要动态设置。* 可以允许所有源,但出于安全考虑,不建议在生产环境中使用。
  • Access-Control-Allow-Methods: 指定允许的HTTP方法。
  • Access-Control-Allow-Headers: 指定在实际请求中可以使用的HTTP头。
  • 当浏览器发送跨域请求时,对于某些复杂的请求(如带有自定义头或非简单方法的请求),会先发送一个OPTIONS请求(预检请求)。后端需要正确响应这个OPTIONS请求。

部署与注意事项

  1. 生产环境CORS配置:在生产环境中,Access-Control-Allow-Origin 应精确设置为你的前端应用的域名(例如 https://your-react-app.com),而不是 http://localhost:3000 或 *。
  2. API路由:对于更复杂的应用,建议使用一个成熟的PHP框架(如Laravel、Symfony)来处理路由、请求验证和ORM,这会使API开发更加高效和健壮。
  3. 安全性
    • 输入验证:始终验证来自前端的所有输入,防止SQL注入、XSS等攻击。
    • 认证与授权:实现用户认证(如JWT、Session)和授权机制,确保只有经过身份验证的用户才能访问受保护的API资源。
    • HTTPS:在生产环境中,始终使用HTTPS来加密前后端之间的通信。
  4. 错误处理:后端API应提供清晰的错误响应(如HTTP状态码和JSON格式的错误信息),前端也应妥善处理这些错误并向用户展示友好的提示。
  5. 性能优化:对于数据量大的API,考虑分页、缓存、数据库索引等优化措施。

总结

通过RESTful API,React.js和PHP可以高效地协同工作,分别专注于前端的用户体验和后端的业务逻辑。构建一个稳健的API涉及请求处理、数据格式化、CORS配置以及安全性考量。遵循本教程的指导,开发者可以顺利地将React.js前端与PHP后端集成,构建出功能完善、结构清晰的Web应用程序。

以上就是React.js与PHP后端集成:构建RESTful API应用教程的详细内容,更多请关注php中文网其它相关文章!

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号