智销系统项目day2 - 集成SpringMVC和前端展示

1. 完成Service层

1.1 需要导的包(pom.xml)

上一天导了包的话，这里就不要重复导入

<properties>
    <com.fasterxml.jackson.version>2.5.0</com.fasterxml.jackson.version>
</properties>
<!-- 引入web前端的支持 -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-web</artifactId>
    <version>${org.springframework.version}</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>${org.springframework.version}</version>
</dependency>
<!-- 文件上传用到的包 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2.2</version>
</dependency>
<!-- SpringMVC的json支持包 -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>${com.fasterxml.jackson.version}</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-annotations</artifactId>
    <version>${com.fasterxml.jackson.version}</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>${com.fasterxml.jackson.version}</version>
</dependency>

1.2 创建IBaseService

package com.zpx.service;

import com.zpx.domain.Employee;
import com.zpx.query.BaseQuery;
import org.springframework.data.domain.Page;
import java.io.Serializable;
import java.util.List;

public interface IBaseService<T,ID extends Serializable>{
    //添加与修改数据
    void save(T t);
    //根据id删除一条数据
    void delete(ID id);
    //根据id查询到一条数据
    T findOne(ID id);
    //查询所有数据
    List<T> findAll();
    //根据Query拿到分页对象(分页)
    Page findPageByQuery(BaseQuery baseQuery);
    //根据Query拿到对应的所有数据(不分页)
    List<T> findByQuery(BaseQuery baseQuery);
    //根据jpql与对应的参数拿到数据
    List findByJpql(String jpql,Object... values);
}

1.3 创建BaseServiceImpl

package com.zpx.service.impl;

import com.zpx.query.BaseQuery;
import com.zpx.repository.BaseRepository;
import com.zpx.service.IBaseService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.transaction.annotation.Transactional;

import java.io.Serializable;
import java.util.List;

import static org.springframework.transaction.annotation.Propagation.SUPPORTS;

@Transactional(readOnly = true,propagation = SUPPORTS)
public class BaseServiceImpl<T,ID  extends Serializable> implements IBaseService<T,ID>{

    //注意:Spring 4.x 中可以为子类注入子类对应的泛型类型的成员变量的引用
    @Autowired
    private BaseRepository<T,ID> baseRepository;

