Maven+SSM+EasyUi+CRUD简单操作

一、创建Maven项目

1、项目结构设置

2、齐全的pom.xml配置

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>cn.itsource</groupId>
  <artifactId>crm</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>crm</name>
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <!-- spring版本号 -->
    <spring.version>4.1.2.RELEASE</spring.version>
    <!-- mybatis版本号 -->
    <mybatis.version>3.2.1</mybatis.version>
    <!-- log4j日志文件管理包版本 -->
    <slf4j.version>1.7.2</slf4j.version>
    <log4j.version>1.2.17</log4j.version>
    <!-- jackson包版本 -->
    <jackson.version>2.5.0</jackson.version>
  </properties>

  <dependencies>
    <!--JUnit-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <!--Spring核心-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-expression</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
      <version>1.1.1</version>
    </dependency>

    <!--SpringMVC-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <!--aop依赖包-->
    <dependency>
      <groupId>aopalliance</groupId>
      <artifactId>aopalliance</artifactId>
      <version>1.0</version>
    </dependency>
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.6.8</version>
    </dependency>

    <!--文件上传-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.2</version>
    </dependency>
    <!--jackson-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>${jackson.version}</version>
    </dependency>

    <!--数据库连接池-->
    <dependency>
      <groupId>commons-dbcp</groupId>
      <artifactId>commons-dbcp</artifactId>
      <version>1.2.2</version>
    </dependency>
    <dependency>
      <groupId>commons-pool</groupId>
      <artifactId>commons-pool</artifactId>
      <version>1.5.3</version>
    </dependency>

    <!--Mybatis集成-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.2.0</version>
    </dependency>

    <!--log4j-->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>${log4j.version}</version>
    </dependency>

    <!--slf4j-->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>${slf4j.version}</version>
    </dependency>
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>${slf4j.version}</version>
      <scope>test</scope>
    </dependency>

    <!--数据库连接驱动-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.46</version>
    </dependency>

    <!-- JSTL标签类 -->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <!--servlet-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.0.1</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2</version>
      <scope>provided</scope>
    </dependency>

    <!--mybatis分页插件-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.0.1</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>crm</finalName>
    <plugins>
      <!--代码生成器插件-->
      <plugin>
        <groupId>org.mybatis.generator</groupId>
        <artifactId>mybatis-generator-maven-plugin</artifactId>
        <version>1.3.2</version>
        <configuration>
          <!--自定义代码生成器的路径-->
          <!--<configurationFile>yourLocation/mybatis-generator-config.xml</configurationFile>-->
          <verbose>true</verbose>
          <overwrite>true</overwrite>
        </configuration>
      </plugin>
      <plugin>
        <artifactId>maven-clean-plugin</artifactId>
        <version>3.0.0</version>
      </plugin>
      <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
      <plugin>
        <artifactId>maven-resources-plugin</artifactId>
        <version>3.0.2</version>
      </plugin>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.7.0</version>
      </plugin>
      <plugin>
        <artifactId>maven-surefire-plugin</artifactId>
        <version>2.20.1</version>
      </plugin>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.2.0</version>
      </plugin>
      <plugin>
        <artifactId>maven-install-plugin</artifactId>
        <version>2.5.2</version>
      </plugin>
      <plugin>
        <artifactId>maven-deploy-plugin</artifactId>
        <version>2.8.2</version>
      </plugin>
    </plugins>
  </build>

</project>

3、web.xml的配置

• 注解修改版本(2.3不支持el表达式)
• 与SpringMVC的集成配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
		  http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">

  <!-- 解决工程编码过滤器 -->
  <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>

  <!--读取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>

  <!--配置核心控制器-->
  <servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!--SpringMVC的配置文件-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext-mvc.xml</param-value>
    </init-param>
    <!--随着tomcat启动而启动-->
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

4、jdbc.properties 连接数据库的配置文件

• 数据的名称，用户名密码都要注意

jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/crm
jdbc.username=root
jdbc.password=123456

5、applicationContext.xml的配置

