搭建ThinkPHP+EasyUI+requirejs 管理框架

一、配置测试站点

二、下载 ThinkPHP3.3.3

解压到站点根目录。index.php初始内容：

// +----------------------------------------------------------------------

// 应用入口文件

// 检测PHP环境
if(version_compare(PHP_VERSION,'5.3.0','<'))  die('require PHP > 5.3.0 !');

// 开启调试模式 建议开发阶段开启 部署阶段注释或者设为false
define('APP_DEBUG',True);
//生成Home
define('BIND_MODULE','Home');
//common模块
define('COMMON_PATH','./Application/Common');
// 定义应用目录
define('APP_PATH','./Application/');

// 引入ThinkPHP入口文件
require './ThinkPHP/ThinkPHP.php';

// 亲^_^ 后面不需要任何代码了 就是如此简单

在浏览器输入：http://localhost/index.php

代码会自动生成Application下Home目录，然后注释掉define('BIND_MODULE','Home');

三、下载 EasyUI、require.js，拷贝到Js/EasyUI

目录结构大概是这样的：

四、新建主体窗口框架

/Application/CommonConf/config.php

'配置值'
		
		// 设置禁止访问的模块列表
		'MODULE_DENY_LIST' => array (
				'Common',
				'CommonConf',
				'Runtime'
		),
		'TMPL_PARSE_STRING' => array (
				'__JS__' => '/Public/JS', 		// 增加新的JS类库路径替换规则
				'__CSS__' => '/Public/Css', 	// 增加新的上传路径替换规则
				'__EASYUI__' => '/Public/Js/jquery-easyui-1.4.1',
				'__ADMIN__' => '/Public/Js/Admin'
		),
		'TMPL_ENGINE_TYPE' =>'PHP'
);

/Application/Home/Controller/IndexController.class.php

display();
    }
}

建立模板页 /Application/Home/View/Index/index.html

    
    
    
    
    


	


		

			

				
 大菜单 
					

						

							 子菜单
						
					
				
			
		
	
	

		

			

				

					

						

						

					
				
			
		
	
	

		
欢迎使用。登陆时间： {$system_time} 
		

			 
			 
			 
			 
		
	










 
   
 
   
 在Public/Home/Index/Js/建立index.js，内容： 
  

///  
/**
 * 
 */