    @Override
    @Transactional(
    public void save(T t) {
        baseRepository.save(t);
    }

    @Override
    @Transactional(
    public void delete(ID id) {
        baseRepository.delete(id);
    }

    @Override
    public T findOne(ID id) {
        return baseRepository.findOne(id);
    }

    @Override
    public List<T> findAll() {
        return baseRepository.findAll();
    }

    @Override
    public Page findPageByQuery(BaseQuery baseQuery) {
        return baseRepository.findPageByQuery(baseQuery);
    }

    @Override
    public List<T> findByQuery(BaseQuery baseQuery) {
        return baseRepository.findByQuery(baseQuery);
    }

    @Override
    public List findByJpql(String jpql, Object... values) {
        return baseRepository.findByJpql(jpql, values);
    }
}

1.4 创建IEmployeeService

package com.zpx.service;

import com.zpx.domain.Employee;
//注：在开发中，业务后期是有很多功能的(不只是我们最简单的CRUD)
public interface IEmployeeService extends IBaseService<Employee,Long> {
}

1.5 创建EmployeeServiceImpl

package com.zpx.service.impl;

import com.zpx.domain.Employee;
import com.zpx.service.IEmployeeService;
import org.springframework.stereotype.Service;

@Service
public class EmployeeServiceImpl extends BaseServiceImpl<Employee,Long> implements IEmployeeService {
}

1.6 功能测试

1.6.1 BaseSpringTest

package com.zpx;

import org.junit.runner.RunWith;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("classpath:applicationContext.xml")
public class BaseSpringTest {
}

1.6.2 EmployeeServiceTest

package com.zpx.service;

import com.zpx.BaseSpringTest;
import com.zpx.domain.Employee;
import org.junit.Test;
import org.springframework.beans.factory.annotation.Autowired;

public class EmployeeServiceTest extends BaseSpringTest {
    @Autowired
    private IEmployeeService employeeService;

    @Test
    public void testFindAll()throws Exception{
        employeeService.findAll().forEach(e-> System.out.println(e));
    }

    @Test
    public void testSave()throws Exception{
        Employee employee = new Employee();
        employee.setUsername("yogie");
        employeeService.save(employee);
    }
}

2. 集成SpringMVC

2.1 引入相应jar包

首先确定咱们已经引入SpringMVC的核心jar包，这个包咱们之前在pom.xml中已经引入。

<!-- 引入web前端的支持 -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-web</artifactId>
    <version>${org.springframework.version}</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>${org.springframework.version}</version>
</dependency>

2.2. 配置applicationContext-mvc.xml

咱们可以为SpringMVC单独配置一个xml,把它与核心的applicationContext.xml分开。让咱们的xml配置也是模块化配置的。
以下为applicationContext-mvc.xml的代码(大家可以直接到之前SpringMVC的课程中拷备即可)

<?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:mvc="http://www.springframework.org/schema/mvc"
       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/mvc
         http://www.springframework.org/schema/mvc/spring-mvc.xsd
    ">
    <!-- 对静态资源进行放行 -->
    <mvc:default-servlet-handler />
    <!-- 扫描controller部分的包 -->
    <!-- @Component组件, @Repository持久层, @Service业务逻辑层, and @Controller控制器 -->
    <context:component-scan base-package="com.zpx.web" />
    <!-- 添加mvc对@RequestMapping等注解的支持 -->
    <mvc:annotation-driven />

    <!-- ViewResolver 视图解析器 (struts2视图类型类似) -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 设置视图路径的前后缀，该配置可以让我们写视图路径的时候更简单。 -->
        <!-- 希望跳转jsp是[/WEB-INF/views/前缀][xxx变量][.jsp后缀] -->
        <!-- * @see #setPrefix -->
        <property name="prefix" value="/WEB-INF/views/" />
        <!-- * @see #setSuffix -->
        <property name="suffix" value=".jsp" />
    </bean>

    <!-- 错误：提示告诉开发者你没有配置文件上传解析器。 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设置上传文件的最大尺寸为1MB -->
        <property name="maxUploadSize">
            <value>1048576</value>
        </property>
    </bean>
</beans>

2.3 配置web.xml

2.3.1 完成相应的配置

这里大家要特别注意，本来我们可以配置一个applicationContext.xml读取即可。
但是大家下一个项目学习Shiro，而Shiro 用到的 Spring 的配置必须在 listener 里加载。
所以在这里我们对两个xml进行了单独进行了配置。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         id="WebApp_ID" version="3.1">

    <!-- 读取Spring配置文件 -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <!-- 启动Spring的监听器 -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <!--  配置解决中文乱码的问题 -->
    <filter>
        <filter-name>characterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>characterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 配置核心控制器-->
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <!-- 告诉SpringMVC到哪里去找配置文件 -->
            <param-name>contextConfigLocation</param-name>
            <!-- 注意:这里只读取springmvc的xml -->
            <param-value>classpath:applicationContext-mvc.xml</param-value>
        </init-param>
        <!-- Servlet默认在每一次访问的时候创建 -->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

2.4. 创建Controller与页面

2.4.1 EmployeeController

package com.zpx.controller;

import com.zpx.domain.Employee;
import com.zpx.service.IEmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;

@Controller
@RequestMapping("/employee")
public class EmployeeController extends BaseController {
    @Autowired
    private IEmployeeService employeeService;
    @RequestMapping("/index")
    public String index(){
        //根据配置，这里会跳到/WEB-INF/views/employee/employee.jsp页面
        return "employee/employee";
    }

    @RequestMapping("/list")
    @ResponseBody
    public List<Employee> list(){
        return employeeService.findAll();
    }

}

2.4.2 employee.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1>访问成功</h1>
</body>
</html>

3. 引入主页面

咱们使用的主页面是使用Easyui来完成。接下来，我们来看下来怎么来使用这个界面。
这个界面在咱们今天的资源文件夹中，大家可以去打开找到。

3.1. 把相应的文件拷备到项目中来

3.1.1 把文件拷备到根目录(注意结构)

将easyui放到webapp项目下即可，/webapp/easyui

3.1.2 准备MainController.java文件

package com.zpx.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController extends BaseController {
    @RequestMapping("/main")
    public String main(){
        return "main";
    }
}

3.1.3 准备main.jsp文件

创建jsp文件放入项目中：/webapp/WEB-INF/views/main.jsp

3.2. 主页面的代码

3.2.1 抽取一个head.jsp

这里放的是引入easyui的代码(我们很多页面都要引入，所以单独抽取出来)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!--saryUI的样式支持-->
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <!--图标支持-->
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <!--jquery支持-->
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <!--easyUI的插件支持-->
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    <!--汉化包(国际化)-->
    <script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!--颜色选择器 -->
    <link rel="stylesheet" type="text/css" href="/easyui/themes/color.css">
    <!--jqery扩展支持-->
    <script type="text/javascript" src="/easyui/plugin/jquery.jdirk.js"></script>
    <!--公共的js引入-->
    <script type="text/javascript" src="/js/common.js"></script>

3.2.2 准备静态菜单数据

咱们现在还没有做菜单功能，所以先准备一些数据可以读取,创建一个json文件放入项目中：/webapp/json/menu.json，代码如下：

[{
  "id":1,
  "text":"基本数据",
  "iconCls":"icon-save",
  "children":[{
    "text":"用户管理",
    "url":"/employee/index"
  },{
    "text":"部门管理",
    "url":"/department/index"
  }]
}]

3.2.3 main.jsp中的代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>智销系统</title>
    <%--页面引入--%>
    <%@include file="/WEB-INF/views/head.jsp" %>
    <script>
        $(function () {
            var mainTab = $("#mainTab");
            $('#menuTree').tree({
                //引入json,并绑定一个点击事件，每次点击获得当前对象的数据的对象
                url:'/json/treeMenu.json',
                onClick: function(node){
                    //console.debug(node)
                    //获取相应的路径
                    var nodeUrl = node.url;
                    //解决每个菜单都能跳出选项卡的问题
                    if (!nodeUrl){
                        return ;
                    }
                    //拿到菜单名称
                    var nodeTitle = node.text;
                    //判断这个菜单是否存在(解决重复打开问题)
                    if (mainTab.tabs("exists",nodeTitle)){
                        //如果存在则选中这个菜单对应的选项卡
                        mainTab.tabs("select",nodeTitle)
                        return ;
                    }
                    //添加新的选项卡面板
                    mainTab.tabs('add',{
                        //选项卡名称
                        title:nodeTitle,
                        //当前选项卡内容
                        content:'Tab Body',
                        //是否可以关闭
                        closable:true,
                        //刷新
                        tools:[{
                            iconCls:'icon-mini-refresh',
                            handler:function(){
                                alert('refresh');
                            }
                        }]
                    });
                }
            });
        })
    </script>
</head>
<body class="easyui-layout">

    <div data-options="region:'north'" style="height:100px;">
        <h1 style="text-align: center;color: #00bbee">易销宝</h1>
    </div>
    
    <div data-options="region:'west',title:'菜单',split:true" style="width:230px;">
        <ul id="menuTree"></ul>
    </div>
    
    <div id="mainTab" class="easyui-tabs" data-options="region:'center'">
        <div title="首页" style="padding:20px;display:none;">
            欢迎来到易销宝，给钱！
        </div>
    </div>
</body>
</html>

4. 员工的查询页面

使用EasyUI中的Grid控件来完成：

4.1 employee.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>智销系统</title>
    <%--页面引入--%>
    <%@include file="/WEB-INF/views/head.jsp" %>
    <%--引入js--%>
    <script src="/js/model/employee.js"></script>
</head>
<body>
<%--pagination:true分页条--%>
    <table id="employeeGrid" class="easyui-datagrid"
           data-options="url:'/employee/page',fitColumns:true
           ,singleSelect:true,fit:true
           ,pagination:true,toolbar:'#gridTools'
">
        <thead>

        <tr>
            <th data-options="field:'id',width:100">编码</th>
            <th data-options="field:'username',width:100">用户名</th>
            <th data-options="field:'password',width:100">密码</th>
            <th data-options="field:'email',width:100">邮箱</th>
            <th data-options="field:'age',width:100">年龄</th>
        </tr>
        </thead>
    </table>

4.2 UiPage.java

由于咱们SpringDataJpa返回的数据和EasyUI中的数据匹配不上，所以咱们准备一个类，直接把SpringDataJpa的Page对象进行一次封装，返回给前台即可：

package com.zpx.common;

import org.apache.poi.ss.formula.functions.T;
import org.springframework.data.domain.Page;
import java.util.List;

public class UIPage<T> {
    //总条数
    private Long total;
    //当前页数据
    private List<T> rows;

    //准备一个构造器，传入page对象，取到里面的值，并取出来赋给total和rows
    public UIPage(Page page) {
        this.total = page.getTotalElements();
        this.rows = page.getContent();
    }
    
    public UIPage() { }

    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }
}

4.3 BaseQuery.java

EasyUI查询传参的名称如果和BaseQuery中接收的名称不一致，咱们就需要修改BaseQuery这个类进行功能的兼容：

/**
 * 所有Query对象的父类 公共代码｜规范
 */
public abstract class BaseQuery {

