Java前臺模擬後臺數據

今天分享的是Java前臺模擬後臺數據。適用場景也就是當前臺開發時候，如果遇到調用後臺的數據還沒寫好。我們可以用這個方法先模擬一些數據。
首先是按照我們所要的數據格式寫一套數據。示例如下：

// JavaScript Document  DemoData
var demoData = {
    roleList: [
        { "role.name": "檔案管理員", "role.description": "管理檔案"},
        { "role.name": "系統管理員", "role.description": "管理系統"},
        { "role.name": "部門經理", "role.description": ""},
        { "role.name": "副總經理", "role.description": ""},
        { "role.name": "財務經理", "role.description": ""},
        { "role.name": "總經理", "role.description": ""}
    ],
    departmentList:[
        { "department.name": "總經理室", "department.parent.name": "", "department.description": ""},
        { "department.name": "市場部", "department.parent.name": "", "department.description": ""},
        { "department.name": "OA產品部", "department.parent.name": "", "department.description": ""},
        { "department.name": "售服部", "department.parent.name": "", "department.description": ""}
    ],
    departmentList2:[
        { "department.name": "研發部", "department.parent.name": "OA產品部", "department.description": ""},
        { "department.name": "市場部", "department.parent.name": "OA產品部", "department.description": ""},
        { "department.name": "售服部", "department.parent.name": "OA產品部", "department.description": ""}
    ],
    userList:[
        { "user.loginName": "zs", "user.name": "張三", "user.department": "研發部", "user.roles": "程序員", "user.description": "" },
        { "user.loginName": "ls", "user.name": "李四", "user.department": "研發部", "user.roles": "程序員", "user.description": "" },
        { "user.loginName": "ww", "user.name": "王五", "user.department": "測試部", "user.roles": "測試員", "user.description": "" }
    ], 
    menuList:[
        { "menu.name": "系統設置", "menu.prefix": "", "menu.icon": "FUNC20082.gif", "menu.url": "", "menu.description": "" },
            { "menu.name": "部門管理", "menu.prefix": "　　", "menu.icon": "menu_arrow_single.gif", "menu.url": "/DepartmentAction.do", "menu.description": "" }
        { "menu.name": "審批流轉", "menu.prefix": "", "menu.icon": "FUNC20057.gif", "menu.url": "", "menu.description": "" },
            { "menu.name": "起草申請", "menu.prefix": "　　", "menu.icon": "menu_arrow_single.gif", "menu.url": "/DocumentAction.do?method=list", "menu.description": "" },
            { "menu.name": "待我審批", "menu.prefix": "　　", "menu.icon": "menu_arrow_single.gif", "menu.url": "/DocumentAction.do?method=myTaskList", "menu.description": "" },
            { "menu.name": "表單模板管理", "menu.prefix": "　　", "menu.icon": "menu_arrow_single.gif", "menu.url": "/DocumentTemplateAction.do", "menu.description": "" },
            { "menu.name": "審批流程管理", "menu.prefix": "　　", "menu.icon": "menu_arrow_single.gif", "menu.url": "/ProcessAction.do", "menu.description": "" }
    ], 
    formTemplateList:[
        { "formTemplate.name": "請假申請單" },
        { "formTemplate.name": "工程款申請單" },
        { "formTemplate.name": "費用報銷單" },
        { "formTemplate.name": "差旅費報銷單" },
        { "formTemplate.name": "借支單" }
    ],
    messageList:[
        { "message.priority": "！", "message.title": "<b>您發送的※派車申請單-網絡中心-管理員-0115被退文</b>", "message.sender": "系統", "message.recipient": "劉東風", "message.postTime": "2010-04-15 18:41" },
        { "message.priority": "", "message.title": "2010年公司年會舉辦活動徵集", "message.sender": "系統", "message.recipient": "周順利", "message.postTime": "2010-04-15 18:41" },
        { "message.priority": "！", "message.title": "銷售部任務安排", "message.sender": "系統", "message.recipient": "王發財", "message.postTime": "2010-04-15 18:41" }
    ],
    messageList2:[
        { "message.priority": "", "message.title": "2010年公司年會舉辦活動徵集", "message.sender": "系統", "message.recipient": "周順利", "message.postTime": "2010-04-15 18:41" },
        { "message.priority": "！", "message.title": "銷售部任務安排", "message.sender": "系統", "message.recipient": "王發財", "message.postTime": "2010-04-15 18:41" }
    ],
    processDefList:[
         { "processDef.id": 1, "processDef.name": "員工請假", "processDef.version": 2, "processDef.description": "" },
         { "processDef.id": 2, "processDef.name": "費用報銷", "processDef.version": 3, "processDef.description": "" },
         { "processDef.id": 3, "processDef.name": "工作報告", "processDef.version": 1, "processDef.description": "" }
    ],
    documentTemplateList:[
         { "documentTemplate.id": 1, "documentTemplate.name": "員工請假單", "documentTemplate.processName": "員工請假流程", "documentTemplate.description": "" },

    ],
    systemMenuList: [
        { "systemMenu.id": 1, "systemMenu.namePrefix": "", "systemMenu.name": "系統管理", "systemMenu.parent.id": ""  },
            { "systemMenu.id": 11, "systemMenu.namePrefix": "　　", "systemMenu.name": "部門管理", "systemMenu.parent.id": "1"  },
            { "systemMenu.id": 12, "systemMenu.namePrefix": "　　", "systemMenu.name": "崗位管理", "systemMenu.parent.id": "1"  },

        { "systemMenu.id": 5, "systemMenu.namePrefix": "", "systemMenu.name": "審批流轉", "systemMenu.parent.id": ""  }
    ],
    processNodeList: [
        { "processNode.ordinal": 2, "processNode.name": "部門經理審批", "processNode.type": "審批", "processNode.description": "" },

    ],
    formList: [
        { "form.id": 1, "form.title": "設備採購單_管理員_2010-05-01 ", "form.applicant.name": "管理員", "form.applyTime": "2010-05-01 09:30", "form.status": "審批中" },

    ],
    approveInfoList: [
        { "approveInfo.index": 2, "approveInfo.type": "審批", "approveInfo.approveTime": "2010-05-17 09:45", "approveInfo.approver": "李四", "approveInfo.approval": "同意", "approveInfo.comment": "" },
        { "approveInfo.index": 3, "approveInfo.type": "審批", "approveInfo.approveTime": "2010-05-17 09:45", "approveInfo.approver": "王五", "approveInfo.approval": "同意", "approveInfo.comment": "" },
    ],
    dirList:[
        { "dir.name": "安裝手冊", "dir.creationTime": "2010-5-24 09:56:33" },
        { "dir.name": "功能列表", "dir.creationTime": "2010-5-24 09:56:33" },
        { "dir.name": "OA方案", "dir.creationTime": "2010-5-24 09:56:33" }
    ],
    fileList:[
        { "file.name": "固定崗位.doc", "file.fileType.icon": "doc.gif", "file.size": "150B", "file.creationTime": "2010-5-24 09:56:33" },

    ],
    forumList: [
        { "forum.name": "JavaSE/JavaEE", "forum.lastTopic.postTime": "2010-06-12 17:47"  },
        { "forum.name": "新功能建議", "forum.description": "把好的想法、先進思想和理念都隨時提出來，供產品修改時使用", "forum.topicCount": 56, "forum.articleCount": 107, "forum.lastTopic.title": "OA是什麼？ ", "forum.lastTopic.author.name": "管理員", "forum.lastTopic.postTime": "2010-06-12 17:47"  },
        { "forum.name": "灌水專區", "forum.description": "大家可以盡情的來這裏灌水", "forum.topicCount": 56, "forum.articleCount": 107, "forum.lastTopic.title": "OA是什麼？ ", "forum.lastTopic.author.name": "管理員", "forum.lastTopic.postTime": "2010-06-12 17:47"  }
    ],
    topicList: [
        { "topic.type": "2", "topic.title": "項目管理", "topic.replyCount": 35 },
        { "topic.type": "0", "topic.title": "審批流轉是幹什麼用的？ ", "topic.replyCount": 33 },
        { "topic.type": "1", "topic.title": "FAQ", "topic.replyCount": 75 },
        { "topic.type": "0","topic.title": "我的郵箱爲什麼不能正常使用？", "topic.replyCount": 998 },
        { "topic.type": "0","topic.title": "流程類別是幹什麼用的？", "topic.replyCount": 17 }
    ],
    replyList: [
        { "reply.title": "回覆：新手發帖", "reply.content": "歡迎，歡迎，熱烈歡迎！<img src='../script/fckeditor/editor/images/smiley/wangwang/15.gif'/>", "reply.floor": "1", "reply.faceIcon": "face2.gif" },
        { "reply.title": "回覆：新手發帖", "reply.content": "路過...", "reply.floor": "2", "reply.faceIcon": "face5.gif" },
        { "reply.title": "回覆：新手發帖", "reply.content": "<img src='../script/fckeditor/editor/images/smiley/wangwang/11.gif'/>", "reply.floor": "3", "reply.faceIcon": "face3.gif" }
    ],
    faceIcon1_7: [
        { "faceIconIndex" : "1" },
        { "faceIconIndex" : "2" },
        { "faceIconIndex" : "3" },
        { "faceIconIndex" : "4" },
    ],
    xxList: []
};

