视图层:块,布局和模板[模板教程]

Magento 2.X
, , ,
1

在这个主题中，我们将学习在Magento 2中创建视图层包括:块(Block)、布局(layout)和模板(Templates)。
在之前的主题中，我们学习了CRUD模型。
您知道，视图层将用于输出页面。在Magento 2中，视图层由:块(Block)、布局(layout)和模板(Templates)构成。
我们将通过使用视图构建简单的Hello World模块，学习了解它的工作原理。
##Magento 2 创建视图层

  • Step 1: 控制器调用视图层
  • Step 2: 创建布局.xml文件
  • Step 3: 创建块
  • Step 4. 创建模板文件.phtml

Step 1: 控制器调用视图层

在之前的教程中，我们学习了创建Hello world的控制器.
该教程让我们学会了创建一个简单的模块，并通过控制器直接在屏幕上显示 Hello World .
现在，我们将修改它以调用视图层(view)来呈现页面。
首先创建文件:

app/code/Magentochina/HelloWorld/Controller/Index/Display.php

内容:

<?php
namespace Magentochina\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()方法中创建它来呈现视图。

Step 2: 创建布局.xml文件

布局是Magento 2模块中视图层的主要方法。

布局文件是一个XML文件，它将定义页面结构，并在 {module_root}/view/{area}/layout/ 文件夹中定位。
区域路径(Area path)可以是前端或后台，它定义了布局应用的位置。

default.xml 布局文件是非常特殊的,它将应用于该区域的所有页面。另外，布局文件名的固定格式为:

{router_id}{controller_name}{action_name}.xml

您可以在Magento2中文文档中详细了解布局，以及布局文件的xml指令。

在呈现页面时，Magento将检查布局文件以找到页面的句柄(handle)，然后加载块和模板。
我们将为这个模块创建一个布局句柄文件:
文件:

app/code/Magentochina/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="Magentochina\HelloWorld\Block\Display" name="helloworld_display" template="Magentochina_HelloWorld::sayhello.phtml" />
</referenceContainer>
</page>

在这个文件中，我们定义了这个页面的块和模板文件:
块的类是: Magentochina\HelloWorld\Block\Display
模板文件是: Magentochina_HelloWorld::sayhello.phtml

  • Step 3: 创建块

块文件应该包含所有需要的视图逻辑，它不应该包含任何类型的html或css。块文件应该具有所有应用程序视图逻辑。
创建文件:

app/code/Magentochina/HelloWorld/Block/Display.php

模板的块:

<?php
namespace Magentochina\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” 并且将在模板文件中使用该方法。

  • Step 4. 创建模板文件.phtml

创建模板文件 sayhello.phtml

app/code/Magentochina/HelloWorld/view/frontend/templates/sayhello.phtml

接着插入代码:

<?php
    echo $block->sayHello();

在布局文件中,我们定义 Magentochina_HelloWorld::sayhello.phtml 的模板。它的意思是，Magento会发现文件名为 sayhello.phtml 在模块Magentochina_HelloWorld的模板文件夹 app/code/{vendor_name}/{module_name}/view/frontend/templates/ 中。

在模板文件中，我们可以为块(block)对象使用变量$。如您所见，我们使用了sayHello()方法。

以上,请再次访问这个页面(http://example.com/helloworld/index/display),看看结果。
如果没有显示，可以尝试一下刷新Magento 2的缓存.

####本教程来自Magento2模块开发中文教程索引系列.
####转载说明:非常欢迎转载，但是必须保证文章的完整性并附上原文地址和翻译原文的地址，保证阅读者不会产生歧义.
####如果觉得本站翻译得内容对您有帮助，又没有时间帮助翻译回馈社区.请打赏我们，您的支持是我们的动力: