如何为我们的Magento2模块创建视图？

未分类

本教程是magento2漫长系列教程中的第3部分。它将随着平台的发展而更新。今天，您现在将学习如何在Magento2下创建视图及其动作。如果您不知道magento（v1）没关系，我当然会谈论它，但是不必知道magento平台（v1）来掌握magento2上的本教程。在上一教程中，我们看到了如何为我们的扩展为magento2创建控制器！现在，我们将看到如何将视图（模板）与我们的操作相关联！为此，我们将保留上一教程的文件。

添加我们模块的文件夹“视图”

我们将在/ Pfay / Contacts模块的根目录下创建一个“ view”文件夹。该文件夹将包含所有布局（指示要在magento2和模板中显示的“块”的布局的文件（请注意，magento2现在使用模板引擎“ Twig”，我们稍后将返回。）将包含文件夹“ frontend”，它本身将包含2个文件夹“ layout”（将包含布局）和“ templates”（将包含模板文件）对于认识magento（v1）的人，您或多或少知道这最后2个文件。

添加phtml模板文件

在/ Pfay / Contacts / view / frontend / templates /目录中创建具有以下内容的“ test_index.phtml”文件：

<div id="contactslist">
    my contact list
</div>

本教程的目标是当我们使用动作联系人/测试/索引时，在此文件中显示html内容（请参阅上一教程）。

为我们的操作添加布局文件

现在，我们将动作与控制器和模板链接起来。为此，请在/ Pfay / Contacts / view / frontend / layout /目录中创建文件“ contacts_test_index.xml”（为<< id_of_the_route> _ <name_of_the_controller> _ <name_of_the_action>的全部内容），该文件包含以下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">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="contactForm" template="Pfay_Contacts::test_index.phtml"></block>
        </referenceContainer>
    </body>
</page>

文件名（如果非常重要）。对于路线contact / test / index，我们必须将布局文件命名为“ contacts_test_index.xml”，以便magento2从Action中自动获取布局文件。您只需将我们操作的网址的“ /”替换为“ _”，即可获得布局文件的名称。
这个文件是做什么用的？

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

该指令是告诉magento2我们将使用1column模板更新此操作的布局。

<body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="contactForm" template="Pfay_Contacts::test_index.phtml"></block>
        </referenceContainer>
</body>

– referenceBlock允许magento2获得与相应的名称（这里“内容”）的块。
–块允许magento2添加一个新块，此块将使用逻辑类“ Magento \ Framework \ View \ Element \ Template”，并将其命名为“ contactForm”，还将使用模板文件“ test_index.phtml”在Pfay_Contacts模块中。

此XML代码块使您可以在网站的“内容”区域中创建一个块，它将使用我们之前创建的contactlist.phtml文件。
请注意，这里我们使用类“ Magento \ Framework \ View \ Element \ Template”，它是核心类，它允许显示phtml模板而没有任何特殊的逻辑。

编辑我们的动作以获取布局

实际上，我有一点谎言可以简化事情，为了获取布局文件，magento2需要使用loadLayout（）方法加载它。并使用renderLayout（）函数显示它。
Magento开发人员（v1）已经习惯使用这些功能；）
像这样编辑文件/Pfay/Contacts/Controller/Test/Index.php：

namespace Pfay\Contacts\Controller\Test;
class Index extends \Magento\Framework\App\Action\Action
{
    public function execute()
    {
       $this->_view->loadLayout();
       $this->_view->renderLayout();
    }
}

现在，您可以按照教程1：http：//www.magento2.lan/contacts/test/或www.magento2.lan / contacts / test / index /中的说明通过先前的URL访问模板。