Skip to content

Dev.Front Module File.zh_cn

Jump to bottom Edit New page
lavenderli edited this page Aug 7, 2013 · 12 revisions

文件结构

  {module name}/
  ├── asset/
  │   ├── js/
  │   ├── css/
  │   │    ├── front.css           （模块前台样式）
  │   │    └── admin.css           （模块后台样式）
  │   └── image/
  ├── config/
  │   ├── block.php                （模块的区块）
  │   ├── module.php               （模块相关信息）
  │   ├── navigation.php           （模块前台，后台导航）
  │   └── page.php                 （模块页面[admin,front,feed]）
  ├── locale/                      （模块翻译文件）
  ├── sql/                         （模块sql文件）
  ├── src/
  │   ├── Controller /
  │   │   ├── Admin                （后台控制器）
  │   │   └── Front                （前台控制器）
  │   ├── Form                     （模块表单） 
  │   ├── Model                    （模块模型）
  │   └── Installer                （模块安装）
  └── template/                    （翻译文件）
      ├── admin/                   （后台模板）
      ├── block/                   （区块模板）
      └── front/                   （前台模板）

css

模块的css一般都需要包含2个css文件，front.css和admin.css，放在{module name}/asset/css目录下，为了避免模块样式跟主题样式冲突，模块的css文件名字都必须以模块名开头，如article模块的css文件命名为article-{name}.css。

front.css

/* Common */
.article-mb {
  margin-bottom: 5px;
}
.article-mb-large {
  margin-bottom: 10px;
}
.article-hr {
  height: 0;
  border-top: 1px dashed #d5d5d5;
}
...

/* List page */
.article-list-item {
}
.article-list-title {
}
.article-list-posttime { 
}
...

/* Detail page */
.article-detail-title {
}
.article-detail-p {
}
... 

/* Classify page */
.article-classify-item {
}
.article-classify-posttime {
}

/* Search page */
.article-search-item {
}
.article-search-title {
}
.article-search-time {
}

//以上命名规范参照这个形式
.{module name}-{page name}-{what} {
  
}
.{module name}-{block name}-{what} {
  
}

admin.css

一般情况下，模块的后台不需要写样式，使用默认的bootstrap即可，较复杂的后台则需要按前台规范来写。

/* Add page */
.tag-add-btn {
}
/* List page */
.tag-list-item {
}
...

js

一般情况下，都使用Backbone来书写js。包括Model，View两层即可。

module.php

开发模块的时候，可以先安装模块，在开发过程中，如果新增或修改了内容，涉及到配置文件的修改，比如增加一个区块，修改导航等，都要在后台 Operation->System->Modules->Installed 已安装列表点击对应模块的update操作，更改才能生效。如果是产品模式下，必须要修改了版本号才能update生效。

//{module name}/config/module.php
<? php
return array(
    // Module meta
    'meta'  => array(
        // required
        'title'         => 'DEMO Sandbox',
        // Description, for admin, optional
        'description'   => 'Examples and tests for developers.',
        // Version number, required
        'version'       => '0.0.0'
    ),
    // Author information
    'author'    => array(
        // Author full name, required
        'name'      => 'Taiwen Jiang',
        // Email address, optional
        'email'     => '[email protected]',
        // Website link, optional
        'website'   => 'http://www.xoopsengine.org',
        // Credits and aknowledgement, optional
        'credits'   => 'Zend Framework Team; Pi Engine Team; EEFOCUS Team.'
    ),
    // Module dependency: list of module directory names, optional
    'dependency'    => array(
    ),
    // Maintenance actions
    'maintenance'   => array(
        'resource' => array(
            'database' => array(
              'sqlfile' => 'sql/mysql.sql',
              'schema' => array(
                  'learn' => 'table'
                  ...
              )
            )
      )
    )
);

sql

创建一个模块需要的表，并在module.php配置sqlfile，这样当安装模块的时候，程序会在安装成功过后执行sql文件里面的语句。schema则是在模块卸载的时候，需要删除的表(如果模块里已经有数据，注意备份已有的数据)。具体详情参照module-database，这里不具体描述。

navigation.php

