最适合入门的Laravel初级教程(十二)视图View

因为下周不在国内;
为了避免让童鞋们再等太久的更新;
于是这个周末2天全用来构思写文章了;
一鼓作气;
今个把视图V也讲了;
先来创建一个 ViewController ;

php artisan make:controller ViewController --resource

创建路由;

Route::prefix('view')->group(function () {
    Route::get('index', 'ViewController@index');
});

laravel 的视图都是放在 resources/views 目录下面;
使用的是 blade 模板引擎;
文件都是以 .blade.php 为后缀;
接着我们来创建一个视图文件;
resources/views/article/index.blade.php ;

引入视图我们在讲路由的时候已经讲过了;
简单的调用 view() 函数就可以了;
引入 resources/views/article.blade.php 文件是

view('article');

引入 resources/views/article/index.blade.php 文件则是;

view('article.index');

多级目录间用 . 分割;
如果我们需要往视图中分配数据;
则可以作为 view 函数的第二个参数;
我们获取文章列表并分配个视图;

<?php

namespace App\Http\Controllers;

use App\Models\Article;
use Illuminate\Http\Request;

class ViewController extends Controller
{
    /**
     * 文章列表
     *
     * @return \Illuminate\View\View
     */
    public function index()
    {
        $title = '文章列表';
        $article = Article::withTrashed()
            ->orderBy('id', 'desc')
            ->get();
        $assign = [
            'title' => $title,
            'article' => $article,
        ];
        return view('article.index', $assign);
    }
}

插个题外话;
这里还可以用 php 的 compact 函数简化下 $assign ;
下面这两种写法效果是一样的;

        $assign = [
            'title' => $title,
            'article' => $article,
        ];
        $assign = compact('title', 'article');

接着在 resources/views/article/index.blade.php 视图文件中就可以用分配的数据了;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ $title }} - 白俊遥博客</title>
</head>
<body>
<a href="{{ url('view/create') }}">新增文章</a>
<table>
    <tr>
        <th>标题</th>
        <th>内容</th>
        <th>操作</th>
    </tr>
    @foreach($article as $k => $v)
        <tr>
            <td>{{ $v->title }}</td>
            <td>{{ $v->content }}</td>
            <td>
                <a href="{{ url('view/edit', $v->id) }}">编辑</a> |
                @if($v->trashed())
                    <a href="{{ url('view/restore', $v->id) }}">恢复</a> |
                    <a href="{{ url('view/forceDelete', $v->id) }}">彻底删除</a>
                @else
                    <a href="{{ url('view/destroy', $v->id) }}">删除</a>
                @endif
            </td>
        </tr>
    @endforeach
</table>
</body>
</html>

在视图中如果想显示某个变量的数据;
需要包裹在两个大括号之间 {{ }}
比如说上面用来{{ $title }}
流程控制类的则是加个 @ 符号;
比如说上面的 foreach 和 if ;
模型有个 trashed 方法是用来判断是否被软删除的;
访问 /view/index 查看;

文章列表功能完成了;
咱再写个新增文章页面的方法 create;

    /**
     * 新增文章页面
     *
     * @return \Illuminate\View\View
     */
    public function create()
    {
        $title = '新增文章';
        $assign = compact('title');
        return view('article.create', $assign);
    }

增加 routes/web.php 路由;

Route::prefix('view')->group(function () {
    Route::get('index', 'ViewController@index');
    Route::get('create', 'ViewController@create');
});

相应的创建 resources/views/article/create.blade.php 视图文件;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ $title }} - 白俊遥博客</title>
</head>
<body>
<form action="{{ url('view/store') }}" method="post">
    {{ csrf_field() }}
    <input type="text" name="title" value=""> <br>
    <input type="text" name="content" value=""> <br>
    <button type="submit">提交</button>
</form>
</body>
</html>

这里面需要说明的是;
laravel 所有的 form 表单内都要有一个 {{ csrf_field() }} ;
它会生成一个 input 隐藏域 ;
是用来防 csrf 攻击的;
访问 /view/create 查看;

当点击了提交按钮后就把数据提交到了 store ;

    /**
     * 新增文章
     *
     * @param Request $request
     *
     * @return \Illuminate\Routing\Redirector
     */
    public function store(Request $request)
    {
        $data = $request->except('_token');
        Article::create($data);
        return redirect('view/index');
    }

