4.3. 视图开发

未匹配的标注

视图开发

Blade介绍

Blade 是 Laravel 所提供的一个简单且强大的模板引擎。相较于其它知名的 PHP 模板引擎,Blade 并不会限制你必须得在视图中使用 PHP 代码。所有

Blade 视图都会被编译缓存成普通的 PHP 代码,一直到它们被更改为止。这代表 Blade 基本不会对你的应用程序生成负担。

Blade 视图文件使用 .blade.php 做为扩展名,通常保存于 resources/viewsmodule/Xxx/View 文件夹内。

页面标题/描述/关键词

在Blade页面上调用

设置页面标题

@section('pageTitle')页面标题@endsection

设置页面主标题(会自动补全网站名称)

@section('pageTitleMain')页面主标题@endsection

设置页面关键词

@section('pageKeywords')页面关键词@endsection

设置页面描述

@section('pageDescription')页面描述@endsection

在Controller中调用

return view('blade文件',[
      'pageTitle' => '页面标题',
      'pageTitleMain' => '页面主标题',
      'pageKeywords' => '页面关键词',
      'pageDescription' => '页面描述',
]);

页面 JavaScript

页面 JavaScript 会自动放在页面尾部(</body> 之前)

引入行内 JavaScript

ModStart::script('console.log("Hello ModStart");');

引入一个 JavaScript 文件内容到页面

ModStart::scriptFile('文件路径.js');

引入一个 JavaScript 文件路径到页面

ModStart::js('文件路径.js');

页面 CSS

页面 CSS 会自动放在头部(</head> 之前)

引入 CSS 样式到页面

ModStart::style('.test{ color:red; }');

引入一个 CSS 文件内容到页面

ModStart::styleFile('文件路径.css');

引入一个 CSS 文件路径到页面

ModStart::css('文件路径.css');

Blade页面中追加内容

在 head 中追加内容

@section('headAppend')
    @parent
    <!-- 需要追加到 head 中的内容 -->
@endsection

在 body 中追加内容

@section('bodyAppend')
    @parent
    <!-- 需要追加到 body 中的内容 -->
@endsection

页面公共顶部和底部

模块安装通常不会影响公共的顶部和底部,如果需要定制化可以根据具体业务需求修改 HTML 页面。

  • 公共顶部视图路径:resources/views/theme/default/pc/share/header.blade.php
  • 公共底部视图路径:resources/views/theme/default/pc/share/footer.blade.php

Blade基础教程

显示数据

你可以使用「中括号」包住变量以显示传递至 Blade 视图的数据。就如以下的路由设置一样:

return view('welcome', ['name' => 'Samantha']);

你可以像这样显示 name 变量的内容:

Hello, {{ $name }}.

显示数据或默认值

此写法兼容Laravel5和Laravel9+

{{ empty($name) ? '默认值' : $name }}

当然也不是说一定只能显示传递至视图的变量内容。你也可以显示 PHP 函数的结果。实际上,你可以放置任何你想要的 PHP 代码到 Blade 显示的语法里面:

目前的 UNIX 时间戳为 {{ time() }}

注意:Blade 的 {{ }} 语法会自动调用 PHP htmlentites 函数来防御 XSS 攻击。

条件判断 if

你可以使用 @if、@elseif、@else 及 @endif 命令建构 if 表达式。这些命令的功能等同于在 PHP 中的语法:

@if (count($records) === 1)
    我有一条记录!
@elseif (count($records) > 1)
    我有多条记录!
@else
    我没有任何记录!
@endif

循环 for foreach

除了条件表达式外,Blade 也支持 PHP 的循环结构:

@for ($i = 0; $i < 10; $i++)
    目前的值为 {{ $i }}
@endfor

