Java Web後端--入職技能任務單（前端首頁佈局和展示）七
阿新 • • 發佈：2019-01-09
到目前為止，我們的整個專案已經完成了三分之一了，之前都是基於環境搭建、配置、以及增刪改查的單元測試，幾乎無關使用者最關心的views部分了，也就是jsp頁面的展示，這部分也是很重要的，好的佈局和效果，直接影響使用者的心情，當然，後臺工程師是不關心前臺工程師是怎麼來設計頁面的，他們只關心，前端請求的url是什麼，請求的資料（引數）是什麼.......但是，但是，但是我們還是要多少會一點點前端的技術的，起碼知道JQuery框架怎麼用，js怎麼寫，css怎麼佈局，jsp頁面標籤怎麼放.....
這裡我還想補充一下，對於上一篇Mybatis逆向對映資料關係到JavaBean（類，介面，物件.....）以及Mapper的XML配置檔案，我認識的比較淺，在新環境工作了差不多一週後，發現，JaveBean（表對映的Java類，表字段和類屬性的對應，以及各種眼花繚亂的Sql操作條件組合方法的定義）、Mapper介面（增刪改查方法的宣告 ）和Mapper配置檔案（實現簡單的增刪改查語句，並將實現的結果對映到對應的JavaBean）遠不止逆向工程自動生成的這麼簡單，我們還可以自己寫JavaBean，寫Mapper介面，並在Mapper.xml裡實現更為複雜的Sql操作行為，實現"自己動手，豐衣足食"。
由於這部分自己還在摸索階段，暫時說不清其中的門道，可以參考這篇博文【mybatis聯合查詢之高階對映】，寫的很不錯，但是缺乏例子測試，自己可以腦補。
回到本篇，我們開始，我們的第一步工作，引入兩個JS框架，一個是UI外掛集合框架 JQuery EasuUI，另一個是本專案要用到的富文字編輯器Kindeditor
一、在..../WEB_INF/js/目錄下面新增這兩個框架
(1) 凡是本專案中的涉及到的資源，均存在於我的下載資源裡對應的專案中。
（2）我們看到還有一個common.js的資源，從名字上就可以看出來，這個js是全域性性的，我們看一下，內容是什麼
Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(), //second "q+" : Math.floor((this.getMonth()+3)/3), //quarter "S" : this.getMilliseconds() //millisecond }; if(/(y+)/.test(format)){ format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(var k in o) { if(new RegExp("("+ k +")").test(format)){ format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); } } return format; }; var TT = YuKun = { // 富文字編輯器中的引數，實際上頁面的圖片上傳按鈕呼叫的是富文字編輯器裡面的圖片上傳功能 kingEditorParams : { filePostName : "uploadFile", //表單提交中file元件的名稱 uploadJson : '/pic/upload', //上傳地址，對應一個Controller dir : "image" //型別 }, // 格式化時間 formatDateTime : function(val,row){ var now = new Date(val); return now.format("yyyy-MM-dd hh:mm:ss"); }, // 格式化連線 formatUrl : function(val,row){ if(val){ return "<a href='"+val+"' target='_blank'>檢視</a>"; } return ""; }, init : function(data){ //上來先初始化圖片上傳元件 this.initPicUpload(data); }, // 初始化圖片上傳元件 initPicUpload : function(data){ $(".picFileUpload").each(function(i,e){ var _ele = $(e); _ele.siblings("div.pics").remove(); _ele.after('\ <div class="pics">\ <ul></ul>\ </div>'); // 回顯圖片 if(data && data.pics){ var imgs = data.pics.split(","); //alert(imgs); for(var i in imgs){ if($.trim(imgs[i]).length > 0){ _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>"); } } } $(e).unbind('click').click(function(){ //從按鈕開始向上查詢form，查詢最近的一個form物件 var form = $(this).parentsUntil("form").parent("form"); //圖片上傳引數 KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){ var editor = this; editor.plugin.multiImageDialog({ //點選“全部插入”時執行 clickFn : function(urlList) { var imgArray = []; KindEditor.each(urlList, function(i, data) { imgArray.push(data.url); //小圖片預覽 form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>"); }); //將url用逗號分隔寫入到隱藏域中，注意name的值不要寫錯 form.find("[name=icon]").val(imgArray.join(",")); editor.hideDialog(); } }); }); }); }); }, createEditor : function(select){ return KindEditor.create(select, TT.kingEditorParams); }, /** * 建立一個視窗，關閉視窗後銷燬該視窗物件。 * * 預設： * width : 80% * height : 80% * title : (空字串) * * 引數： * width : * height : * title : * url : 必填引數 * onLoad : function 載入完視窗內容後執行 * * */ createWindow : function(params){ $("<div>").css({padding:"5px"}).window({ width : params.width?params.width:"80%", height : params.height?params.height:"80%", modal:true, title : params.title?params.title:" ", href : params.url, onClose : function(){ $(this).window("destroy"); }, onLoad : function(){ if(params.onLoad){ params.onLoad.call(this); } } }).window("open"); }, closeCurrentWindow : function(){ $(".panel-tool-close").click(); }, getSelectionsIds : function (select){ var list = $(select); var sels = list.datagrid("getSelections"); var ids = []; for(var i in sels){ ids.push(sels[i].id); } ids = ids.join(","); return ids; }, /** * 初始化單圖片上傳元件 * 選擇器為：.onePicUpload * 上傳完成後會設定input內容以及在input後面追加<img> */ initOnePicUpload : function(){ $(".onePicUpload").click(function(){ var _self = $(this); KindEditor.editor(TT.kingEditorParams).loadPlugin('image', function() { this.plugin.imageDialog({ showRemote : false, clickFn : function(url, title, width, height, border, align) { var input = _self.siblings("input"); input.parent().find("img").remove(); input.val(url); input.after("<a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>"); this.hideDialog(); } }); }); }); } };
其中定義了一些資料的格式化方法，元件的初始化、窗體的建立和銷燬....JS當然不是我寫出來的，我只是拿來改，沒錯，是改，
二、在..../WEB_INF/commons/目錄下面建立一個全域性jsp引用頭（外部靜態資源引用）
（1）
（2）common-js.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/js/common.js"></script>（3）注意外部資源的引用href和src的路徑一定要對著的，不是亂寫的（主要是easyui的css和js引用）
三、修改views目錄下面的index.jsp內容（之前的內容太簡陋-->簡單+醜陋）
（1）
（2）index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>技能任務單後臺管理--Appleyk</title>
<jsp:include page="/WEB-INF/commons/common-js.jsp"></jsp:include>
<style type="text/css">
.content {
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body class="easyui-layout">
<div data-options="region:'west',title:'選單',split:true" style="width:180px;">
<ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
<li>
<span>外掛管理</span>
<ul>
<li data-options="attributes:{'url':'plugin-add'}">資料插入</li>
<li data-options="attributes:{'url':'plugin-list'}">資料顯示</li>
</ul>
</li>
<li>
<span>使用者管理</span>
<ul>
<li data-options="attributes:{'url':'users-add'}">新增使用者</li>
<li data-options="attributes:{'url':'users-list'}">使用者列表</li>
</ul>
</li>
<li>
<span>檔案管理</span>
<ul>
<li data-options="attributes:{'url':'upload/upload'}">檔案上傳</li>
<li data-options="attributes:{'url':'listFile'}">檔案下載</li>
</ul>
</li>
</ul>
</div>
<div data-options="region:'center',title:''">
<div id="tabs" class="easyui-tabs">
<div title="首頁" style="padding:20px;">
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#menu').tree({
onClick: function(node){
if($('#menu').tree("isLeaf",node.target)){//判斷點選的節點是否為葉子節點
var tabs = $("#tabs");
var tab = tabs.tabs("getTab",node.text);
if(tab){
//選中
tabs.tabs("select",node.text);
}else{
//新增tab
tabs.tabs('add',{
title:node.text,
href: node.attributes.url,
closable:true,
bodyCls:"content"
});
}
}
}
});
});
</script>
</body>
</html>注意幾個地方：
A.common-js.jsp其實只是jsp中的一個資源引用片段，而，index.jsp將其包含進來了
B.
C.easyUI-tree新增tab節點
四、靜態資原始檔目錄結構圖
五、執行專案，並訪問首頁
（1）localhost:8080
至此，入職技能任務單的前臺首頁佈局和展示就已經完成了，接下來，就是針對每個節點設計對應的jsp頁面，並全面進入MVC的開發模式了。