Magento 2 模塊開發(fā)基礎(chǔ)部分 - 目錄

本章了解 Magento 2 的視圖(view)包含區(qū)塊（Block）、布局（Layouts）、模板（Templates）。視圖是用來輸出頁面顯示的，在Magento 2中視圖由三部分組成區(qū)塊、布局、模板?，F(xiàn)在改造我們的Hello World模塊使用視圖實(shí)現(xiàn)之前的功能以便了解視圖的工作機(jī)制。

創(chuàng)建視圖步驟：

• 1 創(chuàng)建控制器
• 2 創(chuàng)建 .xml 布局文件
• 3 創(chuàng)建區(qū)塊
• 4 創(chuàng)建 .phtml 模板文件

第一步 創(chuàng)建控制器

首先建一個(gè)控制器來調(diào)用 .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 方法中實(shí)例化來渲染視圖。

第二步 創(chuàng)建布局文件 .xml

在 Magento 2 模塊中布局是視圖的重要組成部分。布局文件是定義了頁面結(jié)構(gòu)的 XML 文件，文件位置 {module_root}/view/{area}/layout 。area 決定布局文件的使用位置，值可以是 frontend 或 adminhtml。

有一個(gè)特殊的布局文件所有頁面會(huì)默認(rèn)使用 default.xml 。其它布局文件命名格式是 {router_id}_{controller_name}_{action_name}.xml

渲染頁面時(shí) Magento 會(huì)檢測(cè)對(duì)應(yīng)布局文件，然后加載區(qū)塊和模板。這里我們定義如下文件：

文件：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>

上面代碼中為頁面定義了區(qū)塊和模板：

• 區(qū)塊類： Aqrun\HelloWorld\block\Display
• 模板文件： Aqrun_HelloWorld::sayHello.phtml
• name: 這個(gè)屬性是必須的，作為區(qū)塊引用的唯一標(biāo)識(shí)

第三步 創(chuàng)建區(qū)塊

區(qū)塊文件包含視圖邏輯需要的一切，但不包含任何 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');
    }
}

區(qū)塊都必須繼承自 Magento\Framework\View\Element\Template。這個(gè)區(qū)塊里我們定義了 sayHello() 方法，會(huì)在模板文件中調(diào)用。

第四步 創(chuàng)建模板文件

創(chuàng)建名為 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 指定模板文件，系統(tǒng)根據(jù)名稱會(huì)到 Aqrun_HelloWorld 模塊的模板文件夾查找名為 sayhello.phtml 的文件。模板文件位置為：app/code/{vendor_name}/{module_name}/view/frontend/templates/。

在模板文件可以使用 $block 變量調(diào)用區(qū)塊對(duì)象，如上代碼我們可以調(diào)用區(qū)塊的 sayHello() 方法。然后清空緩存訪問 http://mag.dev/helloworld/index/display 就可以查看結(jié)果了。

在上一節(jié)創(chuàng)建模型中，在控制器調(diào)用了 PostFactory 模型?，F(xiàn)在可以試著使用區(qū)塊和模板顯示所有數(shù)據(jù)。

編輯文件： 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();    
    }

}

在區(qū)塊文件定義了 getPostCollection() 方法來獲取 aqrun_helloworld_post 數(shù)據(jù)表的所有數(shù)據(jù)，下面在模板中會(huì)調(diào)用這個(gè)方法。

編輯文件 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>

修改后執(zhí)行 php bin/magento cache:clean 刷新瀏覽器如下顯示：

4-sayhello-page.png