在Laravel中实现删除操作后自动返回原页面的教程-php教程-PHP中文网

在Laravel中实现删除操作后自动返回原页面的教程

本教程详细讲解了如何在laravel应用中，当用户执行数据库删除操作后，自动将其重定向回之前的页面。核心方法是利用laravel的`redirect()->back()`功能，并结合`session()->flash()`实现删除成功后的用户友好提示，从而提升应用的用户体验和操作流畅性。

问题背景与解决方案概述

在Web应用开发中，用户执行删除操作后，通常期望页面能够自动刷新或返回到操作前的列表页，以便查看最新的数据状态。然而，在Laravel中，如果控制器中的删除方法仅执行数据库操作而没有明确的返回指令，页面将不会自动跳转，导致用户体验不佳。

原始代码中的destroy方法：

public function destroy($id){
    DB::delete('delete from Rolete where ProdusID = ?' ,[$id]);
    // 此处缺少返回语句
}

登录后复制

这段代码的问题在于，它成功执行了数据库删除操作，但没有指示Laravel在操作完成后应该做什么。浏览器会停留在发起请求的页面，或者如果请求是通过AJAX发出，则会收到一个空响应。要解决此问题，我们需要在删除操作完成后显式地进行页面重定向。

核心实现：使用 redirect()-youjiankuohaophpcnback()

Laravel提供了一个便捷的方法redirect()->back()，它能够将用户重定向回上一个请求来源的页面。这对于删除、更新或创建操作后返回列表页的场景非常适用。

要实现删除后返回原页面，只需在destroy方法中添加return redirect()->back();语句。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Http\Controllers\View; // 此行可能不需要，取决于具体使用

class TableditControllerRolete extends Controller
{
    public function index(){
        $data = DB::table('Rolete')->get();
        return view('table_edit', compact('data'));
    }

    public function destroy($id){
        DB::delete('delete from Rolete where ProdusID = ?' ,[$id]);
        return redirect()->back(); // 添加此行实现返回上一页
    }
}

登录后复制

通过添加这一行，当用户点击删除链接并完成数据库操作后，浏览器将自动重定向回发起删除请求的页面，通常是包含数据列表的页面。

增强用户体验：添加操作反馈消息

仅仅返回页面可能还不够，用户可能需要知道他们的操作是否成功。Laravel的Session Flash功能允许我们在一次请求中存储数据，并在下一次请求中自动清除。这非常适合用来显示临时的成功或错误消息。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

在控制器中添加闪存消息： 在destroy方法中，删除操作成功后，我们可以使用session()->flash()方法存储一条成功消息。
```
public function destroy($id){
    DB::delete('delete from Rolete where ProdusID = ?' ,[$id]);
    session()->flash('success','记录删除成功！'); // 添加闪存消息
    return redirect()->back();
}
```
登录后复制
这里，success是闪存消息的键，记录删除成功！是消息内容。

在Blade视图中显示闪存消息： 在你的视图文件（例如table_edit.blade.php）中，你需要添加逻辑来检查并显示这些闪存消息。通常，我们会将其放在页面顶部或内容区域的某个显眼位置。

<!-- 可以在页面任意位置添加，例如在<body>标签内，或者在内容区域顶部 -->
@if(session()->has('success'))
    <div class="alert alert-success">
        <p>{{ session()->get('success') }}</p>
    </div>
@endif

<tbody>
    @foreach($data as $row)
    <tr>
        <td>
            <a href="#" class="btn btn-info" target="blank"><i class="fa fa-pencil"></i></a> 
            <a href = 'delete/{{$row->ProdusID}}' class="btn btn-danger" target="blank"><i class="fa fa-trash"></i></a>
        </td>
    </tr>
    @endforeach
</tbody>

登录后复制

当页面重定向回来时，如果存在名为success的闪存消息，它将被显示出来。

完整代码示例

为了更好地理解，以下是涉及到的所有相关代码片段：

