如何在Laravel中开发用户家电偏好排名提交表单

1. 数据库层准备 #

首先创建存储排名结果的数据表，执行命令生成迁移文件：

php artisan make:migration create_appliance_rankings_table

编辑生成的迁移文件的up方法，定义字段：

public function up()
{
    Schema::create('appliance_rankings', function (Blueprint $table) {
        $table->id();
        // 若需要关联登录用户可保留此字段，游客提交可删除
        $table->foreignId('user_id')->nullable()->constrained()->onDelete('cascade');
        $table->tinyInteger('refrigerator_rank'); // 冰箱排名
        $table->tinyInteger('microwave_rank'); // 微波炉排名
        $table->tinyInteger('stove_rank'); // 炉灶排名
        $table->timestamps();
    });
}

执行迁移生成表：

php artisan migrate

2. 创建对应模型 #

执行命令生成模型：

php artisan make:model ApplianceRanking

编辑模型文件，设置可批量赋值字段：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class ApplianceRanking extends Model
{
    use HasFactory;

    protected $fillable = [
        'user_id',
        'refrigerator_rank',
        'microwave_rank',
        'stove_rank'
    ];
}

3. 配置路由 #

在routes/web.php中添加表单访问和提交路由：

use App\Http\Controllers\ApplianceRankingController;

Route::get('/appliance-rank', [ApplianceRankingController::class, 'create'])->name('rank.create');
Route::post('/appliance-rank', [ApplianceRankingController::class, 'store'])->name('rank.store');

4. 编写控制器逻辑 #

执行命令生成控制器：

php artisan make:controller ApplianceRankingController

编辑控制器代码：

<?php

namespace App\Http\Controllers;

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

class ApplianceRankingController extends Controller
{
    // 展示排名表单
    public function create()
    {
        return view('rank.create');
    }

    // 处理提交逻辑
    public function store(Request $request)
    {
        // 校验提交数据：三个排名都是1-3的整数，且互不重复
        $validated = $request->validate([
            'refrigerator_rank' => 'required|integer|between:1,3|distinct:microwave_rank,stove_rank',
            'microwave_rank' => 'required|integer|between:1,3',
            'stove_rank' => 'required|integer|between:1,3',
        ]);

        // 若为登录用户提交，补充用户ID
        if (auth()->check()) {
            $validated['user_id'] = auth()->id();
        }

        // 数据入库
        ApplianceRanking::create($validated);

        // 返回成功提示，可根据需求调整跳转逻辑
        return back()->with('success', '排名提交成功');
    }
}

5. 编写前端表单 #

创建resources/views/rank/create.blade.php视图文件，新手可以先做下拉选择版本，逻辑简单不容易出错：

<!DOCTYPE html>
<html>
<head>
    <title>家电偏好排名</title>
</head>
<body>
    @if(session('success'))
        <p style="color: green">{{ session('success') }}</p>
    @endif
    <form method="POST" action="{{ route('rank.store') }}">
        @csrf
        <p>请对以下家电按偏好程度排序，1为最喜欢，3为最不喜欢，排名不可重复</p>
        <div>
            <label>冰箱：</label>
            <select name="refrigerator_rank" required>
                <option value="">请选择排名</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            @error('refrigerator_rank')
                <p style="color: red">{{ $message }}</p>
            @enderror
        </div>
        <div>
            <label>微波炉：</label>
            <select name="microwave_rank" required>
                <option value="">请选择排名</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            @error('microwave_rank')
                <p style="color: red">{{ $message }}</p>
            @enderror
        </div>
        <div>
            <label>炉灶：</label>
            <select name="stove_rank" required>
                <option value="">请选择排名</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            @error('stove_rank')
                <p style="color: red">{{ $message }}</p>
            @enderror
        </div>
        <button type="submit">提交排名</button>
    </form>
</body>
</html>

如果需要更好的用户体验，可以替换成拖拽排序功能，用原生JS的draggableAPI实现即可，排序后把对应排名值写入隐藏输入框提交，存储逻辑和上述方案完全一致。

内容的提问来源于stack exchange，提问作者voxire