    ….
    //兼容Easyui的分页
    public void setPage(int page) {
        this.currentPage = page;
    }
    public void setRows(int rows) {
        this.pageSize = rows;
    }
}

4.4 EmployeeController.java

package com.zpx.web.controller;

import com.zpx.common.UIPage;
import com.zpx.domain.Employee;
import com.zpx.query.EmployeeQuery;
import com.zpx.service.IEmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;

@Controller
@RequestMapping("/employee")
public class EmployeeController extends BaseController {
    @Autowired
    private IEmployeeService employeeService;
    @RequestMapping("/index")
    public String index(){
        //根据配置，这里会跳到/WEB-INF/views/employee/employee.jsp页面
        return "employee/employee";
    }

    @RequestMapping("/page")
    @ResponseBody
    public UIPage<Employee> page(EmployeeQuery query){
        Page page = employeeService.findPageByQuery(query);
        //返回一个封装的对象
        return new UIPage(page);
    }
}

5. 完善Employee对象

5.1 加入部门模块

注：部门模块咱们只做到service部分就可以了！
创建部门Domain,然后把员工的代码都拷备一份修改即可(此处我们不做详细介绍)

5.2 员工完善字段

@Entity
@Table(name="employee")
public class Employee extends BaseDomain {

    private String username;
    private String password;
    private String email;
    private Integer age;

