参考资料
- 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
Demo for layout
include('layouts/default/header') ?>
{_CONTENT_}
include('layouts/default/footer') ?>
-
include('layouts/default/header') ?>
布局中引入页头 -
include('layouts/default/header', ['logo' => 'xx/yy/logo.jpg']) ?>
引入页头并传递参数 -
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
目录内即可。
当访问本地CSS文件时,浏览器会出现警告,导致本地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原生语法的视图渲染支持
= $name ?>
未完待续...