Laravel5学生成绩管理系统-02-Blade模板

时间 2019-11-12

标签 laravel5 laravel 学生成绩管理系统 blade 模板繁體版

原文原文链接

Blade 是 Laravel 所提供的一个简单且强大的模板引擎。相较于其它知名的 PHP 模板引擎，Blade 并不会限制说你必须得在视图中使用 PHP 代码。全部 Blade 视图都会被编译缓存成普通的 PHP 代码，一直到它们被更改成止。这表明 Blade 基本不会对你的应用程序生成负担。Blade 视图文件使用 .blade.php 作为扩展名，一般保存于 resources/views 文件夹内。php

# 定义页面布局css

使用 Blade 模板的两个主要优势为 模板继承 与区块。让咱们先经过一个简单的例子来上手。首先，咱们须要确认一下「主要的」页面布局。大多数的网页应用程序在不一样页面都保持着相同的布局方式，这种布局在这单个 Blade 视图中能够很方便的定义：html

咱们先构建一个基础页面模版,由于后面的每一个页面都是须要继承它的.建立 master.blade.php文件.jquery

      
<!-- 文件保存于 resources/views/master.blade.php -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> @yield('title') </title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @if(Auth::guest())
 <a class="navbar-brand" href="/">学生成绩管理</a>
            @else
                @if (Auth::user()->is_admin)
 <a class="navbar-brand" href="/admin">学生成绩管理</a>
                @else
 <a class="navbar-brand" href="/">学生成绩管理</a>
                @endif
            @endif

 </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="http://www.golaravel.com" target="__blank">Power by laravel5</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                @if (Auth::guest())
                @else
 <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}">退出</a></li>
                        </ul>
                    </li>
                @endif
 </ul>
        </div>
    </div>
</nav>

<!-- <div>
{{-- <!-- @include('flash') --}}
  </div> -->



@yield('content')

 <!-- script -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

如你所见，这个文件包含了传统的 HTML 语法。不过，请注意 @section 与 @yield 命令。正如其名，@section 命令定义一个内容区块，而 @yield 命令被用来 “显示指定区块” 的内容。laravel

@yield()[能够简单地理解为区域】和 @extends() 一般会结合者使用，实现咱们一般所说的layouts布局。layouts布局就是在web开发的过程当中，咱们将一些公用的部分如 header ， footer等直接放在一个视图文件中，而后在使用的使用直接继承 (使用@extends) 就能够了，好比咱们在 resources/views/ 文件夹之下建立一个 master.blade.php ：web

如今，咱们已经定义好了这个应用程序的布局，让咱们接着来定义一个继承此布局的子页面。bootstrap

#继承页面布局
浏览器

当正在定义子页面时，你能够使用 Blade 的 @extends 命令指定子页面应该「继承」哪个布局。当视图 @extends Blade 的布局以后，便可使用 @section 命令将内容注入于布局的区块中。切记，如上述例子所见，这些区块的内容都会使用@yield 显示在布局中：缓存

‍ welcome欢迎首页面继承主页面‍app

      
<!-- 文件保存于 resources/views/welcome.blade.php -->

@extends('master')    {{-- 继承master模版，注意：此处米有结束符分号 --}}

@section('title')   {{-- 对应@yield('title') --}}  {{-- 也能够这样写：@section('title', '页面标题') --}}
    学生成绩管理系统-测试-
@stop

@section('content')    {{-- 对应@yield('content') --}}
    <div class="container">
        <div class="jumbotron">
            <h2><div class="quote">{{ Inspiring::quote() }}</div></h2>
            <p>同窗们登陆后先修改相关资料</p>
            <p>查询分数,有疑问咨询管理员</p>
            <p><a class="btn btn-primary btn-lg" href="/login" role="button">点击登陆</a></p>
        </div>
    </div>
@stop

@section 有两种写法：

第一种当内容比较短时能够直接写，结尾不用@stop结束符

      
@section('title', '页面标题')

第二种当显示内容比较多时，能够分开来写，即下面这种：

      
@section('content')    // 这部分替换app里的代码，有开始就会有结束，因此一个section 对应一个stop
 <h1>生如夏花之绚烂</h1>
 <p>死如秋叶之静美</p>
@stop

浏览器端显示：