SSH+EasyUI简单的表格操作（CURD,分页以及文件上传）

近期试着用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&amp;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提供的一个功能，其中有几个需要用特定规范的地方。

1. 在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结果看到数据库已经存入上传文件的路径，另外本地相应也已经存入新文件。
  

总结：

我们处于一个开源的时代，现在很多开放的轮子其实可以直接搬来使用，使用什么框架并不重要，着重掌握他们的思想，既然做不到亲手点燃火焰（造轮子），至少也要知道轮子是怎么用的。。毕竟，咱们都是开源精神的受惠者。