如何使用React.js做前端对接原生无框架PHP后端？

第一步：改造PHP后端适配HTTP请求 #

你当前的PHP脚本仅支持CLI命令行调用，要对接React前端，首先需要新增HTTP接口入口，适配web请求：
你原有的业务逻辑代码完全不需要修改，只需要新增一个HTTP入口文件复用原有逻辑即可

• 新建api.php作为对外接口入口，在文件最顶部添加跨域和响应头配置，解决React开发环境跨域问题：

<?php
// 开发环境可允许所有源访问，生产环境请替换为你的前端实际部署域名
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type');

// 引入你已经写好的业务逻辑文件，比如原有文件名为offer.php就写
require './offer.php';

• 替换原有CLI参数读取逻辑，改为读取HTTP请求参数，执行对应逻辑后返回JSON格式结果：

$function_name = $_GET['action'] ?? '';
$logger = new Logger();
$result = [];

switch ($function_name) {
    case "count_by_price_range": 
        $price_from = (float)$_GET['price_from'] ?? 0;
        $price_to = (float)$_GET['price_to'] ?? 0;
        $logger->info("Getting Count By Price Range From: $price_from TO $price_to");
        $result['code'] = 200;
        $result['data'] = count_by_price_range($price_from, $price_to);
        break;
    case "count_by_vendor_id": 
        $vendorId = (int)$_GET['vendor_id'] ?? 0;
        $logger->info("Getting Count By vendor Id: $vendorId");
        $result['code'] = 200;
        $result['data'] = count_by_vendor_id($vendorId);
        break;
    default:
        $result['code'] = 400;
        $result['msg'] = '无效请求方法';
}

echo json_encode($result);

• 改造完成后在项目目录执行命令php -S localhost:8000启动PHP内置服务，访问http://localhost:8000/api.php?action=count_by_vendor_id&vendor_id=1测试，能正常拿到JSON格式返回即可。

第二步：React前端发起请求对接 #

React端直接通过HTTP请求调用上述PHP接口即可，以下是最简组件示例：

import { useState } from 'react';

function App() {
  const [vendorId, setVendorId] = useState('');
  const [countResult, setCountResult] = useState(null);

  // 调用按供应商ID统计接口
  const fetchVendorCount = async () => {
    const res = await fetch(`http://localhost:8000/api.php?action=count_by_vendor_id&vendor_id=${vendorId}`);
    const data = await res.json();
    if (data.code === 200) {
      setCountResult(data.data);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>供应商商品数量查询</h3>
      <input
        type="number"
        value={vendorId}
        onChange={(e) => setVendorId(e.target.value)}
        placeholder="输入供应商ID"
        style={{ marginRight: '10px', padding: '4px' }}
      />
      <button onClick={fetchVendorCount} style={{ padding: '4px 12px' }}>查询</button>
      {countResult !== null && <p>该供应商商品总数：{countResult}</p>}
    </div>
  );
}

export default App;

如果更习惯使用axios发起请求，先执行npm install axios安装依赖后替换fetch请求逻辑即可。

注意事项 #

• 生产环境部署时请将跨域头中的*替换为前端实际部署的域名，避免安全风险
• 可按需给PHP接口添加参数校验、权限校验逻辑，提高稳定性
• 原有CLI调用能力不受影响，可继续保留使用

内容的提问来源于stack exchange，提问作者H. Sayouf