• 注意所有的用到包名的地方

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       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/tx http://www.springframework.org/schema/tx/spring-tx.xsd
">

    <!--扫描service层-->
    <context:component-scan base-package="cn.lyq.crm.service"/>

    <!--引入jdbc.properties配置文件-->
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <!--创建数据源(dataSource)-->
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
        <property name="driverClassName" value="${jdbc.driverClassName}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>

   <!-- 配置一个Bean:SqlSessionFactory
    当初JPA中：要配置一个EntityManagerFactory，咱们使用了一个FactoryBean完成 -> EntityManagerFactoryBean
    在mybatis中：需要 SqlSessionFactory，咱们就使用SqlSessionFactoryBean来完成
   -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--引入上面配置的数据源-->
        <property name="dataSource" ref="dataSource" />
        <!--配置XML的映射。classpath;扫描资源文件下的所有xml文件-->
        <property name="mapperLocations" value="classpath:cn/lyq/crm/mapper/*.xml" />
        <!--为所有相应的包中的类取别名-->
        <property name="typeAliasesPackage" value="cn.lyq.crm.domain" />
        <!--配置一个拦截器(分页插件):注意一下版本问题-->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <value>helperDialect=mysql</value>
                    </property>
                </bean>
            </array>
        </property>
    </bean>

    <!--
        这是一个映射器的FactoryBean,帮咱们创建一个映射器
        这样写的话咱们以后每一个映射器都要做单独的配置
    -->
    <!--
    <bean id="departmentMapper" class="org.mybatis.spring.mapper.MapperFactoryBean">
        <property name="mapperInterface" value="cn.lyq.ssm.mapper.DepartmentMapper" />
        <property name="sqlSessionFactory" ref="sqlSessionFactory" />
    </bean>
    -->

    <!--推荐使用方案:直接创建所有的映射器mapper。就不用每个映射器单独配置了-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="cn.lyq.crm.mapper" />
    </bean>

    <!--我们需要配置一个事务管理器
        以前学习JPA ,是有一个类JpaTransactionManager的事务对象
        mybatis用的是:DataSourceTransactionManager
    -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource" />
    </bean>
    <!--配置标签支持事务-->
    <tx:annotation-driven transaction-manager="transactionManager" />
</beans>

6、applicationContext-mvc.xml配置

• 注意一下用到的包名

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       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
">
    <!--扫描Controller-->
    <context:component-scan base-package="cn.lyq.crm.web.controller" />
    <!--支持SpringMVC的注解-->
    <mvc:annotation-driven />
    <!--静态资源放行,解决restful风格-->
    <mvc:default-servlet-handler />
    <!--视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>
    <!--上传解析器-->
    <!--文件上传解析器：必须是这个multipartResolver-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设置上传文件的最大尺寸为1MB -->
        <property name="maxUploadSize">
            <value>1048576</value>
        </property>
    </bean>
    <!--不要这样引入:以后还要集成其它框架(shiro)就集成不了-->
    <!--<import resource="classpath:applicationContext.xml" />-->
</beans>

二、代码生成最基本的功能

1、准备好相应的代码生成器插件

• 在pom.xml中已经导入成功

<plugin>
 <groupId>org.mybatis.generator</groupId>
   <artifactId>mybatis-generator-maven-plugin</artifactId>
   <version>1.3.2</version>
   <configuration>
     <!--自定义代码生成器的路径-->
     <!--<configurationFile>yourLocation/mybatis-generator-config.xml</configurationFile>-->
     <verbose>true</verbose>
     <overwrite>true</overwrite>
   </configuration>
 </plugin>

2、准备generatorConfig.xml代码生成器配置文件

