介绍

介绍

路由控制器

路由

路由分为html路由、console路由、rest路由

html路由

html路由是用来将数据组合成网页发布的，需要我们自己定制模板

console路由

console路由是用来在控制台上运行的程序，无需web服务器支持

rest路由

rest路由是用来将数据组合成JSON格式发布的，可以为内部或者外部的使用提供支持

认证

认证是为rest路由提供权限检查使用的，在rest路由模式下，可以设置哪些资源可以背什么样的角色访问，可以设置哪些资源需要具备什么样的条件才能访问

后端控制器

介绍

TFWEB的后端包括一个程序，一个模板

• 程序是一个继承自TFPage的类

• 模板基于Smarty实现

• 程序和模板一一对应

前端控制器

tfjs.js

tfjs 是TFWEB框架的前端基础库，基于jQuery实现

UI.js

介绍

UI 是TFWEB框架的前端UI基础库，根对象为 TFHomeUI，结构如下

window.TFHomeUI = {
    Classes : {

    }
};

方法示例

UI库包含一系列方法，用于展示表格，表单，列表等等

registerFormBox

注册一个表单

TFHomeUI.registerFormBox = function(formName, formDatas, formOpts){

};

loadFormBox

加载一个表单

TFHomeUI.loadFormBox = function(formName, formExName, formOpts){

    if(formExName == null) formExName = formName;

};

loadFormBoxInDialog

在对话框内加载一个表单

TFHomeUI.loadFormBoxInDialog = function(formName, formExName, formOpts){

    if(formExName == null) formExName = formName;

};

registerTableBox

注册一个表格（列表）

TFHomeUI.registerTableBox = function(tableName, tableDatas, tableOpts){

};

loadTableBox

加载一个表格（列表）

TFHomeUI.loadTableBox = function(tableName, tableExName, tableOpts){

    if(tableExName == null) tableExName = tableName;

};

加载方式

有三种方式加载我们注册好的组件

• 通过指定目标容器的selector，将组件实例放入selector对应的容器内 

TFHomeUI.loadFormBox(
    'component',
    'component',
    {
        compBoxSL : '.component-box-selector'
    }
);

• 通过指定目标容器的句柄，将组件实例放入容器内

TFHomeUI.loadFormBox(
    'component',
    'component',
    {
        compBox : $('.component-box-selector')
    }
);

• 通过回调函数，根据自己的逻辑处理组件实例

TFHomeUI.loadFormBox(
    'component',
    'component',
    {
        compBoxCB : function(o){
            $('.component-box-selector').append(o);
        }
    }
);

UI.Vue.js

介绍

UI.Vue 是TFWEB框架前端元素控制基础库，用来注册基础元素组件，使用基础元素组件

我们可以通过UI.Vue注册一些基础元素组件，并在项目当中使用它们

UI.Vue还实现了UI的表格、表单的控制实现，就是说通过Vue去实现了表格、表单的基础功能的组件

UI.Vue.Tongfu.js

介绍

UI.Vue.Tongfu 是TFWEB框架自带的一个前端组件库，包括了基本的表单元素组件、表格元素组件、布局框架组件等等

示例

html路由

我们示范一个网页路由的基础代码

目录结构参考TFWEB视图说明

class PCEntry extends TFSystemHtml
{
    public function __construct($opts)
    {
        // init
        parent::__construct($opts, "index", "index");
        
        // meta
        $this->PEO->setItem('author', '', 'Metas');
        $this->PEO->setItem('keywords', '', 'Metas');
        $this->PEO->setItem('description', '', 'Metas');
        
        // system
        $this->PEO->initLog();
        $this->PEO->initTFCache();
    }
    
    protected function prepareOP()
    {
        $myPageLoaderObj = new TFPageLoader($this->PEO, $this->smartyObj);
        $myPageLoaderObj->load();
    }
}

console路由

我们示范一个控制台路由的基础代码

目录结构参考TFWEB视图说明

class ConsoleEntry extends TFSystemConsole
{
    public function __construct($opts)
    {
        // init
        parent::__construct($opts);
        
        // system
        $this->PEO->initLog();
        $this->PEO->initTFDO();
        $this->PEO->initTFCache();
    }
    
    protected function prepareData()
    {
        $myRESTLoaderObj = new TFRESTLoader($this->PEO);
        $myRESTLoaderObj->auth(false);
        $myRESTLoaderObj->load();

        return $myRESTLoaderObj->getData();
    }
}