    //头像
    private String headImage;
    //部门
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name="department_id")
    private Department department;
	…
}

5.3 显示部门与头像

请注意：图片需要大家自己根据数据库的图片路径把文件加上去

5.3.1 employee.js

创建js文件放入项目中：/webapp/js/model/employee.js

/*
* @param value 当前单元格中的值
 * @param row 当前单元格对应的整行的值
 * @param index 行的索引
 */
function formatImage(value,row,index) {
    //  ``es6语法
    return `<img src="${value}" width="50px" height="50px">`;
}
function formatDept(value) {
    //防止部门为空时报错
    return value?value.name:"";
}

5.3.2 employee.jsp

增加部门和头像

<tr>
    <th width="20"  field="headImage" data-options="formatter:formatImage">头像</th>
    <th width="20"  field="username" >用户名</th>
    <th width="20"  field="password">密码</th>
    <th width="20"  field="email">邮件</th>
    <th width="20"  field="age" align="right">年龄</th>
    <th width="20"  field="department" align="center" data-options="formatter:formatDept">部门</th>
</tr>

5.3.3 web.xml(解决noSession)

运行时我们会发现没有数据，然后通过js调试工作可以看到，返回报错 no-session
我们加上以下代码即可

<!-- 加上OpenEntityManager -->
<filter>
    <filter-name>openEntity</filter-name>
    <filter-class>org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>openEntity</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

5.3.4 No serializer

No serializer found for class org.hibernate.proxy.pojo.javassist.JavassistLazyInitializer and no properties discovered to create BeanSerializer (to avoid exception, disable SerializationFeature.FAIL_ON_EMPTY_BEANS) )
这个错我们可以到网上搜索，SpringMVC与Jpa集成的时候(有懒加载)就会出现这个问题
（这是因为你需要序列化对象有一个属性是一类类型，而你使用了Hibernate的延迟加载所以这里是个Hibernate的代理对象。该代理对象有些属性不能被序列化所以会报错。）
在类上加属性：生成的时候把这个字段忽略了：
@JsonIgnoreProperties(value={“hibernateLazyInitializer”,“handler”,“fieldHandler”})

网上有很多相应的解决方案(这里我们不做缀述)，我选一下个比较暴力的。大家直接把下面的代码拷备过来使用即可：

第一步：创建一个新的类(重写com.fasterxml.jackson.databind.ObjectMapper)

