SSM框架整合JSP中集成easyui前端ui项目开发示例详解
目录
- 前言
- 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项目开发的资料请关注我们其它相关文章！
相关推荐
-
jquery easyui 结合jsp简单展现table数据示例
复制代码 代码如下: <%@ 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&qu
-
MVC+EasyUI+三层架构简单权限管理系统
闲来无事把以前做的一个项目整理了一下,今天拿出来跟大家分享,交流和探讨.希望大家多多指正. 一.项目架构图 其中Entity为模型实体层类库:DAL为数据访问层类库,主要负责数据库操作:BLL为业务逻辑类库,Common为公共帮助类库,WebUI为用户层. 非Web层的所有实体类模板都已在项目中创建好,直接用动软生成就可以了. 二.数据库相关表 数据库文件放在web层的DB目录中 三.功能界面 *整个项目的样式都采用的是easyui自带的bootstrap样式.项目中涉及到的相关js验证规则,都
-
12个常用前端UI框架集合汇总
1.bootstrap Bootstrap 是Twitter推出的一个用于前端开发的,一个用于 HTML.CSS 和 JS 开发的开源工具包,是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目. 官网:https://v4.bootcss.com/ 文档:https://v4.bootcss.com/docs/getting-started/introduction/ 2.Layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 H
-
EasyUI框架 使用Ajax提交注册信息的实现代码
EasyUI框架 使用Ajax提交注册信息的实现代码 一.服务器代码: @Controller @Scope("prototype") public class StudentAction extends BaseAction<Student> { private static final long serialVersionUID = -2612140283476148779L; private Logger logger = Logger.getLogger(Stude
-
SSM框架整合JSP中集成easyui前端ui项目开发示例详解
目录 前言 EasyUI下载与配置 页面美化 运行结果 总结与问题 前言 前端的UI框架很多,如bootsrap.layui.easyui等,这些框架提供了大量控件供开发人员使用,我们无需花费太大的精力,使得我们的页面具有专业标准,使用起来也很简单.所有的前端框架使用方式基本上大同小异,以下使用easyui作为UI框架做一演示,个人认为easyui提供的控件比较好看. EasyUI下载与配置 使用EasyUI,必须下载其js包,下载官网地址:https://www.jeasyui.cn/ 下载j
-
JSP 中Spring组合注解与元注解实例详解
JSP 中Spring组合注解与元注解实例详解 摘要: 注解(Annotation),也叫元数据.一种代码级别的说明.它与类.接口.枚举是在同一个层次.它可以声明在包.类.字段.方法.局部变量.方法参数等的前面,用来对这些元素进行说明 1. 可以注解到别的注解上的注解称为元注解,被注解的注解称为组合注解,通过组合注解可以很好的简化好多重复性的注解操作 2. 示例组合注解 import org.springframework.context.annotation.ComponentScan; im
-
java中Servlet监听器的工作原理及示例详解
监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. 监听器原理 监听原理 1.存在事件源 2.提供监听器 3.为事件源注册监听器 4.操作事件源,产生事件对象,将事件对象传递给监听器,并且执行监听器相应监听方法 监听器典型案例:监听window窗口的事件监听器 例如:swing开发首先制造Frame**窗体**,窗体本身也是一个显示空间,对窗体提供监听器,监听窗体方法调用或者属性改变:
-
SpringBoot集成本地缓存性能之王Caffeine示例详解
目录 引言 Spring Cache 是什么 集成 Caffeine 核心原理 引言 使用缓存的目的就是提高性能,今天码哥带大家实践运用 spring-boot-starter-cache 抽象的缓存组件去集成本地缓存性能之王 Caffeine. 大家需要注意的是:in-memeory 缓存只适合在单体应用,不适合与分布式环境. 分布式环境的情况下需要将缓存修改同步到每个节点,需要一个同步机制保证每个节点缓存数据最终一致. Spring Cache 是什么 不使用 Spring Cache 抽象
-
Django中的模型类设计及展示示例详解
django中设计数据模型类是基于ORM的对象关系映射更方便的进行数据库中的数据操作. 对象关系映射 把面向对象中的类和数据库表--对应,通过操作类和对象,对数表实现数据操作,不需要写sql,由ORM框架生成 django实现了ORM框架,在项目中与数据库之间产生桥梁作用 django数据库定义模型的步骤如下: python manage.py makemigrations python mange.py migrate 在应用models.py中编写模型类,继承models.Model类 在模
-
springboot2.2 集成 activity6实现请假完整流程示例详解
新手学习记录.写在springboot test 示例 示例代码地址看结尾.后面有带页面的示例. SpringBoot Test无页面简单示例 员工请假流程 员工发起申请,附带请假信息(请假几天) 单位领导审批,如果通过,交付经理审批,不通过,重新申请 经理审批,如果请假天数不超过三天,经理1审批 如果请假天数在3-5天,经理3审批 超过5天,经理2审批 经理审批通过,流程结束,经理审批不通过,员工重新申请 流程图 代码 activiti.cfg.xml为必须文件且数据库连接正确,否则Proc
-
java中常见的6种线程池示例详解
之前我们介绍了线程池的四种拒绝策略,了解了线程池参数的含义,那么今天我们来聊聊Java 中常见的几种线程池,以及在jdk7 加入的 ForkJoin 新型线程池 首先我们列出Java 中的六种线程池如下 线程池名称 描述 FixedThreadPool 核心线程数与最大线程数相同 SingleThreadExecutor 一个线程的线程池 CachedThreadPool 核心线程为0,最大线程数为Integer. MAX_VALUE ScheduledThreadPool 指定核心线程数的定时
-
vue前端实现打印下载示例详解
目录 html2canvas介绍 jspdf介绍 printjs介绍 html2canvas介绍 分享一下几个后台管理系统比较常用的插件:下载.打印 html2canvas是在浏览器上对网页进行截图操作,实际上是操作DOM,这个插件也有好长时间了,比较稳定,目前使用还没有遇到什么bug jspdf介绍 如果下载出来是pdf文件,可以加上jspdf插件,会先通过html2canvas把页面转化成base64图片,再通过jspdf导出 安装 npm i html2canvas jspdf 或 yar
-
.NET 中配置从xml转向json方法示例详解
目录 一.配置概述 二.配置初识 三.选项模式 四.选项依赖注入 五.其它配置 六.托管模式 一.配置概述 在.net framework平台中我们常见的也是最熟悉的就是.config文件作为配置,控制台桌面程序是App.config,Web就是web.config,里面的配置格式为xml格式. 在xml里面有系统生成的配置项,也有我们自己添加的一些配置,最常用的就是appSettings节点,用来配置数据库连接和参数. 使用的话就引用包System.Configuration.Configur
-
flutter中的资源和图片加载示例详解
目录 封面图 指定相应的资源 资源绑定 Asset bundling 资源变体 加载资源 加载文本资源 加载图片 加载依赖包中的图片 最后 封面图 下个季度的目标是把前端监控相关的内容梳理出来,梳理出来之后可能会在公司内部做个分享- Flutter应用程序既括代码也包括一些其他的资产,我们通常这些资产为资源. 有时候我会思考assets这个单词,在程序中到底应该翻译为资产呢?还是翻译为资源?按照习惯,我们这里还是称为资源好了- 这些资源是一些与应用程序捆绑在一起和并且部署应用时会用到的的文件,在