在本主题Magento 2创建：块，布局，模板中，我们将了解Magento 2中的视图，包括块，布局和模板。在上一个主题中，我们讨论了CRUD模型。如您所知，View将用于输出页面的表示。在Magento 2中，View由三个路径构建：块，布局和模板。我们将通过使用View路径构建简单模块Hello World来了解它是如何工作的。
在Magento 2中创建视图
- 第1步：创建控制器
- 第2步：创建布局文件.xml
- 第3步：创建块
- 步骤4.创建模板文件.phtml
第1步：创建控制器
首先，我们将创建一个控制器来调用布局文件.xml
文件： app/code/Mageplaza/HelloWorld/Controller/Index/Display.php
<?php
namespace Mageplaza\HelloWorld\Controller\Index;
class Display extends \Magento\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方法中创建它以呈现视图。
第2步：创建布局文件.xml
的布局是视图层的主要路径的Magento 2模块。布局文件是一个XML文件，它将定义页面结构并将位于{module_root}/view/{area}/layout/文件夹中。区域路径可以是前端或adminhtml，用于定义布局的应用位置。
有一个特殊的布局文件名default.xml，将应用于它所在区域的所有页面。除此之外，布局文件的名称格式为：{router_id}_{controller_name}_{action_name}.xml。
您可以在此Magento 主题中详细了解布局以及布局结构的说明。
在渲染页面时，Magento将检查布局文件以找到页面的句柄，然后加载块和模板。我们将为该模块创建一个布局句柄文件：
文件：
app/code/Mageplaza/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="Mageplaza\HelloWorld\Block\Display" name="helloworld_display" template="Mageplaza_HelloWorld::sayhello.phtml" />
</referenceContainer>
</page>在此文件中，我们定义此页面的块和模板：
座班类： Mageplaza\HelloWorld\Block\Display
模板文件： Mageplaza_HelloWorld::sayhello.phtml
name：它是必需属性，用于标识块作为引用
第3步：创建块
块文件应包含所需的所有视图逻辑，它不应包含任何类型的html或css。块文件应该具有所有应用程序视图逻辑。
创建一个文件：
app/code/Mageplaza/HelloWorld/Block/Display.php内容如下：
<?php
namespace Mageplaza\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 2中的每个区块都必须延伸Magento\Framework\View\Element\Template。在这个块中，我们将定义一个方法sayHello（）来显示单词“Hello World”。我们将在模板文件中使用它。
步骤4.创建模板文件
创建模板文件调用 sayhello.phtml
app/code/Mageplaza/HelloWorld/view/frontend/templates/sayhello.phtml插入以下代码：
<?php
/**
* @var \Mageplaza\HelloWorld\Block\Display $block
*/
echo $block->sayHello(); 在布局文件中，我们通过定义模板Mageplaza_HelloWorld::sayhello.phtml。这意味着Magento将在模块Mageplaza_HelloWorld的模板文件夹中找到文件名sayhello.phtml。模块的模板文件夹是app/code/{vendor_name}/{module_name}/view/frontend/templates/。
在模板文件中，我们可以使用变量$ block作为块对象。如您所见，我们sayHello()在Block中调用该方法。已经完成，请再次访问此页面（http：/// helloworld / index / display）并查看结果。
在之前的模型（CRUD）中，我们在控制器中调用了postFactory模型。现在，我们尝试显示关于表使用块和模板的所有数据。
我们编辑了文件 app/code/Mageplaza/HelloWorld/Block/Display.php
内容如下：
<?php
namespace Mageplaza\HelloWorld\Block;
class Display extends \Magento\Framework\View\Element\Template
{
protected $_postFactory;
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
\Mageplaza\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来获取mageplaza_helloworld_post表上的所有数据，我们将在模板中调用它。
我们编辑了文件 app/code/Mageplaza/HelloWorld/view/frontend/templates/sayhello.phtml
内容如下：
<?php
/**
* @var \Mageplaza\HelloWorld\Block\Display $block
*/
echo $block->sayHello();
?>
<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>
<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){
echo '<tr>
<td>'.$post->getPostId().'</td>
<td>'.$post->getName().'</td>
<td>'.$post->getPostContent().'</td>
</tr>';
}
?>
</table>
</body>
</html> 完成后，请运行php bin/magento cache:clean并检查结果。它会像这样显示出来