(function() {
	var arg0, arg1;
	// 菜单
	$(document).on("click", ".jsFunc", function() {
		var _win_ = $(this).attr("win");
		var _arg0_ = $(this).attr("arg0");
		var _arg1_ = $(this).attr("arg1");
		popMenu(_win_, _arg0_, _arg1_);
	});
	
	function popMenu(_win_, _arg0_, _arg1_) {
		var _path = _win_; // js路径
		var _winName = _path.replaceAll("/", ""); // 窗口名,就是无/的路径

		arg0 = _arg0_;
		arg1 = _arg1_;
		var isRoot = (_path.indexOf("/") == 0);
		if (isRoot)
			_path = _path.substring(1, _path.length); // 去掉路径开头的/
		if ($("#" + _winName).height() == null) {
			$.getScript((isRoot ? "/" : "Js/") + _path + ".js?r="
					+ Math.random());
		} else
			$("#" + _winName).dialog("open");
	}

	var StateKeys = {
		Normal : 'Normal',
		Stop : 'Stop',
		Delete : 'Delete',
		Already : 'Already',
		Duplicate : 'Duplicate'
	};
	var ServiceStateKeys = {
		TimeOut : 'TimeOut',
		Success : 'Success',
		Fail : 'Fail',
		NoPermiss : 'NoPermiss',
		Exists : 'Exists',
		NotExists : 'NotExists',
		InUse : 'InUse',
		NotInUse : 'NotInUse'
	}
	var OnLineState = {
		OnLine : 'OnLine',
		Leave : 'Leave',
		OffLine : 'OffLine'
	};
	var X_WFSTATE = [ "待办", "完成", "终止", "删除", "未通过" ];// "结束", "终止", "删除"];
	// 标准宽度
	var X_WIDTH = {
		Depart : 90,
		UserName : 55,
		Ip : 100,
		Time : 90,
		Building : 100,
		Sex : 30,
		Tel : 140,
		HardStr : 185,
		CheckStr : 185,
		Bool : 20,
		State : 30,
		Title : 300
	};
	
	/// 皮肤
	// 从cookie加载皮肤
	var _skin = GetCookie("XSKIN");
	if (_skin) {
		loadSkin(_skin);
	}

	$(".tail-color span").click(function() {
		var _skin = $(this).attr("class");
		if (_skin) {
			SetCookie("XSKIN", _skin);
			loadSkin(_skin);
		}
	});
	function loadSkin(path) {
		$("#skin").attr("href","/Public/Js/jquery-easyui-1.4.1/themes/{0}/easyui.css".format(path));
	}
	///皮肤代码结束

	// 菜单
	$('#ul-menu').tree({
		lines : true,
		animate : true
	});

	/// tab 代码
	$(".tab-link").on("click", "a", function() {
		
		if ($(this).attr("data-template")) addTab($(this));
	});

	$('#div-tabs').tabs({});
	
	if ($('#content').length) {
		$('#content').portal({});
	}
	// /plugin1,有text()，并且有path属性,jquery对象，一般用a标签
	function addTab(plugin) {
		if ($('#div-tabs').tabs('exists', plugin.text().trim())) {
			$('#div-tabs').tabs('select', plugin.text().trim());
		} else {
			$('#div-tabs').tabs('add',{
				title : plugin.text().trim(),
				href : plugin.attr("data-template") ,
				closable : true,
				extractor : function(data) {
					data = $.fn.panel.defaults.extractor(data);
					var tmp = $('
').html(data);
					data = tmp.html();
					tmp.remove();
					return data;
				},
				onLoad : function(panel) {
					
				}
			});
		}
	}
	/// tab 结束
	

	// 退出
	$("#link-logout").click(function() {
		$.messager.progress({
			title : '提示信息',
			msg : '正在退出登陆'
		});
		$.post("RBAC/Services/RBAC_Users.asmx/Logout", function(v) {
			$.messager.progress("close");
			switch ($(v).find("boolean").text()) {
			case "true":
				location.href = "/";
				break;
			}
		});
	});

	// 渲染用户控件，全是xclass-模块-功能
	function renderUserControls(target) {

	}

	function StateStrToJsonStr(v) {
		var str = styleHouseState(v);
		if (!str)
			return '{}';
		var arr = str.split(';');
		var result = "";
		for (var _j = 0; _j < arr.length; _j++) {
			var tempArr = arr[_j].split(':');
			if (result != "")
				result += ",";
			result += '"' + tempArr[0] + '":"' + tempArr[1] + '"';
		}
		result = '{' + result + '}';
		return result;
	}
	// easyui扩展
	$.extend($.fn.validatebox.defaults.rules,{
				minLength : {
					validator : function(value, param) {
						return value.length >= param[0];
					},
					message : '长度至少 {0} '
				},
				phone : {// 验证电话号码
					validator : function(value) {
						return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i
								.test(value);
					},
					message : '格式不正确,请使用下面格式:010-88888888'
				},
				mobile : {
					validator : function(value, param) {
						// return
						// /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/.test(value);
						return /^1[3|4|5|8][0-9]\d{8}$/.test(value);
					},
					message : '手机号码不正确'
				},
				phoneOrMobile : {
					validator : function(value, param) {
						return (/^1[3|4|5|8|7][0-9]\d{8}$/.test(value) || /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i
								.test(value));
					},
					message : '号码不正确'
				},
				CHS : {
					validator : function(value, param) {
						return /^[\u4e00-\u9fa5]+$/.test(value);
					},
					message : '请输入汉字'
				},
				safepass : {
					validator : function(value, param) {
						return safePassword(value);
					},
					message : '密码由字母和数字组成，至少6位'
				},
				number : {
					validator : function(value, param) {
						return /^[\+\-]?\d*?\.?\d*?$/.test(value);
					},
					message : '请输入数字'
				},
				equalTo : {
					validator : function(value, param) {
						return value == $(param[0]).val();
					},
					message : '两次输入的字符不一至'
				},
				IDNUMBER : {
					validator : function(value, param) {
						return /^(\d{18,18}|\d{15,15}|\d{17,17}[xX]?)$/
								.test(value);
					},
					message : '请输入正确的身份证号'
				},
				mustSelect : {
					validator : function(value, param) {
						return value != "-1";
					},
					message : '必需选择值'
				}
			});

	var safePassword = function(value) {
		return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/
				.test(value));
	}

	function SystemGetString(module, key) {
		var _result;
		$.ajax({
			url : "SystemSet/Services/SystemSet.asmx/SystemGetString",
			data : {
				module : module,
				key : key
			},
			async : false,
			success : function(v) {
				_result = $(v).find("string").text();
			}
		});
		return _result;
	}

	function SystemGetBool(module, key) {
		var _result;
		$.ajax({
			url : "SystemSet/Services/SystemSet.asmx/SystemGetBool",
			data : {
				module : module,
				key : key
			},
			async : false,
			success : function(v) {
				_result = $(v).find("boolean").text() == "true";
			}
		});
		return _result;
	}

	function SystemGetInt(module, key) {
		var _result;
		$.ajax({
			url : "SystemSet/Services/SystemSet.asmx/SystemGetInt",
			data : {
				module : module,
				key : key
			},
			async : false,
			success : function(v) {
				_result = parseInt($(v).find("int").text());
			}
		});
		return _result;
	}
	function CheckLimit(ResourceName, OperationName) {
		for ( var limit in X_SELFOPERATIONS) {
			if (X_SELFOPERATIONS[limit].ResourceName == ResourceName
					&& X_SELFOPERATIONS[limit].OperationName == OperationName)
				return X_SELFOPERATIONS[limit].Value;
		}
		return false;
	}
	// /给combobox赋值,适用于ajax自动提示的
	function setComboboxValue(name, namespace, text, value) {
		var c1, c3;
		if (namespace) {
			c1 = $(".combo-f[comboname=" + name + "]", "#" + namespace);
			c3 = $(".combo-value[name=" + name + "]", "#" + namespace);
		} else {
			c1 = $(".combo-f[comboname=" + name + "]");
			c3 = $(".combo-value[name=" + name + "]");
		}

		var c2 = c3.prev().prev();
		c1.val(value);
		c2.val(text);
		c3.val(value);
	}
	function setSpinnerValue(name, namespace, value) {
		var c1 = $(":hidden[name=" + name + "]", "#" + namespace);
		var c2 = c1.prev();
		c1.val(value);
		c2.val(value);
	}
	function loadFilter(data) {
		if (!data.d) {
			data.d = {
				Table : {}
			};
		}
		if (!data.d.Table)
			data.d.Table = {};
		if (data.d.Total)
			data.d.Table.total = data.d.Total;
		else
			data.d.Table.total = 0;
		if (!data.d.Table.rows)
			data.d.Table.rows = [];
		return data.d.Table;
	}

	var oldHTML = $.fn.html;
	$.fn.formhtml = function() {
		if (arguments.length)
			return oldHTML.apply(this, arguments);
		$("input,textarea,button", this).each(function() {
			this.setAttribute('value', this.value);
		});
		$(":radio,:checkbox", this).each(function() {
			// im not really even sure you need to do this for "checked"
			// but what the heck, better safe than sorry
			if (this.checked)
				this.setAttribute('checked', 'checked');
			else
				this.removeAttribute('checked');
		});
		$("option", this).each(function() {
			// also not sure, but, better safe...
			if (this.selected)
				this.setAttribute('selected', 'selected');
			else
				this.removeAttribute('selected');
		});
		return oldHTML.apply(this);
	};
})();

以后增加框架时，在index.html添加子菜单：

     子菜单

在Public/Home/Index/Js/下新增模块：TestModule.js

define(function(){
	testMethod:function(){
		console.log("test");
	}
});

在Public/Home/Templates下新增模板：TestModule.html

模板

五、运行测试

/Home/Index/index

六、参考信息，模板变量：

__ROOT__： 会替换成当前网站的地址（不含域名） 
__APP__： 会替换成当前应用的URL地址 （不含域名）
__MODULE__：会替换成当前模块的URL地址 （不含域名）
__CONTROLLER__（__或者__URL__ 兼容考虑）： 会替换成当前控制器的URL地址（不含域名）
__ACTION__：会替换成当前操作的URL地址 （不含域名）
__SELF__： 会替换成当前的页面URL
__PUBLIC__：会被替换成当前网站的公共目录 通常是 /Public/