Использовал AJAX, чтобы сделать мою админ-панель более похожей на SPA, однако я не уверен, что сделал это эффективно.Мне пришлось создать пару дополнительных маршрутов и видов

Question

Я понял, что моя админ-панель забита информацией, поэтому я решил разделить эту информацию на разные представления, а затем загрузить разные представления в деление на нажатие кнопок.Несмотря на то, что я закончил функционал, и он работает, я чувствую, что я выбил его слишком большим количеством дополнительного кода / представлений / маршрутов.Вот почему мне интересно знать, выглядит ли что-то сногсшибательно плохо.

Я буду использовать псевдокод для некоторых частей, чтобы не отвлекать ваше внимание.

Для начала, это оригинальная страница администратора, с которой все начинается:

@extends('layouts.app')
@section('content')
<div class="admin-tabs">
        <p class='admin-tab' data-tab='categories'>Categories</p>
        <p class='admin-tab' data-tab='users'>Users</p>
</div>
<div class="admin-container">
       Code that displays categories and allows me to delete them
</div>
    <script>
    var token = '{{ Session::token() }}';
    var adminTab = '{{ route('adminTab') }}';
</script>

@endsection

Когда администратор щелкает один из элементов <p>, код в .admin-container заменяется кодом из представления, благодаря этомуВызов AJAX:

$('.admin-tab').on('click', function(){
    var tab = $(this).data('tab');

    $.ajax({
        type: 'POST',
        url : adminTab,
        data: {
            tab: tab
        },
        headers: {
            'X-CSRF-TOKEN': token
        },
        success : function (data) {
            $(".admin-container").html(data);
            history.replaceState(null, null, '/admin/' + tab);
        }
    });
});

Используя данные из элемента <p>, по которому щелкнули, я определяю, какое представление следует отображать в моем контроллере AjaxController:

public function adminTab(Request $request){
    $tab = $request['tab'];

    if ($tab == 'categories') {
        $categories = Category::orderBy('created_at', 'desc')->get();
        return view('partials/adminCategoriesTab', ['categories' => $categories]);
    } else {
        $users = User::orderBy('created_at', 'desc')->get();
        return view('partials/adminUsersTab', ['users' => $users]);
    }

}

И используются следующие маршруты:

    Route::get('/admin/categories', 'pagesController@admin')->name('admin');
    Route::get('/admin/users', 'pagesController@adminUsers')->name('adminUsers');
    Route::post('/admin/categories', 'AjaxController@adminTab')->name('adminTab');

Первые 2 маршрута используются для непосредственного отображения представлений, если пользователь напрямую обращается к своим URL-адресам, а третий маршрут - это публикация, используемая для запроса AJAX, которая изменяет только часть первых 2 страниц маршрута.

Пока что я использую 4 представления:

partials/adminCategoriesTab.blade.php
partials/adminUsersTab.blade.php
admin.blade.php
adminUsers.blade.php

Частицы используются только при вызове AJAX, так что конкретный код можно вставить в .admin-container, тогда как admin.blade.phpи adminUsers.blade.php - это представления, представленные в GET-запросе по их конкретным URL.

Частицы содержат такие вещи, как:

<form action="{{ route('createCategory') }}" method="POST" enctype="multipart/form-data">

    <div class="form-group">
        <label class='label required' for="categoryName">Category Name</label>
        <input class='input' type="text" name="categoryName" placeholder="Category Name" value='{{ Request::old('categoryName') }}'>
        @include('partials.invalid', ['field' => 'categoryName'])
    </div>

    <div class="form-group">
        <div class="upload-btn-wrapper">
            <button class="btn">Drop files here or click to upload</button>
            <input class='upload-input' type="file" name='categoryImage'>
            @include('partials.invalid', ['field' => 'categoryImage'])
        </div>
    </div>

    {{ csrf_field() }}
    <button class='submit-btn' type="submit" name="submit">Upload</button>

</form>

Или:

@if(!empty($users) && count($users) > 0)
    @foreach($users as $user)
        <p>{{ $user->username }}</p>
    @endforeach
@endif

НО admin.blade.php содержит всю страницу:

@extends('layouts.app')
@section('content')

    <div class="wrapper">
            <div class="admin-tabs">
                <p class='admin-tab' data-tab='categories'>Categories</p>
                <p class='admin-tab' data-tab='users'>Users</p>
            </div>
            <div class="admin-container">
                <form action="{{ route('createCategory') }}" method="POST" enctype="multipart/form-data">

                    <div class="form-group">
                        <label class='label required' for="categoryName">Category Name</label>
                        <input class='input' type="text" name="categoryName" placeholder="Category Name" value='{{ Request::old('categoryName') }}'>
                        @include('partials.invalid', ['field' => 'categoryName'])
                    </div>

                    <div class="form-group">
                        <div class="upload-btn-wrapper">
                            <button class="btn">Drop files here or click to upload</button>
                            <input class='upload-input' type="file" name='categoryImage'>
                            @include('partials.invalid', ['field' => 'categoryImage'])
                        </div>
                    </div>

                    {{ csrf_field() }}
                    <button class='submit-btn' type="submit" name="submit">Upload</button>

                </form>

                @if(!empty($categories) && count($categories) > 0)
                    <form method="POST" action="{{ route('deleteCategories') }}">
                    @foreach($categories as $category)
                        <div class="categories-flexbox">
                            <img class='profile-picture' src='{{ url("storage/uploads/categories/thumbnails/".$category->image_file_name) }}' alt='Random image' />
                            <p>{{ $category->name }}</p>
                            <input type="checkbox" name="categories[]" value="{{ $category->id }}">
                            <input type="hidden" name="categoryFiles[]" value="{{ $category->image_file_name }}">
                        </div>
                    @endforeach
                    <button class='delete-btn' type="submit">Delete</button>
                    {{ csrf_field() }}
                    {{ method_field('delete') }}
                    </form>
                @endif
            </div>
    </div>

    <script>
        var token = '{{ Session::token() }}';
        var adminTab = '{{ route('adminTab') }}';
    </script>

@endsection

Мне действительно любопытно, сделал ли я что-нибудь, похожее на обычный способ сделать это, и если есть что-то, что можно было бы сократить или сделать лучше с меньшими затратамикод.Спасибо за чтение, я ценю это.