rest路由

我们示范一个REST路由的基础代码

目录结构参考TFWEB视图说明

class RESTEntry extends TFSystemRest
{
    public function __construct($opts)
    {
        // init
        parent::__construct($opts);
        
        // system
        $this->PEO->initLog();
        $this->PEO->initTFDO();
        $this->PEO->initTFCache();
    }
    
    protected function prepareData()
    {
        $myRESTLoaderObj = new TFRESTLoader($this->PEO);
        $myRESTLoaderObj->auth(

            // enable auth
            true,

            // rules
            array(
            
                // default auth method
                'default' => "local",

                // no default models
                'noDefaultModels' => array(
                
                ),

                // user auth methods
                'matches' => array(

                ),

                // no auth models
                'noAuthModels' => array(
                
                ),
            
            )
        );
            
        $myRESTLoaderObj->load();
        return $myRESTLoaderObj->getData();
    }
}

制作一个页面

我们建立一个页面，用来摆放页面元素

目录结构参考TFWEB视图说明

程序

程序名称为 index，后面的 Page 为固定格式

class indexPage extends TFPage
{
    public function load()
    {
    
    }
}

模板

模板内容遵循Smarty规范

<!DOCTYPE html>
<html>
    <head>
        <% $_TFPage->getHead() %>
    </head>
    <body>
        Hello world !
    </body>
</html>

制作一个表格

我们通过制作一个表格来给大家展示如何使用前端控制器

注册表格组件

TFHomeUI.registerTableBox(
    'table-sample', // 组件名称
    {
        // 表格参数设定
        info : {
            id : 'table-sample',
            list_rest_url : 'api/sample/_list', // 表格数据REST网址
            list_params : {}, // 表格数据参数列表
            cbfield : 'mId', // checkbox字段名称
            pages_visible : true, // 分页行显示控制
            actions_visible : true, // 操作列显示控制
            group_actions_visible : true, // 批量操作显示控制
        },
        
        // 表格回调函数设定
        callbacks : {
        
            // 分页行的分页信息自定义回调函数
            getPageStat : function(){
                do_resize();
                return "共有结果 "+this.pages.total+" 篇，显示从 "+this.pages.rowsbegin+" 到 "+this.pages.rowslength+"，每页显示 "+this.pages.perpage+" 篇，共分 "+this.pages.tolpage+" 页";
            },
            
            // 行数据的过滤自定义回调函数
            filterData : function(d){
                $.forEach(d.data, function(item, idx){

                });
                return d;
            }
        }
    },
    {
        // 组件构造器函数
        mounted : function(){

        },
        
        // 组件自定义函数列表
        methods : {
        
        }
    }
}

制作一个表单

我们通过制作一个表单来给大家展示如果通过前端控制器

注册表单组件

TFHomeUI.registerFormBox(
    'form-sample-add', // 组件名称
    {
        // 表单参数设定
        info: {
            method: 'post',
            action: $.U('api/sample/_add')
        },
        
        // 表单验证设定
        validators: {

        },
        
        // 表单元素设定
        elements: {
            title: {
                type: 'text',
                label: '',
                name: "title",
                placeholder: "标题",
                error: ""
            }
        }
    },
    {
        // 组件自定义函数列表
        methods : {
        
            // 处理成功回调函数
            onSuccess : function(d){
                
            },
            
            // 处理失败回调函数
            onError : function(d){
            
            }
        }
    }
);

调用一个表单

我们通过下面的代码，把定义的表单加载到一个html容器里

TFHomeUI.loadFormBox(
    'form-sample-add', // 组件名称
    'form-sample-add-ex', // 组件实例名称（可以和组件名称一样，页面内需唯一）
    {
        compBoxSL : '.form-news-new',
        data : {
            form : {
                elements : {
                    content : {
                        editorId : 'newsnew'+TFWEB.env.socialid
                    }
                }
            }
        }
    }
);

注意事项

• 注册时候的 info、validators、elements 可以在调用的时候通过 data.form.xxx 进行修改

data : {
    form : {
        info : {
            action : 'new_action'
        }
    }
}

• 通过在调用到时候的 data.form.data.xxx 可以设置表单项目默认值

data : {
    form : {
        data : {
            userName : '默认用户名称'
        }
    }
}