Blade模板（基础语法、分页）

最新推荐文章于 2025-05-09 16:24:03 发布

进击的递归

最新推荐文章于 2025-05-09 16:24:03 发布

阅读量487

点赞数

CC 4.0 BY-SA版权

分类专栏： laravel 文章标签： html

本文链接：https://blog.youkuaiyun.com/nexttrial/article/details/115469739

laravel 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Laravel的Blade模板引擎，包括模板继承、基础语法如变量、函数、条件判断、循环等，并展示了如何创建子模板、使用URL、实现分页。通过实例演示了如何在视图中定义和使用区块，以及如何进行模板注释、引入子视图等操作。此外，还展示了如何在前端渲染分页数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Blade是Laravel提供的一个既简单又强大的模板引擎，和其他流行的PHP模板引擎不一样，Blade并不限制你在视图(view)中使用原生PHP代码。

模板继承

在view下新建个layout.blade.php,内容如下：（注：section与yield的区别，section是定义一个区块,可被继承与重写，yield是使用一个区块，不可被继承与重写）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轻松学会Laravel - @yield("title")</title>
    <style>
        .header {
            width: 1000px;
            height: 150px;
            margin:0 auto;
            background: #f5f5f5;
            border: 1px solid #ddd;
        }
        .main {
            width: 1000px;
            height: 300px;
            margin:0 auto;
            margin-top: 15px;
            clear: both;
        }

        .main .sidebar {
            float: left;
            width: 20%;
            height: inherit;
            background: #f5f5f5;
            border: 1px solid #ddd;
        }
        .main .content {
            float: right;
            width: 75%;
            height: inherit;
            background: #f5f5f5;
            border: 1px solid #ddd;
        }
        .footer {
            width: 1000px;
            height: 150px;
            margin:0 auto;
            margin-top: 15px;
            background: #f5f5f5;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="header">
    @section("header")
    头部
    @show
</div>
<div class="main">
    <div class="sidebar">
        @section("sidebar")
        侧边栏
        @show
    </div>
    <div class="content">
        @yield("content", "主要内容区域");
        主要内容区域
    </div>
</div>
<div class="footer">
    @section("footer")
    底部
    @show
</div>
</body>
</html>

定义一个子模板，继承父模板 bladeTest.blade.php

@extends("layout")
@section("title")
this title is defined in child template!
@stop
@section("header")
    @parent
    "here is your own content!!!!"
@stop

@section("content")
 "this content is for yield(content)"
@stop

效果如下：
在这里插入图片描述

基础语法

1.使用php变量 {{$var}}

2.使用php函数

{{time}}
{{date("Y-m-d")}} 
{{var_dump($arr)}}
{{ $name or 'default'}} == {{isset($name) ? $name : default}}

3.原样输出
@{{$name}}

4.模板注释
{{–模板中的注释–}} 浏览器中无法看到

5.引入子视图
@include(‘path.common’, [‘message’=>“some error”])

6.三元运算
{{$val or “default value”}} {{ $val ?? “default value”}}

7.未转义输出 (html代码能够被解析)
{!! $val !!}

8.模板包含
@include(“index”)

流程控制

if

    @if ($name == "abc")
    it is abc
    @elseif ($name == "abcd")
    it is abcd
    @else
    what is it
    @endif

unless (相当于if取反)

    @unless ($name != "abc")
        abc
    @endunless

for

    @for($i = 0; $i < 10; $i++)
        {{$i}}
    @endfor

foreach

    @foreach($students as $student)
        {{$student["id"] . "::" . $student["name"]}} </br>
     @endforeach

forelse

    @forelse ($students as $student)
        {{$student["id"] . "::" . $student["name"]}}</br>
    @empty
       <p>null</p>
     @endforelse

模板中的URL

Route::get(“url1”, [“as”=> “url”, “uses” => “StudentController@urlTest”]);

url()

<p><a href="{{url("url")}}">click me</a></p>

action()

<p><a href="{{action("StudentController@urlTest")}}">action</a></p>

route()

<p><a href="{{route("url")}}">route</a></p>

分页实现

使用Model::paginate(pagesize）方法创建分页数据

		//搜索关键字
        $title = $request->get("title");
        $data = Article::when($title, function(\Illuminate\Database\Eloquent\Builder $query) use ($title) {
            $query->where("title", "like", "%{$title}%");
        })->paginate(env("PAGESIZE"));
        return view("article.index", compact("data"));

前台渲染

<!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>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.css">
</head>
<body>
<br>
<div class="container">
    <div class="row">
        <form action="" method="get" class="form-horizontal" role="form">
            <div class="form-group">
                <label for="title" class="col-sm-2 control-label">标题：</label>
                <div class="col-sm-5">
                    <input type="text" name="title" id="title" class="form-control" value="{{ request()->get('title','') }}">
                </div>
                <div class="col-sm-5">
                    <button type="submit" class="btn btn-default">搜索结果</button>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            @forelse($data as $obj)
                <tr>
                    <td>{{ $obj->id }}</td>
                    <td>{{ $obj->title }}</td>
                    <td>{{ date('Y年m月d日',strtotime($obj->updated_at)) }}</td>
                    <td>
                        <a href="##" class="btn btn-xs btn-primary">修改</a>
                        <a href="##" class="btn btn-xs btn-danger">删除</a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4">暂无数据</td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="row">
    	<!--appends用于添加附带在分页链接后的数据，默认只携带page-->
        {{ $data->appends(request()->except(['page']))->links() }}
    </div>
</div>

<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
    $('#title').click(function(){
        //$(this).select();
        $(this).trigger('select');
    });
</script>
</body>
</html>

效果如下：