本文介绍了如何使用SSH框架结合EasyUI实现简单的后台管理系统，包括表格的CURD操作、分页以及文件上传功能。通过理解SSH框架（Struts2、Spring、Hibernate）的思想和EasyUI的使用，演示了数据查询、分页处理以及文件上传的实现步骤，强调掌握开源框架的使用和思想的重要性。
近期试着用ssh搭一个小型后台管理系统，之前听说用第三方轮子EasyUI可以减少程序员对网页控件的编写工作，就试着搬一次轮子。
下面案例以官网最新demo为驱动http://www.jeasyui.net/Public/js/easyui/demo/demo.css，对常见表单功能进行实践操作，由于时间零散，并没有详细考虑后台数据库的设计合理性以及代码规范性。
1. ssh的搭建：
- 导入第三方jar包(struts2+spring+hibernate)
编写相关配置文件(web.xml、applicationContext.xml、javabean.hbm.xml)
ssh的思想：
j2ee作为一种大型企业应用常用框架，现在有几个主流的框架如ssm(springmvc+spring+mybatis)，ssh(struts2+spring+hibernate).
用哪些版本和框架并不重要，其实都是分层架构体系的运用。主要是理解它的思想，知道这样子分层管理代码的意义。
拿ssh来说：- struts
作为页面转发的控制器，它的核心是action,它的主要功能是对前台传过来的请求进行转发，让相应的方法执行。本例子来说，在EasyUI表单中，对数据库数据的请求，可以写成一个action,放在进入页面的初始化函数中，在action类执行service到dao层的数据获取，并且返回显示到表格中。 - hibernate
hibernate重要的思想是ORM,它主要是说从javabean到数据库对象的映射，而凭借这个框架，我们只需要对相应javabean实体进行在bean.hbm.xml中配置，就可以映射到数据库的表结构。 spring
spring可以理解为一个工厂，它为我们封装了许多功能，其实没有spring，我们的分层架构其实已经实现了，但是spring强大的功能在于它的几个抽象名词：依赖注入（DI）、控制反转（IOC）、面向切片编程（AOP）- 拿IOC来说，它是把创建新对象的权限交给spring,运用IOC技术之后，创建对象就由spring自己控制，不需要程序员手动new，这是代理模式的一个简单运用。
- DI 如前面提到，表单对数据库的请求，是从前台到后台的过程，那么前台的action调用service,service调用dao执行数据库，从面向对象的思想来说，平时我们都要new Service ,new Dao对象，通过service对象调用dao层的方法，但是有了spirng，就不需要手动new，在配置文件注入即可。
从spring的applicationContext配置文件可以看到，spring在Action注入了Service,在Service注入了Dao,在Dao注入了sessionFactory,之后在相应的类中只需要提供私有成员属性以及set方法，spring就会自动实例化相应对象，无需手动new 。
- AOP :可以简单理解为横向编程，常见的是AOP通知对事务的控制，比如数据库CURD操作前后要执行的逻辑处理等。在本案例不作为主要实践。
2.实践代码：
- 后台代码：
- 分层建包建立Action,Service,Dao层等包
- JavaBean的编写：
假如我们要对商品进行管理，我们先写商品类Goods，并且配置相应的goods.hbm.xml映射到数据库的字段。 - 编写Spring配置文件applicationContext.xml在相应包注入要调用的层。
applicationContext.xml配置文件如下：
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
<!-- 先配置C3P0的连接池 -->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="com.mysql.jdbc.Driver"/>
<property name="jdbcUrl" value="jdbc:mysql:///TDD?useUnicode=true&characterEncoding=UTF-8"/>
<property name="user" value="root"/>
<property name="password" value="root"/>
</bean>
<!-- LocalSessionFactoryBean加载配置文件 -->
<bean id="sessionFactory" class="org.springframework.orm.hibernate5.LocalSessionFactoryBean">
<!-- 先加载连接池 -->
<property name="dataSource" ref="dataSource"/>
<!-- 加载方言，加载可选 -->
<property name="hibernateProperties">
<props>
<prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
<prop key="hibernate.show_sql">true</prop>
<prop key="hibernate.format_sql">true</prop>
<prop key="hibernate.hbm2ddl.auto">update</prop>
</props>
</property>
<!-- 引入映射的配置文件 -->
<property name="mappingResources">
<list>
<value>com/tdd/domain/User.hbm.xml</value>
<value>com/tdd/domain/Goods.hbm.xml</value>
</list>
</property>
</bean>
<!-- 先配置平台事务管理器 -->
<bean id="transactionManager" class="org.springframework.orm.hibernate5.HibernateTransactionManager">
<property name="sessionFactory" ref="sessionFactory"/>
</bean>
<!-- 开启事务的注解 -->
<tx:annotation-driven transaction-manager="transactionManager"/>
<!-- 强调：以后配置Action，必须是多例的 -->
<!-- 配置用户模块 -->
<bean id="userAction" class="com.tdd.web.action.UserAction" scope="prototype">
<property name="userService" ref="userService"/>
</bean>
<bean id="userService" class="com.tdd.service.UserServiceImpl">
<property name="userDao" ref="userDao"/>
</bean>
<bean id="userDao" class="com.tdd.dao.UserDaoImpl">
<property name="sessionFactory" ref="sessionFactory"></property>
</bean>
<!-- 商品模块 -->
<bean id="goodsAction" class="com.tdd.web.action.GoodsAction" scope="prototype">
<property name="goodsService" ref="goodsService"/>
</bean>
<bean id="goodsService" class="com.tdd.service.GoodsServiceImpl">
<property name="goodsDao" ref="goodsDao"/>
</bean>
<bean id="goodsDao" class="com.tdd.dao.GoodsDaoImpl">
<property name="sessionFactory" ref="sessionFactory"></property>
</bean>
</beans>
- jsp页面：
表格数据查询：在easyUI的datagrid其option中写入请求数据的url
<table id="dg" class="easyui-datagrid" title="商品管理"
style="width: 1000px; height: auto"
data-options="
loadMsg: '正在加载，请稍候...',
rownumbers:true,
pagination:true,
pageList: [10, 50, 100],
striped: true,
fit:true,
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: '${ pageContext.request.contextPath }/goods_findByPage.action',
method: 'get',
onClickRow: onClickRow">
在action层编写请求分页方法，findByPage()
public String findByPage(){
//统计所有数据行数
int allcount = goodsService.findAll().size();
DetachedCriteria criteria = DetachedCriteria.forClass(Goods.class);
//默认当前页1
int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);
//默认每页显示条数10
int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows);
//获取当前页数据
List<Goods> rows = goodsService.findByPage(intPage,number,criteria);
Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map
jsonMap.put("total", allcount);
jsonMap.put("rows", rows);
//System.out.println("jsonMap__________\n"+jsonMap);
// 数据转换成json传给前台
String jsonString = FastJsonUtil.toJSONString(jsonMap);
System.out.println("jsonString__________:\n"+jsonString);
HttpServletResponse response = ServletActionContext.getResponse();
FastJsonUtil.write_json(response, jsonString);
return NONE;
}分页功能主要是 调用Service再调用Dao层执行Hibernate封装好的分页功能，将数据行数，当前页数据返回给jsp:
public List<Goods> finByPage(int intPage, int number, DetachedCriteria criteria) {
List<Goods> lists = (List<Goods>) this.getHibernateTemplate().findByCriteria(criteria,
(intPage-1)*number, number);
return lists;
}其中action层将返回的数据进行json格式化，并且以Map形式返回给jsp,键值有行数total,数据rows,这样EasyUI就能自动根据总行数和分页设置进行显示。
可以看到当我们刷新页面，表格会根据你的分页设置提交一个请求给Action,Action会返回相应数据给前台显示。
前台数据页面：
添加数据
这里用到的文件上传是struts2提供的一个功能，其中有几个需要用特定规范的地方。
- 在action中注意文件成员属性名要和jsp页面文件filebox的name属性值一致，这里是upload：
/*
* 文件上传：定义成员属性，命名要有特定规则
* File goods_pic; 上传文件
* String goods_picFileName; 上传文件名
* String goods_picContentType; 上传文件类型
*/
private File upload;
private String uploadFileName;
private String uploadContentType;
public void setUpload(File upload) {
this.upload = upload;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}对应jsp添加表单的input框name属性也要是upload.
核心Action代码实现：
public String update(){
// 判断，说明客户上传了新的图片
if(uploadFileName != null){
// 先删除旧的图片
String oldFilepath = good.getGoods_pic();
if(oldFilepath != null && !oldFilepath.trim().isEmpty()){
// 说明，旧的路径存在的，删除图片
File f = new File(oldFilepath);
f.delete();
}
// 上传新的图片
// 先处理文件的名称的问题
String uuidname = UploadUtils.getUUIDName(uploadFileName);
File file = new File(FILEPATH+uuidname);
try {
FileUtils.copyFile(upload, file);
} catch (IOException e) {
e.printStackTrace();
}
// 把客户新图片的路径更新到数据库中
good.setGoods_pic(FILEPATH+uuidname);
}
goodsService.update(good);
return "update";
}- easyui-filebox的使用：
参考官方文档，filebox有几个属性，accept是文件类型过滤，prompt是提示文字等。
<tr>
<td>商品图片:</td>
<td>
<input class="easyui-filebox" id="goods_pic" name="upload"
data-options="prompt:'请选择图片...',buttonText:'浏览'"
accept="image/gif,image/jpeg,image/png"></input>
</td>
</tr>
可以从返回json结果看到数据库已经存入上传文件的路径，另外本地相应也已经存入新文件。
总结：
我们处于一个开源的时代，现在很多开放的轮子其实可以直接搬来使用，使用什么框架并不重要，着重掌握他们的思想，既然做不到亲手点燃火焰（造轮子），至少也要知道轮子是怎么用的。。毕竟，咱们都是开源精神的受惠者。
扫一扫
6393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
