美文网首页
4.Magento 2 创建视图:区块、布局、模板

4.Magento 2 创建视图:区块、布局、模板

作者: 子十一刻 | 来源:发表于2020-02-17 10:28 被阅读0次

    Magento 2 模块开发基础部分 - 目录

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

    创建视图步骤:

    • 1 创建控制器
    • 2 创建 .xml 布局文件
    • 3 创建区块
    • 4 创建 .phtml 模板文件

    第一步 创建控制器

    首先建一个控制器来调用 .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>
    

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

    • 区块类: Aqrun\HelloWorld\block\Display
    • 模板文件: Aqrun_HelloWorld::sayHello.phtml
    • name: 这个属性是必须的,作为区块引用的唯一标识

    第三步 创建区块

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

    4-sayhello-page.png

    相关文章

      网友评论

          本文标题:4.Magento 2 创建视图:区块、布局、模板

          本文链接:https://www.haomeiwen.com/subject/zrxbfhtx.html