您的位置：首页 > 编程语言 > PHP开发

搭建ThinkPHP+EasyUI+requirejs 管理框架

2016-11-14 08:32 323 查看

一、配置测试站点

二、下载 ThinkPHP3.3.3

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

[php] view
plain copy

<?php

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

// | ThinkPHP [ WE CAN DO IT JUST THINK ]

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

// | Copyright (c) 2006-2014 http://thinkphp.cn All rights reserved.

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

// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )

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

// | Author: liu21st <liu21st@gmail.com>

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

// 应用入口文件

// 检测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

[php] view
plain copy

<?php

return array(

//'配置项'=>'配置值'

// 设置禁止访问的模块列表

'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

[php] view
plain copy

<?php

namespace Admin\Controller;

use Think\Controller;

class IndexController extends Controller {

public function index(){

$this->display();

}

}

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

[html] view
plain copy

<pre name="code" class="php"><!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>后台</title>

<link id="skin" href="__EASYUI__/themes/default/easyui.css" rel="stylesheet" type="text/css" />

<link href="__EASYUI__/themes/icon.css" rel="stylesheet" type="text/css" />

<link href="__PUBLIC__/Css/App.css" rel="stylesheet" type="text/css" />

</head>

<body class="easyui-layout" >

<div region="west" split="true" title="登陆姓名【系統名称】" style="width: 265px;overflow-x:hidden">

<div style="text-align: left; float: left; height: auto; overflow: hidden">

<ul id="ul-menu" class="tab-link">

<li data-options="state:'open'"><span> 大菜单 </span>

<ul>

<li data-options="iconCls:''">

<span><a href="javascript:;" data-template="/Public/Js/Admin/Template/TestModule.html" data-js="/Public/Js/TestModule" data-method="TestMethod"> 子菜单</a></span>

</li>

</ul>

</li>

</ul>

</div>

</div>

<div region="center">

<div id="div-tabs" class="easyui-tabs" fit="true" border="false" plain="true">

<div title="工作台">

<div id="Portal-Default">

<div id="content" style="overflow-x: hidden">

<div style="width: 48%;"></div>

<div style="width: 52%;"></div>

</div>

</div>

</div>

</div>

</div>

<div region="south" id="south">

<div style="height: 22px; float: right">欢迎使用。登陆时间： {$system_time} </div>

<div class="tail-color">

<span style="background: #E0ECFF" class="default"></span>

<span style="background: #AED0EA" class="ui-cupertino"></span>

<span style="background: #b1c242" class="ui-pepper-grinder"></span>

<span style="background: #FEEEBD" class="ui-sunny"></span>

</div>

</div>

</body>

<script src="__EASYUI__/jquery.min.js"></script>

<script src="__EASYUI__/jquery.easyui.min.js"></script>

<script src="__EASYUI__/locale/easyui-lang-zh_CN.js"></script>

<script src="__EASYUI__/jquery-easyui-edatagrid/jquery.edatagrid.js"></script>

<script src="__EASYUI__/jquery-easyui-portal/jquery.portal.js"></script>

<script src="__JS__/require-2.1.11.min.js"></script>

<script src="__JS__/jsUtil.js"></script>

<script src="__PUBLIC__/Home/Index/Js/index.js" type="text/javascript"></script>

</html>

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

[javascript] view
plain copy

/// <reference path="/Js/jsUtil.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 = $('<div></div>').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 /^((\d2,3)|(\d{3}\-))?(0\d2,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

// /^((\d2,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) || /^((\d2,3)|(\d{3}\-))?(0\d2,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添加子菜单：

[html] view
plain copy

<li data-options="iconCls:''">

<span><a href="javascript:;" data-template="/Public/Js/Admin/Template/TestModule.html" data-js="/Public/Js/TestModule" data-method="TestMethod"> 子菜单</a></span>

</li>

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

[javascript] view
plain copy

define(function(){

testMethod:function(){

console.log("test");

}

});

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

[html] view
plain copy

五、运行测试

/Home/Index/index

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

[plain] view
plain copy

__ROOT__：会替换成当前网站的地址（不含域名）

__APP__：会替换成当前应用的URL地址（不含域名）

__MODULE__：会替换成当前模块的URL地址（不含域名）

__CONTROLLER__（__或者__URL__ 兼容考虑）：会替换成当前控制器的URL地址（不含域名）

__ACTION__：会替换成当前操作的URL地址（不含域名）

__SELF__：会替换成当前的页面URL

__PUBLIC__：会被替换成当前网站的公共目录通常是 /Public/

顶0

踩

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航