login.html EasyUI独有的结构模式和方法调用
主页不允许在iframe中
获取焦点样式 用户名和密码
回车登陆
login
$.post("/login/login", param, function(data);
$('#ff').submit();
location.href = "main";
ff:form的id,
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tspace</title> <link rel="icon" type="image/x-icon" href="/res/images/tspace/favicon.ico"> <link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/gray/easyui.css"> <link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/color.css"> <link rel="stylesheet" type="text/css" href="/res/css/common.css"> <link rel="stylesheet" type="text/css" href="/res/css/icon.css"> <script type="text/javascript"> var basePath = ''; var noAuthBtn = ''; var authField = ''; </script> <script type="text/javascript" src="/res/js/jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="/res/js/jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="/res/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="/res/js/common.js"></script> </head> <body style="visibility: hidden;"><link rel="stylesheet" type="text/css" href="/res/css/login.css"> <script type="text/javascript"> if (self != top) { //主页不允许在iframe中 top.window.location.reload(); } </script> <div class="crm-register-bg"> <div class="crm-register-form"> <header class="crm-login1-header"> <h1>欢迎登录tspace</h1> </header> <form id="ff" class="easyui-form" method="post" action="tspaceHead/main" data-options="novalidate:true"> <div class="crm-register-body crm-login1-body"> <div class="crm-register-input-warpper"> <input type="text" class="crm-register-input easyui-validatebox" data-options="required:true,validType:'length[2,20]'" value="tspace" name="user_name" id="user_name" placeholder="请输入用户名" tabindex="1"> </div> <div class="crm-register-input-warpper"> <input type="password" class="crm-register-input easyui-validatebox" data-options="required:true" class="crm-register-input easyui-validatebox" value="123456" name="password" id="password" placeholder="请输入密码" tabindex="1" οnfοcus=""> </div> <div class="crm-register-input-warpper" style="display: none;"> <input type="text" class="crm-register-input " data-options="required:true,validType:'length[4,4]'" name="randomCode" id="randomCode" placeholder="请输入识别码,点击图片可更换" tabindex="3"> <img id="codeImage" title="点击刷新验证码" src="login/randomCode" style="position: absolute; right: 20px; top: 4px; cursor: pointer;" οnclick="this.src = 'login/randomCode?d=' + new Date().getTime();"> </div> </div> <div class="crm-register-footer"> <a href="javascript:login();" class="pg-btn-submit dinline-block " tabindex="3" act="login_btn">登 录</a> </div> </form> <p class="crm-loginfooter-info" style=""> <a href="javascript: $('#user_name').val('readonly');" class="register_link" tabindex="6" act="reg_link">readonly</a> 登陆,体验只读权限 </p> </div> </div> <script type="text/javascript"> $(function() { //获取焦点样式 用户名和密码 $("#ff :input").focus(function() { $(this).parent().addClass("actived"); }).blur(function() { $(this).parent().removeClass("actived"); }); }); //回车登陆 document.onkeydown = function() { if(event.keyCode==13) { login(); return false; } } function login() { if($("#ff").form('enableValidation').form('validate')) { var param = {"user_name":$(":input[name='user_name']").val(), "password":$(":input[name='password']").val(), "randomCode":$(":input[name='randomCode']").val() } $.post("/login/login", param, function(data) { if(data.result == "success") { $('#ff').submit(); location.href = "main"; }else { if(data.data) { $("#randomCode").parent().show(); $("#randomCode").validatebox({ required: true }); } showWarnMsg(data.msg); $("#codeImage").click(); } }); } } </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?96bb51056dd3bece3de02a351f072069"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>
点击登录后的操作。
post和后台进行数据交互,跳转页面main.html
嵌入了index.html.
//主页不允许在iframe中
//修改密码
οnclick='updatePassword()'>修改密码</div>
οnclick="location.href='${basePath}/login/logout'">退出</div>
<div title="首页">
<iframe src="${basePath}/tspace/index/index.html" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>
</div>
<a id="fullScreen" href="###" class="easyui-linkbutton" plain="true" iconCls="glyphicon-fullscreen" οnclick="fullScreen(this)"></a>
<script type="text/javascript" src="${basePath}/res/js/menu.js"></script>
<#include "/common/head.html"/>
<script type="text/javascript" src="${basePath}/res/js/menu.js"></script> <script type="text/javascript"> if (self != top) { //主页不允许在iframe中 top.window.location.reload(); } //修改密码 function updatePassword() { top.window.subPage.loadCurrDatagrid = function() { showMsg("密码修改成功!"); } top.openWindow("修改密码", "user/updatePasswordPage", {size: '500x350'}); } </script> <style type="text/css"> .head{background: #09C; font-size: 14px; color: white; height: 50px; line-height: 50px; padding: 0px 8px; overflow: hidden;} .head table{border-spacing: 0px; width: 100%;} .head table,tr,td,th{padding: 0px;} .head .rtool a{color: white;} .head .rtool a.l-btn-plain:hover{color: black;} .head .rtool a.l-btn-plain.m-btn-plain-active{color: black;} .easyui-tabs .tabs{border-color: #A5C4EF;} .easyui-tabs .tabs li a.tabs-inner{border-radius: 2px 2px 0 0;} .tree-node {padding: 8px 0px;} .tree-node-hover{background: #465467; color: white;} .tree-node-selected{background: #0099cc; color: white;} .tree-node .tree-title{font-size: 13px; font-weight: normal; color: #fff; } .left{background-color: #424f63;} .menu_head{height: 30px;line-height: 30px;background: #4e5f77;color: #aeb9c2;text-align: center;} .layout-expand-north, .layout-expand-west{height: 0px;} .tree-expanded{ background: url('${basePath}/res/css/images/tree_icons_main.png') no-repeat -18px 0px; } .tree-collapsed { background: url('${basePath}/res/css/images/tree_icons_main.png') no-repeat 0px 0px; } .tree-icon { color: #BFBFBF; font-size: 12px; line-height: 18px; } </style> <div id="layout" class="easyui-layout" data-options="fit:true, border:false"> <div data-options="region:'north',border:false, collapsedSize:0" style="height:50px;"> <div class="head"><table><tr> <td width="50%" style="font-size: 14px;">tspace 快速开发平台</td> <td width="50%" align="right" style="font-size: 12px;"> <div class="easyui-panel rtool" data-options="border:false" style="text-align: right; background: #09C; color: white; margin-top: -1px;"> <a href="#" class="easyui-menubutton" data-options="menu:'#mm1'"><#if session['sysUser']??>${session['sysUser'].user_name}<#else>未登陆</#if></a> </div> <div id="mm1" style="width:150px;"> <div data-options="iconCls:'icon-edit'" οnclick='updatePassword()'>修改密码</div> <div class="menu-sep"></div> <div data-options="iconCls:'icon-undo'" οnclick="location.href='${basePath}/login/logout'">退出</div> </div> </td> </tr></table></div> </div> <div id="west" class="scrollbar" data-options="region:'west',split:true, border:false, collapsedSize:0" style="width:200px;background-color: #424f63;color:white"> <div class="zsy_menu"> <div class="menu_head">菜单导航</div> <ul id="menuTree"></ul> </div> </div> <div data-options="region:'center', border:false"> <div id="mainTabs" style="height:250px"> <div title="首页"> <iframe src="${basePath}/tspace/index/index.html" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe> </div> </div> </div> </div> <div id="tabsMenu"> <div data-options="iconCls:'glyphicon-refresh'" type="refresh" style="font-size: 12px;">刷新</div> <div class="menu-sep"></div> <div data-options="iconCls:'glyphicon-remove'" type="close" style="font-size: 12px;">关闭</div> <div data-options="iconCls:''" type="closeOther">关闭其他</div> <div data-options="iconCls:''" type="closeAll">关闭所有</div> </div> <div id="tabTools" style="border: 0px; border-bottom: 1px solid #D3D3D3;"> <a id="fullScreen" href="###" class="easyui-linkbutton" plain="true" iconCls="glyphicon-fullscreen" οnclick="fullScreen(this)"></a> </div> <#include "/common/dialogWindow.html"/> <#include "/common/foot.html"/>
index.html. ------主要功能:设置模块的隐藏和展示。
引入了common.js中的方法;
var subPage = {}; //用于弹窗,如增删改查页面 var popup = {}; //用于弹层 $(function() { //去掉加载页面时,遮挡的div $("body").css("visibility", "visible"); //设置元素的可见性 //回车刷新 if(!/login$/.test(location.href) && !/main/.test(location.href) && window.datagrid && $(".pagination-num:focus").length == 0) { document.onkeydown = function() { if(event.keyCode==13) { if(window.tspaceSearch) { tspaceSearch(); } return true; } } } //列表页面,如果没有搜索条件,则隐藏搜索按钮 if($("#tb .wrap_search .search_item").size() == 0) { $("#tb #searchBtnWrap").hide(); } }); function log(obj) { if(console) { console.log(obj); } } /** * 显示消息 */ function showMsg(msg) { top.window.$.messager.show({ title: '消息', msg:'<div style="padding-top: 10px;">' + msg||"消息内容!" + '</div>', timeout: 3000, showType: 'slide' }); } /** * 显示警告消息 */ function showWarnMsg(msg) { top.window.$.messager.show({ title: '错误消息', msg: '<div class="messager-icon messager-warning"></div><div style="padding-top: 10px;">' + (msg || "消息内容!") + "</div>", timeout: 3000, showType: 'slide' }); } /** * 确认消息 */ function confirmMsg(msg, successFunc){ top.window.$.messager.confirm('请确认', '<div style="padding-top: 10px;">' + (msg || 'Are you confirm this?') + "</div>", function(r){ if(r) { if($.isFunction(successFunc)) { successFunc(); } } }); } /** * 打开弹出窗 * @param title 标题 * @param url iframe地址 * @param options 可选参数 */ function openWindow(title, url, options) { options = options || {}; if(options.size && options.size.indexOf("x") >= 0) { options.width = options.size.split("x")[0]; options.height = options.size.split("x")[1]; } $("#dialogWindow iframe").attr("src", url); $("#dialogWindow").window({ closed:false, modal:true, title: title || '增加', width: options.width || 700, height: options.height || 450, onClose: function() { $("#dialogWindow iframe").removeAttr("src"); //关闭popup try { $("#popupWindow").window("close"); } catch(err) { //没有弹层 } } }); $("#dialogWindow").window("center"); } /** * 打开一个弹层,用于选择一些信息(如城市等) * @param ipt 需要弹层的input或其它元素 * @param title 弹层标题 * @param url 页面ulr * @param options 其它参数(参考easyui-window) */ function openPopup(ipt, title, url, options) { ipt = $(ipt); popup.ipt = ipt; var os1 = $("#dialogWindow").offset(); var os2 = ipt.offset(); if(!url || popup.currUrl != url) { $("#popupWindow iframe").attr("src", url); } if(!options) { options = {}; } options.title = title || "popup"; options.top = os1.top + os2.top + ipt.outerHeight(); options.left = os1.left + os2.left; options.onClose = function() { //回调关闭事件 if(top.window.popup.close) { top.window.popup.close(); } } //回调显示事件 if(top.window.popup.show) { top.window.popup.show(); } $("#popupWindow").window(options); popup.currUrl = url; } /** * 关闭弹层 **/ function closePopup() { $("#popupWindow").window("close"); } /** * 关闭弹出窗口 */ function closeWindow() { $("#dialogWindow").window("close"); } /** * 刷新页面 */ function flushPage() { location.replace(location); } /** * 根据对象属性从集合中获得对象 * @param list * @param attrName * @param attrValue * @returns 匹配到的第一个对象 */ function getObjFromList(list, attrName, attrValue) { if($.isArray(list)) { for (var i = 0; i < list.length; i++) { var item = list[i]; if(item[attrName] == attrValue) { return item; } } } return null; } function getInputValue(inputName) { var inputObj = $(":input[name='" + inputName + "']"); var result = ""; if(inputObj.attr("type") == "file") { result = $("#" + inputName).attr("data"); //如果文件,从文件的显示框架读取 }else { inputObj.each(function(i, item) { result += "," + $(item).val(); }); } return result.replace(",", ""); } /** * 如:当前页面为stockHistoryLog/listPage,则getCurrUrl(addPage)返回stockHistoryLog/addPage */ function getCurrUrl(method) { return window.location.pathname.replace(/\w+$/, method); } /** * 使combobox变为多选 * @param inputIds 单个id或者数组 */ function changeComboboxToMult(inputIds) { if(!$.isArray(inputIds)) { inputIds = [inputIds]; } $.each(inputIds, function(i, item) { var iptObj = $("#" + item); iptObj. combobox({multiple:true}); }); } //扩展easyui-datagrid的edit模式 $.extend($.fn.datagrid.defaults.editors, { //支持checkbox checkbox: { init: function(container, options){ var align = "center"; if(options && options.align) { align = options.align; } container.attr("align", align); var input = $('<input type="checkbox" class="datagrid-editable-checkbox">').appendTo(container); return input; }, destroy: function(target){ $(target).remove(); }, getValue: function(target){ return $(target).is(":checked") ? 1 : 0; }, setValue: function(target, value){ if(value == 1) { $(target).click(); } }, resize: function(target, width){ //$(target)._outerWidth(width); } } }); //全局ajax事件处理 $(window).ajaxError(function(handler){ showWarnMsg("操作失败,服务器出现错误!"); }); $(window).ajaxSuccess(function(evt, request, settings){ var s = request.responseText; if(s && s.indexOf('{"result":"fail"') != -1) { eval("result = " + s); showWarnMsg(result.msg); } }); //删除页面没有权限的按钮 $(function() { if(noAuthBtn) { $.each(noAuthBtn.split(","), function(i, item) { $("." + item).remove(); }); } }); /** * 处理页面没有【数据权限】的按钮 */ function handleAuthDataRule() { if(authField) { $.each(authField.split(","), function(i, item) { //$("#" + item + ",#_start_" + item + ",#_end_" + item).textbox({disabled:true}); $("#" + item + ",#_start_" + item + ",#_end_" + item).parents(".search_item:first").remove(); }); } } //extend the 'equals' rule $.extend($.fn.validatebox.defaults.rules, { equals: { validator: function(value,param){ return value == $(param[0]).val(); }, message: '两次输入不一致.' } }); /** * 上传文件,用于easyui-filebox异步上传 * @param fileIptId 文件输入框id */ function uploadFile(fileIptId) { if(window.FormData) { var fileObj = $(":input[name='" + fileIptId + "']"); var files = fileObj.get(0).files; var imgObj = $("#" + fileIptId + "Img"); $("#" + fileIptId).attr("data", ""); if(files.length > 0) { if(files[0].size / 1024 / 1025 > 5) { showWarnMsg("上传图片不能大于5M"); return; } var formData = new FormData(); // 建立一个upload表单项,值为上传的文件 formData.append('upload', fileObj.get(0).files[0]); var xhr = new XMLHttpRequest(); xhr.open('POST', basePath + "/common/uploadFile"); // 定义上传完成后的回调函数 xhr.onload = function () { if (xhr.status === 200) { $("#" + fileIptId).attr("data", xhr.response); //显示图片 imgObj.attr("src", basePath + xhr.response).parent().show(); } else { showWarnMsg("上传图片失败") } } xhr.send(formData); }else { //隐藏图片 imgObj.attr("src", "").parent().hide(); } }else { alert("该浏览器不支持文件上传,请用chrome或firefox浏览器~"); } } /** * 格式化图片(用于datagrid) * @param url */ function formatterDgImage(url) { return url ? "<img class='dg_img' src='" + basePath + url + "' />" : ""; }
<script type="text/javascript" src="${basePath}/res/js/menu.js"></script>
menu.js的加载
$(function() { //加载菜单 左侧menu菜单 loadTree(); //选项卡 window.mainTabs = $('#mainTabs').tabs({ fit : true, border : false, tools : "#tabTools", onContextMenu : function(e, title) { e.preventDefault(); tabsMenu.menu('show', { left : e.pageX, top : e.pageY }).data('tabTitle', title); } }); // 选项卡菜单 window.tabsMenu = $('#tabsMenu').menu({ onClick : function(item) { var curTabTitle = $(this).data('tabTitle'); var type = $(item.target).attr('type'); if (type === 'refresh') { var iframe = mainTabs.tabs('getSelected').panel('panel').find('iframe'); iframe.attr("src", iframe.attr("src")); return; } if (type === 'close') { var t = mainTabs.tabs('getTab', curTabTitle); if (t.panel('options').closable) { mainTabs.tabs('close', curTabTitle); } return; } var allTabs = mainTabs.tabs('tabs'); var closeTabsTitle = []; $.each(allTabs, function() { var opt = $(this).panel('options'); if (opt.closable && opt.title != curTabTitle && type === 'closeOther') { closeTabsTitle.push(opt.title); } else if (opt.closable && type === 'closeAll') { closeTabsTitle.push(opt.title); } }); for ( var i = 0; i < closeTabsTitle.length; i++) { mainTabs.tabs('close', closeTabsTitle[i]); } } }); }); /** * 加载菜单 */ function loadTree() { $.post(basePath + "/login/getMenu", function(data) { var menulist = []; $.each(data, function(i, item) { menulist.push({ id: item.id, text: item.menu_name, attributes: basePath + item.menu_url, parent_id: item.parent_id, iconCls: item.icon }); }); for(var i = 0; i < menulist.length; i++) { var children = menulist[i].children || []; for(var j = 0; j < menulist.length; j++) { if(menulist[j].parent_id == menulist[i].id) { children.push(menulist[j]); } } menulist[i].children = children; } var treeData = []; $.each(menulist, function(i, item) { if(item.parent_id == 0) { treeData.push(item); } }); $("#menuTree").tree({ data: treeData, onBeforeSelect: treeBeforeSelect, onSelect: treeSelect }); }); } /** * 菜单事件 */ function treeBeforeSelect(node) { if(node.children && node.children.length > 0) { if(node.state == "open") { $(this).tree("collapse", node.target); }else { $(this).tree("expand", node.target); } return false; } } /** * 菜单事件 */ function treeSelect(node) { addMainTab(node.text, node.attributes); } /** * 增加一个主窗口 */ function addMainTab(text, url) { if(!mainTabs.tabs("exists", text)) { mainTabs.tabs('add',{ title: text, content:'<iframe src="' + url + '" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>', closable:true }); }else { mainTabs.tabs("select", text); //刷新 mainTabs.tabs('getSelected').panel('panel').find('iframe').attr("src", url) } } /** * 全屏 */ function fullScreen() { if($("#fullScreen").find(".glyphicon-screenshot").length > 0) { $("#layout").layout('expand', 'west').layout('expand', 'north'); $("#fullScreen").find(".l-btn-icon").addClass("glyphicon-fullscreen").removeClass("glyphicon-screenshot"); }else { $("#layout").layout('collapse', 'north').layout('collapse', 'west'); $("#fullScreen").find(".l-btn-icon").addClass("glyphicon-screenshot").removeClass("glyphicon-fullscreen"); $(".layout-expand").hide(); } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tspace</title> <style type="text/css"> body {font-family: Arial, Helvetica, sans-serif; line-height: 30px; color: #2f8ec7;} h2, .color1 {color: orange;} .zhichi {border: 2px solid orange; padding: 2px; font-size: 22px; width: 30px; height: 30px; line-height: 30px; border-radius: 30px; text-align: center; cursor: pointer; position: fixed; bottom: 50px; right: 50px;} </style> </head> <body> <p>tspace是一个通用的后台管理系统,有完善的用户、菜单和权限管理。且提供了一套快速的表单管理的开发方案。<br>简单业务可以通过 [表单配置] 快速生成,特定业务通过代码生成,完成具体业务。tspace能够大大提高开发效率,节省更多时间去陪家人朋友,做自己喜欢的事情。</p> <div> <h2>tspace的特点</h2> <ol> <li>强大的表单配置功能,无需编写代码即可生成表单管理页面,快速搞定简单业务。</li> <li>简单易用的代码生成,能够把通过表单配置生成的页面生成代码,提搞特定业务开发效率。</li> <li>完善的权限控制,能够控制到菜单、按钮和数据权限,做到这些只需要在页面上进行配置。</li> <li>采用jfinal+easyui开发,没有其它繁杂技术,项目简洁明了,方便二次开发。</li> <li>ui布局整洁精致,支持chrome,firefox,safari,ie8+ 等常用浏览器</li> </ol> <div> <span class="color1">QQ群交流群:</span>497019074</div> <div> <span class="color1">项目GIT地址:</span>https://git.oschina.net/515097842/tspace</div> </div> <div id="block_zczz" style="display: none;"> <h2>支持作者</h2> <div>项目的发展离不开你的支持,赞助作者买服务器或加个餐吧。</div> <img src="../../res/images/tspace/wxzfb.png" width="400px;" /> <div>微信ID:z2872332</div> </div> <div class="zhichi" οnclick="zhichi()">+</div> <script type="text/javascript"> function zhichi() { var d = document.getElementById("block_zczz"); if(d.style.display == "none") { d.style.display = "block"; }else { d.style.display = "none"; } } </script> </body> </html>