【laravel】blog项目实战笔记-后台多级分类列表创建及Ajax异步修改分类排序

前言：

本篇博客将分享一个基于Laravel的项目实战笔记，主要涉及后台多级分类列表的创建和Ajax异步修改分类排序。通过本文，您将了解如何使用Laravel框架创建一个具有多级分类功能的博客项目，并实现分类排序的异步更新。

项目背景：

在博客项目中，分类是一种重要的组织和归类文章的方式。通常情况下，分类可以有多个层级，我们需要实现一个可以无限扩展层级的分类列表，并能够通过拖拽方式改变分类的排序。

解决方案：

为了实现上述需求，我们将使用Laravel框架提供的数据库迁移和模型来创建分类表，并使用前端的拖拽插件实现分类的排序功能。我们将分为以下几个步骤来设计和编写代码。

步骤一：创建数据库表和模型

首先，我们需要在Laravel项目中创建一个用于存储分类信息的数据表。通过使用Laravel的迁移功能，我们可以方便地定义表的结构。以下是一个创建分类表的示例迁移文件：

namespace App\Database\Migrations;

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateCategoriesTable extends Migration
{
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->integer('parent_id')->nullable();
            $table->integer('sort_order')->default(0);
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('categories');
    }
}

上述迁移文件定义了一个名为`categories`的表，包含了`name`、`parent_id`、`sort_order`和`timestamps`等字段。其中，`parent_id`字段用于表示分类的父级ID，通过该字段实现多级分类。

接下来，我们需要创建一个对应该表的模型。在Laravel中，模型是与数据库表进行交互的主要方式。以下是一个简单的分类模型示例：

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    protected $table = 'categories';
    protected $fillable = ['name', 'parent_id', 'sort_order'];
}

上述模型定义了与`categories`表对应的模型，并指定了可以进行填充的字段。

步骤二：实现分类列表的创建和展示

一旦数据库表和模型创建完毕，我们可以通过Laravel的路由和控制器来实现分类列表的创建和展示。以下是一个简单的控制器示例：

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Category;

class CategoryController extends Controller
{
    public function index()
    {
        $categories = Category::with('children')->whereNull('parent_id')->orderBy('sort_order')->get();
        return view('categories.index', compact('categories'));
    }

    public function create()
    {
        $categories = Category::whereNull('parent_id')->get();
        return view('categories.create', compact('categories'));
    }

    public function store(Request $request)
    {
        Category::create($request->all());
        return redirect()->route('categories.index');
    }
}

上述控制器中的`index`方法用于展示分类列表，`create`方法用于创建新的分类，`store`方法用于保存分类数据。我们通过调用模型的相关方法来获取和处理数据，并将其传递给相应的视图进行展示。

为展示分类列表，我们需要编写对应的视图。以下是一个简单的分类列表视图示例：

<h4>分类列表</h4>

<ul id="sortable">
    @foreach ($categories as $category)
        <li class="ui-state-default" data-id="{{ $category->id }}">
            {{ $category->name }}
        </li>
        
        @if ($category->children)
            @include('categories.partials.subcategories', ['subcategories' => $category->children])
        @endif
    @endforeach
</ul>

上述视图使用了由jQuery UI提供的拖拽插件，将分类以可拖拽的方式呈现出来。使用`data-id`属性将分类的ID传递给后台，以便后续进行排序更新操作。

步骤三：实现分类排序的异步更新

要实现分类排序的异步更新，我们需要编写相应的路由、控制器和JavaScript代码。以下是一个简单的控制器示例：

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Category;

class CategoryController extends Controller
{
    public function updateOrder(Request $request)
    {
        $order = json_decode($request->input('order'), true);
        
        foreach ($order as $position => $item) {
            Category::where('id', $item['id'])->update(['sort_order' => $position]);
        }
        
        return response()->json(['success' => true]);
    }
}

上述控制器中的`updateOrder`方法用于更新分类的排序。我们从前端传递的请求中解析出分类的顺序，并通过调用模型的`update`方法更新数据库中对应的记录。

为了实现异步更新，我们还需要编写相应的前端JavaScript代码。以下是一个使用jQuery的示例：

$(document).ready(function() {
    $('#sortable').sortable({
        update: function(event, ui) {
            var order = [];
                
            $('#sortable li').each(function(index, item) {
                order.push({id: $(item).data('id')});
            });
            
            $.ajax({
                method: 'POST',
                url: '{{ route('categories.update.order') }}',
                data: {
                    order: JSON.stringify(order)
                },
                success: function(response) {
                    console.log(response);
                },
                error: function() {
                    alert('排序更新失败！');
                }
            });
        }
    });
});

上述代码中，我们使用jQuery UI的`sortable`方法将分类列表设为可拖拽，并在拖拽结束后将排序结果传递给后台进行更新。通过使用`$.ajax`方法发送异步请求，我们可以将排序数据传递给后台控制器的`updateOrder`方法，并在成功返回时进行相应的处理。

总结：

通过以上的设计和编码，我们成功实现了一个基于Laravel的多级分类列表的创建和排序功能。通过创建分类表和模型，我们存储和管理了分类的相关数据。通过使用路由和控制器，我们展示了分类列表，并实现了创建新分类的功能。通过前端的拖拽插件和JavaScript代码，我们实现了异步更新分类排序的功能。

这个项目实战笔记希望能够帮助您理解和应用Laravel框架中的一些常用功能和技术，同时也在全栈程序员的角色中提供了一些设计和编码的思路和经验。