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

第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]);
}
最终效果如下:

最终效果如下:

 

 

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

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

4.1 显示新增表单视图

修改边栏的链接

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

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

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

  1.  
    <divclass="alert alert-danger">
  2.  
    <ul>
  3.  
    <li>姓名不能为空</li>
  4.  
    <li>年龄只能为整数</li>
  5.  
    <li>请选择性别</li>
  6.  
    </ul>
  7.  
    </div>

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

  1.  
    @extends('layout/student')
  2.  
     
  3.  
    @section('content')
  4.  
    <!-- 所有的错误提示 -->
  5.  
    @include('shared/message')
  6.  
    <!-- 自定义内容区域 -->
  7.  
    <divclass="panel panel-default">
  8.  
    <divclass="panel-heading">新增学生</div>
  9.  
    <divclass="panel-body">
  10.  
    <formclass="form-horizontal">
  11.  
    <divclass="form-group">
  12.  
    <labelfor="name"class="col-sm-2 control-label">姓名</label>
  13.  
     
  14.  
    <divclass="col-sm-5">
  15.  
    <inputtype="text"class="form-control"id="name"placeholder="请输入学生姓名">
  16.  
    </div>
  17.  
    <divclass="col-sm-5">
  18.  
    <pclass="form-control-static text-danger">姓名不能为空</p>
  19.  
    </div>
  20.  
    </div>
  21.  
    <divclass="form-group">
  22.  
    <labelfor="age"class="col-sm-2 control-label">年龄</label>
  23.  
     
  24.  
    <divclass="col-sm-5">
  25.  
    <inputtype="text"class="form-control"id="age"placeholder="请输入学生年龄">
  26.  
    </div>
  27.  
    <divclass="col-sm-5">
  28.  
    <pclass="form-control-static text-danger">年龄只能为整数</p>
  29.  
    </div>
  30.  
    </div>
  31.  
    <divclass="form-group">
  32.  
    <labelclass="col-sm-2 control-label">性别</label>
  33.  
     
  34.  
    <divclass="col-sm-5">
  35.  
    <labelclass="radio-inline">
  36.  
    <inputtype="radio"name="sex"value="option1"> 未知
  37.  
    </label>
  38.  
    <labelclass="radio-inline">
  39.  
    <inputtype="radio"name="sex"value="option2">
  40.  
    </label>
  41.  
    <labelclass="radio-inline">
  42.  
    <inputtype="radio"name="sex"value="option3">
  43.  
    </label>
  44.  
    </div>
  45.  
    <divclass="col-sm-5">
  46.  
    <pclass="form-control-static text-danger">请选择性别</p>
  47.  
    </div>
  48.  
    </div>
  49.  
    <divclass="form-group">
  50.  
    <divclass="col-sm-offset-2 col-sm-10">
  51.  
    <buttontype="submit"class="btn btn-primary">提交</button>
  52.  
    </div>
  53.  
    </div>
  54.  
    </form>
  55.  
    </div>
  56.  
    </div>
  57.  
    @endsection

\app\Http\Controllers\StudentController.php

  1.  
    /**
  2.  
    * 新增表单页面,表单提交到当前页
  3.  
    *
  4.  
    * @param
  5.  
    * @return void
  6.  
    * @author webjust [604854119@qq.com]
  7.  
    */
  8.  
    public functioncreate()
  9.  
    {
  10.  
    return view('student/create');
  11.  
    }

\app\Http\routes.php

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

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

  1.  
    <div class="col-md-3">
  2.  
    <div class="list-group">
  3.  
    <a href="{{ url('/') }}"
  4.  
    class="list-group-item {{ Request::path() == '/' ? 'active' : '' }}">学生列表</a>
  5.  
    <a href="{{ url('student/create') }}"
  6.  
    class="list-group-item {{ Request::path() == 'student/create' ? 'active' : '' }}">新增学生</a>
  7.  
    </div>
  8.  
    </div>
  9.  
     

这里使用了 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

  1.  
    public functioncreate(Request $request)
  2.  
    {
  3.  
    // 判断是POST请求,也就是提交表单时走这个区间
  4.  
    if($request->isMethod('POST'))
  5.  
    {
  6.  
    echo "post";
  7.  
    }
  8.  
     
  9.  
    return view('student/create');
  10.  
    }