<? php
return array(
  'admin' => array(
    'nav1' => array(
      'label' => 'nav1',
      'route' => 'admin',
      'controller' => 'index',
      'action' => 'index',
      'pages' => array(
      )
    ),
    'nav2' => array(
      'label' => 'nav2',
      'visible' => 0,
      ...
    )
  ),
  'front' => array(
    'frontnav1' => array(
      'label' => 'frontnav1',
      'uri' => 'http://www.eefocus.com/',
      'target' => '_blank'
      ...
    ),
    'frontnav2' => array(
      'label' => 'frontnav2',
      'route' => 'default',
      'controller' => 'test',
      'action' => 'test'
      ...
    ),
  )
);

导航分为前后台导航，每个导航可选的属性有label，route，controller，action，visible，pages。模块一旦安装，会在core_navigation_node生成对应的记录。

front

前台导航手动渲染： $this->navigation('{module name}-front',array(...))->render()，其他方法参照navigation。注意：模块前台导航会多一个uri属性，可以直接写成绝对路径。

admin

后台导航是自动在后台渲染，后台导航的作用就是供模块后台管理程序的使用。一旦管理某个模块的时候，程序会自动创建模块导航，但是后台界面上，只会显示一级导航。

模块区块

  1. module.php增加配置'block' => 'block.php'。 config目录下创建block.php。
<? php
  return array(
    'block-a' => array(
      'title' => __('document block a'),          // __翻译函数
      'description' => __('document block a'),
      'render' => array('block', 'blocka'),      // param : {class}, {method}
      'template' => 'block-a'                    // template文件名，文件位置是在template/block/
    ),
    'block-b' => array(
      'title' => __('document block b'),
      'description' => __('document block b'),
      'render' => array('block', 'blockb'),
      'template' => 'block-b',
      'config' => array(                       // 后台区块配置    
        'config1' => array(
          'title' => 'config1',
          'description' => 'this config description',
          'value' => 'value1'
        ),
        'config2' => array(
          'title' => 'config2',
          'description' => 'this config description',
          'edit' => 'checkbox', 
          'value' => 1
        )
      )
    )
  );

区块名字，在模块安装或者更新过后，在表core_block中的真正的名字是{module name}-{block name}，也就是说区块真正的名字是模块名+配置里面的名字。 区块可配置， 一旦区块多了config属性，便可以在后台setting->block->{module name}->edit进行配置编辑。 2. src目录下创建Block.php （区块程序）

<? php
    namespace Module\{module Name};
    class Block
    {
      public static function blocka($options = array(), $module = null) {
          /* options可以通过后台设置，这里获取 */
          $block = array(
              'caption'   => __('Block A'),
              'content'   => "content render by $module",
              'options'   => $options,
          );
          return $block;
      }
      public static function blockb($options = array(), $module = null) {
        ...
      }
    }
  1. template/block目录下创建block-a.phtml。
//根据这个值，进行html代码的书写。
<?php d($block); ?>
<h3><?php echo $block['content']; ?></h3>
  1. 区块创建好了，如何应用到页面上呢？
    • 通过php方法在页面中输出： echo $this->widget('{block name}')。
    • 通过dress up拖拽到指定页面中去。

config.php

模块后台参数配置，module.php增加配置'config' => 'config.php'

Controller

以下展示一个程序流程：

  1. 在src下创建Controller/Admin，Controller/Front
  2. 以Front为例，创建IndexController 
<? php
namespace Module\{module name}\Controller\Front;   
use Pi;
use Pi\Mvc\Controller\ActionController;
class IndexController extends ActionController
{
    public function indexAction() 
    {
      $title = 'test';
      $this->view()->assign(array(
        'title' => $title
      ));
      /* 如果模板的文件名字是对应{controller}-{action}的话，则可以去掉这段代码 */
      $this->view()->setTemplate('index-index');
    }
}

一旦这个方法写好后，客户端请求{site}/{module name}/{controller}/{action}这个url，就能请求到这个方法。

  1. controller写好后，就是view渲染了，创建template/front/{controller}-{action}.phtml模板。
<!-- 加载当前模块的css -->
<?php $this->css($this->assetModule('front.css')); ?>
<!-- 模板html -->
<h2><?php echo $title; ?></h2>

最后访问{site}/{module name}/{controller}/{action}就能看到这个页面

hiii 2

Add a custom sidebar
Clone this wiki locally