新版管理后台框架调整说明文档

发表于 | 分类于 | 评论数： | 阅读次数：

新版管理后台主要以Twitter的Bootstrap框架为基础，结合MVVM框架avalonJS，实现模块化，组件化，频道单页，数据双向绑定等功能。此次框架的改进主要有以几点作用：

  • 使用界面更加标准美观，提供较佳的用户体验
  • 减少UI设计师与前端在UI界面上的工作量
  • 利用UI组件快速构建页面，提升开发效率
  • 让前端更专注于接口调试，业务和数据处理，减少数据错误率。

更新日期：2016年02月18日
维护：Aitter
版本：v1.0.0

UI框架

UI框架使用Bootstrap的改进版 UBOLD

qk.common.css

公共组件库相关样式

- bootstrap.min.css 源主框架样式库
- core.min.css 框架自定义样式库
- dialog.css 弹出层样式
- toastr.css 消息框样式
- uiLoading.css 加载指示器样式
- select2.css 下拉框样式

JS框架

avalon.js

MVVM框架 主文件

qk.config.js

AMD加载配置 与 全局变量配置文件

qk.common.js

公共组件库(依赖于 jquery)

1. dialog 对话框
2. toastr 消息提示
3. uiLoading 加载提示
4. artTemplate 模板
5. bootstrap 框架基础组件
6. pagination 分页组件
7. select2 下拉组件
8. core.js 框架初始化相关

qk.utils.js

工具库(依赖于 qk.common.js)

- Utils 工具库
- Filters 框架过滤器
- Components Config 组件的全局配置

使用方式

频道页中引用如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理平台</title>
<link href="http://static.qiakr.com/source/qk.common.min.css" rel="stylesheet" type="text/css" />
<body>
	<div id="wrapper" ms-controller="rootCtr"> <!-- Your Code --> </div>

<script src="../js/avalon.min.js"></script>
<script src="../js/qk.config.js"></script>
<script>
    require(['./pro/main'],function(main){
        main.init();
    })
</script>
</body>
</html>

main.js 页面主模块中的示例代码

/**
 * [频道 主模块]
 */
define(['utils','mmRouter'],function(){
	var mainVM;

	mainVM = avalon.define({
		$id: "rootCtr",
	  oldPage: '',
	  currPage: 'childPage',
	  subPage:'',
	  params: {}, //Url参数
	  renderedFn: function(){
	      if(mainVM.$model.oldPage!= mainVM.$model.currPage ){
	        mainVM.$model.oldPage = mainVM.$model.currPage;

	        // 加载相应的模块
	        require(['./qiakr/'+mainVM.$model.currPage], function(pageModel){
	            pageModel && pageModel['init'] && pageModel['init']();
	        });

	        //选中对应的菜单
	        // $('#sidebar-menu').find('[href*='+mainVM.$model.currPage+']').addClass('click');
	      }
	  }
	});

	var p_main = {
		init:function(){
			toastr.success('引用成功！');
			this.initRouter();
		},
		initRouter:function(){
			function callback() {
		    this.params.page && (mainVM.currPage = this.params.page);
		    mainVM.params = this.query;
		    mainVM.subPage = this.query.subPage || '';
			}
			avalon.router.get('/:page', callback);
			avalon.history.start({ basepath: "/"});
			avalon.scan();
		}
	};


	return {
		init:function(){
			p_main.init();
		}
	}
});

注意

  • 如果是单页则引用 mmRouter 模块，并在mainVM中添加renderFn函数，p_main中初始化路由
  • 模块必须返回一个init函数

子频道 childPage.html 代码示例

<h2>
	子频道A 页面
</h2>

子频道 childPage.js 模块示例

/**
 * [账务结算 模块]
 */
define(['domReady!'],function(){
	var childVM;

	var p_child = {
		init:function(){
			console.log('子频道A init!');
		}
	}

	return {
		init:function(){
			p_child.init();
		}
	}
});