【改】修改留言内容


本章节目录

    创建编辑页模板视图

    在 resources/views 目录下创建 edit.blade.php 文件,写入以下代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>编辑留言</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <div class="container">
        <h4>编辑留言 <a href="{{ route("index") }}">返回留言</a></h4>
        <hr>
        <form action="" method="post">
            <div class="form-group">
                <label for="name">您的姓名</label>
                <input type="text" name="name" class="form-control form-inline" id="name" placeholder="请输入您的姓名" value="">
            </div>
            <div class="form-group">
                <label for="phone">您的手机</label>
                <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入您的手机号码" value="">
            </div>
            <div class="form-group">
                <label for="title">留言标题</label>
                <input type="text" class="form-control" name="title" id="title" placeholder="请输入您的留言标题" value="">
            </div>
            <div class="form-group">
                <label for="content">留言内容</label>
                <textarea class="form-control" name="content" rows="5" placeholder="在这里输入您的留言内容"></textarea>
            </div>
            <hr>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
    </html>
    

    修改 resources/views/index.blade.php 模板中的编辑链接为

    <a href="{{ route("edit", $record->id) }}" class="btn btn-primary">编辑</a>
    

    这里使用了 route 路由方法生成 url 路径,route 的第二个参数是我们在路由设计(route/web.php)中设定的变量 {id}。

    模板数据的读取

    查询数据

    修改 app/Http/Controllers/FeedbackController.php 文件中的 edit() 方法,写入以下代码:

    public function edit($id)
    {
        // 查询指定 id 的数据库记录
        $record = Feedback::find($id);
        // 渲染模板并传递入数据
        return view("edit")->with("record", $record);
    }
    

    显示数据

    打开模板文件 resources/views/edit.blade.php,给表单的 value 属性填入值,格式:{{ $record->name }}。如下代码所示:

    <input type="text" name="name" class="form-control form-inline" id="name" placeholder="请输入您的姓名" value="{{ $record->name }}">
    

    表单的建构

    跨站请求伪造 (CSRF) 攻击

    在数据存储章节,我们讲到了表单构造时要加入构建 csrf 域。所以这里我们要加入 @csrf 来完成自动构建。

    伪造 put 请求

    在路由设计章节,我们指定了更新数据方法为 put,但是 HTML 表单只支持 get、post 和 request 三种数据请求方式,所以我们在构建表单时,需要构建一个隐藏域来处理 put 请求。

    Laravel blade 为我们提供了 @method() 方法,我们只需要在 form 标签内加入@method(“put”) 代码即可,blade 模板在渲染时会自动帮我们生成以下代码:

    <input type="hidden" name="_method" value="put">
    

    更新数据

    打开 app/Http/Controllers/FeedbackController.php 文件,找到 update() 方法,写入以下代码:

    public function update($id)
    {
        // 查询出要更新的记录
        $record = Feedback::find($id);
        // 赋值
        $record->name = Request::get("name");
        $record->phone = Request::get("phone");
        $record->title = Request::get("title");
        $record->content = Request::get("content");
    
        // 保存记录
        $record->save();
        // 跳转回原来页面并闪出提示信息
        return \Redirect::back()->with("message", "编辑成功!");
    }
    

    闪出 Session 数据

    和新增数据一样,我们在更新完数据时需要一些提示。在更新控制器方法里已经增加了闪出数据提示【编辑成功!】

    打开 resources/views/edit.blade.php ,在 form 表单标签前加入以下代码即可:

    @if(Session::has('message'))
        <div class="alert alert-success" role="alert">{{ Session::get('message') }}</div>
    @endif
    

    以下是效果

    以下是加入所有功能后的模板文件:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>编辑留言</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <div class="container">
        <h4>编辑留言 <a href="{{ route("index") }}">返回留言</a></h4>
        @if(Session::has('message'))
        <div class="alert alert-success" role="alert">{{ Session::get('message') }}</div>
        @endif
        <hr>
        <form action="{{ route("update", $record->id) }}" method="post">
            @csrf
            @method("put")
            <div class="form-group">
                <label for="name">您的姓名</label>
                <input type="text" name="name" class="form-control form-inline" id="name" placeholder="请输入您的姓名" value="{{ $record->name }}">
            </div>
            <div class="form-group">
                <label for="phone">您的手机</label>
                <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入您的手机号码" value="{{ $record->phone }}">
            </div>
            <div class="form-group">
                <label for="title">留言标题</label>
                <input type="text" class="form-control" name="title" id="title" placeholder="请输入您的留言标题" value="{{ $record->title }}">
            </div>
            <div class="form-group">
                <label for="content">留言内容</label>
                <textarea class="form-control" name="content" rows="5" placeholder="在这里输入您的留言内容">{{ $record->content }}</textarea>
            </div>
            <hr>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
    </html>
    

    以下是展示效果


    请先 登录
    审核后显示
    讨论记录(0 条)
    暂时还没有讨论

    © 2024 麻辣讲 豫ICP备19017310号-2