本文旨在指导开发者如何使用 React.js 构建用户界面，并通过 REST API 与 PHP 后端进行数据交互。我们将介绍如何发起 HTTP 请求从 PHP 后端获取数据，并在 React 组件中展示这些数据。文章将提供代码示例，帮助你理解并实现前后端的数据交互。
1. PHP 后端 API 准备
首先，我们需要创建一个 PHP 脚本，它将处理来自前端的请求并返回数据。 以下是一个简单的 PHP 示例，它从 data.json 文件读取数据并返回 JSON 格式的响应。
offerId | $this->productTitle | $this->vendorId | $this->pricen"; }} 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] $messagen"; 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 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-appcd 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 ( {message}
);}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 头部。
警告: 在生产环境中，强烈建议限制 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 ( );}export default MyComponent;
PHP 后端处理 POST 请求:
'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 Loading...; } if (error) { return Error: {error.message}; } return ( Data from PHP Backend:
{JSON.stringify(data, null, 2)}
);}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 来源。
以上就是使用 React.js 构建前端并与 PHP 后端交互的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1324315.html
微信扫一扫
支付宝扫一扫
