Laravel小项目之第4节 Laravel-通过表单实现新增及操作状态提示功能

来源:互联网 发布:linux 建立多级目录 编辑:程序博客网 时间:2024/04/28 08:52

第4节 Laravel-通过表单实现新增及操作状态提示功能

4.1 显示新增表单视图4.2 通过模型实现新增4.3 操作状态提示

4.1 显示新增表单视图

修改边栏的链接

\resources\views\shared\siderbar.blade.php

<div class="col-md-3">    <div class="list-group">        <a href="{{ url('/') }}" class="list-group-item active">学生列表</a>        <a href="{{ url('student/create') }}" class="list-group-item">新增学生</a>    </div></div>

\resources\views\shared\message.blade.php

<div class="alert alert-danger">    <ul>        <li>姓名不能为空</li>        <li>年龄只能为整数</li>        <li>请选择性别</li>    </ul></div>

\resources\views\student\create.blade.php

@extends('layout/student')@section('content')    <!-- 所有的错误提示 -->    @include('shared/message')    <!-- 自定义内容区域 -->    <div class="panel panel-default">        <div class="panel-heading">新增学生</div>        <div class="panel-body">            <form class="form-horizontal">                <div class="form-group">                    <label for="name" class="col-sm-2 control-label">姓名</label>                    <div class="col-sm-5">                        <input type="text" class="form-control" id="name" placeholder="请输入学生姓名">                    </div>                    <div class="col-sm-5">                        <p class="form-control-static text-danger">姓名不能为空</p>                    </div>                </div>                <div class="form-group">                    <label for="age" class="col-sm-2 control-label">年龄</label>                    <div class="col-sm-5">                        <input type="text" class="form-control" id="age" placeholder="请输入学生年龄">                    </div>                    <div class="col-sm-5">                        <p class="form-control-static text-danger">年龄只能为整数</p>                    </div>                </div>                <div class="form-group">                    <label class="col-sm-2 control-label">性别</label>                    <div class="col-sm-5">                        <label class="radio-inline">                            <input type="radio" name="sex" value="option1"> 未知                        </label>                        <label class="radio-inline">                            <input type="radio" name="sex" value="option2"></label>                        <label class="radio-inline">                            <input type="radio" name="sex" value="option3"></label>                    </div>                    <div class="col-sm-5">                        <p class="form-control-static text-danger">请选择性别</p>                    </div>                </div>                <div class="form-group">                    <div class="col-sm-offset-2 col-sm-10">                        <button type="submit" class="btn btn-primary">提交</button>                    </div>                </div>            </form>        </div>    </div>@endsection

\app\Http\Controllers\StudentController.php

/** * 新增表单页面,表单提交到当前页 * * @param * @return    void * @author    webjust [604854119@qq.com] */public function create(){    return view('student/create');}

\app\Http\routes.php

Route::get('/', ['uses' => 'StudentController@index']);// 新增表单路由Route::any('student/create', ['uses' => 'StudentController@create']);

添加hover效果。\resources\views\shared\siderbar.blade.php

<div class="col-md-3">    <div class="list-group">        <a href="{{ url('/') }}"        class="list-group-item {{ Request::path() == '/' ? 'active' : '' }}">学生列表</a>        <a href="{{ url('student/create') }}"        class="list-group-item {{ Request::path() == 'student/create' ? 'active' : '' }}">新增学生</a>    </div></div>

这里使用了 Request::path() 方法,更多Request facade 方法可以查看手册:https://cs.laravel-china.org/#requests

4.2 通过模型实现新增

给form表单添加action:

<form class="form-horizontal" method="post" action="{{ url('student/create') }}">

\app\Http\Controllers\StudentController.php

