基于struts2与easy ui的后台显示界面

发表于 | 阅读量 次 | 分类于 |

前言

最近一直忙着做项目，已经好几天没写博客了。我认为提高自己的最好路径就是先把我知道的东西总结出来，再去从已知探索未知的东西，最后在总结下来。不多说，就用笔者最喜欢的struts2和easy ui来一个需求

利用easy ui的datagrid做一个后台界面（目前只是分页显示数据），并从数据库取出，大概如下界面
Alt text

在此之前，先简单介绍一下easy ui的特点（和大部分ui基本一样）
1.基于jquery 用户界面插件的集合；
2.为一些当前用于交互的js 应用提供必要的功能；
3.使用EasyUI 你不需要写很多的javascript 代码，通常只需要写HTML 标记来定义用
户界面即可；
4.支持HTML5；
5.开发产品时可节省时间和资源；
6.简单，但很强大；
7.支持扩展，可根据自己的需求扩展控件；
8.源代码加密

总之，在后台界面上easy ui是一个很好的选择

1.新建一个web工程

2.添加ssh整合jar包、gson.jar、mysql驱动包、easy ui的官方文档（ui文件夹）
里面有五个文件必须引入（并且有顺序，否则无法引用）

1
2
3
4
5
6
7
8
9
10
11
   //引入EasyUI 核心UI 文件CSS
  <link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css" >
   //引入EasyUI 图标文件
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css" >
//引入jQuery 核心库
<script type="text/javascript" src="ui/jquery-1.8.0.min.js" ></script>
   //引入jQuery EasyUI 核心库
<script type="text/javascript" src="ui/jquery.easyui.min.js" ></script>
   //引入EasyUI 中文提示信息
   <script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js" >
</script>

3.新建一个页面（先贴出代码）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>index</title>
    //加载easy ui
<link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css" >
	<link rel="stylesheet" type="text/css" href="ui/themes/icon.css" >
	<script type="text/javascript" src="ui/jquery-1.8.0.min.js" ></script>
	<script type="text/javascript" src="ui/jquery.easyui.min.js" ></script>
    <script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js" >
	</script>
<script type="text/javascript">
//页面初始化之前执行函数
	$(function() {
		
	 //调用easy ui的datagrid组件，显示json数据，也可以通过html方式加载，这里使用js加载方式
		$('#admin_yhgl_datagrid').datagrid({
			   
			    //远程加载的json格式数据
				  url: '${pageContext.request.contextPath}/booksort!showdatagrid.action',
				//组件宽度
                  width : 1200,
				// 是否可伸缩 	
			    fitColumns : true,
		//js对象数组，从后台获得total（总记录）和ids（对象数据集合）然后显示出来	
columns : [[
{
	//字段，与后台字段数据对应
field : 'id',
 //标题
title : '排名',
//是否排序
sortable:true,
//宽度
width:80,
//是否居中
align:'center',
},
{
field : 'barcode',
title : '图书条形码',
width:80,
align:'center',
},
{
field : 'bookname',
title : '图书名称',
width:80,
align:'center',
},
{
field : 'bookshelf',
title : '书架',
width:80,
align:'center',
},
{
field : 'bookpublish',
title : '出版社',
width:80,
align:'center',
},
{
field : 'bookauthor',
title : '图书作者',
width:80,
align:'center',
},
{
field : 'bookprice',
title : '定价',
width:80,
align:'center',
},
{
field : 'borrowtime',
title : '借阅次数',
width:80,
align:'center',
},
]],
//是否有分页插件
pagination : true,
//每页显示记录数
pageSize : 5,
//设置记录数多少的选项设置
pageList : [5, 10, 15, 20],
//排序的字段
sortName : 'id',
			
		});
		
		
		});
</script>
<body>
//显示datagrid组件
<table id="admin_yhgl_datagrid">
</table>
</body>

目前还没有写后台，所以暂无数据加载显示

4 建表（为了方便直接截个图）
Alt text
然后随便加几个数据

5.编写pojo与映射文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
public class Book {
private String barcode;
private String bookauthor;
private String bookname;
private String bookprice;
private String bookpublish;
private String bookshelf;
private String booktype;
private int borrowtime;
private int id;
省略set与get方法}
//映射文件
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<!-- 
    Mapping file autogenerated by MyEclipse Persistence Tools