控制器 (TableditControllerRolete.php)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class TableditControllerRolete extends Controller
{
    /**
     * 显示数据列表
     *
     * @return \Illuminate\View\View
     */
    public function index(){
        $data = DB::table('Rolete')->get();
        return view('table_edit', compact('data'));
    }

    /**
     * 删除指定ID的记录并返回上一页
     *
     * @param  int  $id
     * @return \Illuminate\Http\RedirectResponse
     */
    public function destroy($id){
        // 执行数据库删除操作
        $deleted = DB::delete('delete from Rolete where ProdusID = ?' ,[$id]);

        if ($deleted) {
            // 删除成功，设置闪存消息
            session()->flash('success', '记录删除成功！');
        } else {
            // 删除失败（例如，ID不存在），设置错误闪存消息
            session()->flash('error', '记录删除失败，请稍后再试。');
        }

        // 重定向回上一页
        return redirect()->back();
    }
}

登录后复制

路由 (web.php)

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TableditControllerRolete; // 确保导入控制器

/* 数据编辑与删除路由 */
Route::get('tabledit', [TableditControllerRolete::class, 'index']);
Route::get('delete/{id}', [TableditControllerRolete::class, 'destroy']); // 注意：使用GET请求进行删除操作存在安全风险，请参考下方注意事项。

登录后复制

视图 (table_edit.blade.php)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据列表</title>
    <!-- 引入必要的CSS，例如Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container mt-5">
        <h2>数据列表</h2>

        <!-- 消息提示区域 -->
        @if(session()->has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session()->get('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        @if(session()->has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session()->get('error') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <table class="table table-bordered mt-3">
            <thead>
                <tr>
                    <th>操作</th>
                    <!-- 其他列标题 -->
                </tr>
            </thead>
            <tbody>
                @foreach($data as $row)
                <tr>
                    <td>
                        <a href="#" class="btn btn-info btn-sm" target="_blank"><i class="fa fa-pencil"></i> 编辑</a> 
                        <!-- 注意：此处仍使用GET请求进行删除，请参考下方注意事项进行改进 -->
                        <a href = '{{ url("delete/" . $row->ProdusID) }}' class="btn btn-danger btn-sm" onclick="return confirm('确定要删除这条记录吗？');"><i class="fa fa-trash"></i> 删除</a>
                    </td>
                    <!-- 其他列数据 -->
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- 引入必要的JS，例如Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

登录后复制

注意事项与最佳实践

HTTP 方法的选择： 原始示例中使用GET请求来执行删除操作（Route::get('delete/{id}', ...)）。这是一个不推荐的做法，因为GET请求是幂等的，不应该引起服务器状态的改变。恶意爬虫或预取机制可能会无意中触发删除操作。 最佳实践是使用DELETE HTTP方法。在Laravel中，可以通过表单提交（带_method隐藏字段）或AJAX请求来实现：

<!-- 在Blade视图中，使用表单提交DELETE请求 -->
<form action="{{ route('delete.record', $row->ProdusID) }}" method="POST" style="display:inline;">
    @csrf <!-- CSRF 保护 -->
    @method('DELETE') <!-- 伪造DELETE方法 -->
    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除这条记录吗？');">
        <i class="fa fa-trash"></i> 删除
    </button>
</form>

登录后复制

对应的路由定义应为：

Route::delete('delete/{id}', [TableditControllerRolete::class, 'destroy'])->name('delete.record');

登录后复制

CSRF 保护： 对于任何修改服务器状态的请求（如POST、PUT、DELETE），务必启用CSRF（跨站请求伪造）保护。Laravel通过@csrf Blade指令自动处理。
用户确认： 在执行删除操作前，通常会通过JavaScript的confirm()函数或更复杂的模态框来向用户确认，以防止误操作。
错误处理： 在destroy方法中，除了成功消息，也应考虑删除失败的情况（例如，数据库连接问题，或尝试删除不存在的记录）。可以根据DB::delete()的返回值（受影响的行数）来判断操作是否成功，并设置相应的闪存消息。

总结

通过本教程，我们学习了如何在Laravel中实现删除操作后自动返回原页面，并提供了用户友好的反馈机制。核心在于利用redirect()->back()进行重定向，以及session()->flash()来传递临时的操作结果消息。同时，我们也强调了在实际开发中应遵循的最佳实践，如使用正确的HTTP方法和CSRF保护，以确保应用的安全性、健壮性和良好的用户体验。

以上就是在Laravel中实现删除操作后自动返回原页面的教程的详细内容，更多请关注php中文网其它相关文章！