SSM+EasyUI集成

版权声明:原创,转载需告知 https://blog.csdn.net/qq_42136250/article/details/89077186

(一)SSM集成

1. 创建maven项目

在这里插入图片描述
在这里插入图片描述

2. 导包
<?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.crm</groupId>
    <artifactId>crm</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>crm Maven Webapp</name>
    <!-- FIXME change it to the project's website -->
    <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>
        <org.springframework.version>4.2.5.RELEASE</org.springframework.version>
        <org.hibernate.version>4.3.8.Final</org.hibernate.version>
        <spring-data-jpa.version>1.9.0.RELEASE</spring-data-jpa.version>
        <com.fasterxml.jackson.version>2.5.0</com.fasterxml.jackson.version>
    </properties>
    <dependencies>
        <!-- Spring的支持包 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>${org.springframework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>4.2.5.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>${org.springframework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>${org.springframework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>${org.springframework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>${org.springframework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>${org.springframework.version}</version>
            <scope>test</scope>
        </dependency>
        <!-- 引入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>
        <!-- SpringMCV上传需要用到io包-->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-io</artifactId>
            <version>1.3.2</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>

        <dependency>
            <groupId>commons-dbcp</groupId>
            <artifactId>commons-dbcp</artifactId>
            <version>1.2.2</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.6</version>
        </dependency>

        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.5</version>
        </dependency>
        <!-- 測試包 -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <!-- 这个scope 只能作用在编译和测试时,同时没有传递性。表示在运行的时候不添加此jar文件 -->
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.2</version>
        </dependency>

        <!-- 导入poi的支持-->
        <!-- poi支持的jar包
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.11</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.11</version>
        </dependency>
        -->
        <!--mybatis-->
        <!--mybatis的核心包-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.2.1</version>
        </dependency>
        <!--mybatis集成spring的框架-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.2.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/log4j/log4j -->
        <!--
         日志包
        -->
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-log4j12 -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.2</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>1.7.2</version>
        </dependency>

        <!--mybatis的代码生成器的核心包-->
        <dependency>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-core</artifactId>
            <version>1.3.5</version>
        </dependency>

        <!--
         jar包导入
        https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
        <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>
                        <verbose>false</verbose>
                        <overwrite>true</overwrite>
                    </configuration>
                </plugin>
                <plugin>
                    <artifactId>maven-clean-plugin</artifactId>
                    <version>3.1.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.8.0</version>
                </plugin>
                <plugin>
                    <artifactId>maven-surefire-plugin</artifactId>
                    <version>2.22.1</version>
                </plugin>
                <plugin>
                    <artifactId>maven-war-plugin</artifactId>
                    <version>3.2.2</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. 创建结构
  • 项目结构图:
    在这里插入图片描述
  • 创建crm数据库,并导入表格
4.创建配置文件
    • jdbc.properties
jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql:///crm
jdbc.username=root
jdbc.password=admin
  • 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
">
  <!--
   jdbc.properties -> datasource -> SqlSessionFactory ->mapper(接口,xml)->service->controller
    Spring集成MyBatis (MyBatis操作数据库的对象交给Spring管理)
       1.需要把SqlSessionFactory让Spring来管理
       2.数据源(四大金刚) 3.别名的问题  4.可以找到mapper.xml
  -->
    <context:component-scan base-package="cn.lzj.crm.service" />

  <!--引入外部的db.properties-->
  <context:property-placeholder location="classpath:jdbc.properties" />

  <!--配置dbcp连接池-->
  <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>

  <!--
    还记得以前JPA是怎么搞的? EntityManagerFactoryBean
    猜:MyBatis:是否有一个SqlSessionFactoryBean的对象
    -->
  <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
      <!--配置数据源-->
      <property name="dataSource" ref="dataSource" />
      <!--配置别名-->
      <property name="typeAliasesPackage" value="cn.lzj.crm.domain" />
      <!--扫描 mapper.xml-->
      <property name="mapperLocations" value="classpath:cn/lzj/crm/mapper/*.xml" />
  </bean>

  <!--配置对应的MapperBean:只能配置一个Mapper,太多的话就很麻烦-->
   <!--
   <bean id="departmentMapper" class="org.mybatis.spring.mapper.MapperFactoryBean">
     <property name="sqlSessionFactory" ref="sessionFactory" />
     <property name="mapperInterface" value="cn.itsource.ssm.mapper.DepartmentMapper" />
   </bean>
   -->

  <!--一劳永逸的配置Mapper的方案-->
  <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
      <!--扫描的包的配置-->
      <property name="basePackage" value="cn.lzj.crm.mapper" />
      <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
  </bean>
    <!--配置一个事务对象-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource" />
    </bean>
    <!--事务的注解支持-->
    <tx:annotation-driven transaction-manager="transactionManager" />
</beans>
  • 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.lzj.crm.controller" />
    <!--静态资源放行-->
    <mvc:default-servlet-handler />
    <!--springMVC的注解支持-->
    <mvc:annotation-driven />
    <!--视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>

    <!--文件上传解析器  必须有id,且id必须为multipartResolver-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="1048576"/>
    </bean>
    <!--
        如果我们是在SpringMVC中来引入Spring的xml,那么普通的集成运行没有问题
        但是到后期和其它的一些框架集成就无法成功(比如说shiro)
       -->
    <!--<import resource="classpath:applicationContext.xml" />-->
</beans>

  • 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="D:\openSource\mysql-connector-java-5.1.26-bin.jar"/>
    <!--
    	context:用于生成一组对象的环境(至少配置1个,可以配置多个)
    	id:表达唯一的名称
    	targetRuntime:用于指定生成的代码的运行环境(MyBatis3/MyBatis3Simple)
    		MyBatis3:默认值
    		MyBatis3Simple:不会生成与Example(案例)相关的方法
    -->
    <context id="DB2Tables"   targetRuntime="MyBatis3Simple" >
        <!--
            用于配置如果生成注释信息(最多可以配置一下)
            suppressAllComments:阻止生成注释 ,默认为false
            suppressDate:阻止生成的注释 时间戳,默认为falsefalse
            addRemarkComments:注释是否添加数据库表的备注信息,默认为false
         -->
        <commentGenerator>
            <property name="suppressDate" value="true"/>
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>
        <!--
        	这个应该比较清楚,配置连接数据库的基本信息
        -->
        <jdbcConnection driverClass="com.mysql.jdbc.Driver"
                        connectionURL="jdbc:mysql:///crm"
                        userId="root" password="admin">
        </jdbcConnection>
        <!--
        	用于指定JDBC类型和Java类型如何转换,最多可以配置一个
        	forceBigDecimals:控制是否强制将DECIMAL和NUMERIC类型的JDBC字段转换成Java类型的 BigDecimal
        					 默认为false,一般不需要配置
        -->
        <javaTypeResolver>
            <property name="forceBigDecimals" value="false"/>
        </javaTypeResolver>

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

  • log4j.properties
#全局:你要打印的东西:只打印错误
log4j.rootLogger=ERROR, stdout
#log4j.rootLogger=NONE
#把左边包名需要修改为对应的包名
#局部要求 ERROR:错误  Warn:警告 Info:信息 Debug:调试 TRACE:详细  NONE:不显示日志信息
log4j.logger.cn.lzj=TRACE

#代表的是打印的位置
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
#打印的格式(可以灵活地指定布局模式)
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
#这里就是自定义的格式 %d:时间  %p:级别
log4j.appender.stdout.layout.ConversionPattern=%d %p [%c] - %m%n
  • web.xml
<?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_4_0.xsd"
         version="4.0">
  <!--配置运行SpringMVC的核心控制器-->
  <servlet>
    <servlet-name>dispatcherServlet</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>dispatcherServlet</servlet-name>
    <!--适应RESULTful风格-->
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <!--Spring的web监听器-->
  <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>

  <!---编码过滤器:解决Post请求中文字符乱码的问题,注:tomcat8之后,get就可以传输中文字符-->
  <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>
</web-app>

5.使用mybatis的代码生成器创建mapper和domain
6.抽取公共代码
  • BaseMapper
package cn.lzj.crm.mapper;
import java.util.List;
public interface BaseMapper<T> {
    int deleteByPrimaryKey(Long id);
    int insert(T record);
    T selectByPrimaryKey(Long id);
    List<T> selectAll();
    int updateByPrimaryKey(T record);
}

DepartmentMapper 继承BaseMapper

public interface DepartmentMapper extends BaseMapper<Department> {}
  • IBaseService
public interface IBaseService<T> {
    void save(T department);
    void delete(Long id);
    void update(T department);
    T findOne(Long id);
    List<T> findAll();
}

IDepartmentService继承IBaseService

public interface IDepartmentService extends IBaseService<Department>{}
  • BaseServiceImpl
package cn.lzj.crm.service.impl;

import cn.lzj.crm.domain.Department;
import cn.lzj.crm.mapper.BaseMapper;
import cn.lzj.crm.mapper.DepartmentMapper;
import cn.lzj.crm.service.IBaseService;
import cn.lzj.crm.service.IDepartmentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

//注意父业务层,不要配置@Service,因为@Service是一个不能被继承的注解
@Transactional(readOnly = true,propagation = Propagation.SUPPORTS)
public class BaseServiceImpl<T> implements IBaseService<T> {

    @Autowired
    private BaseMapper<T> mapper;

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

    @Override
    @Transactional
    public void delete(Long id) {
        mapper.deleteByPrimaryKey(id);
    }

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

    @Override
    public T findOne(Long id) {
        return mapper.selectByPrimaryKey(id);
    }

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

DepartmentServiceImpl继承BaseServiceImpl,并实现IDepartmentService

@Service
public class DepartmentServiceImpl extends BaseServiceImpl<Department>
        implements IDepartmentService {
}
7.创建controller层,配置Tomcat,测试是否能访问页面内容

到此SSM项目便成功集成

(二)SSM框架集成EasyUI进行CRUD

1.引入EasyUI的js文件

注:此处不需要再将整个easyUI资源全部拷入,只需要拷贝基本功能即可,简约空间,并且提高性能

locale : 国际化支持的文件夹
themes :主题(eaayui的样式)
jquery.easyui.min.js : easyui核心的js功能
jquery.min.js : jQuery的支持

在这里插入图片描述

2.上下文路径

idea中配置上下文路径 猫编辑 -> Deployment ->Application context
所有的请求都必需加上这个路径
在这里插入图片描述

方案一:在请求前 : ${pageContext.request.contextPath}
方案二:使用Base标签(推荐,建议在公共jsp内进行添加)

<%
 String path = request.getContextPath();
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
3. 准备common.jsp (/WEB-INF/views/common/common.jsp)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<%--easyui的样式--%>
<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>
<%--按钮的风格样式--%>
<link rel="stylesheet" type="text/css" href="easyui/themes/color.css">
<%--国际化支持--%>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
4.department.jsp (/WEB-INF/views/department/department.jsp)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%@ include file="/WEB-INF/views/common/common.jsp"%>
    <script src="static/js/model/department.js"></script>
</head>
<body>
    <table id="departmentDataGrid"></table>
    <div id="tools">
        <a href="javaScript:;" data-method="add" class="easyui-linkbutton" data-options="iconCls:'icon-search'">添加</a>
        <a href="javaScript:;" data-method="delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
        <a href="javaScript:;" data-method="update" class="easyui-linkbutton" data-options="iconCls:'icon-update'">修改</a>
        <a href="javaScript:;" data-method="search" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
        <a href="javaScript:;" data-method="refulsh" class="easyui-linkbutton" data-options="iconCls:'icon-search'">刷新页面</a>
    </div>
    <div id="deptFromDialog">
        <form id="deptFrom" method="post">
            <input id="employeeId" type="hidden" name="id" />
            <table cellpadding="5">
                <%--因为textbox在处理自定义验证时,有问题,所以使用validatebox进行验证--%>
                <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>
                        <select class="easyui-combobox" name="state" style="width:200px;" panelHeight='auto'>
                            <option value="0">待审</option>
                            <option value="-1">已审</option>
                            <option value="1">未知</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div id="FromButtons">
        <a href="javaScript:;" data-method="save" class="easyui-linkbutton" data-options="">确认</a>
        <a href="javaScript:;" class="easyui-linkbutton" "$('#deptFromDialog').dialog('close')">取消</a>
    </div>
</body>
</html>
5. 准备deparment.js (/static/js/model/department.js)
$(function () {
    /*公共组件的抽取*/
    var depertmentDataGrid =  $("#departmentDataGrid");
    var deptFrom =  $("#deptFrom");
    var deptFromDialog =  $("#deptFromDialog");
    /*注册事件*/
    $("*[data-method]").on("click",function () {
        var method = $(this).data("method");
        lzj[method]();
    })
    lzj = {
        add(){
            /*打开并居中*/
            deptFromDialog.dialog("open").dialog("center");
            /*清空表单内的数据*/
            deptFrom.form("clear");
        },
        save(){
            deptFrom.form('submit', {
                url:"department/save",
                onSubmit: function(){
                    return  $(this).form('validate');
                },
                success:function(data){
                    var result = JSON.parse(data);
                    if (result.success) {
                        depertmentDataGrid.datagrid("reload");
                        deptFromDialog.dialog("close");
                    }else{
                        $.messager.alert('提示',`保存失败,,原因是:${result.msg}`,'error');
                    }
                }
            });
        },
        delete(){
            var selectRow = depertmentDataGrid.datagrid("getSelected");
            if(selectRow){
                $.messager.confirm('确认对话框', '亲!您真的要删除它吗?', function(r){
                    if (r){
                        $.get("department/delete",{id:selectRow.id},function (result) {
                            if (result) {
                                depertmentDataGrid.datagrid("reload");
                            }else{
                                $.messager.alert('提示','删除失败,原因是:'+result.msg,'error');
                            }
                        })
                    }
                });
            }else{
                $.messager.alert('提示','亲,删除需要选中数据哦~','info');
            }
        },
        update(){
            var selectRow = depertmentDataGrid.datagrid("getSelected");
            if(selectRow){
                deptFromDialog.dialog("open").dialog("center");
                deptFrom.form("clear");
                //回显数据
                deptFrom.form("load",selectRow);
            }else{
                $.messager.alert('提示','亲,修改需要选中数据哦~','info');
            }
        },
        search(){
            alert(1)
        },
        refulsh(){
            depertmentDataGrid.datagrid("reload");
        },
    }
    depertmentDataGrid.datagrid({
        fit:true,
        fitColumns:true,
        singleSelect:true,
        pagination:true,
        url:'department/list',
        toolbar:'#tools',
        columns:[[
            {field:'name',title:'名称',width:100},
            {field:'id',title:'编号',width:100},
            {field:'sn',title:'标识',width:100},
            {field:'state',title:'状态',width:100},
        ]]
    });
    deptFromDialog.dialog({
        title: '编辑',
        width: 350,
        height: 300,
        closed: true,
        modal: true,
        buttons:'#FromButtons'
    });
})
6.分页
  • 准备BaseQuery
    因为前台使用的是EasyUI框架展示数据,添加分页导航栏之后,刷新数据需要传入的数据是page和rows
    在这里插入图片描述
public class BaseQuery {
    //因为前台使用的是easyUI框架,分页需要的参数是page和rows
    private int page;
    private int rows = 10;  //后台默认显示的数据是10条
    //getter与setter省略
}
  • DepartmentQuery(如果以后有特殊的查询写在里面)
public class DepartmentQuery extends BaseQuery {
}
  • departmentMapper.xml添加分页查询数据的方法
<select id="queryAll" parameterType="DepartmentQuery" resultMap="BaseResultMap" >
  select id, sn, name, dirPath, state, manager_id, parent_id
  from t_department
</select>
  • BaseMapper接口添加分页查询数据的方法
public interface BaseMapper<T> {
    //....
    Page<T> queryAll(BaseQuery baseQuery);
}
  • applicationContext.xml添加分页拦截器
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
      <!--配置数据源-->
      <property name="dataSource" ref="dataSource" />
      <!--配置别名-->
      <property name="typeAliasesPackage" value="cn.lzj.crm.domain,cn.lzj.crm.query" />
      <!--扫描 mapper.xml-->
      <property name="mapperLocations" value="classpath:cn/lzj/crm/mapper/*.xml" />
      <!--配置分页拦截器(分页插件):注意版本,不同的版本,配置信息不同,如果没有找到对应的方言,会报空指针异常-->
      <property name="plugins">
          <array>
              <bean class="com.github.pagehelper.PageInterceptor">
                  <property name="properties">
                      <value>helperDialect=mysql</value>
                  </property>
              </bean>
          </array>
      </property>
  </bean>
  • service添加分页查询数据的方法
    注意:因为EasyUI内,分页查询数据向后台传入的是page和rows参数,但是响应的参数total和rows格式的JSON数据
    所以,在后台返回的JSON格式的数据,也需要返回total和rows格式的数据
    如果不使用这种返回的数据格式前台只会展示默认显示的10条数据,无法在选择查看其它数据
    在这里插入图片描述
public class PageResult<T> {
    private long total; //总条数

    private List<T> rows; //这一行的数据

    public PageResult(Page<T> page) {
        this.total = page.getTotal();
        this.rows = page.getResult();
    }
	//省略getter和setter方法
}
  • BaseServiceImpl中添加方法
//完成分页功能性
    @Override
    public PageResult<T> queryAll(BaseQuery query) {
        //配置分页的值
        PageHelper.startPage(query.getPage(),query.getRows());
        Page<T> page = mapper.queryAll(query);
        return new PageResult<T>(page);
    }
  • DepartmentController层添加分页的方法
	@RequestMapping("/page")
    @ResponseBody
    public PageResult<Department> queryAll(DepartmentQuery query){
        return service.queryAll(query);
    }

(三)多模块开发

都没空看开发的目的就是为了实现高内聚、低耦合。利于组件(代码)的重组。

扫描二维码关注公众号,回复: 6047542 查看本文章
1、模块划分
basic-util:工具(不依赖于其它模块,但是其它模块都要依赖)
basic-core:所有模块的公共代码部分
crm-common:crm这个模块的公共代码部分
crm-mapper:crm这个模块的持久层部分
crm-service:crm这个模块的业务层
crm-web:crm这个模块的web层
2、父项目引入子模块
<?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.lzj</groupId>
    <artifactId>maven-many-project</artifactId>
    <packaging>pom</packaging>
    <version>1.0-SNAPSHOT</version>

    <!--父模块中引入相应的子模块-->
    <modules>
        <module>basic-util</module>
        <module>oa-service</module>
    </modules>
</project>
3、子模块中引入其它子模块

在其他子模块的pom.xml中

<!--加一个依赖:座标就可以引入相应的模块功能-->
<dependencies>
    <dependency>
        <groupId>cn.lzj</groupId>
        <artifactId>basic-util</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
</dependencies>

猜你喜欢

转载自blog.csdn.net/qq_42136250/article/details/89077186
今日推荐