SSM框架整合JSP中集成easyui前端ui項目開發示例詳解

Posted on by

前言

前端的UI框架很多，如bootsrap、layui、easyui等，這些框架提供瞭大量控件供開發人員使用，我們無需花費太大的精力，使得我們的頁面具有專業標準，使用起來也很簡單。所有的前端框架使用方式基本上大同小異，以下使用easyui作為UI框架做一演示，個人認為easyui提供的控件比較好看。

EasyUI下載與配置

使用EasyUI，必須下載其js包，下載官網地址：https://www.jeasyui.cn/ 下載jquery版本

在這裡插入圖片描述

下載得到包：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);
        student3.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, HttpServletResponse response) throws ServletException, 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="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>歡迎頁面</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 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>
        <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>

這個jsp中的代碼並不是一個完整的jsp頁面，更類似一個div中的內容。關鍵代碼如下

在這裡插入圖片描述

在這裡插入圖片描述

運行結果

在這裡插入圖片描述

點擊學生列表，頁面如下：

在這裡插入圖片描述

總結與問題

使用前段框架能夠很快寫出比較專業美觀的代碼。已經很多年沒有使用過jquery和easyui瞭，已經很陌生，這個演示程序化瞭我大半天的時間。現在流行的是前後端完全分離的開發模式，前段數據實現雙向綁定，將DOM的操作隱藏起來，使用起來更方便，但不可否認jquery在web前端的發展史上具有裡程碑的意義，jquery對dom的操作還是要學習的。接下來我們將轉入使用SSM框架下前後端完全分離，前端以組件化開發為主的開發模式介紹

以上就是SSM框架JSP中集成easyui前端ui項目開發示例詳解的詳細內容，更多關於SSM框架JSP集成easyui前端ui項目開發的資料請關註WalkonNet其它相關文章！

推薦閱讀：