SSM框架整合JSP中集成easyui前端ui项目开发示例详解

 更新时间:2021-12-17 12:00:14   作者:佚名   我要评论(0)

目录前言EasyUI下载与配置页面美化运行结果总结与问题前言
前端的UI框架很多,如bootsrap、layui、easyui等,这些框架提供了大量控件供开发人

前言

前端的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项目开发的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
  • MVC+EasyUI+三层架构简单权限管理系统
  • EasyUI框架 使用Ajax提交注册信息的实现代码
  • jquery easyui 结合jsp简单展现table数据示例
  • 12个常用前端UI框架集合汇总

相关文章

  • SSM框架整合JSP中集成easyui前端ui项目开发示例详解

    SSM框架整合JSP中集成easyui前端ui项目开发示例详解

    目录前言EasyUI下载与配置页面美化运行结果总结与问题前言 前端的UI框架很多,如bootsrap、layui、easyui等,这些框架提供了大量控件供开发人
    2021-12-17
  • 家里电费太高 特惠93折电费接口正式上线

    家里电费太高 特惠93折电费接口正式上线

    说到这大家可能不是很相信,这都很正常,因为这块的市场还很大,需要深耕,用的人少,一般用的人都是对这块熟悉的人,他们都在把这块市场当作副业自己创业赚钱,现在已经有
    2021-12-09
  • 如何正确选择对接电商类会员权益?

    如何正确选择对接电商类会员权益?

    当今社会,消费者需求趋向多样化,进一步推动各行各业高速发展,每家企业所拥有的资源与权益也各不相同。今天,我们先来简单分析电商类产品会员权益现状。随着互联网的飞速
    2021-11-30
  • vue实现单点登录的方式汇总

    vue实现单点登录的方式汇总

    最近项目停工了,RageFrame的学习暂时告一段落,这一篇给大家分享下有关单点登录的相关知识,并提供一些demo给大家参考,希望对想了解的朋友
    2021-11-22
  • Go 语言中 20 个占位符的整理

    Go 语言中 20 个占位符的整理

    目录一、概念二、哪些函数支持三、占位符使用四、普通占位符1. %v、%+v、%#v2. %T3. %%五、布尔占位符六、整数占位符1. %b2. %c3. %d、%5d、
    2021-11-15
  • Go 基于令牌桶的限流器实现

    Go 基于令牌桶的限流器实现

    目录简介原理概述具体实现原理限流器如何限流简介 如果一般流量过大,下游系统反应不过来,这个时候就需要限流了,其实和上地铁是一样的,
    2021-11-15
  • 超详细OpenMV与STM32单片机通信 附完整源码

    超详细OpenMV与STM32单片机通信 附完整源码

    目录1.前言(闲话)2.硬件连接3.软件代码———OpenMV端4.软件代码———STM32端5.利用PC端测试数据数据是否发送接收正常6.学习补充 (代码看不
    2021-11-15
  • GO 函数式选项模式(Functional Options Pattern)

    GO 函数式选项模式(Functional Options Pattern)

    Golang 开发者遇到的许多问题之一是尝试将一个函数的参数设置为可选. 这是一个非常常见的用例, 有些对象应该使用一些基本的默认设置来开箱即
    2021-11-15
  • 浅谈golang 的高效编码细节

    浅谈golang 的高效编码细节

    目录struct 和 map 用谁呢?字符串如何拼接是好?用 + 的方式使用 fmt.Sprintf() 的方式使用 strings.Join 的方式使用 buffer 的方式xdm,我
    2021-11-15
  • shell linux中如何用shell写一个占用CPU的脚本

    shell linux中如何用shell写一个占用CPU的脚本

    使用场景: 向公司申请的虚机资源自己工作用的比较方便,因占用较小basis要求回收掉,现写一个脚本,让CPU跑满一些。 首先看下共有几颗逻
    2021-11-15

最新评论