Skip to content

Dev.Front Module File.zh_cn

Jump to bottom Edit New page
lavenderli edited this page Aug 8, 2013 · 11 revisions

1 文件结构

模块包都是放在usr/module目录下的，基本目录结构如下：

  {module name}/
  ├── asset/
  │   ├── css/
  │   │    ├── front.css           （模块前台样式）
  │   │    └── admin.css           （模块后台样式）
  │   ├── js/
  │   └── 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/                   （前台模板）

2 文件介绍

下面具体介绍模块包中的一些常用文件asset、config、sql、controller。

2.1 Asset

Asset文件夹内主要放置模块的静态文件，如css和js文件。这个静态目录在安装的时候将会被发送到www/asset目录下。

CSS

模块的css一般都需要包含2个css文件，front.css和admin.css，放在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 {
}
...

Javascript

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

2.2 Config

Config文件夹主要用于存放模块的配置文件，目录下至少需要有一个module.php文件。

module.php

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'     => 'taiwenjiang@tsinghua.org.cn',
        // 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'
                  ...
              )
            )
      )
    )
);

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

navigation.php

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

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

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

<? 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'
      ...
    ),
  )
);

block.php

  1. 在module.php中增加属性'block' => 'block.php'。
  2. 在{module name}/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
        )
      )
    )
  );

注意 ：

  1. 区块名，在模块安装或者更新过后，在表core_block中的真正的名字是{module name}-{block name}，也就是说区块真正的名字是模块名+配置里面的名字。

  2. 区块配置，添加了config属性的区块，可以在后台 Setting->{module name}->Blocks->Edit 进行配置编辑。

  3. 在{module name}/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. 在{module name}/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'

2.3 sql

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

2.4 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}就能看到这个页面

Add a custom footer
Add a custom sidebar

Clone this wiki locally