本文旨在指导开发者如何使用 React.js 构建用户界面，并通过 REST API 与 PHP 后端进行数据交互。我们将介绍如何发起 HTTP 请求从 PHP 后端获取数据，并在 React 组件中展示这些数据。文章将提供代码示例，帮助你理解并实现前后端的数据交互。
1. PHP 后端 API 准备
首先，我们需要创建一个 PHP 脚本，它将处理来自前端的请求并返回数据。 以下是一个简单的 PHP 示例，它从 data.json 文件读取数据并返回 JSON 格式的响应。
<?php
header('Content-Type: application/json'); // 设置响应头为 JSON
/**
* 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)
{
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);
}
}
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;
}
$cli_args = $_SERVER['argv'];
$function_name = $cli_args[1];
$logger = new Logger();
switch ($function_name) {
case "count_by_price_range": {
$logger->info("Getting Count By Price Range From: $cli_args[2] TO $cli_args[3]");
echo count_by_price_range($cli_args[2], $cli_args[3]);
break;
}
case "count_by_vendor_id": {
$logger->info("Getting Count By vendor Id: $cli_args[2]");
echo count_by_vendor_id($cli_args[2]);
break;
}
}
$data = array("message" => "Hello from PHP!");
echo json_encode($data);
?>确保你的 data.json 文件存在，并且包含了有效的 JSON 数据。
2. React.js 前端设置
接下来，创建一个 React 应用。 你可以使用 create-react-app 快速搭建项目：
立即学习“PHP免费学习笔记（深入）”；
npx create-react-app my-react-app cd my-react-app
3. 使用 fetch API 获取数据
在 React 组件中，可以使用 fetch API 向 PHP 后端发起请求。 以下是一个示例组件，它在组件挂载后从 PHP 后端获取数据，并将数据存储在 state 中：
import React, { useState, useEffect } from 'react';
function App() {
const [message, setMessage] = useState('');
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('your-php-backend-url.php'); // 替换为你的 PHP 后端 URL
const data = await response.json();
setMessage(data.message);
} catch (error) {
console.error('Error fetching data:', error);
setMessage('Failed to load data.');
}
};
fetchData();
}, []); // 空依赖数组表示只在组件挂载后执行一次
return (
<div>
<h1>{message}</h1>
</div>
);
}
export default App;代码解释:
- useState 用于声明一个名为 message 的 state 变量，用于存储从 PHP 后端获取的消息。
- useEffect 用于在组件挂载后执行 fetchData 函数。
- fetch('your-php-backend-url.php') 发起一个 GET 请求到你的 PHP 后端。 请务必将 'your-php-backend-url.php' 替换为你的实际 URL。
- response.json() 将响应体解析为 JSON 格式。
- setMessage(data.message) 将解析后的消息更新到 state 中。
- 如果在获取数据过程中发生错误，catch 块将捕获错误并在控制台输出错误信息，同时更新 message state 显示错误信息。
- 空依赖数组 [] 确保 useEffect 只在组件挂载后执行一次。
4. 处理 CORS (跨域资源共享)
如果你的 React 应用和 PHP 后端运行在不同的域名或端口上，你可能会遇到 CORS 问题。 为了解决这个问题，你需要在 PHP 后端设置 CORS 头部。
<?php
header('Access-Control-Allow-Origin: *'); // 允许所有来源
header('Content-Type: application/json');
// ... 你的 PHP 代码 ...
?>警告: 在生产环境中，强烈建议限制 Access-Control-Allow-Origin 为你的 React 应用的域名，而不是使用 * 允许所有来源。
5. 发送 POST 请求
除了 GET 请求，你还可以使用 fetch API 发送 POST 请求，以便向 PHP 后端传递数据。
import React, { useState } from 'react';
function MyComponent() {
const [name, setName] = useState('');
const handleSubmit = async (event) => {
event.preventDefault();
try {
const response = await fetch('your-php-backend-url.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: name }),
});
const data = await response.json();
console.log(data); // 处理来自 PHP 后端的响应
} catch (error) {
console.error('Error sending data:', error);
}
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}
export default MyComponent;PHP 后端处理 POST 请求:
<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
header('Access-Control-Allow-Methods: POST'); // 允许 POST 请求
header('Access-Control-Allow-Headers: Content-Type'); // 允许 Content-Type 头部
$data = json_decode(file_get_contents('php://input'), true);
if (isset($data['name'])) {
$name = $data['name'];
$response = array('message' => 'Hello, ' . $name . '!');
echo json_encode($response);
} else {
http_response_code(400); // Bad Request
$response = array('message' => 'Name parameter is missing.');
echo json_encode($response);
}
?>代码解释:
- 在 React 组件中，我们使用 fetch 发起一个 POST 请求，并将数据作为 JSON 字符串包含在请求体中。
- 在 PHP 后端，我们使用 file_get_contents('php://input') 获取原始的 POST 数据，然后使用 json_decode 将其解析为 PHP 数组。
- 我们还需要设置 Access-Control-Allow-Methods 头部来允许 POST 请求，并设置 Access-Control-Allow-Headers 允许 Content-Type 头部。
6. 错误处理
在实际应用中，对 API 请求进行适当的错误处理非常重要。 你应该检查响应状态码，并在出现错误时向用户显示友好的错误消息。
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('your-php-backend-url.php');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const json = await response.json();
setData(json);
} catch (e) {
setError(e);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<div>
<h1>Data from PHP Backend:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default App;代码解释:
- 我们添加了 loading 和 error 状态来跟踪 API 请求的状态。
- 在 try...catch 块中，我们检查 response.ok 来确保响应状态码为 200-299。 如果状态码不在这个范围内，我们抛出一个错误。
- 在 finally 块中，我们设置 loading 为 false，无论请求成功还是失败。
- 根据 loading 和 error 状态，我们渲染不同的 UI。
总结
本文介绍了如何使用 React.js 构建前端，并通过 REST API 与 PHP 后端进行数据交互。 我们学习了如何发起 GET 和 POST 请求，如何处理 CORS 问题，以及如何进行错误处理。 通过这些知识，你可以构建功能强大的 Web 应用程序，将 React.js 的前端能力与 PHP 后端的灵活性结合起来。记住，在生产环境中，务必采取适当的安全措施，例如验证用户输入和限制 CORS 来源。
