Swoft View 视图

梁浩涆

2023-12-01

参考资料

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>

未完待续...

Swoft View 视图

视图安装

视图配置

视图引入

视图使用

视图文件查找

视图使用布局文件

视图加载静态资源文件

视图变量

相关阅读

相关文章

相关问答

相关文档