本章了解 Magento 2 的视图(view)包含区块（Block）、布局（Layouts）、模板（Templates）。视图是用来输出页面显示的，在Magento 2中视图由三部分组成区块、布局、模板。现在改造我们的Hello World模块使用视图实现之前的功能以便了解视图的工作机制。
创建视图步骤：
- 1 创建控制器
- 2 创建 .xml 布局文件
- 3 创建区块
- 4 创建 .phtml 模板文件
第一步 创建控制器
首先建一个控制器来调用 .xml 布局文件
文件： app/code/Aqrun/HelloWorld/Controller/Index/Display.php
<?php
namespace Aqrun\HelloWorld\Controller\Index;
class Display extends \Mangento\Framework\App\Action\Action
{
protected $_pageFactory;
public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $pageFactory
){
$this->_pageFactory = $pageFactory;
return parent::__construct($context);
}
public function execute()
{
return $this->_pageFactory->create();
}
}
我们必须定义 PageFactory 并在 execute 方法中实例化来渲染视图。
第二步 创建布局文件 .xml
在 Magento 2 模块中布局是视图的重要组成部分。布局文件是定义了页面结构的 XML 文件，文件位置 {module_root}/view/{area}/layout 。area 决定布局文件的使用位置，值可以是 frontend 或 adminhtml。
有一个特殊的布局文件所有页面会默认使用 default.xml 。其它布局文件命名格式是 {router_id}_{controller_name}_{action_name}.xml
渲染页面时 Magento 会检测对应布局文件，然后加载区块和模板。这里我们定义如下文件：
文件：app/code/Aqrun/HelloWorld/view/frontend/layout/helloworld_index_display.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceContainer name="content">
<block class="Aqrun\HelloWorld\Block\Display" name="helloworld_display" template="Aqrun_HelloWorld::sayhello.phtml" />
</referenceContainer>
</page>
上面代码中为页面定义了区块和模板：
- 区块类：
Aqrun\HelloWorld\block\Display - 模板文件：
Aqrun_HelloWorld::sayHello.phtml - name: 这个属性是必须的，作为区块引用的唯一标识
第三步 创建区块
区块文件包含视图逻辑需要的一切，但不包含任何 HTML 或 CSS。
文件： app/code/Aqrun/HelloWorld/Block/Display.php
代码：
namespace Aqrun\HelloWorld\Block;
class Display extends \Magento\Framework\View\Element\Template
{
public function __construct(
\Magento\Framework\View\Element\Template\Context $context
){
parent::__construct($context);
}
public function sayHello()
{
return __('Hello World');
}
}
区块都必须继承自 Magento\Framework\View\Element\Template。这个区块里我们定义了 sayHello() 方法，会在模板文件中调用。
第四步 创建模板文件
创建名为 sayhello.phtml 的模板文件： app/code/Aqrun/HelloWorld/view/frontend/templates/sayhello.phtml
代码：
<?php
/**
* @var \Aqrun\HelloWorld\Block\Display $block
*/
echo $block->sayHello();
在布局文件中，我们使用 Aqrun_HelloWorld::sayhello.phtml 指定模板文件，系统根据名称会到 Aqrun_HelloWorld 模块的模板文件夹查找名为 sayhello.phtml 的文件。模板文件位置为：app/code/{vendor_name}/{module_name}/view/frontend/templates/。
在模板文件可以使用 $block 变量调用区块对象，如上代码我们可以调用区块的 sayHello() 方法。然后清空缓存访问 http://mag.dev/helloworld/index/display 就可以查看结果了。
在上一节创建模型中，在控制器调用了 PostFactory 模型。现在可以试着使用区块和模板显示所有数据。
编辑文件： app/code/Aqrun/HelloWorld/Block/Display.php
代码：
namespace Aqrun\HelloWorld\Block;
class Display extends \Magento\Framework\View\Element\Template
{
protected $_postFactory;
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
\Aqrun\HelloWorld\Model\PostFactory $postFactory
){
$this->_postFactory = $postFactory;
parent::__construct($context);
}
public function sayHello()
{
return __('Hello World');
}
public function getPostCollection()
{
$post = $this->_postFactory->create();
return $post->getCollection();
}
}
在区块文件定义了 getPostCollection() 方法来获取 aqrun_helloworld_post 数据表的所有数据，下面在模板中会调用这个方法。
编辑文件 app/code/Aqrun/HelloWorld/view/frontend/templates/sayhello.phtml
代码：
<?php
/**
* @var \Aqrun\HelloWorld\Blcok\Display $block
*/
?>
<style>
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; margin-top: 30px;}
td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; }
tr:nth-child(even) { background-color: #dddddd; }
.post-id{width:2%} .post-name{width:30%}
</style>
<div><?=$block->sayHello()?></div>
<table>
<tr>
<th class="post-id">ID</th>
<th class="post-name">Name</th>
<th>Content</th>
</tr>
<?php foreach($block->getPostCollection() as $key=>$post){?>
<tr>
<td><?=$post->getPostId()?></td>
<td><?=$post->getName()?></td>
<td><?=$post->getPostContent()?></td>
</tr>
<?php }?>
</table>
修改后执行 php bin/magento cache:clean 刷新浏览器如下显示：
4-sayhello-page.png
网友评论