Laravel 中创建排序表单并存储到数据库的教程-php教程-PHP中文网

Laravel 中创建排序表单并存储到数据库的教程

花韻仙語

发布： 2025-10-08 11:27:22

原创

307人浏览过

laravel 中创建排序表单并存储到数据库的教程

本文旨在指导初学者如何在 Laravel 框架中创建一个允许用户对项目进行排序的表单，并将排序结果存储到数据库。我们将以一个包含冰箱、微波炉和炉灶的电器排序示例，详细讲解数据库设计、表单构建、数据存储和排序结果展示等关键步骤。通过本文，你将掌握在 Laravel 应用中实现自定义排序功能的实用方法。

数据库设计

首先，我们需要设计一个能够存储排序信息的数据库表。假设我们有一个 appliances 表，用于存储电器信息，并新增一个 order 字段用于记录排序。

表结构如下：

id: 自增主键 (INT)
name: 电器名称 (VARCHAR)
description: 电器描述 (TEXT)
order: 排序字段 (INT)

可以使用 Laravel 的 Migration 来创建该表：

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

class CreateAppliancesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('appliances', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->text('description')->nullable();
            $table->integer('order')->default(0); // 默认排序为0
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('appliances');
    }
}

登录后复制

运行 php artisan migrate 命令创建表。

创建排序表单

接下来，我们需要创建一个允许用户对电器进行排序的表单。可以使用 HTML 的 <select> 元素和 JavaScript 来实现拖拽排序功能。

一个简单的表单示例：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

<form action="/appliances/sort" method="POST">
    @csrf
    <label for="fridge">Fridge:</label>
    <select name="appliances[fridge]" id="fridge">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select><br>

    <label for="microwave">Microwave:</label>
    <select name="appliances[microwave]" id="microwave">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select><br>

    <label for="stove">Stove:</label>
    <select name="appliances[stove]" id="stove">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select><br>

    <button type="submit">Submit</button>
</form>

登录后复制

或者，使用可拖拽的列表，并用JavaScript收集排序结果：

<ul id="sortable">
  <li data-id="fridge">Fridge</li>
  <li data-id="microwave">Microwave</li>
  <li data-id="stove">Stove</li>
</ul>

<button id="save-order">Save Order</button>

<script>
  $( function() {
    $( "#sortable" ).sortable();
  });

  $("#save-order").click(function(){
    var order = [];
    $("#sortable li").each(function(index){
      order.push({id: $(this).data('id'), order: index + 1});
    });

    $.ajax({
      url: "/appliances/sort",
      type: "POST",
      data: {
        _token: "{{ csrf_token() }}",
        order: order
      },
      success: function(response){
        console.log(response);
      }
    });
  });
</script>

登录后复制

数据存储

在 Laravel 控制器中，接收表单提交的数据，并更新数据库中的 order 字段。

use App\Models\Appliance;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class ApplianceController extends Controller
{
    public function sort(Request $request)
    {
        $orderData = $request->input('order');

        foreach ($orderData as $item) {
            $appliance = Appliance::where('name', $item['id'])->first();
            if($appliance){
                $appliance->order = $item['order'];
                $appliance->save();
            }
        }

        return response()->json(['message' => 'Order updated successfully']);
    }
}

登录后复制

确保在 routes/web.php 中定义了相应的路由：

Route::post('/appliances/sort', [ApplianceController::class, 'sort']);

登录后复制

排序结果展示

最后，从数据库中获取电器列表，并按照 order 字段进行排序，然后在视图中展示。

$appliances = Appliance::orderBy('order', 'asc')->get();

return view('appliances.index', compact('appliances'));

登录后复制

在 Blade 视图中：

<ul>
    @foreach ($appliances as $appliance)
        <li>{{ $appliance->name }} - Order: {{ $appliance->order }}</li>
    @endforeach
</ul>

登录后复制

注意事项

确保 order 字段的唯一性，避免出现相同排序值。可以通过数据库约束或者在代码中进行验证。
在处理大量数据时，考虑使用事务来保证数据的一致性。
前端排序可以使用各种 JavaScript 库，例如 jQuery UI Sortable。
根据实际需求，可以添加用户身份验证和授权，确保只有授权用户才能进行排序操作。

总结

通过以上步骤，我们成功地在 Laravel 中创建了一个排序表单，并将排序结果存储到数据库中。这种方法可以应用于各种需要自定义排序功能的场景，例如文章列表、产品列表等。通过灵活运用 Laravel 的特性和前端技术，可以轻松实现各种复杂的排序需求。

以上就是Laravel 中创建排序表单并存储到数据库的教程的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

PHP中关联数组的多条件排序：按值降序，再按键升序 PHP中高效地将固定数据结构合并到JSON数组的每个对象中 PHP与jQuery AJAX交互：实现表单提交及服务端JSON响应处理 PHP表单数据更新后显示：解决重定向导致的数据丢失问题如何在Debian 10上搭建LAMP栈PHP环境的详细步骤？