这里面要说明的是 redirect ;
这个函数是用来重定向到指定链接的;
增加 routes/web.php 路由;

Route::prefix('view')->group(function () {
    Route::get('index', 'ViewController@index');
    Route::get('create', 'ViewController@create');
    Route::post('store', 'ViewController@store');
});

接着编辑数据页面 edit ;

    /**
     * 编辑文章页面
     *
     * @param $id
     *
     * @return \Illuminate\View\View
     */
    public function edit($id)
    {
        $title = '编辑文章';
        $article = Article::find($id);
        $assign = compact('article', 'title');
        return view('article.edit', $assign);
    }

增加 routes/web.php 路由;

Route::prefix('view')->group(function () {
    Route::get('index', 'ViewController@index');
    Route::get('create', 'ViewController@create');
    Route::post('store', 'ViewController@store');
    Route::get('edit/{id}', 'ViewController@edit');
});

相应的创建 resources/views/article/edit.blade.php 视图文件;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ $title }} - 白俊遥博客</title>
</head>
<body>
<form action="{{ url('view/update', $article->id) }}" method="post">
    {{ csrf_field() }}
    <input type="text" name="title" value="{{ $article->title }}"> <br>
    <input type="text" name="content" value="{{ $article->content }}"> <br>
    <button type="submit">提交</button>
</form>
</body>
</html>

对比 index 、 create 、 edit 三个视图文件;
我们会发现只有 <body> 标签内的内容不一样;
其他都是一样的;
网站大多都是有一些公共的区域;
比如说头部和底部;
如果每个页面都写的话;
那后期维护改起来想想都崩溃;
还好有模板继承来解决这种场景;
我们创建个resources/views/ layouts 目录专门用于放父级模板;
接着创建一个 resources/views/ layouts/home.blade.php 文件;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>@yield('title') - 白俊遥博客</title>
</head>
<body>

@yield('content')

</body>
</html>

@yield 是父级模板用来定义指令名称;
比如说这里定义了 title 和 content ;
然后子级视图中就可以使用了;
我们重构下 resources/views/article/create.blade.php 视图文件;

@extends('layouts.home')

@section('title', $title)

@section('content')
    <form action="{{ url('view/store') }}" method="post">
        {{ csrf_field() }}
        <input type="text" name="title" value=""> <br>
        <input type="text" name="content" value=""> <br>
        <button type="submit">提交</button>
    </form>
@endsection

在子级视图中使用的是 @section 指令;
如果是块级内容;
则和 html 的块级标签一样有开始和闭合标签 @section@endsection
如果是行级内容则直接把内容直接传给 @section 的第二个参数;
这样看起来就简单合理多了;
index 和 edit 视图页面同理;

剩下的 编辑、删除、恢复、彻底删除就没有新的知识了;

    /**
     * 编辑文章
     *
     * @param Request $request
     * @param         $id
     *
     * @return \Illuminate\Routing\Redirector
     */
    public function update(Request $request, $id)
    {
        $data = $request->except('_token');
        Article::where('id', $id)->update($data);
        return redirect('view/index');
    }

    /**
     * 删除文章
     *
     * @param $id
     *
     * @return \Illuminate\Http\RedirectResponse
     */
    public function destroy($id)
    {
        Article::destroy($id);
        return redirect()->back();
    }

    /**
     * 恢复文章
     *
     * @param $id
     *
     * @return \Illuminate\Http\RedirectResponse
     */
    public function restore($id)
    {
        Article::where('id', $id)->restore();
        return redirect()->back();
    }

    /**
     * 彻底删除文章
     *
     * @param $id
     *
     * @return \Illuminate\Http\RedirectResponse
     */
    public function forceDelete($id)
    {
        Article::where('id', $id)->forceDelete();
        return redirect()->back();
    }

增加 routes/web.php 路由;

