第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-通过表单实现新增及操作状态提示功能

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

<divclass="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')
<divclass="panel panel-default">
<divclass="panel-heading">新增学生</div>
<divclass="panel-body">
<formclass="form-horizontal">
<divclass="form-group">
<labelfor="name"class="col-sm-2 control-label">姓名</label>
<divclass="col-sm-5">
<inputtype="text"class="form-control"id="name"placeholder="请输入学生姓名">
</div>
<divclass="col-sm-5">
<pclass="form-control-static text-danger">姓名不能为空</p>
</div>
</div>
<divclass="form-group">
<labelfor="age"class="col-sm-2 control-label">年龄</label>
<divclass="col-sm-5">
<inputtype="text"class="form-control"id="age"placeholder="请输入学生年龄">
</div>
<divclass="col-sm-5">
<pclass="form-control-static text-danger">年龄只能为整数</p>
</div>
</div>
<divclass="form-group">
<labelclass="col-sm-2 control-label">性别</label>
<divclass="col-sm-5">
<labelclass="radio-inline">
<inputtype="radio"name="sex"value="option1"> 未知
</label>
<labelclass="radio-inline">
<inputtype="radio"name="sex"value="option2"> 男
</label>
<labelclass="radio-inline">
<inputtype="radio"name="sex"value="option3"> 女
</label>
</div>
<divclass="col-sm-5">
<pclass="form-control-static text-danger">请选择性别</p>
</div>
</div>
<divclass="form-group">
<divclass="col-sm-offset-2 col-sm-10">
<buttontype="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 functioncreate()
{
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 functioncreate(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 functioncreate(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 functioncreate(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="alertalert-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'))
<divclass="alert alert-success alert-dismissible"role="alert">
<buttontype="button"class="close"data-dismiss="alert"aria-label="Close">
<spanaria-hidden="true">×</span>
</button>
<strong>成功!</strong> {{Session::get('success')}}
</div>
@endif
@if(Session::has('error'))
<divclass="alert alert-danger alert-dismissible"role="alert">
<buttontype="button"class="close"data-dismiss="alert"aria-label="Close">
<spanaria-hidden="true">×</span>
</button>
<strong>失败!</strong> {{Session::get('error')}}
</div>
@endif

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

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

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

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

最终效果如下：

Laravel小项目之第4节 Laravel-通过表单实现新增及操作状态提示功能的更多相关文章

用laravel Maatwebsite\Excel 教你导出漂亮的Excel表单
先来看效果图还算是漂亮吧哈哈哈. 第一步当然是安装包咯环境要求 PHP: ^7.0Laravel: ^5.5 composer require maatwebsite/excel 目前3.1 只 ...
Laravel 5 基础（十一）- 子视图和表单复用
我们需要处理编辑文章的问题.当然我们可以手工添加新的路由,就像这样: Route::get('/articles/{id}/edit', 'ArticleController@edit'); 让我们在 ...
第六十七节，html表单元素
html表单元素学习要点: 1.表单元素总汇 2.表单元素解析本章主要探讨HTML5中表单元素,表单元素用于获取用户的输入数据. 一．表单元素总汇 HTML5的表单中,提供了各种可供用户输入的 ...
第二百三十四节，Bootstrap表单和图片
Bootstrap表单和图片学习要点: 1.表单 2.图片本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各种丰富的效果. 一．表单 Bootstrap ...
项目回顾1-图片上传-form表单还是base64-前端图片压缩
第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上 ...
react 项目实战（四）组件化表单/表单控件高阶组件
高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能. 我们现在已经有 ...
第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
PHP.TP框架下商品项目的优化4-优化商品添加表单js
优化商品添加表单js 思路 1.制作五个按钮 2.下面五个table 3.全部隐藏,点击则显示 4.点击第几个按钮就显示第几个table 具体操作 1.添加按钮 2.添加五个table并添加class ...
Laravel POST请求API接口使用validate表单验证返回欢迎页
突然遇到的问题就是使用Laravel进行开发API接口的时候发现在表单验证不通过的时候返回了登录页猜测问题应该是因为表单验证失败后进行了重定向导致的因为返回状态码200 网上找了好久没找到 ...

随机推荐

[POI2004] SZN
Description 给定$N(N\leq 10000)$个点的树,要求用最少的路径覆盖树边.路径之间可以有交点,不能有交边.问最少需要几条路径以及在第一问的基础上最长的路径最短是多少? Sol ...
openssl签署和自签署证书的多种实现方式
openssl系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 1.采用自定义配置文件的实现方法 1.1 自建CA 自建CA的机制:1.生成 ...
将第三方包安装到maven本地仓库
今天在做jasper report生成pdf文档的时候,需要引入亚洲字体jar包.maven仓库是有这个jar包,但是在项目pom文件始终不能下载.无奈只有将jar包安装到maven本地仓库. 1 将 ...
maven+eclipse创建web项目
第一步,创建maven工程,如下图步骤选择maven-archetype-webapp,然后next 输入GroupId和ArtifactId,Package可以为空,然后finish 新创建的ma ...
ORM作业
使用之前学到过的操作实现下面的查询操作:1. 查询平均成绩大于60分的同学的id和平均成绩:2. 查询所有同学的id.姓名.选课的数量.总成绩; 3. 查询姓“李”的老师的个数: 4. 查询没学过“李 ...
Thymeleaf学习记录（1）--启动模板及建立Demo
Thymeleaf是什么? Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎.相比于JSP,Thymeleaf更简洁,渲染性能更好,维护性更好,它可以XML/XHTML/HTM ...
Docker 搭建 ELK 收集并展示 tomcat 日志
架构前端展示 --> 索引搜索 <-- 日志提取及过滤 --> 日志缓存 <-- 日志收集 Kibana --> Elastash <-- Logstash -- ...
Python 列表增删改查排序统计
列表的查 a = ["klvchen", "tom", "jack", "james", "lily" ...
[笔记] imooc《JavaScript深入浅出》对象与函数
懒得做草稿了,习惯md也懒得扔印象笔记主要是之前没去接触这一部分,就随手记下来了创建对象的方法对象字面量 new构造器/原型链 Object.create() 属性操作属性读写(以及读写异常. ...
stylus解决移动端1像素边框的问题
首先我是借用了yo框架的border和他的媒体查询组合这两个分别是在yo>lib>core>classes>_border.scss(用来获取yo框架封装的border) ...