Sweety

Practice makes perfect

导航

PHP laravel系列之视图

Posted on 2017-09-02 14:26  蓝空  阅读(403)  评论(0编辑  收藏  举报

一、什么是视图?

视图包含你应用程序所用到的 HTML,它能够将控制器和应用程序逻辑在呈现逻辑中进行分离。laravel是一个很经典的MVC结构的

简单的来说视图就是我们的网站能看到的一个一个的界面,在前面的实验中,为了简单,我们在处理完路由请求后返回的都是一些简单的字符,并没有使用真正的视图。

从本次实验开始,我们将加入视图使我们的网站更美观:)

二、视图基础

视图文件存放在resources/views 目录下,还记得刚安装完 laravel 的时候的欢迎页吗,这就是一个视图文件。

我们打开 resources/views/welcome.blade.php 这个文件:

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">

        <style>
            html, body {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                width: 100%;
                display: table;
                font-weight: 100;
                font-family: 'Lato';
            }

            .container {
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }

            .content {
                text-align: center;
                display: inline-block;
            }

            .title {
                font-size: 96px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="title">Hello World</div>
            </div>
        </div>
    </body>
</html>

如果你有过前端开发经验的话,这个界面你一定会很熟悉,视图文件就是主要以 HTML 组成的。

打开 routes.php 文件:
app/Http/routes.php

<?php
Route::get('welcome', function () {
    return view('welcome');
});

我们可以像这样使用全局的辅助函数 view 来返回一个视图:

Route::get('/', function ()    {
    return view('greeting', ['name' => 'James']);
});

view() 辅助函数的第一个参数会对应到 resources/views 目录内视图文件的名称。
view() 辅助函数的第二个参数是一个能够在视图内取用的数据数组。

视图文件也可以保存在resources/views目录下的子文件夹内,比如我们打开resources/views 这个目录可以看到有一个 errors 文件夹,里边有一个 503.blade.php 文件 这个文件是 laravel 为我们生成的一个用来显示错误的页面,那么如何显示这个视图呢?

打开 routes.php 文件,添加以下代码:
app/Http/routes.php

<?php
Route::get('errors', function () {
    return view('errors.503');
});

然后访问 localhost/errors 就可以看到这个视图了。

也是相当漂亮了有木有!!!

也是相当漂亮了有木有!!!

然后我们再尝试给视图文件传一个参数,打开 routes.php 文件,修改代码:
app/Http/routes.php

<?php
Route::get('errors', function () {
    return view('errors.503', ['message' => '503 ERROR']);
});

相应的,打开resources/views/errors/503.blade.php,修改代码:
resources/views/errors/503.blade.php

<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="content">
                <div class="title">{{ $message }}</div>
            </div>
        </div>
    </body>
</html>

其中 {{ $message }}是 blade 模板语法,意思是输出 $message 这个变量,下次实验会专门学习 blade 模板引擎。
然后访问 localhost/errors 可以看到参数成功被传到了视图:
这里写图片描述

三、创建一个视图

下面我们为首页创建一个最简单的视图,并使用控制器。

1.首先,打开 routes.php 修改首页路由

app/Http/routes.php

<?php
//首页
Route::get('/', 'HomeController@home')->name('home');

使用 artisan 创建控制器:

cd ~/Code/myweb
php artisan make:controller HomeController --plain

打开app/Http/Controllers/HomeController.php创建 home 方法:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;

class HomeController extends Controller
{
    public function home()
    {
        return view('home');
    }
}

2.创建视图

在 resources/views 目录下创建一个文件
命名为 home.blade.php
这样命名是因为我们要使用 laravel 的 blade 模板引擎来渲染我们的视图,blade 模板会在下一次实验讲到
然后打resources/views/home.blade.php 文件,添加代码:

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
  </head>
  <body>
    <h1>Home</h1>
    <p>Welcome to My web</p>
  </body>
</html>

访问 localhost 就可以看到我们创建的视图了。
这里写图片描述

做了一点点修改的界面^.^

四、小结

如果之前学习过安卓的话,这一部分相当简单了,就是简单的MVC结构,就连文件夹的命名规则都很像,不过这里还是要注意的,慢慢的看出编码规范了,控制部分一般卸载control里面,也就是第二个例子的形式!!!

参考:实验楼