package com.zpx.common;

import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;

public class CustomMapper extends ObjectMapper {
    public CustomMapper() {
        this.setSerializationInclusion(JsonInclude.Include.NON_NULL);
        // 设置 SerializationFeature.FAIL_ON_EMPTY_BEANS 为 false
        this.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS, false);
    }
}

第二步：在applicationContext-mvc.xml中配置一下即可

<!-- Spring MVC 配置 -->
<mvc:annotation-driven>
    <mvc:message-converters>
        <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
            <property name="supportedMediaTypes">
                <list>
                    <value>application/json; charset=UTF-8</value>
                    <value>application/x-www-form-urlencoded; charset=UTF-8</value>
                </list>
            </property>
            <!-- No serializer:配置 objectMapper 为我们自定义扩展后的 CustomMapper,解决了返回对象有关系对象的报错问题 -->
            <property name="objectMapper">
                <bean class="com.zpx.common.CustomMapper"></bean>
            </property>
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>

6. 加入高级查询条件

6.1 employee.jsp

这里咱们之前employee的grid控件是引入了这个div的

<div id="tb" style="padding:5px;height:auto">
      <!-- 这部门是查询的功能 -->
    <div>
        <form id="searchForm" action="/employee/download" method="post">
            用户名： <input name="username" class="easyui-textbox" style="width:80px;height:32px">
            邮件: <input name="email" class="easyui-textbox" style="width:80px;height:32px">
            部门 :
            <input  class="easyui-combobox" name="departmentId"
                    data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/util/departmentList'">
            <a href="#" data-method="search"  class="easyui-linkbutton" iconCls="icon-search">查找</a>
        </form>
    </div>
</div>

6.2 UtilController.java

我们把很多工具功能都放到这个类中

/**
 * 工具的Controller
 */
@Controller
@RequestMapping("/util")
public class UtilController extends BaseController {

    @Autowired
    private IDepartmentService departmentService;
    @RequestMapping("/departmentList")
    @ResponseBody
    public List<Department> departmentList(){
        return departmentService.findAll();
    }

}

6.3 employee.js

咱们先可以引入jquery.serializejson.js这个控件，它直接直接拿到一个表单中的所有值，并且封装成一个json数据.

…
$(function () {
    //这里我们把很多会常用到的元素进行一个抽取
    var searchForm = $("#searchForm");
    var employeeGrid = $("#employeeGrid");

    //只要a标签中有data-method属性，咱们就给它添加事件
    //  执行对应的itsource中的事件
    $("a[data-method]").on("click",function () {
        itsource[$(this).data("method")]();
    })

    var itsource={
        search:function () {
            //需要先引入 jquery.jdirk.js 才可以使用这个方法
            var params = searchForm.serializeObject();
            employeeGrid.datagrid('load',params);
        }
    }
})

6.4 EmployeeQuery.java

这里添加部门的支持

//只写一些特殊的条件
public class EmployeeQuery extends BaseQuery {

    …
private Long departmentId;

    @Override
    public Specification createSpecification() {
        Specification<Employee> spec = Specifications.<Employee>and()
                .like(StringUtils.isNotBlank(username),"username", "%"+username+"%")
                .like(StringUtils.isNotBlank(email),"email", "%"+email+"%")
                .eq(departmentId!=null,"department.id",departmentId)
                .lt(age!=null,"age", age )
                .build();
        return spec;
    }
…
}

7.扩展

7.1 支持排序功能

7.1.1 效果展示

点击后根据当前列进行升序与降序的排列

7.1.2 BaseQuery后台支持

/**
 * 公共的条件与规范
 */
public abstract class BaseQuery {
    ...
    //兼容Easyui的排序
    public void setSort(String sort) {
        this.orderByName = sort;
    }
    public void setOrder(String order) {
        this.orderByType = order;
    }
}

7.1.3 employee.jsp支持

加上这个属性：sortable=“true”

<th width="20"  field="headImage" data-options="formatter:formatImage">头像</th>
<th width="20"  field="username" sortable="true">用户名</th>
<th width="20"  field="password">密码</th>
<th width="20"  field="email">邮件</th>
<th width="20"  field="age" align="right" sortable="true">年龄</th>
<th width="20"  field="department" align="center" data-options="formatter:formatDept" sortable="true">部门</th>