• 先把数据库准备好
• 项目结构设置好后，多注意配置文件中要生成代码的包的路径

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<!-- 自动生成器的配置(根目录，不做过多介绍)-->
<generatorConfiguration>
    <!--
    	classPathEntry：可以配置多个，也不配置
    	数据库驱动:这里找到相应的驱动jar包就可以了(注:不同数据库的jar不一样)
    		location:里面的是路径(也可以直接写绝对路径 -> 如:E:\mybatis\mysql-connector-java-5.1.26-bin.jar)
    -->
    <classPathEntry   location="H:\mysql-connector-java-5.1.46.jar"/>
    <!--
    	context：用于生成一组对象的环境(至少配置1个，可以配置多个)
    	id:表达唯一的名称
    	targetRuntime：用于指定生成的代码的运行环境(MyBatis3/MyBatis3Simple)
    		MyBatis3:默认值
    		MyBatis3Simple：不会生成与Example(案例)相关的方法
    -->
    <context id="DB2Tables"   targetRuntime="MyBatis3Simple" >
        <!--
            用于配置如果生成注释信息(最多可以配置一下)
            suppressAllComments:阻止生成注释 ，默认为false
            suppressDate:阻止生成的注释 时间戳，默认为false
            addRemarkComments：注释是否添加数据库表的备注信息，默认为false
         -->
        <commentGenerator>
            <property name="suppressDate" value="true"/>
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>
        <!--
        	这个应该比较清楚，配置连接数据库的基本信息
        -->
        <jdbcConnection driverClass="com.mysql.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/crm"
                        userId="root" password="123456">
        </jdbcConnection>
        <!--
        	用于指定JDBC类型和Java类型如何转换，最多可以配置一个
        	forceBigDecimals:控制是否强制将DECIMAL和NUMERIC类型的JDBC字段转换成Java类型的 BigDecimal
        					 默认为false,一般不需要配置
        -->
        <javaTypeResolver>
            <property name="forceBigDecimals" value="false"/>
        </javaTypeResolver>

        <!--
        	javaModelGenerator:用来控制生成的实体类
	        	targetPackage：生成Model类存放位置(包名)  domain类
	        	targetProject：指定目标项目路径(根目录)
        		对应的子属性:
	        		trimStrings：判断是否对数据库查询结果进行trim操作(默认false)
        -->
        <javaModelGenerator targetPackage="cn.lyq.crm.domain" targetProject="src/main/java">
            <property name="trimStrings" value="true"/>
        </javaModelGenerator>
        <!--
        	sqlMapGenerator：生成映射文件存放位置(Mapper.xml文件)
        		targetPackage:生成SQL映射文件(XML文件)在哪个包中
        		targetProject:指定目标项目路径(根目录)
        -->
        <sqlMapGenerator targetPackage="cn.lyq.crm.mapper" targetProject="src/main/resources">
        </sqlMapGenerator>

        <!--
        	javaClientGenerator：Java客户端生成器(生成Dao/Mapper的接口)
        						该 标签可选(最多配置一个)，如果不配置，就不会生成Mapper接口
        		type:选择客户端代码生成器
        			MyBatis3
        				ANNOTATEDMAPPER：基于注解的Mapper接口，不会有对应的XML映射文件
        				MIXEDMAPPER:XML和注解混合形式
        				XMLMAPPER：所有方法都在XML中(接口调用依赖XML)
        			MyBatis3Simple
        				ANNOTATEDMAPPER：基于注解的Mapper接口，不会有对应的XML映射文件
        				XMLMAPPER：所有方法都在XML中(接口调用依赖XML)
        		targetPackage：生成Mapper接口存放的包名
        		targetProject：指定目标项目路径
        -->
        <javaClientGenerator type="XMLMAPPER" targetPackage="cn.lyq.crm.mapper" targetProject="src/main/java">
            <property name="enableSubPackages" value="true"/>
        </javaClientGenerator>
        <!--
        	table：生成对应表及类名
	        	tableName：对应表名(注:%代表所有)
	        	domainObjectName:对应的类名
        		generatedKey：主键自增的id字段(针对当前 数据库配置MySQL)
        -->
        <table tableName="t_department" domainObjectName="Department">
            <generatedKey column="id" sqlStatement="MySql" />
        </table>
    </context>
</generatorConfiguration>

三、三层的搭建

