Magento 2 开发内容目录

本章了解 Magento 2 的视图(view)包含区块(Block)、布局(Layouts)、模板(Templates)。视图是用来输出页面显示的,在Magento 2中视图由三部分组成区块、布局、模板。现在改造我们的Hello World模块使用视图实现之前的功能以便了解视图的工作机制。

创建视图步骤:

第一步 创建控制器

首先建一个控制器来调用 .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 决定布局文件的使用位置,值可以是 frontendadminhtml

有一个特殊的布局文件所有页面会默认使用 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>

上面代码中为页面定义了区块和模板:

第三步 创建区块

区块文件包含视图逻辑需要的一切,但不包含任何 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 刷新浏览器如下显示:

sayhello page