SSM框架整合JSP中整合easyui前端ui專案開發示例詳解
目錄
- 前言
- EasyUI下載與配置
- 頁面美化
- 執行結果
- 總結與問題
前言
前端的UI框架很多,如bootsrap、layui、easyui等,這些框架提供了大量控制元件供開發人員使用,我們無需花費太大的精力,使得我們的頁面具有專業標準,使用起來也很簡單。所有的前端框架使用方式基本上大同小異,以下使用easyui作為UI框架做一演示,個人認為easyui提供的控制元件比較好看。
EasyUI下載與配置
使用EasyUI,必須下載其包,下載官網地址:https://www.jeasyui.cn/ 下載版本
下載得到包:jquery-easyui-1.8.6.zip
示例使用上一個專案:在webapp建立js目錄,將包解壓到此路徑下,如下圖
下載配置完成。實際開發中沒有必要將包中所有的檔案引入,按需引入即可,上述引用方式為了簡單而已。
頁面美化
頁面美化中,涉及以下程式碼修改,其餘的與上節程式碼相同,如下圖:
修改後端servlet程式碼,主要當前前端傳遞資料主要方式是使用josn格式,這樣前端無需瞭解後端的pojo物件,修改後的程式碼如下
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("計算機學院"); student.setsName("張三"); list.add(student); StudentEntity student2 = new StudentEntity(); student2.setSno("2"); student2.setsAge(18); student2.setsSex("女"); student2.setsDept("計算機學院"); student2.setsName("李四"); list.add(student2); StudentEntity student3 = new StudentEntity(); student3.setSno("3"); student3.setsAge(18); studwww.cppcns.coment3.setsSex("男"); student3.setsDept("數信學院"); 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,IOException { request.getRequestDispatcher("./jsp/list.jsp").forward(request,response); }
程式碼主要變換的地方有以下幾個部分
引入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="" %>
<html>
<head>
<meta charset="UTF-8">
<title>歡迎頁面</title>
<link rel="stylesheet" type="text/" href="js/themes/default/easyui.css" rel="external nofollow" >www.cppcns.com;
<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/" 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 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':'student',method:'get'}">學生列表</li>
</ul>
</li>
</ul>
</div>
<div data-options="region:'center',title:''">
<div id="tabs" class="easyui-tabs">
<div title="首頁" style="padding:20px;">
<h1>javaWeb測試</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 class="easyui-datagrid" id="itemList" title="學生列表" 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">學號</th>
<th data-options="field:'sName',width:100,align:'left'">姓名</th&www.cppcns.comgt;
<th data-options="field:'sSex',align:'center'">性別</th>
<th data-options="field:'sAge',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>
這個jsp中的程式碼並不是一個完整的jsp頁面,更類似一個div中的內容。關鍵程式碼如下
執行結果
點選學生列表,頁面如下:
總結與問題
使用前段框架能夠很快寫出比較專業美觀的程式碼。已經很多年沒有使用過jquery和easyui了,已經很陌生,這個演示程式化了我大半天的時間。現在流行的是前後端完全分離的開發模式,前段資料實現雙向繫結,將DOM的操作隱藏起來,使用起來更方便,但不可否認jquery在web前端的發展史上具有里程碑的意義,jquery對dom的操作還是要學習的。接下來我們將轉入使用SSM框架下前後端完全分離,前端以元件化開發為主的開發模式介紹
以上就是SSM框架JSP中整合easyui前端ui專案開發示例詳解的詳細內容,更多關於SSM框架JSP整合easyui前端ui專案開發的資料請關注我們其它相關文章!