第4節 Laravel-通過表單實現新增及操作狀態提示功能 · [MOOC項目]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> ![](https://box.kancloud.cn/5a1b3ef6665bd8613e8f7aacb6832936_1046x728.png) ## 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: 的錯誤。 <blockquote class="info"> Laravel 提供簡單的方法保護你的應用程序不受到跨網站請求偽造攻擊。跨網站請求偽造是一種惡意的攻擊，破壞份子偽造已通過身份檢驗的用戶身份來運行未經授權的命令。 Laravel 會自動生成一個 CSRF token 給每個用戶的 Session。該 token 用來驗證用戶是否為實際發出請求的用戶。可以使用 csrf_field 輔助函數來生成一個包含 CSRF token 的 _token 隱藏表單字段。 </blockquote> > 更多查看：<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` 提交表單，效果： ![](https://box.kancloud.cn/920a4bae7ca74cf8bf876cebaa0d8a68_1046x728.png) 實現模型的添加操作： // 判斷是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條記錄哦！(*^__^*) 嘻嘻…… ![](https://box.kancloud.cn/5851cbc96922b10d695b0ad47f50b908_677x666.png) **使用重定向方法：`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">×</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">×</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]); } **最終效果如下：** ![](https://box.kancloud.cn/ee42b1f39ed91771e6a93ccde4a6c535_1046x728.png)