Magento 2创建视图:块,布局,模板

在本主题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并检查结果。它会像这样显示出来

赞(1)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

相关文章

Please Login to comment