@foreach ($users as $user)
    <p>此用户为 {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>没有用户</p>
@endforelse

@while (true)
    <p>我永远都在跑循环。</p>
@endwhile

定义页面布局

使用 Blade 模板的两个主要优点为 模板继承 与 区块。

让我们先通过一个简单的例子来上手。首先,我们需要确认一下「主要的」页面布局。大多数的网页应用程序在不同页面都保持着相同的布局方式,这种布局在这单个 Blade 视图中可以很方便的定义:

<html>
    <head>
        <title>应用程序名称 - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            这是主要的侧边栏。
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

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

现在,我们已经定义好了这个应用程序的布局,让我们接着来定义一个继承此布局的子页面。

继承页面布局

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

@extends('theme.pc.default.frame')

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

@section('sidebar')
    @parent
    <p>这边会附加在主要的侧边栏。</p>
@endsection

@section('content')
    <p>这是我的主要内容。</p>
@endsection

在这个例子中,sidebar 区块利用了 @parent 命令增加(而不是覆盖)内容至布局的侧边栏。@parent 命令会在视图输出时被置换成布局的内容。

大括号不转义输出

由于许多 JavaScript 框架也使用「大括号」在浏览器中显示指定的表达式,因此可以使用 @ 符号来告知 Blade 渲染引擎该表达式应该维持原样。举个例子:

Hello, @{{ name }}.

在这个例子中,@ 符号会被 Blade 移除。而且,Blade 引擎会保留 {{ name }} 表达式,如此一来便可跟其它 JavaScript 框架一起应用。

显示未转义过的数据

在默认情况下,Blade 模板中的 {{ }} 表达式将会自动调用 PHP 的 htmlentities 函数,以避免 XSS 攻击。如果你不希望你的数据被转义,可以使用下列的语法:

Hello, {!! $name !!}.

注意:要非常小心处理用户提供的字符串,请总是使用双大括号语法来转义内容中的 HTML 元素,以避免 XSS 攻击。

引入子视图

Blade 的 @include 命令用来引入已存在的视图,所有在父视图的可用变量在被引入的视图中都是可用的。

@include('share.header')

尽管被引入的视图会继承父视图中的所有数据,你也可以通过传递额外的数组数据至被引入的页面:

@include('view.name', ['some' => 'data'])

使用说明:

@include('module::Xxx.View.pc.a.b') 表示包含路径 module/Xxx/View/pc/a/b.blade.php 视图文件

@include('theme.default.pc.a.b') 表示包含路径 resources/views/theme/default/pc/a/b.blade.php 视图文件

如果视图文件以 module:: 开头,表示是目录 module/ 中的视图,否则为 resources/views/theme/ 中的视图

当数据存在时输出

有时候你想要输出一个变量,但你并不确定这个变量是否已被设置。我们可以用像这样的冗长 PHP 代码表达:

{{ isset($name) ? $name : '默认值' }}

在这个例子中,如果 $name 变量存在,它的值将会被显示出来。但是,如果这个变量不存在,便会显示 默认值

注释

Blade 也允许在页面中定义注释,然而,跟 HTML 的注释不同的是,Blade 注释不会被包含在应用程序返回的 HTML 内:

{{-- 此注释将不会出现在渲染后的 HTML --}}

常用方法

时间格式化

// $t = '2021-01-01 00:00:00'
date('Y-m-d', strtotime($t) )

时间格式化标签和PHP时间格式化语法一致,分别用不同字母代替,中间可以穿插任意字符,如:Y-m-dY/m/dY年m月d日

注意:Y代表完整年份,y代表简化年份,m代表月份,d代表日,H代表小时,i代表分,s代表秒,更多请参考PHP时间格式化语法 ,参考链接 :php.net/manual/zh/function.date.php

HTML去除标签

// 去除HTML并限制输出 100 个字符
\ModStart\Core\Util\HtmlUtil::text($html,100)

一般在首页等特殊位置需要调取正文一段纯文本时使用,这时一般会配合下面的内容截取标签一起使用

内容截取

// HTML
\ModStart\Core\Util\HtmlUtil::text($html,100)
// 非HTML
\ModStart\Core\Util\StrUtil::limit($text,100,'...')

限制输出 100 个字符

其它格式

// 限定浮点格式,更多参考 https://www.php.net/manual/en/function.sprintf.php
sprintf('%0.2f', 3.14159)

当前网址

以访问 http://example.com/test/path?a=b 为例

// /test/path
\ModStart\Core\Input\Request::path()
// http://example.com/test/path?a=b
\ModStart\Core\Input\Request::currentPageUrl()
// http://example.com/test/path
\ModStart\Core\Input\Request::currentPageUrlWithOutQueries()

当前页面URL

获取当前访问页面完整地址,通常用于生成二维码等

\ModStart\Core\Input\Request::currentPageUrl()

二维码生成

生成二维码数据

// 返回base64图片字符串
\ModStart\Core\Util\QrcodeUtil::pngBase64String('ModStart')

可直接用于显示,如

<img src="{!! \ModStart\Core\Util\QrcodeUtil::pngBase64String('ModStart') !!}" />

获取系统配置

网站配置全部位于 config 数据表中,查找 key 值,通过如下如下函数可以直接获取值,该函数已内置添加了缓存可在视图中多次调用。

modstart_config('xxx','默认值')

image-20220620171930360

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~