php 如何使用Axios从MySQL中获取数据？

我想在我的laravel项目中从我的mysql数据库中获取数据。在这里我可以保存数据，我写了一个脚本来显示数据列表，使用axios和JavaScript，但显示错误。你能帮助我的错误在哪里吗？
这是我的路线

Route::get('/blogs', [BlgoCategoryController::class, 'index'])->name('categories.index');
Route::get('/blogs/{category}', [BlgoCategoryController::class, 'show'])->name('categories.show');
Route::post('/blogs', [BlgoCategoryController::class, 'store'])->name('categories.store');
Route::put('/blogs/{category}', [BlgoCategoryController::class, 'update'])->name('categories.update');
Route::delete('/blogs/{category}', [BlgoCategoryController::class, 'destroy'])->name('categories.destroy');

字符串
我在我的控制器文件中写了这些脚本

class BlgoCategoryController extends Controller {


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

    $query = BlogCategory::query();

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

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

    return view('admin.blogs.categories', compact('categories'));
}

public function show(BlogCategory $category) {
    return $category;
}
//Store News Customer
function store(Request $request){
    $validated = $request->validate([
        'category_name' => 'required|string|max:50'
    ]);

    $category = BlogCategory::create($validated);
    return response()->json($category, Response::HTTP_CREATED);
}

public function update(Request $request, BlogCategory $category) {
    $validated = $request->validate([
        'category_name' => 'required|string|max:50'
    ]);

    $category->update($validated);

    return response()->json($category);
}

public function destroy(BlogCategory $category) {
    $category->delete();

    return response()->json(null, Response::HTTP_NO_CONTENT);
} }

型
我想在这个视图文件中获取数据

<div id="loader" class="LoadingOverlay d-none">
    <div class="Line-Progress">
        <div class="indeterminate"></div>
    </div>
</div>
<div class="card shadow">
    <div class="card-header">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <h5>{{__('Blog Categories')}}</h5>
            </div>
            <div class="col-md-6 col-sm-12 text-right">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#categoryModal">
                    {{__('Add Category')}}
                </button>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-2 px-2">
                <div class="form-group">
                    <label>Per Page</label>
                    <select id="perPage" class="form-control form-select-sm form-select">
                        <option>5</option>
                        <option>10</option>
                        <option>15</option>
                    </select>
                </div>
            </div>

            <div class="col-md-2 px-2">
                <div class="form-group">
                    <label>Search</label>
                    <div class="input-group">
                        <input value="" type="text" id="keyword" class="form-control">
                        <button class="form-control btn btn-success" type="button" id="searchButton">Search</button>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="row">

            <div class="col-md-12 p-2 col-sm-12 col-lg-12">
                <div class="table-responsive bg-white rounded-3 p-2">
                    <table class="table table-bordered" id="tableData">
                        <thead>
                            <tr class="bg-light">
                                <th>{{__('Category ID')}}</th>
                                <th>{{__('Category Name')}}</th>
                                <th>{{__('Category Slug')}}</th>
                                <th>{{__('Action')}}</th>
                            </tr>
                        </thead>
                        <tbody id="tableList">
                        
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-md-2 p-2">
                <div class="">
                    <button onclick="handlePrevious()" id="previousButton" class="btn btn-sm btn-success">{{__('Previous')}}</button>
                    <button onclick="handleNext()" id="nextButton" class="btn btn-sm mx-1 btn-success">{{__('Next')}}</button>
                </div>
            </div>

        </div>

    </div>
</div>

型
这是我的JavaScript

let currentPage = 1

// Function to fetch and display the list of customers
async function getList() {
    const perPage = document.getElementById("perPage").value
    const keyword = document.getElementById("keyword").value

    try {
        function showLoader() {
            document.getElementById('loader').classList.remove('d-none')
        }
        const response = await axios.get(
            `/blogs?page=${currentPage}&perPage=${perPage}&keyword=${keyword}`)
            console.log(response);
        updateTable(response.data)
    } catch (error) {
        console.error('Error fetching customer data:', error);
    } finally {
        function hideLoader() {
            document.getElementById('loader').classList.add('d-none')
        }
    }
}

// Function to update the table with customer data
function updateTable(data) {
const tableList = document.getElementById("tableList");

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

    // Build the rows HTML string
    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('');

    // Update the table with the new rows
    tableList.innerHTML = rowsHtml;
}

// Event listeners for pagination and search
document.getElementById('perPage').addEventListener('change', () => {
    currentPage = 1
    getList()
})

document.getElementById('searchButton').addEventListener('click', () => {
    currentPage = 1
    getList()
})

// Functions for handling pagination buttons
function handlePrevious() {
    if (currentPage > 1) {
        currentPage--
        getList()
    }
}

function handleNext() {
    currentPage++
    getList()
}

// Function to delete a customer
async function deleteCategory(id) {
    let isConfirmed = confirm("Are you sure you want to delete this category?")
    if (isConfirmed) {
        try {
            function showLoader() {
            document.getElementById('loader').classList.remove('d-none')
        }
            await axios.delete(`/blogs/${id}`)
            getList()
        } catch (error) {
            console.error('Error deleting category:', error)
        } finally {
            function hideLoader() {
            document.getElementById('loader').classList.add('d-none')
        }
        }
    }
}

// Attach event listeners to dynamically created buttons
document.getElementById('tableList').addEventListener('click', function(event) {
    const target = event.target

    if (target.classList.contains('deleteBtn')) {
        const categoryId = target.getAttribute('data-id')
        deleteCategory(categoryId)
    }

    if (target.classList.contains('editBtn')) {
        const categoryId = target.getAttribute('data-id')
        fillUpUpdateForm(categoryId)
    }
})

// Initial list fetch
getList()

型
请帮我显示数据列表。

php 如何使用Axios从MySQL中获取数据？

1条答案

相关问题

热门标签

最新问答