Route::prefix('view')->group(function () {
    Route::get('index', 'ViewController@index');
    Route::get('create', 'ViewController@create');
    Route::post('store', 'ViewController@store');
    Route::get('edit/{id}', 'ViewController@edit');
    Route::post('update/{id}', 'ViewController@update');
    Route::get('destroy/{id}', 'ViewController@destroy');
    Route::get('restore/{id}', 'ViewController@restore');
    Route::get('forceDelete/{id}', 'ViewController@forceDelete');
});

写了十几篇文章;
终于是把基础的 MVC 以及增删改查等都串讲了一遍;
完整看完教程应该可以简单的写东西了;
再配合官方文档服用效果更佳;
我把写文章时候的示例代码整理到了 github 上面;
https://github.com/baijunyao/laravel-course
不过建议自己独立的根据文章敲一遍;
示例代码仅作为参考;

初级教程至此算是一个简单的结束;
如果觉得对你学习 laravel 有一定的帮助;
欢迎打赏赞助加群给点动力哈;
我已经在构思 中级 、高级课程;
容我稍作调整;
咱们未来见;

着急学习的童鞋可以购买 laravel-china 推出的付费教程;
使用我下面这个链接我可以获取 12% 的奖励;
也算对我的一种支持哈;
在我群里的童鞋购买后通知我下;
我把提成给你发红包;
L01 Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )
L02 Laravel 教程 - Web 开发实战进阶 ( Laravel 5.5 )
L03 Laravel 教程 - 实战构架 API 服务器
L04 Laravel 教程 - 微信小程序从零到发布
L05 Laravel 教程 - 电商实战

白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共16条评论
白俊遥博客

国良:弱弱的问下,Homestead好用不,有没有必要花费时间去搭建,看着挺复杂,挺难的

2018-09-07 17:13:12 回复

白俊遥博客

国良:期待中高级教程白俊遥博客

2018-09-07 17:10:18 回复

白俊遥博客

大海白俊遥博客

2018-05-29 11:50:32 回复

白俊遥博客

小龙虾白俊遥博客

2018-04-26 11:39:53 回复

白俊遥博客

itwoa白俊遥博客期待中高级教程,膜拜膜拜!

2018-04-26 11:21:23 回复

白俊遥博客

天青色等烟雨:顶白大师!

2018-04-12 23:31:14 回复

白俊遥博客

快乐远〖航〗:视图继承create.blade.php里面@section('title',$title); 多打了一个 ; 符号。

2018-04-09 19:58:03 回复

白俊遥博客
  • 云淡风晴 回复 快乐远〖航〗:多谢反馈;已删除;
  • 2018-04-22 21:40:53 回复
白俊遥博客

:alter("关注很久了!膜拜")

2018-03-27 07:37:20 回复

白俊遥博客

Mia:旅途愉快!

2018-03-14 21:45:35 回复

白俊遥博客

涵涵宝贝:2553ab9ea41471d6db03d4415f84fa60祝旅途愉快

2018-03-09 11:26:41 回复

白俊遥博客

A-Ꮩ࿆Ꭵ࿆Ꮲ࿆小俊网络:后台是看不到我的评论的哈哈哈哈

2018-03-09 11:23:41 回复

白俊遥博客
  • ... 回复 A-Ꮩ࿆Ꭵ࿆Ꮲ࿆小俊网络:斤斤计较
  • 2018-03-18 20:12:22 回复
白俊遥博客
  • 回复 ...:啊啊
  • 2018-03-27 22:02:26 回复
白俊遥博客

木 点点 i :加油!

2018-03-07 20:37:25 回复

白俊遥博客

...:白哥,我给你发邮箱申请友链了,一直没回复,你看我的博客了吗猿站chuangyang.xin白哥有空了看一下呗。

2018-03-06 19:00:54 回复

白俊遥博客
  • ... 回复 ...:,,
  • 2018-03-12 11:18:53 回复
白俊遥博客

Only Strive白俊遥博客 多拍点国外照片回来秀 哈哈

2018-03-06 16:22:37 回复

白俊遥博客

手贱+嘴贱白俊遥博客 祝旅途愉快

2018-03-05 15:06:35 回复

白俊遥博客

cantinzing白俊遥博客白俊遥博客看来下一次教程要等好久了

2018-03-05 09:26:06 回复

白俊遥博客
  • 阿壮 回复 cantinzing白俊遥博客大师傅
  • 2018-05-10 17:22:10 回复