// list的最後一個元素後不要有逗號，否則在頁面中顯示數據時，會多出一行模板行。是因爲沒有數據內容造成的。
// （是使用替換的方式完成的顯示數據，如果沒有替換值，就不會替換，所以會多一個模板行）

我們將它寫在一個js文件中。然後在寫一個js能讓頁面加載的時候去調用這些數據。

/*************************************
 ***  在網頁加載完成後加載演示數據
 *************************************/
 $(document).ready(function() {
    // 加載演示數據
    loadDemoData();
});

/************************************************************
 *** 相關方法
 ************************************************************/

/**
 * 加載演示數據，默認是放到 "[class=dataContainer]" 元素中
 * @param demoDataContainerExpression 存放演示數據的元素（容器）
 *                                   默認爲 [class=dataContainer]
 * @param templateClass 顯示一條數據的模板代碼
 *                                   默認爲template
 */
function loadDemoData(demoDataContainerExpression, templateClass) {
    // 存放演示數據的元素（容器）
    if(demoDataContainerExpression == null){
        demoDataContainerExpression = ".dataContainer";
    }

    if(templateClass == null){
        templateClass = "template";     
    }

    // 沒有存放演示數據的容器時，就不需要後面的顯示演示數據了
    var jDemoDataContainerArrays = $(demoDataContainerExpression);
    if (jDemoDataContainerArrays.size() == 0) {
         return;
    }

    // 顯示演示數據（可能有多處要顯示）
    jDemoDataContainerArrays.each(function(){
        var jDemoDataContainer = $(this);

        // 如果沒有指定要顯示的數據項，則提示
        var dataKey = jDemoDataContainer.attr("dataKey");
        if(dataKey == null || $.trim(dataKey).length == 0){
            alert("請指定要顯示的數據項（指定 dataKey 屬性爲 DemoData.js 中的一項數據的名稱）！");
            return;
        }

        // 
        var items = demoData[dataKey];
        if(items == null){
            alert("請指定正確的數據項（指定 dataKey 屬性爲 DemoData.js 中的一項數據的名稱）！");
            return;
        }

        // 進行替換
        $.each(items, function(index) {
            // 返回 'false' 將停止循環 (就像在普通的循環中使用 'break')。
            // 返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')
            return addDemoRecord(jDemoDataContainer, items[index], templateClass);
        });

         // 顯示完演示數據後移除當前所用的模板行
        jDemoDataContainer.find("." + templateClass).remove(); 

    });
}