• 代码生成器生成了部分代码(相应的xml已经存在)

1、Mapper层。

（1）父类mapper---->BaseMapper。

（2）自己的mapper----->DepartmentMapper

/*
* 继承mapper父接口，并确定泛型为Department类型
* */
public interface DepartmentMapper extends BaseMapper<Department> {

}

2、service层

（1）接口层

• 父接口IBaseService接口
  
• 自己的接口IDepartmentService

//直接继承service的父接口接口,确定泛型类型为Department
public interface IDepartmentService extends IBaseService<Department>{
}

（2）实现层

• 父实现类
  注意开启事务、注意泛型T，不要漏写、重点在分页方法。下面会具体说明

/*
* service的实现层的父类。
* 不确定类型，使用泛型。
* 实现service层的父接口,并实现所有方法
* 加上事务支持
* */
@Transactional
public class BaseServiceImpl<T> implements IBaseService<T>{

    //注入mapper对象。准备调用mapper层的操作数据库的方法
    @Autowired
    private BaseMapper<T> baseMapper;

    @Override
    public void save(T t) {
        baseMapper.insert(t);
    }

    @Override
    public void update(T t) {
        baseMapper.updateByPrimaryKey(t);
    }

    @Override
    public void deletet(Long id) {
        baseMapper.deleteByPrimaryKey(id);
    }

    @Override
    //查询不需要事务
    @Transactional(readOnly = true,propagation = Propagation.SUPPORTS)
    public T findOne(Long id) {
       return baseMapper.selectByPrimaryKey(id);
    }

    @Override
    //查询不需要事务
    @Transactional(readOnly = true,propagation = Propagation.SUPPORTS)
    public List<T> findAll() {
        return baseMapper.selectAll();
    }

    //分页查询方法
    @Override
    public PageResult<T> queryAll(BaseQuery baseQuery) {
        //引用mybatis的分页插件就直接使用。参数：当前页数、每页数据的条数。根据BaseQuery中的EasyUi的参数字段传过来
        PageHelper.startPage(baseQuery.getPage(),baseQuery.getRows());
        //拿到page数据
        Page<T> page = baseMapper.queryAll(baseQuery);
        //经过PageResult中的构造函数，将数据转换成easyui需要的数据格式
        return new PageResult<T>(page);
    }
}

• 自己的实现类
  注意开启service层的注解扫描、最后要先测试下service是否能成功

/*
*自己的service层实现类先继承service层的实现层的父类，并且再实现自己的service层接口
* 注意打上注解@service
* */
@Service
public class DepartmentServiceImpl extends BaseServiceImpl<Department> implements IDepartmentService {
}

3、controller层

• 自己也可以加一个父类
• 准备文件: /WEB-INF/views/department/index.jsp

（1）Controller中的测试代码。DepartmentController

• 注意： 开启controller层的注解扫描、这是一个完整的controller，包括了数据的增删改查和分页功能

@Controller
@RequestMapping("/department")
public class DepartmentController {

    @Autowired
    private IDepartmentService departmentService;

    @RequestMapping("/index")
    public String index(){
        return "/department/index";
    }

    //查询所有数据。将query对象传过来
    @RequestMapping("/page")
    @ResponseBody//返回json数据给前台
    public PageResult<Department> page(DepartmentQuery query){
//        System.out.println(query);//BaseQuery{page=1, rows=10}
        //直接响应给前台的就是easyui要的数据格式。
        return departmentService.queryAll(query);
    }

    //返回给前台的结果  {success:true,msg:xx}
    @RequestMapping("/save")
    @ResponseBody//返回json数据给前台
    public JsonResult save(Department department){
        //先判断是否有id值，有就是修改保存操作，没有就是添加保存操作
        try {
            //有id就是修改保存操作
            if(department.getId()!=null) {
                departmentService.update(department);
            }else {
                //否则就是添加保存
                departmentService.save(department);
            }
            return new JsonResult();
        } catch (Exception e) {
            e.printStackTrace();
            //e.getMessage():拿到报错信息
            return new JsonResult(false,e.getMessage());
        }
    }

