如何使用Laravel与React实现数据库无刷新实时数据获取

结论：仅靠Laravel与React完全可以实现需求，不需要额外引入复杂的第三方AJAX工具，全程可做到不刷新整页就展示数据库内的最新用户数据。

核心实现链路 #

整个功能的交互逻辑非常清晰：

• Laravel作为后端服务，直接对接MySQL数据库，提供可返回JSON格式用户数据的接口
• React作为前端渲染层，通过内置能力调用上述接口，拿到数据后自动更新页面对应组件，全程不触发整页跳转、不刷新整个页面

第一步：搭建Laravel侧数据接口 #

1. 在app/Http/Controllers目录下编写UserController的查询方法，直接从MySQL读取最新用户数据并返回JSON响应：

   <?php
   namespace App\Http\Controllers;
   use App\Models\User;
   
   class UserController extends Controller
   {
       // 查询最新注册用户接口
       public function getLatestUsers()
       {
           // 按用户创建时间倒序，取最近10条用户数据
           $latestUsers = User::orderBy('created_at', 'desc')
               ->take(10)
               ->get(['id', 'name', 'email', 'created_at']);
           // 直接返回JSON格式响应，无需渲染Blade模板
           return response()->json($latestUsers);
       }
   }
   

2. 在routes/web.php或routes/api.php中给接口添加路由规则：

   // 路由配置示例
   Route::get('/latest-users', [UserController::class, 'getLatestUsers']);
   

   新手注意：如果接口配置在web路由下，一定要处理好CSRF校验，在页面模板中放置CSRF的meta标签，避免前端请求被拦截、返回419错误。

第二步：React侧无刷新数据拉取实现 #

React本身不需要额外引入AJAX库，用浏览器原生提供的fetch API就能完成请求发送，核心逻辑是通过React的状态管理存储拉取到的用户数据，数据更新时React会自动重渲染页面对应区域：

// React 最新用户列表组件示例
import { useState, useEffect } from 'react';

export function LatestUserList() {
    // 定义状态：存储用户列表、加载状态
    const [userList, setUserList] = useState([]);
    const [loading, setLoading] = useState(false);

    // 封装拉取最新用户的方法
    const refreshUserList = async () => {
        setLoading(true);
        try {
            const response = await fetch('/latest-users', {
                headers: {
                    'Accept': 'application/json',
                    // 从页面meta标签获取CSRF token，通过请求头传给Laravel
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            });
            const users = await response.json();
            // 更新状态，页面会自动重新渲染最新的用户列表
            setUserList(users);
        } catch (error) {
            console.error('用户数据拉取失败', error);
        } finally {
            setLoading(false);
        }
    };

    // 组件首次挂载时自动拉取一次数据
    useEffect(() => {
        refreshUserList();
    }, []);

    return (
        <div className="latest-user-panel">
            <h4>平台最新注册用户</h4>
            {loading && <p>数据加载中...</p>}
            <ul className="user-list">
                {userList.map(user => (
                    <li key={user.id}>
                        {user.name} <span>（注册时间：{user.created_at}）</span>
                    </li>
                ))}
            </ul>
            <button onClick={refreshUserList}>手动刷新用户列表</button>
        </div>
    )
}

关于“实时展示新增用户”的适配建议 #

• 如果对实时性要求不高，可以在上述React组件中添加简单的定时逻辑，比如每20-30秒自动调用一次refreshUserList方法，只要MySQL中有新用户入库，下次拉取时就会自动同步到页面上，全程不需要用户手动操作、也不会触发整页刷新。
• 如果要求新增用户后1秒内就能在页面展示，才需要引入WebSocket类的长连接方案，对于刚入门Laravel和React的新手来说，先把基础的无刷新拉取流程跑通是最容易实现的方式。

常见认知误区澄清 #

• 你之前查到的AJAX实现思路，核心是发送异步请求、不刷新整页更新局部内容，而React本身的状态驱动更新逻辑 + 浏览器原生的fetch请求，已经完全能实现同样的效果，不需要额外引入jQuery这类老旧的工具库。
• 整个流程里Laravel和React只做各自擅长的事：Laravel负责和MySQL数据库交互、返回结构化数据，React负责页面渲染、触发请求、更新视图，两者完全可以独立配合，不需要套用复杂的前后端分离架构。

内容的提问来源于stack exchange，提问作者BronzeJamie