Swoft View 视图

参考资料

swoft-view https://github.com/swoft-cloud/swoft-view

Swoft提供PHP原生语法的视图渲染支持，并提供基础的布局以及内部引入文件等功能。

视图安装

Swoft视图渲染可作为额外单独组件使用，首先检查当前Swoft项目是否已经安装了swoft-view组件。

$ vim composer.json
"require":{"swoft/view": "^1.0",
}

如果composer.json文件中已经存在swoft/view组件则无需安装，若不存在则可在require选项中加入"swoft/view": "^1.0"组件后，使用composer install进行安装。另一种方式则直接通过composer命令进行安装：

$ composer require swoft/view dev-master

swoft-view组件主要包含两个核心文件

Swoft\View\Base\View 视图核心类
Swoft\View\Bean\Annotation\View 视图注解tag类

视图配置

安装swoft-view组件后，Swoft会自动对它进行注册，视图组件注册到容器里的名称为view。

$ vim vendor/swoft/view/src/Bootstrap/CoreBean.php

public function beans():array
{return ['view'         => ['class'     => View::class,],];
}

注册后可获取视图组件实例：

$ vim vendor/swoft/view/src/Helper/Functions.php

view(string $template, array $data = [], $layout = null)

注册后可获取视图组件实例：

Swoft::getBean("view")

视图的配置位于基本配置config/beans/base.php中的view选项中

'view'             => ['viewsPath' => '@resources/views/',
],

配置选项

viewsPath 视图文件存放地址，@resources默认地址为根目录下的resources目录。
layout 默认布局文件，使用render()方法调用时默认会使用它。
placeholder 在布局文件中使用的内容占位符，默认为{_CONTENT_}
suffix 视图文件后缀，默认为php。
suffixes 允许的视图文件后缀列表，用于判断是否需要添加默认后缀。

视图引入

可以在视图文件中引入并加载其它视图文件：

$ vim vendor/swoft/view/src/Base/View.php

include(string $view, array $data, bool $outputIt=true)

例如：在项目默认的视图布局文件中resources\views\layouts\default.php

<?php
/*** @var \Swoft\View\Base\View $this*/
?>
<!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>Demo for layout</title><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
</head>
<body><?php $this->include('layouts/default/header') ?><div class="container"><!-- Content here --><div id="page-content" style="padding: 15px 0;">{_CONTENT_}</div><?php $this->include('layouts/default/footer') ?></div>
</body>
</html>

<?php $this->include('layouts/default/header') ?> 布局中引入页头
<?php $this->include('layouts/default/header', ['logo' => 'xx/yy/logo.jpg']) ?> 引入页头并传递参数
<?php $this->include('layouts/default/footer') ?> 布局中引入页脚
{_CONTENT_} 内容占位符

视图使用

在控制器的动作方法注释中可使用@view()注解来渲染视图文件

/*** 视图渲染demo - 没有使用布局文件.** @RequestMapping()* @View(template="demo/view")*/
public function view()
{$data = ['name'   => 'Swoft','repo'   => 'https://github.com/swoft-cloud/swoft','doc'    => 'https://doc.swoft.org/','doc1'   => 'https://swoft-cloud.github.io/swoft-doc/','method' => __METHOD__,];return $data;
}

@View(template="demo/view")注解中指明了动作方法对应的视图文件，动作方法仅需要返回数组类型视图参数。

在控制器中可使用view()快捷函数渲染一个视图文件

view(string $template, array $data = [], $layout = null)

在Action动作方法中使用view()函数时，注意Action动作方法返回值类型是Response类型的对象。

/*** @RequestMapping()* @return Response*/
public function absolutePath(): Response
{$data = ['name'  => 'Swoft','notes' => ['New Generation of PHP Framework', 'High Performance, Coroutine and Full Stack'],'links' => [['name' => 'Home','link' => 'http://www.swoft.org',],['name' => 'Documentation','link' => 'http://doc.swoft.org',],['name' => 'Case','link' => 'http://swoft.org/case',],['name' => 'Issue','link' => 'https://github.com/swoft-cloud/swoft/issues',],['name' => 'GitHub','link' => 'https://github.com/swoft-cloud/swoft',],]];$template = 'index/index';return view($template, $data);
}

视图文件查找

@View(template="demo/view")

默认不添加后缀，系统将会自动追加配置的默认后缀。
默认使用相对路径，系统将会在view配置中的'viewsPath' => '@resources/views/'指定的视图目录中寻找对应的视图文件。
及射入使用绝对路径，则直接使用并渲染，同时支持使用路径别名@res/views/viewname.php。

视图使用布局文件

可在view配置项中指定layout配置默认布局文件，默认无layout配置项也会使用默认的配置。
可手动设置布局文件，手工指定的优先级将高于系统默认配置。
可在view(string $template, array $data = [], $layout = null)中设置禁用或启用渲染布局文件

视图加载静态资源文件

Swoft提供静态资源访问的支持，将静态文件放置于根目录下的public目录内即可。

<script type="text/javascript" src="/static/some.js"></script>

当访问本地CSS文件时，浏览器会出现警告，导致本地CSS文件无法加载：

<link rel="stylesheet" href="/assets/css/AdminLTE.css">

Resource interpreted as Stylesheet but transferred with MIME type application/json: "http://192.168.99.100/assets/css/AdminLTE.css".

警告：CSS资源被解释为样式表，但传递的却是application/json的MIME类型。

如果直接使用浏览器访问CSS样式表：http://192.168.99.100/assets/css/AdminLTE.css

{"msg":"Route not found for \/assets\/css\/AdminLTE.css","file":"\/var\/www\/swoft\/vendor\/swoft\/http-server\/src\/Router\/HandlerAdapter.php","line":49,"code":404
}

为什么会出现这样的问题呢？因为没有开启【资源处理器】enable_static_handler配置项。

$ vim config/server.php
'setting' => [# 是否开启静态资源处理器，优先从环境配置.env中获取，获取失败则使用默认值。'enable_static_handler' => env('ENABLE_STATIC_HANDLER', true),
],

本地访问，可在环境配置.env文件中添加ENABLE_STATIC_HANDLER配置项。

$ vim .env
# 是否开启静态资源处理器
ENABLE_STATIC_HANDLER=true

视图变量

Swoft提供PHP原生语法的视图渲染支持

<title><?= $name ?></title>

未完待续...