此时会报 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

  1.  
    <form class="form-horizontal" method="post" action="{{ url('student/create') }}">
  2.  
    {{ csrf_field() }}
  3.  
    <div class="form-group">
  4.  
    <label for="name" class="col-sm-2 control-label">姓名</label>
  5.  
     
  6.  
    <div class="col-sm-5">
  7.  
    <input type="text" name="Student[name]" class="form-control" id="name" placeholder="请输入学生姓名">
  8.  
    </div>
  9.  
    <div class="col-sm-5">
  10.  
    <p class="form-control-static text-danger">姓名不能为空</p>
  11.  
    </div>
  12.  
    </div>
  13.  
    <div class="form-group">
  14.  
    <label for="age" class="col-sm-2 control-label">年龄</label>
  15.  
     
  16.  
    <div class="col-sm-5">
  17.  
    <input type="text" name="Student[age]" class="form-control" id="age" placeholder="请输入学生年龄">
  18.  
    </div>
  19.  
    <div class="col-sm-5">
  20.  
    <p class="form-control-static text-danger">年龄只能为整数</p>
  21.  
    </div>
  22.  
    </div>
  23.  
    <div class="form-group">
  24.  
    <label class="col-sm-2 control-label">性别</label>
  25.  
     
  26.  
    <div class="col-sm-5">
  27.  
    <label class="radio-inline">
  28.  
    <input type="radio" name="Student[sex]" value="2"> 未知
  29.  
    </label>
  30.  
    <label class="radio-inline">
  31.  
    <input type="radio" name="Student[sex]" value="1"> 男
  32.  
    </label>
  33.  
    <label class="radio-inline">
  34.  
    <input type="radio" name="Student[sex]" value="0"> 女
  35.  
    </label>
  36.  
    </div>
  37.  
    <div class="col-sm-5">
  38.  
    <p class="form-control-static text-danger">请选择性别</p>
  39.  
    </div>
  40.  
    </div>
  41.  
    <div class="form-group">
  42.  
    <div class="col-sm-offset-2 col-sm-10">
  43.  
    <button type="submit" class="btn btn-primary">提交</button>
  44.  
    </div>
  45.  
    </div>
  46.  
    </form>

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

  1.  
    public functioncreate(Request $request)
  2.  
    {
  3.  
    // 判断是POST请求,也就是提交表单时走这个区间
  4.  
    if($request->isMethod('POST'))
  5.  
    {
  6.  
    $data = $request->input('Student');
  7.  
    var_dump($data);
  8.  
    }
  9.  
     
  10.  
    return view('student/create');
  11.  
    }

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

实现模型的添加操作:

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

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

使用重定向方法:redirect()

  1.  
    public functioncreate(Request $request)
  2.  
    {
  3.  
    // 判断是POST请求,也就是提交表单时走这个区间
  4.  
    if($request->isMethod('POST'))
  5.  
    {
  6.  
    $data = $request->input('Student');
  7.  
    // var_dump($data);
  8.  
    $data['created_time'] = time();
  9.  
    $data['updated_time'] = time();
  10.  
     
  11.  
    // 模型的添加方法
  12.  
    $ret = Student::insert($data);
  13.  
    if($ret)
  14.  
    {
  15.  
    return redirect('/');
  16.  
    } else{
  17.  
    return redirect('student/create');
  18.  
    }
  19.  
    }
  20.  
     
  21.  
    return view('student/create');
  22.  
    }

4.3 操作状态提示

重定向并加上 Session 闪存数据

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

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

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

  1.  
    @if (session('success'))
  2.  
    <div class="alertalert-success">
  3.  
    {{ session('success') }}
  4.  
    </div>
  5.  
    @endif

修改如下:

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

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

  1.  
    @if(Session::has('success'))
  2.  
    <!-- 成功提示框 -->
  3.  
    <divclass="alert alert-success alert-dismissible"role="alert">
  4.  
    <buttontype="button"class="close"data-dismiss="alert"aria-label="Close">
  5.  
    <spanaria-hidden="true">&times;</span>
  6.  
    </button>
  7.  
    <strong>成功!</strong> {{Session::get('success')}}
  8.  
    </div>
  9.  
    @endif
  10.  
     
  11.  
    @if(Session::has('error'))
  12.  
    <!-- 失败提示框 -->
  13.  
    <divclass="alert alert-danger alert-dismissible"role="alert">
  14.  
    <buttontype="button"class="close"data-dismiss="alert"aria-label="Close">
  15.  
    <spanaria-hidden="true">&times;</span>
  16.  
    </button>
  17.  
    <strong>失败!</strong> {{Session::get('error')}}
  18.  
    </div>
  19.  
    @endif
  20.  
     

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

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

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

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

最终效果如下:

 

posted @ 2019-01-11 18:08  御世制人  阅读(616)  评论(0编辑  收藏  举报