/**
 * 添加一條演示數據，演示的數據行的class爲“demodata_record”
 * @param jDemoDataContainer
 * @param record
 * @param templateClass
 */
function addDemoRecord(jDemoDataContainer, record, templateClass) {
    // 找出模板行
    var jTemplateRecord = jDemoDataContainer.find("." + templateClass);
    if (jTemplateRecord.size() == 0) {
        alert("沒有模板行，模板的class爲：" + templateClass);
        return false;
    }

    // clone後的元素要removeClass，因爲模板行（class=${tempateClass}）是不顯示的
    var jNewRecord = jTemplateRecord.clone(true);
    jNewRecord.removeClass(templateClass);
    jNewRecord.addClass("demodata_record");
    var newRecord = jNewRecord[0].outerHTML;

    for (var key in record) {
        //TODO 要使用 '\\$' 表示字符 '$'，爲什麼不是 '\$'？
        var regex = new RegExp("\\$\{" + key + "\}","g");
        newRecord = newRecord.replace(regex,record[key]);
    }

    jDemoDataContainer.append(newRecord);
    return true;
}

/*********************************************************************************
 *** outterHTML 在FireFox裏就不行了，因爲outerHTML不是W3C的標準屬性
 *** 網上找了下使用DOM原型擴展方法解決，代碼如下：
 *********************************************************************************/
if (typeof(HTMLElement) != "undefined" && !window.opera)
{
    HTMLElement.prototype.__defineGetter__("outerHTML",function()
    {
        var a = this.attributes, str = "<" + this.tagName, i = 0;
        for (; i < a.length; i++)
            if (a[i].specified)
                str += " " + a[i].name + '="' + a[i].value + '"';
        if (!this.canHaveChildren)
            return str + " />";
        return str + ">" + this.innerHTML + "</" + this.tagName + ">";
    });
    HTMLElement.prototype.__defineSetter__("outerHTML",function(s)
    {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df = r.createContextualFragment(s);
        this.parentNode.replaceChild(df,this);
        return s;
    });
    HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
    {
        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
    });
}

這樣等前臺調用數據的時候，我們直接在頁面上引用兩個js文件。然後像這樣調用就可以了。