【增】新增留言内容


本章节目录

    表单构建

    给表单增加 action 动作

    在视图设计章节,我们已经完成了首页 HTML 文件的构建,现在给 form 提交表单加入 action,即执行存储任务的路径 /store。

    使用路由生成 url

    在路由设计章节,我们为存储的路由命令了一个 store 别名(’as’ => ‘store’),在这里我们可以使用路由来生成 URL。

    <form action="{{ route("store") }}" method="post">
    

    跨站请求伪造 (CSRF) 攻击

    完成 action 设定后,我们提交表单,这时会发现网页报了 419 Page Expired 错误。

    这是因为 Laravel 默认开启了 CSRF 保护,在提交表表单时,需要构建一个隐藏域,如以下代码所示的。

    <input type="hidden" name="_token" value="JRmgHuoh8poKtSLmZRlmx4isddlWi1YrSRDuizma">
    

    在 Laravel blade 模板中,我们只需要在 form 标签对内加入 @csrf 代码即可,系统会自动帮我们生成以上域信息。

    完善后的 form 标签如下代码所示

    <form action="{{ route("store") }}" method="post">
        @csrf
        <div class="form-group">
            <label for="name">您的姓名</label>
            <input type="text" name="name" class="form-control form-inline" id="name" placeholder="请输入您的姓名">
        </div>
        <div class="form-group">
            <label for="phone">您的手机</label>
            <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入您的手机号码">
        </div>
        <div class="form-group">
            <label for="title">留言标题</label>
            <input type="text" class="form-control" name="title" id="title" placeholder="请输入您的留言标题">
        </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>
    

    数据存储

    打开文件 app/Http/Controllers/FeedbackController.php,在 store 方法中新增以下代码即可完成数据存储。

    store 方法

    public function store()
    {
        Feedback::create([
            "name" => Request::get("name"),
            "phone" => Request::get("phone"),
            "title" => Request::get("title"),
            "content" => Request::get("content"),
        ]);
        return \Redirect::back()->with("message", "留言成功");
    }
    

    记得在类前引入模型:use App\Feedback;

    Redirect::back() 会重定向到数据提交之前的页面。

    with() 方法用于闪出 Session 数据,供我们做操作完成后的后期处理使用。

    使用此方法新增数据需要在 Model 中指定 $guarded 或者 $fillable 字段。

    创建实例方法

    我们也可以使用创建模型实例的方法来新增数据,示例代码如下:

    public function store()
    {
        // 实例化模型
        $feedback = new Feedback();
        // 获取数据
        $feedback->name = Request::get("name");
        $feedback->phone = Request::get("phone");
        $feedback->title = Request::get("title");
        $feedback->content = Request::get("content");
    
        // 记得保存哦
        $feedback->save();
    
        return \Redirect::back()->with("message", "留言成功");
    }
    

    注意:PHP 的链式操作符号是 ->,Java、JavaScript的链式操作符为 .

    使用 Session 闪出数据

    为了优化操作体验,我们在完成数据存储后,使用了 with 方法闪出了一个留言成功的提示,在这里我们把这个提示信息在页面上显示出来。

    打开 文件,加入以下代码:

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

    完善后的 HTML 代码如下:

    <h2 class="text-center">麻辣讲留言板系统</h2>
    <h6 class="text-center">Laravel 最佳实践</h6>
    @if(Session::has('message'))
    <div class="alert alert-success" role="alert">{{ Session::get('message') }}</div>
    @endif
    <hr>
    <form action="{{ route("store") }}" method="post">
        @csrf
        <div class="form-group">
            <label for="name">您的姓名</label>
            <input type="text" name="name" class="form-control form-inline" id="name" placeholder="请输入您的姓名">
        </div>
        <div class="form-group">
            <label for="phone">您的手机</label>
            <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入您的手机号码">
        </div>
        <div class="form-group">
            <label for="title">留言标题</label>
            <input type="text" class="form-control" name="title" id="title" placeholder="请输入您的留言标题">
        </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>
    

    判断是否有键名为 message 的 session 存在,如果存在就使用 bootstrap 的警告框组件显示出来。
    效果如下:

    注意:session 闪出数据是一次性的,刷新页面即失效。


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

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