-->
<hibernate-mapping package="com.pojo">
    <class name="Book" table="book" >
        <id name="id" >
            <generator class="increment"></generator>
        </id>
        <property name="bookname">
        </property>
        <property name="bookauthor">
        </property>
      <property name="barcode">
        </property>
        <property name="bookprice">
        </property>
        <property name="bookpublish">
        </property>
        <property name="bookshelf">
        </property>
        <property name="booktype">
        </property>
        <property name="borrowtime">
        </property>
    </class>
</hibernate-mapping>

6.dao层service层接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public interface Basedao<T> {
	
	public List<T> find(String hql, int page, int rows);                             //分页时返回T对象集合
	
	
	public Long count(String hql);                                                   //返回总记录数
	
}
public interface Basedaoservice <T>{
//Book的包装类，主要增加easy ui所需要的一些属性
	public DataGrid datagrid(Tbook book);
	
}

7.编写工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
public class DataGrid {
	private Long total = 0l;                   //总记录
	private List rows = new ArrayList();       //datagrid需要的json数据加载数据
	省略set与get方法
}
public class Tbook {
       private String barcode;
	private String bookauthor;
	private String bookname;
	private String bookprice;
	private String bookpublish;
	private String bookshelf;
	private String booktype;
	private int borrowtime;
	private int id;
	private String ids;          //前台被选中行的字符转
	private String order;        //排序
	private int page;            //多少页
	private int rows;
	private String sort;         //排序名
。。。。。
}
public class Character {
	public static HttpServletResponse Tojson() throws Exception{
		HttpServletResponse response=ServletActionContext.getResponse();
		HttpServletRequest request=ServletActionContext.getRequest();
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("application/json; charset=utf-8");          //返回json数据
	        response.setHeader("Cache-Control", "no-cache");                 //不要缓存
	        response.setHeader("Pragma", "no-cache");  
		PrintWriter out = response.getWriter();
		return response;
	}
	}

8.实现类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
public class Basedaoimpl<T> extends HibernateDaoSupport  implements Basedao<T> {
	@Override
	public List<T> find(String hql, int page, int rows) {
	
		Query q=this.getSession().createQuery(hql);
		
		return q.setFirstResult((page-1)*rows).setMaxResults(rows).list();
	}
	
	@Override
	public Long count(String hql) {
		Query q=this.getSession().createQuery(hql);
		return (Long) q.uniqueResult();
	}
public class Basedaoserviceimpl<T> implements Basedaoservice<T> {
	private Basedao<T> basedao;
	
	public Basedao<T> getBasedao() {
		return basedao;
	}
	public void setBasedao(Basedao<T> basedao) {
		this.basedao = basedao;
	}
	@Override
	public DataGrid datagrid(Tbook book) {
	
		DataGrid dg=new DataGrid();
		//查询所有的book数据
		 String hql="from Book b";
      
        //排序sql
		 if(book.getSort()!=null){
				hql += " order by " + book.getSort() + " " + book.getOrder();
			}
		
		//取出所有的book记录，放在集合汇总
		 List<Book> l=(List<Book>) basedao.find(hql, book.getPage(), book.getRows());
		 //查出所有记录数
		 String totalHql = "select count(*) " + hql;
	    
	    //将book对象集合一次加进Tbook包装类集合
		 List<Tbook> nl=new ArrayList<Tbook>();
			if (l != null && l.size() > 0) {
				for(Book t:l){
					Tbook u=new Tbook();
					BeanUtils.copyProperties(t, u);
					nl.add(u);
				}
			}
				dg.setTotal(basedao.count(totalHql));
				dg.setRows(nl);
				return dg;
	}
}

9 action主题代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public class booksort implements ModelDriven<Tbook> {
    //利用modaldriven包装Tbook
	private Tbook book=new Tbook();
	
	private Basedaoservice<Book> basedaoservice;
	
	
	public void showdatagrid() throws Exception{
		HttpServletResponse response=Character.Tojson();
		Gson gson=new Gson();          //创建gson对象
		response.getWriter().write(gson.toJson(basedaoservice.datagrid(book))); //将对象转为json数据
	}
	
	
	public Basedaoservice<Book> getBasedaoservice() {
		return basedaoservice;
	}
	public void setBasedaoservice(Basedaoservice<Book> basedaoservice) {
		this.basedaoservice = basedaoservice;
	}
	@Override
	public Tbook getModel() {
		// TODO Auto-generated method stub
		return book;
	}
}

10 spring配置和structs配置（参考之前的博客）这里就不配置了，基本都是套路

至此就能加载数据了，当然easy ui在后台界面中的使用不仅方便而且强大，这也是笔者最喜欢使用easy ui的原因

快乐源于分享，总结溢于提高

热评文章