    //删除数据
    @RequestMapping("/delete")
    @ResponseBody//返回json数据给前台
    public JsonResult delete(Long id){
        try {
            departmentService.deletet(id);
            //成功删除后，直接将{success:true,msg:XXX}返回给前台
            return new JsonResult();
        } catch (Exception e) {
            e.printStackTrace();
            //删除失败，就将{success:false,msg:xxx}返回给前台处理
            return new JsonResult(false,e.getMessage());
        }
    }
}

四、准备EasyUI(上下文路径的配置)

1、引入EasyUi文件

• 不把所有的文件导入(只要基本文件)，以下四个是必须要的文件
  locale : 国际化支持的文件夹
  themes ：主题(eaayui的样式)
  jquery.easyui.min.js ： easyui核心的js功能
  jquery.min.js ： jQuery的支持

2、上下文路径

• 访问页面时的项目前缀，如图
  
  g.cn/20190409231911625.png)

（1）idea中如何配置上下文路径

• 以后所有的请求都必需加上这个路径crm,比如：

• 都要加crm这个路径以后改动或者增加路径都很麻烦，怎么解决？
  第一种方式：HTML代码，在请求前 ： ${pageContext.request.contextPath}，然后随便怎么更改上下文路径都不影响这儿。但是要写这么长串代码，而且以后每个文件前都要加上这串代码，很繁杂。
  
  第二种方式：jsp的base标签使用
  准备一个公共的jsp页面文件common.jsp，里面有easyui的必要文件和解决上下文路径的base标签
  common.jsp (在/WEB-INF/views/common/common.jsp中)

<%--此jsp为公共的引入代码--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--上下文路径的配置--%>
<%
    //获取到上下文路径
    String path=request.getContextPath();
    //拼接相应的路径前缀：http://localhost:80/crm2/
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
    <base href="<%=basePath%>">

<%--重要的easyui文件。上面配置了上下文路径，所以static前面就不用再加/--%>
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/color.css">
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>

图片显示：

（2）其他jsp文件要引入这个公共jsp文件

index.jsp (/WEB-INF/views/department/index.jsp)

（3）准备deparment.js (/static/js/model/department.js)

• 完成一个请求(这个请求会自动加上 上下文路径)
  

五、完成CRUD功能

• 在上面CRUD的controller层（后台代码已写好了，下面都是jsp页面和js部分）

1、department/index.jsp 代码

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/4/8
  Time: 18:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入公共的jsp文件（里面有easyui的重要文件）--%>
    <%@include file="/WEB-INF/views/common/common.jsp"%>
    <%--引入自己写的当前模块对应的js代码--%>
    <script type="text/javascript" src="static/js/model/department.js"></script>
</head>
<body>
<%--grid数据表格。准备用js创建,然后在上面引入js文件就可以了--%>
<table id="departmentGrid"></table>

<%--grid数据表格的操作按钮--%>
<div id="toolbar">
    <a href="javascript:;" data-method="add" plain="true" class="easyui-linkbutton c1">添加</a>
    <a href="javascript:;" data-method="update" plain="true" class="easyui-linkbutton c2">修改</a>
    <a href="javascript:;" data-method="delete" plain="true" class="easyui-linkbutton c3">删除</a>
    <a href="javascript:;" data-method="refresh" plain="true" class="easyui-linkbutton c4">刷新</a>
</div>

<%--按钮的弹出框dialog,并在弹出框中添加个form表单。准备用js创建,然后在上面引入js文件就可以了--%>
<div id="departmentDialog">
    <form id="departmentForm" method="post">
        <%--修改保存操作时隐藏id。id有值就是修改，没值就是添加--%>
        <input type="hidden" name="id">
        <table cellpadding="5">
            <tr>
                <td>编码:</td>
                <td><input class="easyui-textbox" type="text" name="sn" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>名称:</td>
                <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>路径:</td>
                <td><input class="easyui-textbox" type="text" name="dirpath" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>状态:</td>
                <td>
                    <select class="easyui-combobox" name="state" style="width:200px; " data-options="panelHeight:'auto'">
                        <option value="-1">作废</option>
                        <option value="0">正常</option>
                        <option value="1">异常</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</div>

<%--弹出框的button按钮，确定和取消操作--%>
<div id="departmentDialogButtons">
    <a href="javascript:;" data-method="save" plain="true" class="easyui-linkbutton c5">确定</a>
    <a href="javascript:;" data-method="close" plain="true" class="easyui-linkbutton c6">取消</a>
</div>
</body>
</html>

2、department.js 代码

• js代码创建jsp中的组件、CRUD注册事件，请求后台路径方法

//页面加载完后再运行
$(function () {

    //公共的组件抽取
    var departmentGrid=$("#departmentGrid");
    var departmentDialog=$("#departmentDialog");
    var departmentForm=$("#departmentForm");

    //事件注册。根据按钮的data-method属性动态的注册事件
    $("[data-method]").on("click",function () {
        //动态拿到点击的按钮中的data-method方法值add、update......
        var methodName = $(this).data("method");
        console.debug(methodName);
        //动态的调用lyq中的方法
        lyq[methodName]();
    })

    //lyq中有所有带有data-method属性的方法。注意配置ES6，下面会用到新语法
    lyq={
        //添加事件
        add(){
            //打开弹出框，并居中
            departmentDialog.dialog("open").dialog("center");
            //清空form表单中的数据，每次打开都没有数据
            departmentForm.form("clear");
        },

        //更新事件
        update(){
            //选中一行数据才能操作
            var rows = departmentGrid.datagrid("getSelected");
            //如果没有选中数据，给出提示
            if(!rows){
                $.messager.alert('提示',"请先选中一行再来","error");
                //返回
                return;
            }
            //修改时弹出有form表单的对话框，并且居中
            departmentDialog.dialog("center").dialog("open");
            //每次打开，都先将数据表格中的数据清空
            departmentForm.form("clear");
            //数据的回显。load:加载选中的行的数据
            departmentForm.form("load",rows);
        },

        //删除事件
        delete(){
            //选中一行数据才能删除
            var rows = departmentGrid.datagrid("getSelected");
            //如果没有选中数据，给出提示
            if(!rows){
                $.messager.alert('提示',"请先选中一行再来","error");
                //返回
                return;
            }
            //选中数据后弹出消息框询问是否要删除
            $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
                //确认删除
                if (r){
                    //发送ajax请求到后台，并传个id参数过去
                    $.get("department/delete",{id:rows.id},function (result) {
                        //后台返回的数据  {success:true,msg:xx}
                        if(result.success){
                            //成功删除后，刷新数据表格
                            lyq.refresh();
                        }else{
                            //删除失败，给出信息提示
                            $.messager.alert('操作失败',result.msg,"error");
                        }
                    })
                }
            });
        },

        //刷新事件
        refresh(){
            //刷新的是grid数据表格.reload；从新加载页面数据
            departmentGrid.datagrid("reload");
        },

        //弹出框的确定按钮保存事件
        save(){
            //提交form表单
            departmentForm.form('submit', {
                url:"department/save",
                //提交表单前的方法。做一些验证，如果为false，会阻止提交功能
                onSubmit: function(){
                    return $(this).form('validate');
                },
                //请求后台成功后拿到返回的数据 {success:true,msg:xx}
                success:function(data){
                    //先将数据转换成json格式
                    var resoult=JSON.parse(data);
                    if(resoult.success){//如果为true
                        //调用刷新数据表格和关闭弹出框方法
                        lyq.refresh();
                        lyq.close();
                    }else {
                        //弹出消息框，并告知错误信息
                        $.messager.alert('操作失败',result.msg,"error");
                    }
                }
            });
        },

        //弹出框的取消按钮保存事件
        close(){
            //关闭弹出框
            departmentDialog.dialog("close");
        }
    }

    //通过js创建的数据表格grid
    departmentGrid.datagrid({
        fit:true,
        //数据表格的自适应父容器
        fitColumns:true,
        //只能单选
        singleSelect:true,
        url:'department/page',
        //数据表格的底部显示分页工具栏
        pagination:true,
        //可以更改分页工具栏中的每页数据显示，值就代表每页条数
        pageList:[5,10,20,30,40,100],
        //引入jsp页面中创建的grid数据表格操作按钮
        toolbar:"#toolbar",
        columns:[[
            {field:'sn',title:'编码',width:100},
            {field:'name',title:'部门名称',width:100},
            {field:'state',title:'状态',width:100,align:'right'},
            {field:'dirpath',title:'路径',width:100,align:'right'}
        ]]
    });

    //通过js创建的弹出框dialog
    departmentDialog.dialog({
        title: '编辑',
        //默认关闭
        closed: true,
        modal: true,
        //jsp中的弹出框的button按钮。
        buttons:"#departmentDialogButtons"
    });
})

五、前台数据的分页。

1、先在EasyUi的数据表格Grid组件中添加个分页的属性

• 前端代码部分：

//在数据表格的底部显示分页工具栏
pagination:true,

• 显示效果
  当然，工具栏上面的数据都是默认的。
  

2、EasyUi分页数据参数是pages和Rows

3、所以根据EasyUi的参数数据，在后台写一个父类的Query，并且有这两个字段。就正好与easyui传的值对应上的

• 并且每次刷新前台数据时都能拿到两个参数字段的值
  
• DepartmentQuery(如果以后有特殊的查询写在里面)
  

4、MyBatis的分页插件

（1）引入MyBatis的分页插件。上面的pom.xml中已经有引入

<!--mybatis分页插件-->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>5.0.1</version>
  </dependency>
</dependencies>

（2）紧接着在applicationContext.xml中配置一个分页拦截器(分页插件)。前面已经说过，MyBatis的分页插件是基于MyBatis的拦截器实现的。

• 注意：这是插件5.0.1的插件版本配置，不同的版本配置有区别

<!--配置一个分页拦截器(分页插件):注意一下版本问题-->
<property name="plugins">
  <array>
      <bean class="com.github.pagehelper.PageInterceptor">
          <property name="properties">
              <value>helperDialect=mysql</value>
          </property>
      </bean>
  </array>
</property>

• 由于集成了Spring，因此已将重要的对象SqlSessionFactory交给了spring去管理，所以这个插件配置也要配置在SqlSessionFactory的bean里面。如图：
  
• 再说一下5.0.0版本的MyBatis插件的配置
  插件版本：

<!-- 分页插件 -->
<dependency>
     <groupId>com.github.pagehelper</groupId>
     <artifactId>pagehelper</artifactId>
     <version>5.0.0</version>
 </dependency>

配置分页拦截器（分页插件）

<!--配置一个拦截器 plugin:插件 -->
<plugins>      
     <!-- com.github.pagehelper为PageHelper类所在包名 -->
     <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>

5、在专门写SQL语句的DepartmentMapper.xml中添加一个queryAll查询方法

参数类型没有取别名。可以在applicationContext.xml中配置别名的地方添加一个query包的别名配置。

6、修改BaseMapper这个接口，添加一个分页的方法

• 其中的Page这个类就是引用的MyBatis分页插件中的
  

7、Page的测试

• service层的父类实现BaseServiceImpl里：
  

• 测试
  

• 打印拿到的后台page数据：
  

• 遍历后的page数据
  

• 由于EasyUi的grid组件中，后台实际响应给前台的page对象数据：就只需要total和rows这两个字段
  

• 所以新建个类PageResult。里面就只有total和rows这两个需要的字段。
  

8、最后总的完成分页的步骤

（1）PageResult类

（2）mapper.xml中的sql语句

（3）BaseMapper层

（4）service层的父接口层。IBaseService

（5）service实现层的父实现层。BaseServiceImpl

（6）controller层

（7）js部分

（8）关于第7步的分页工具栏中的每页数据条数量

六、最终成果图