HMP2开发培训2-框架

前端框架

---

参考polymer

• 自定义元素 文档
• 控制器

前端架构图.png

APP （app.js）

主要功能

• app的声明
• app生命周期
• 公共数据
• 公共方法

主要方法

• stop
• start
• createModel

View视图（hpr.js/view.js/viewHelper.js）

主要功能 文档

• 视图模板
• 视图控制器
• 视图属性
• 计算属性
• 生命周期
• 局部刷新
• 视图区块
• 视图查找

主要方法

• rerender
• render
• createModel
• findView/findViews
• findForm
• findControl
• next

常用浏览器端调试方法

• View.running[viewId]获取视图控制器
• View.running[viewId].$转换成jquery对象

Model模型（model.js）

模型.png

主要功能

• 定义模型
• 统一查询
• 统一增删改
• 数据过滤
• 数据持久化
• 数据的快捷操作
• 数据同步

主要方法

• createModel （创建模型实例）
• find
• to(page)
• sort
• add
• update
• delete
• save
• destory
• offline
• each/pick/getCopyById/getByKey/getByIndex/pluck/values/first/last

常用浏览器端调试方法

• HMP.useModel获取所有注册的模型实例

Adapter适配器 （adapter.js）

连接前后端通信

适配器.png

主要功能

• post/get发送请求
• store/db的socket多终端实时同步
• 读写文件
• 图片上传
• 下载

主要方法

• pull (db/store/file/temp/cache/img)
• push (db/store/file/temp/cache/img)
• get
• post
• download

路由（router.js）

路由的组成

#guide@guide/guide/route/overview

主要功能

• 切换app和视图
• 参数 this.system.router.changingRoute.args
• 锚点

UI组件（ui.js）

三大功能组件

• 布局
• 交互
• 表单

特性

• 风格/尺寸/状态
• 属性配置
• 方法
• 事件

应用配置

目前通过zookeeper来管理配置，在前端挂在this.system.settings下，后端挂在conf下

创建配置

在app.js里

 this.defineSettings = [
        {
            key : 'platName',
            input : 'textinput',
            name : '平台名称',
            desc : '可以填写beibei或者mizhe'
        },{
            key : 'auto',
            input : 'multiform',
            inputAttrs : 'hide-name item-name="名称" item-key="name"',
            inputContent : settingInputContent,
            inputContext : {
                control : this
            },
            name : '自助查询报表',
            desc : '自助查询报表相关接口'
        }]

修改配置

zookeeper用来管理配置，前端挂在this.system.settings下，后端挂在conf下

戳这里

获取配置

this.system.settings['dc@autoMax']

服务端架构

---

略