Laravel表单与Laravel DataTable

在现代Web开发中，处理表单数据和展示大量数据是常见的需求。Laravel框架提供了强大的工具来简化这些任务。介绍如何使用Laravel处理表单数据，并结合Laravel DataTable插件来高效地展示和管理数据。

解决方案

通过以下步骤解决表单处理和数据展示的问题：
1. 创建一个Laravel项目。
2. 设计并实现表单提交功能。
3. 使用Laravel DataTable插件展示数据。

创建Laravel项目

确保你已经安装了Composer。然后，通过以下命令创建一个新的Laravel项目：

bash
composer create-project --prefer-dist laravel/laravel form-datatable


进入项目目录：

bash
cd form-datatable


设计并实现表单提交功能

创建表和模型

假设我们要创建一个简单的用户表。生成迁移文件：

bash
php artisan make:migration create_users_table --create=users


编辑生成的迁移文件 database/migrations/xxxx_xx_xx_create_users_table.php：

php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;</p>

<p>class CreateUsersTable extends Migration
{
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamps();
        });
    }</p>

<pre><code>public function down()
{
    Schema::dropIfExists('users');
}

}

运行迁移：

bash
php artisan migrate


接下来，生成用户模型：

bash
php artisan make:model User


创建控制器和视图

生成控制器：

bash
php artisan make:controller UserController


编辑 app/Http/Controllers/UserController.php：

php
namespace AppHttpControllers;</p>

<p>use AppModelsUser;
use IlluminateHttpRequest;</p>

<p>class UserController extends Controller
{
    public function index()
    {
        return view('users.index');
    }</p>

<pre><code>public function create()
{
    return view('users.create');
}

public function store(Request $request)
{
    $validated = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users',
    ]);

    User::create($validated);

    return redirect()->route('users.index')->with('success', 'User created successfully.');
}

}

创建视图文件 resources/views/users/create.blade.php：

html
</p>



    <title>Create User</title>


    <h1>Create User</h1>
    
        @csrf
        <div>
            <label for="name">Name:</label>
            
        </div>
        <div>
            <label for="email">Email:</label>
            
        </div>
        <button type="submit">Create User</button>
    



<p>

配置路由

编辑 routes/web.php：

php
use AppHttpControllersUserController;</p>

<p>Route::get('/users', [UserController::class, 'index'])->name('users.index');
Route::get('/users/create', [UserController::class, 'create'])->name('users.create');
Route::post('/users', [UserController::class, 'store'])->name('users.store');

使用Laravel DataTable插件展示数据

安装Laravel DataTable

安装Laravel DataTable插件：

bash
composer require yajra/laravel-datatables-oracle


创建数据展示视图

创建视图文件 resources/views/users/index.blade.php：

html
</p>



    <title>User List</title>
    


    <h1>User List</h1>
    <a href="{{ route('users.create') }}">Create User</a>
    <table id="users-table" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
            </tr>
        </thead>
    </table>

    
    
    
        $(document).ready(function() {
            $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('users.data') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' }
                ]
            });
        });
    



<p>

创建数据API

编辑 app/Http/Controllers/UserController.php，添加数据API方法：

php
use YajraDataTablesFacadesDataTables;</p>

<p>public function data()
{
    $users = User::query();</p>

<pre><code>return Datatables::of($users)
    ->addColumn('action', function ($user) {
        return '<a href="#">Edit</a> <a href="#">Delete</a>';
    })
    ->make(true);

}

配置数据API路由

编辑 routes/web.php，添加数据API路由：

php
Route::get('/users/data', [UserController::class, 'data'])->name('users.data');


通过上述步骤，我们成功地创建了一个Laravel项目，实现了表单提交功能，并使用Laravel DataTable插件高效地展示了数据。希望对你有所帮助，如果你有任何问题或建议，请随时留言。