public function create(Request $request){    // 判断是POST请求,也就是提交表单时走这个区间    if($request->isMethod('POST'))    {        echo "post";    }    return view('student/create');}

此时会报 TokenMismatchException in VerifyCsrfToken.php line 67: 的错误。

Laravel 提供简单的方法保护你的应用程序不受到 跨网站请求伪造 攻击。跨网站请求伪造是一种恶意的攻击,破坏份子伪造 已通过身份检验的用户身份 来运行未经授权的命令。
Laravel 会自动生成一个 CSRF token 给每个用户的 Session。该 token 用来验证用户是否为实际发出请求的用户。可以使用 csrf_field 辅助函数来生成一个包含 CSRF token 的 _token 隐藏表单字段。

更多查看:http://d.laravel-china.org/docs/5.2/routing#csrf-protection

在Blade模板引擎中使用:

{{ csrf_field() }}

修改 input 字段的属性:name="Student[name]" 这样可以获得一个数组下标以模型名命名的数组。

\resources\views\student\create.blade.php

<form class="form-horizontal" method="post" action="{{ url('student/create') }}">    {{ csrf_field() }}    <div class="form-group">        <label for="name" class="col-sm-2 control-label">姓名</label>        <div class="col-sm-5">            <input type="text" name="Student[name]" class="form-control" id="name" placeholder="请输入学生姓名">        </div>        <div class="col-sm-5">            <p class="form-control-static text-danger">姓名不能为空</p>        </div>    </div>    <div class="form-group">        <label for="age" class="col-sm-2 control-label">年龄</label>        <div class="col-sm-5">            <input type="text" name="Student[age]" class="form-control" id="age" placeholder="请输入学生年龄">        </div>        <div class="col-sm-5">            <p class="form-control-static text-danger">年龄只能为整数</p>        </div>    </div>    <div class="form-group">        <label class="col-sm-2 control-label">性别</label>        <div class="col-sm-5">            <label class="radio-inline">                <input type="radio" name="Student[sex]" value="2"> 未知            </label>            <label class="radio-inline">                <input type="radio" name="Student[sex]" value="1"> 男            </label>            <label class="radio-inline">                <input type="radio" name="Student[sex]" value="0"> 女            </label>        </div>        <div class="col-sm-5">            <p class="form-control-static text-danger">请选择性别</p>        </div>    </div>    <div class="form-group">        <div class="col-sm-offset-2 col-sm-10">            <button type="submit" class="btn btn-primary">提交</button>        </div>    </div></form>

修改:\app\Http\Controllers\StudentController.php

public function create(Request $request){    // 判断是POST请求,也就是提交表单时走这个区间    if($request->isMethod('POST'))    {        $data = $request->input('Student');        var_dump($data);    }    return view('student/create');}

访问:http://example.com/student/create 提交表单,效果:

实现模型的添加操作:

// 判断是POST请求,也就是提交表单时走这个区间if($request->isMethod('POST')){    $data = $request->input('Student');    // var_dump($data);    $data['created_time'] = time();    $data['updated_time'] = time();    // 模型的添加方法    $ret = Student::insert($data);    var_dump($ret);}

添加数据测试,查询数据库,可以看到新增加了1条记录哦!(^__^) 嘻嘻……

使用重定向方法:redirect()

public function create(Request $request){    // 判断是POST请求,也就是提交表单时走这个区间    if($request->isMethod('POST'))    {        $data = $request->input('Student');        // var_dump($data);        $data['created_time'] = time();        $data['updated_time'] = time();        // 模型的添加方法        $ret = Student::insert($data);        if($ret)        {            return redirect('/');        } else{            return redirect('student/create');        }    }    return view('student/create');}

4.3 操作状态提示

重定向并加上 Session 闪存数据

通常重定向至新的 URL 时会一并 写入闪存数据至 session。所以为了方便,你可以利用链式调用的方式创建一个 RedirectResponse 的实例 并 闪存数据至 Session。这对于在一个动作之后保存状态消息相当方便:

return redirect('/')->with('success', '操作成功!');

当然,在用户重定向至新的页面后,你可以获取并显示 session 的闪存数据。举个例子,使用 Blade 的语法:

@if (session('success'))    <div class="alert alert-success">        {{ session('success') }}    </div>@endif

修改如下:

// 模型的添加方法$ret = Student::insert($data);if($ret){    return redirect('/')->with('success', '添加成功!');} else{    return redirect('student/create')->with('error', '添加失败!');}

\resources\views\shared\success.blade.php

@if(Session::has('success'))<!-- 成功提示框 --><div class="alert alert-success alert-dismissible" role="alert">    <button type="button" class="close" data-dismiss="alert" aria-label="Close">        <span aria-hidden="true">&times;</span>    </button>    <strong>成功!</strong> {{Session::get('success')}}</div>@endif@if(Session::has('error'))<!-- 失败提示框 --><div class="alert alert-danger alert-dismissible" role="alert">    <button type="button" class="close" data-dismiss="alert" aria-label="Close">        <span aria-hidden="true">&times;</span>    </button>    <strong>失败!</strong> {{Session::get('error')}}</div>@endif

同理,我们也可以使用 Session类的方法。如:

@if(Session::has('success')){{Session::get('success')}}

为了显示最新添加的数据,我们采用倒序的排列方式:

public function index(){    // 对 Eloquent 模型进行分页    $students = Student::orderby('id', 'desc')->paginate(5);    // 渲染 student/index 视图,并传递查询出来的全部数据    return view('student/index', ['students' => $students]);}

最终效果如下: