SSM框架整合JSP中集成easyui前端ui項(xiàng)目開發(fā)示例詳解
目錄
- 前言
- EasyUI下載與配置
- 頁(yè)面美化
- 運(yùn)行結(jié)果
- 總結(jié)與問題
前言
前端的UI框架很多，如bootsrap、layui、easyui等，這些框架提供了大量控件供開發(fā)人員使用，我們無需花費(fèi)太大的精力，使得我們的頁(yè)面具有專業(yè)標(biāo)準(zhǔn)，使用起來也很簡(jiǎn)單。所有的前端框架使用方式基本上大同小異，以下使用easyui作為UI框架做一演示，個(gè)人認(rèn)為easyui提供的控件比較好看。
EasyUI下載與配置
使用EasyUI，必須下載其js包，下載官網(wǎng)地址：https://www.jeasyui.cn/ 下載jquery版本
下載得到包：jquery-easyui-1.8.6.zip
示例使用上一個(gè)項(xiàng)目：在webapp創(chuàng)建js目錄，將包解壓到此路徑下，如下圖
下載配置完成。實(shí)際開發(fā)中沒有必要將包中所有的文件引入，按需引入即可，上述引用方式為了簡(jiǎn)單而已。
頁(yè)面美化
頁(yè)面美化中，涉及以下代碼修改，其余的與上節(jié)代碼相同，如下圖：
修改后端servlet代碼，主要當(dāng)前前端傳遞數(shù)據(jù)主要方式是使用josn格式，這樣前端無需了解后端的pojo對(duì)象，修改后的代碼如下
public class StudentServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {List<StudentEntity> list = new ArrayList<StudentEntity>();StudentEntity student = new StudentEntity();student.setSno("1");student.setsAge(18);student.setsSex("男");student.setsDept("計(jì)算機(jī)學(xué)院");student.setsName("張三");list.add(student);StudentEntity student2 = new StudentEntity();student2.setSno("2");student2.setsAge(18);student2.setsSex("女");student2.setsDept("計(jì)算機(jī)學(xué)院");student2.setsName("李四");list.add(student2);StudentEntity student3 = new StudentEntity();student3.setSno("3");student3.setsAge(18);student3.setsSex("男");student3.setsDept("數(shù)信學(xué)院");student3.setsName("錢六");list.add(student3);String str="{\"total\":"+list.size()+" ,\"rows\":"+net.sf.json.JSONArray.fromObject(list).toString()+"}";response.setCharacterEncoding("UTF-8");response.getWriter().write(str); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.getRequestDispatcher("./jsp/list.jsp").forward(request,response); }代碼主要變換的地方有以下幾個(gè)部分
引入net.sf.json. jar包，只需在pom文件中添加如下依賴即可
<!--json.JSONArray.fromObject需要引入的jar包--> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> <classifier>jdk15</classifier> </dependency>
修改index.jsp文件，代碼如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <meta charset="UTF-8"> <title>歡迎頁(yè)面</title> <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="js/themes/icon.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="js/demo.css" rel="external nofollow" > <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <style type="text/css">.content { padding: 10px 10px 10px 10px;} </style></head><body><div data-options="region:"west",title:"菜單",split:true"> <ul id="menu"><li> <span>學(xué)生管理</span> <ul><li data-options="attributes:{"url":"student",method:"get"}">學(xué)生列表</li> </ul></li> </ul></div><div data-options="region:"center",title:"""> <div id="tabs"><div title="首頁(yè)"> <h1>javaWeb測(cè)試</h1></div> </div></div></body></html><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{tabs.tabs("add",{ title:node.text, href: node.attributes.url, closable:true, bodyCls:"content"}); }} }}); });</script>核心代碼說明：
在jsp目錄下添加list.jsp文件，代碼如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %><table id="itemList" title="學(xué)生列表" opts.striped="true" fitColumns="true" data-options="singleSelect:true,collapsible:true,url:"student",method:"post",toolbar:toolbar"> <thead> <tr><th data-options="field:"sno",width:80">學(xué)號(hào)</th><th data-options="field:"sName",width:100,align:"left"">姓名</th><th data-options="field:"sSex",width:100,align:"center"">性別</th><th data-options="field:"sAge",width:100,align:"right"">年齡</th><th data-options="field:"sDept",align:"left"">所在院系</th><th data-options="field:"operation",width:80,align:"center",formatter:formatOper">操作</th> </tr> </thead></table><script type="text/javascript"> var toolbar = [{text:"新增",iconCls:"icon-add",handler:function(){alert("add")} },{text:"刪除",iconCls:"icon-cut",handler:function(){alert("cut")} },"-",{text:"保存",iconCls:"icon-save",handler:function(){ alert("save")} }]; function formatOper(val,row,index){return "<a href="javascript:void(0)" rel="external nofollow" οnclick="updateFun("+index+")">修改</a>"; }; function updateFun(index){ $("#itemList").datagrid("selectRow",index); var obj = $("#itemList").datagrid("getSelected"); alert(obj.sno); };</script>這個(gè)jsp中的代碼并不是一個(gè)完整的jsp頁(yè)面，更類似一個(gè)div中的內(nèi)容。關(guān)鍵代碼如下
運(yùn)行結(jié)果
點(diǎn)擊學(xué)生列表，頁(yè)面如下：
總結(jié)與問題
使用前段框架能夠很快寫出比較專業(yè)美觀的代碼。已經(jīng)很多年沒有使用過jquery和easyui了，已經(jīng)很陌生，這個(gè)演示程序化了我大半天的時(shí)間。現(xiàn)在流行的是前后端完全分離的開發(fā)模式，前段數(shù)據(jù)實(shí)現(xiàn)雙向綁定，將DOM的操作隱藏起來，使用起來更方便，但不可否認(rèn)jquery在web前端的發(fā)展史上具有里程碑的意義，jquery對(duì)dom的操作還是要學(xué)習(xí)的。接下來我們將轉(zhuǎn)入使用SSM框架下前后端完全分離，前端以組件化開發(fā)為主的開發(fā)模式介紹
以上就是SSM框架JSP中集成easyui前端ui項(xiàng)目開發(fā)示例詳解的詳細(xì)內(nèi)容，更多關(guān)于SSM框架JSP集成easyui前端ui項(xiàng)目開發(fā)的資料請(qǐng)關(guān)注其它相關(guān)文章！
相關(guān)文章：
網(wǎng)公網(wǎng)安備