Laravel项目中用Axios获取MySQL数据失败，请求排查错误

核心问题：接口返回格式不匹配 #

前端JavaScript期望/blogs接口返回JSON格式的分页数据，但当前控制器index方法返回的是视图页面，导致Axios无法解析出data.data结构，直接引发表格渲染失败。

错误排查与修复步骤 #

1. 拆分路由，分离页面渲染与数据接口 #

原路由中/blogs既负责返回页面又要处理数据请求，需拆分出独立的API路由：

// 页面路由：返回视图
Route::get('/blogs', [BlogCategoryController::class, 'index'])->name('categories.index');
// API路由：返回JSON数据
Route::get('/api/blogs', [BlogCategoryController::class, 'getCategories'])->name('categories.api');

// 保留原有其他路由（show/store/update/destroy）
Route::get('/blogs/{category}', [BlogCategoryController::class, 'show'])->name('categories.show');
Route::post('/blogs', [BlogCategoryController::class, 'store'])->name('categories.store');
Route::put('/blogs/{category}', [BlogCategoryController::class, 'update'])->name('categories.update');
Route::delete('/blogs/{category}', [BlogCategoryController::class, 'destroy'])->name('categories.destroy');

2. 修正控制器类名拼写错误 #

原控制器类名BlgoCategoryController存在拼写错误（少了一个o），需统一修正为BlogCategoryController，确保路由与控制器对应。

3. 添加API数据接口方法 #

在BlogCategoryController中新增getCategories方法，返回JSON格式的分页数据：

public function getCategories(Request $request) {
    $perPage = $request->perPage ?? 5;
    $keyword = $request->keyword;

    $query = BlogCategory::query();

    if ($keyword) {
        $query->where('category_name', 'like', '%' . $keyword . '%');
    }

    $categories = $query->orderByDesc('id')->paginate($perPage)->withQueryString();

    // 返回JSON格式的分页数据
    return response()->json($categories);
}

// 原index方法保留，负责返回视图
public function index(Request $request) {
    return view('admin.blogs.categories');
}

4. 修复前端JavaScript的API请求地址 #

将Axios请求的URL从/blogs改为/api/blogs：

const response = await axios.get(
    `/api/blogs?page=${currentPage}&perPage=${perPage}&keyword=${keyword}`
)

5. 修正Loader函数定义问题 #

原代码中showLoader和hideLoader函数定义在try/finally块内部无法执行，需直接调用DOM操作逻辑：

async function getList() {
    const perPage = document.getElementById("perPage").value
    const keyword = document.getElementById("keyword").value

    // 显示加载器
    document.getElementById('loader').classList.remove('d-none')
    try {
        const response = await axios.get(
            `/api/blogs?page=${currentPage}&perPage=${perPage}&keyword=${keyword}`
        )
        console.log(response);
        updateTable(response.data)
    } catch (error) {
        console.error('Error fetching category data:', error);
    } finally {
        // 隐藏加载器
        document.getElementById('loader').classList.add('d-none')
    }
}

同理，deleteCategory函数中的Loader逻辑也需做同样修改。

6. 完善分页逻辑，避免无效页码请求 #

添加总页数判断，防止currentPage超出范围：

let totalPages = 1

function updateTable(data) {
    totalPages = data.last_page // Laravel分页返回的总页数字段
    const tableList = document.getElementById("tableList");

    if (!data.data.length) {
        tableList.innerHTML = '<tr><td colspan="4" class="text-center">No categories found.</td></tr>';
        return;
    }

    const rowsHtml = data.data.map(category => {
        return `<tr>
                    <td>${category.id}</td>
                    <td>${category.category_name}</td>
                    <td>${category.category_slug || '未生成'}</td>
                    <td>
                        <button data-id="${category.id}" class="btn editBtn btn-sm btn-outline-success">Edit</button>
                        <button data-id="${category.id}" class="btn deleteBtn btn-sm btn-outline-danger">Delete</button>
                    </td>
                </tr>`;
    }).join('');

    tableList.innerHTML = rowsHtml;
}

// 修改handleNext函数
function handleNext() {
    if (currentPage < totalPages) {
        currentPage++
        getList()
    }
}

7. 补充缺失的fillUpUpdateForm函数 #

前端点击编辑按钮时调用的fillUpUpdateForm函数未定义，需补充基础实现：

async function fillUpUpdateForm(id) {
    try {
        const response = await axios.get(`/blogs/${id}`)
        const category = response.data
        // 假设模态框中有id为categoryName的输入框，根据实际页面调整
        document.getElementById('categoryName').value = category.category_name
        // 打开编辑模态框，根据实际模态框ID调整
        $('#editCategoryModal').modal('show')
    } catch (error) {
        console.error('Error fetching category data:', error)
    }
}

8. 确保Category Slug字段自动生成 #

如果category_slug字段未自动生成，需在BlogCategory模型中添加自动生成逻辑：

use Illuminate\Support\Str;

class BlogCategory extends Model
{
    protected static function boot()
    {
        parent::boot();

        // 创建时生成slug
        static::creating(function ($category) {
            $category->category_slug = Str::slug($category->category_name);
        });

        // 更新时同步slug
        static::updating(function ($category) {
            $category->category_slug = Str::slug($category->category_name);
        });
    }
}

内容的提问来源于stack exchange，提问作者MicroWeb Technology Ltd