SSM整合之CRUD小demo

最新推荐文章于 2024-07-25 11:59:12 发布

Hua·

最新推荐文章于 2024-07-25 11:59:12 发布

阅读量317

点赞数

文章标签： bootstrap spring

本文链接：https://blog.csdn.net/qq_52740442/article/details/117374628

版权

新知识点：mybatis逆向工程，pageHepler分页插件、spring单元测试

一、创建一个maven工程
二、引入项目依赖的jar包【新知识mybatis逆向工程、spring单元测试】
三、搭建数据库环境、建立基本结构和配置框架！
四、整合配置文件
五、测试dao层
- 5.1、使用传统单元测试
- 5.1、使用spring单元测试，可以自动注入我们需要的组件
六、查询业务
七、新增业务
八、修改业务
九、删除业务
- 9.1、发起ajax请求，进行删除操作
- 9.2、完善全部删除功能
十、总结与心得

一、创建一个maven工程

二、引入项目依赖的jar包【新知识mybatis逆向工程、spring单元测试】

<?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>org.example</groupId>
    <artifactId>SSM-CRUDdemo</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
    <dependencies>
        <!--        - - - - - - -   - - - - - - - - - - Spring相关jar包- - - -  - - - - - - - - - - - - - - - - - - - - - - -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.5</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.3.5</version>
        </dependency>
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.9.4</version>
        </dependency>
        <!--        - - - - - - -   - - - - - - - - - - Mybatis相关jar包- - - -  - - - - - - - - - - - - - - - - - - - - - - -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.6</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.2</version>
        </dependency>
        <!--        - - - - - - -   - - - - - - - - - - 数据库相关jar包- - - -  - - - - - - - - - - - - - - - - - - - - - - -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>
        <!--        c3p0连接池-->
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.2</version>
        </dependency>
        <!--        druid连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.3</version>
        </dependency>
        <!--        - - - - - - -   - - - - - - - - - - Servlet-JSP相关jar包- - - -  - - - - - - - - - - - - - - - - - - - - - - -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.3</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <!--        - - - - - - -   - - - - - - - - - - 其他相关jar包- - - -  - - - - - - - - - - - - - - - - - - - - - - -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>
        <!--    json-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.1</version>
        </dependency>
        <!-- mybatis逆向工程依赖 -->
        <dependency>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-core</artifactId>
            <version>1.3.7</version>
        </dependency>
<!--        spring单元测试模块-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>5.3.5</version>
            <scope>test</scope>
        </dependency>
<!--        分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.2.0</version>
        </dependency>
<!--        JSR303校验-->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>6.0.13.Final</version>
        </dependency>
    </dependencies>
    <!--    在build中配置resources ， 来防止我们资源导出失败的问题-->
    <build>
        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
            </resource>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
            </resource>
        </resources>
    </build>

</project>

三、搭建数据库环境、建立基本结构和配置框架！

1、搭建数据库环境
在这里插入图片描述
2、建立基本结构和配置框架！

四、整合配置文件

4.1、没有使用mybatis逆向工程之前整合配置文件

在这里插入图片描述

4.2、使用mybatis逆向工程之后整合配置文件

mybatis逆向工程

Mybatis一个主要的特点就是需要程序员自己编写SQL，那么如果表太多的话，难免会很麻烦，所以MyBatis官方提供了一个逆向工程，可以针对单表自动生成MyBatis执行所需要的代码（包括pojo类，mapper.xml映射文件和Mapper接口等）。一般在实际开发中，常用的逆向工程方式是通过数据库的表生成代码。

4.2.1、创建mybatis逆向工程生成所需的配置文件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>
    <context id="DB2Tables" targetRuntime="MyBatis3">
        <!-- 去除生成的注解 -->
        <commentGenerator>
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>
        <!-- 数据库连接配置 -->
        <!-- 注意xml中不支持&，用&amp;代替 -->
        <jdbcConnection
                driverClass="com.mysql.jdbc.Driver"
                connectionURL="jdbc:mysql://localhost:3306/ssm_crud?useUnicode=true&amp;characterEncoding=utf8&amp;useSSL=false"
                userId="root"
                password="xbh123">
        </jdbcConnection>

        <!-- 处理NUMERIC和DECIMAL类型的策略 -->
        <javaTypeResolver>
            <property name="forceBigDecimals" value="false" />
        </javaTypeResolver>

        <!-- 配置pojo生成的位置 -->
        <javaModelGenerator targetPackage="com.xbh.pojo"  targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true" />
            <property name="trimStrings" value="true" />
        </javaModelGenerator>

        <!-- 配置sql映射文件的生成位置 -->
        <sqlMapGenerator targetPackage="com.xbh.dao" targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true" />
            <property name="trimStrings" value="true" />
        </sqlMapGenerator>

        <!-- 配置dao接口的生成位置 -->
        <javaClientGenerator type="XMLMAPPER" targetPackage="com.xbh.dao" targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true" />
            <property name="trimStrings" value="true" />
        </javaClientGenerator>

        <!-- 指定逆向依据的数据表 -->
        <table tableName="tbl_emp" domainObjectName="Employee"></table>
        <table tableName="tbl_dept" domainObjectName="Department"></table>

    </context>
</generatorConfiguration>

注意：这个配置文件中，各个元素标签出现的位置是有要求的，位置不对会报错

4.2.2、生成程序

public class GBKtest {
        public static void main(String[] args) throws Exception {
            List<String> warnings = new ArrayList<String>();
            boolean overwrite = true;
            File configFile = new File("D:\\workspace_idea\\SSM-CRUDdemo\\src\\main\\resources\\generatorConfig.xml");
            ConfigurationParser cp = new ConfigurationParser(warnings);
            Configuration config = cp.parseConfiguration(configFile);
            DefaultShellCallback callback = new DefaultShellCallback(overwrite);
            MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);
            myBatisGenerator.generate(null);
            System.out.println("生成成功！");
        }
}

4.2.3、生成结果

在这里插入图片描述

4.2.4、逆向工程的优缺点

优点：帮助我们自动生成Java代码，大大加快了我们的开发效率。
缺点：生成的文件太过冗余，不必要的代码过多。尤其是sql映射文件，里面的配置内容太多，对于dao层，提供的方法比较有限，需要自行扩展。

4.2.4、Spring整合Mybatis的相关的配置文件；spring-dao.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"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd">
    <!--    1、关联数据库配置文件-->
    <context:property-placeholder location="classpath:database.properties"/>
    <!--    3、数据库连接池-->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <!-- 配置连接池属性 -->
        <property name="driverClass" value="com.mysql.jdbc.Driver"/>
        <property name="jdbcUrl" value="jdbc:mysql://localhost:3306/ssm_crud?useSSL=true&amp;useUnicode=true&amp;characterEncoding=utf8"/>
        <property name="user" value="root"/>
        <property name="password" value="xbh123"/>
        <!-- c3p0连接池的私有属性 -->
        <property name="maxPoolSize" value="30"/>
        <property name="minPoolSize" value="10"/>
        <!-- 关闭连接后不自动commit -->
        <property name="autoCommitOnClose" value="false"/>
        <!-- 获取连接超时时间 -->
        <property name="checkoutTimeout" value="10000"/>
        <!-- 当获取连接失败重试次数 -->
        <property name="acquireRetryAttempts" value="2"/>
    </bean>
    <!--    3、SqlSessionFactory-->
    <!-- 3.配置SqlSessionFactory对象 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 注入数据库连接池 -->
        <property name="dataSource" ref="dataSource"/>
        <!-- 配置MyBatis全局配置文件:mybatis-config.xml -->
        <property name="configLocation" value="classpath:Mybatis-config.xml"/>

    </bean>
<!--    配置一个批量执行sqlSession-->
    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
        <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"/>
        <constructor-arg name="executorType" value="BATCH"/>
    </bean>

    <!-- 4.配置扫描Dao接口包，动态实现Dao接口注入到spring容器中 -->
    <!--解释 ：https://www.cnblogs.com/jpfss/p/7799806.html-->
<!--    Mybatis MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring，
此时mybatis-config.xml里的<mappers><mappers/>不在需要配置，都将自动扫描spring中-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- 注入sqlSessionFactory -->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <!-- 给出需要扫描Dao接口包 -->
        <property name="basePackage" value="com.xbh.dao"/>
    </bean>
</beans>

4.2.5、Spring整合service层- -spring-service.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
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/aop
       https://www.springframework.org/schema/aop/spring-aop.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd">

    <context:annotation-config/>
    <!--    1、扫描service下的包-->
    <context:component-scan base-package="com.xbh.service"/>
    <!--    2、将我们所有的业务类注入到spring，可以通过配置，也可以通过注解实现-->
<!--    <bean id="bookServiceImpl" class="com.xbh.service.BookServiceImpl">-->
<!--        <property name="bookMapper" ref="bookMapper"/>-->
<!--    </bean>-->
    <!--    3、配置事务管理器-->

    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 注入数据库连接池 -->
        <property name="dataSource" ref="dataSource" />
    </bean>
    <!--    4、aop事务支持-->
    <!--    结合aop实现事务的织入-->
    <tx:advice id="txAdvice" transaction-manager="transactionManager" >
        <!--        给哪些方法配置事务-->
        <tx:attributes>
            <tx:method name="*" propagation="REQUIRED"/>
        </tx:attributes>
    </tx:advice>
    <!--    配置事务切入-->
    <aop:config>
        <aop:pointcut id="txPointCut" expression="execution(* com.xbh.dao.*.*(..))"/>
        <aop:advisor advice-ref="txAdvice" pointcut-ref="txPointCut"/>
    </aop:config>
</beans>

4.2.6、增加web支持、编写web.xml

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

    <!--DispatcherServlet-->
    <servlet>
        <servlet-name>DispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <!--一定要注意:我们这里加载的是总的配置文件，之前被这里坑了！-->
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <!--encodingFilter-->
    <filter>
        <filter-name>encodingFilter</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>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
<!--    使用Rest风格的URL-->
    <filter>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!--Session过期时间-->
    <session-config>
        <session-timeout>15</session-timeout>
    </session-config>

</web-app>

4.2.7、Spring整合controller层，编写spring-mvc.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:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        https://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd">


    <!-- 配置SpringMVC -->
    <!-- 1.开启SpringMVC注解驱动 -->
    <mvc:annotation-driven />
    <!-- 2.静态资源默认servlet配置-->
    <mvc:default-servlet-handler/>

    <!-- 3.配置jsp 显示ViewResolver视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
        <property name="prefix" value="/WEB-INF/" />
        <property name="suffix" value=".jsp" />
    </bean>
    <!-- 4.扫描web相关的bean -->
    <context:component-scan base-package="com.xbh.controller" />


</beans>

在这里插入图片描述

五、测试dao层

5.1、使用传统单元测试

     ApplicationContext Context = new ClassPathXmlApplicationContext("applicationContext.xml");
     DepartmentMapper bean = Context.getBean(DepartmentMapper.class);

5.1、使用spring单元测试，可以自动注入我们需要的组件

1、导入SpringTest所需的jar包

<!--        spring单元测试模块-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>5.3.5</version>
            <scope>test</scope>
        </dependency>

2、使用注解
@ContextConfiguration指定spring配置文件的位置locations = {"classpath:applicationContext.xml"}
@RunWith指定使用哪个单元测试，junit中定义的SpringJUnit4ClassRunner.class

//指定spring测试器
@RunWith(SpringJUnit4ClassRunner.class)
//使用spring测试
@ContextConfiguration(locations = {"classpath:applicationContext.xml"})
public class MapperTest {
    @Autowired
    DepartmentMapper departmentMapper;
    @Autowired
    EmployeeMapper employeeMapper;
    @Autowired
    SqlSession SqlSession;
    @Test
    public void testCrud(){

        departmentMapper.insertSelective(new Department("开发部"));
        departmentMapper.insertSelective(new Department("测试部"));
        employeeMapper.insertSelective(new Employee(null,"王倩","女","34009750@qq.com",1));
        employeeMapper.insertSelective(new Employee(null,"许宝华","男","34009750@qq.com",2));
//        批量操作
        EmployeeMapper mapper = SqlSession.getMapper(EmployeeMapper.class);
        for(int i=0;i<1000;i++){
            String name=UUID.randomUUID().toString().substring(0,5)+i;
            mapper.insertSelective(new Employee(null,name,"男",name+"@qq.com",1));
        }
    }
}

使用批量操作之前需要在spring-dao.xml中配置一个可以执行的批量的sqlSession

<!--    配置一个批量执行sqlSession-->
    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
        <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"/>
        <constructor-arg name="executorType" value="BATCH"/>
    </bean>

执行结果
在这里插入图片描述
批量操作执行也成功了

六、查询业务

6.1、查询全部图书，并且使用PageHepler分页插件进行分页查询，（使用modal返回数据）

1、引入PageHepler分页插件jar包

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

2、Mybatis中注册插件

    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
<!--            设置属性reasonable为true时，pageNum<=0默认为第一页-->
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>

3、在查询之前只需要调用即可
controller

    @Autowired
    EmployeeService employeeService;
    //获取所有的员工
    @RequestMapping("/emps")
    public String getEmps(@RequestParam(value="pn",defaultValue = "1")Integer pn, Model model){
        //引入pagehelper分页插件
        PageHelper.startPage(pn,5);

        List<Employee> employeeList=employeeService.getAll();
        //使用pageInfo包装查询后的结果
        PageInfo page = new PageInfo(employeeList,5);
        model.addAttribute("pageInfo",page);
        return "list";
    }

PageHelper.startPage(page, rows);
在这里插入图片描述
PageInfo.class是插件里的类，非常方便的调用，分页再次提高性能：

    //当前页
    private int pageNum;
    //每页的数量
    private int pageSize;
    //当前页的数量
    private int size;
 
    //由于startRow和endRow不常用，这里说个具体的用法
    //可以在页面中"显示startRow到endRow 共size条数据"
 
    //当前页面第一个元素在数据库中的行号
    private int startRow;
    //当前页面最后一个元素在数据库中的行号
    private int endRow;
 
    //总记录数
    private long total;
    //总页数
    private int pages;
    //结果集
    private List<T> list;
 
    //前一页
    private int prePage;
    //下一页
    private int nextPage;
    //是否为第一页
    private boolean isFirstPage;
    //是否为最后一页
    private boolean isLastPage;
    //是否有前一页
    private boolean hasPreviousPage;
    //是否有下一页
    private boolean hasNextPage;
    //导航页码数
    private int navigatePages;
    //所有导航页号
    private int[] navigatepageNums;
    //导航条上的第一页
    private int navigateFirstPage;
    //导航条上的最后一页
    private int navigateLastPage;
 
    public PageInfo() {
        this.isFirstPage = false;
        this.isLastPage = false;
        this.hasPreviousPage = false;
        this.hasNextPage = false;
    }

4、测试

@RunWith(SpringJUnit4ClassRunner.class)
@WebAppConfiguration
@ContextConfiguration(locations = {"classpath:applicationContext.xml"})
public class MvcTest {
    MockMvc mockMvc;
    @Autowired
    WebApplicationContext context;
    @Before
    public void initMokcMvc(){

        mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
    }
    @Test
    public void testPage() throws Exception {
//        模拟请求拿到返回值
        MvcResult pn = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "1")).andReturn();
        //请求成功以后，请求域中会有pageInfo
        MockHttpServletRequest request = pn.getRequest();
        PageInfo pageInfo = (PageInfo)request.getAttribute("pageInfo");
        System.out.println("当前页码"+pageInfo.getPageNum());
        System.out.println("总页码"+pageInfo.getPages());
        System.out.println("总记录数"+pageInfo.getTotal());
        System.out.println("在页面需要连续显示的页码");
        int[] navigateFirstPage = pageInfo.getNavigatepageNums();
        for (int i : navigateFirstPage) {
            System.out.print(i);
        }

    }
}

测试结果

6.2、编写list.jsp页面数据（通过model来回传数据）

在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-12">
            <button class="btn btn-success" >新增</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover table-striped">
                <tr>
                    <th>员工编号</th>
                    <th>员工姓名</th>
                    <th>员工性别</th>
                    <th>邮箱</th>
                    <th>员工部门</th>
                    <th>操作按钮</th>
                </tr>
                <c:forEach items="${pageInfo.list}" var="emp">
                    <tr>
                        <th>${emp.empId}</th>
                        <th>${emp.empName}</th>
                        <th>${emp.gender}</th>
                        <th>${emp.email}</th>
                        <th>${emp.department.deptName}</th>
                        <th>
                            <button class="btn btn-success btn-sm" >
                                <span class="glyphicon glyphicon-pencil " aria-hidden="true"></span>
                                编辑
                            </button>
                            <button class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                删除
                            </button>
                        </th>
                    </tr>
                </c:forEach>

            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            当前页码【${pageInfo.pageNum}】，总共【${pageInfo.pages}】页，总【${pageInfo.total}】条记录
        </div>
        <div class="col-md-6">
            <ul class="pagination">
                <li ><a href="${pageContext.request.contextPath}/emps?pn=1">首页</a></li>
                <c:if test="${pageInfo.hasPreviousPage}">
                    <li><a href="${pageContext.request.contextPath}/emps?pn=${pageInfo.pageNum-1}">&laquo;</a></li>
                </c:if>
                <c:forEach items="${pageInfo.navigatepageNums}" var="pageNum">
                    <c:if test="${pageNum==pageInfo.pageNum}">
                        <li class="active"><a href="#">${pageNum}</a></li>
                    </c:if>
                    <c:if test="${pageNum!=pageInfo.pageNum}">
                        <li><a href="${pageContext.request.contextPath}/emps?pn=${pageNum}">${pageNum}</a></li>
                    </c:if>

                </c:forEach>
                <c:if test="${pageInfo.hasNextPage}">
                    <li><a href="${pageContext.request.contextPath}/emps?pn=${pageInfo.pageNum+1}">&raquo;</a></li>
                </c:if>

                <li><a href="${pageContext.request.contextPath}/emps?pn=${pageInfo.pages}">末页</a></li>
            </ul>
        </div>
    </div>

</div>
</body>
</html>

6.3、使用Ajax改造分页查询，使用json字符串的形式回传数

Ajax的应用场景

1、页面上拉加载更多数据
2、列表数据无刷新分页
3、表单项离开焦点数据验证
4、搜索框提示文字下拉列表

在这里插入图片描述

controller

    @Autowired
    EmployeeService employeeService;
    //使用json字符串的形式回传数据
    @RequestMapping("/emps")
    @ResponseBody
    public PageInfo getEmpsWithJson(@RequestParam(value="pn",defaultValue = "1")Integer pn){
        //引入pagehelper分页插件
        //在查询之前调用，传入pn默认值是1，pageSize是5，意思是从第1页开始，每页显示5条记录
        PageHelper.startPage(pn,5);
        List<Employee> employeeList=employeeService.getAll();
        //使用PageInfo包装查询后的结果，只需要将PageInfo交给页面就行。
        //封装了详细的分页信息，包括我们查询出来的数据userList，传入连续显示的页数5
        PageInfo page = new PageInfo(employeeList,5);
        return page;
    }

回传给客户端的json字符串
构建一个通用对象，方便进行通用操作

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Msg {
    //状态码
    private int code;
    //提示信息
    private String msg;
    //用户返回给浏览器的数据
    private Map<String,Object> extend=new HashMap<>();
    public static Msg success(){
        Msg result=new Msg();
        result.setCode(100);
        result.setMsg("处理成功");
        return result;
    }
    public static Msg fail(){
        Msg result=new Msg();
        result.setCode(200);
        result.setMsg("处理失败");
        return result;
    }
    public Msg add(String key, Object value){
        this.getExtend().put(key,value);
        return this;
    }
}

修改controller

    @Autowired
    EmployeeService employeeService;
    //使用json字符串的形式回传数据
    @RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue = "1")Integer pn){
        //引入pagehelper分页插件
        //在查询之前调用，传入pn默认值是1，pageSize是5，意思是从第1页开始，每页显示5条记录
        PageHelper.startPage(pn,5);
        List<Employee> employeeList=employeeService.getAll();
        //使用PageInfo包装查询后的结果，只需要将PageInfo交给页面就行。
        //封装了详细的分页信息，包括我们查询出来的数据userList，传入连续显示的页数5
        PageInfo page = new PageInfo(employeeList,5);
        return Msg.success().add("pageInfo",page);
    }

结果

6.3.1、在index.jsp中使用Ajax解析json字符串，并完成相关业务

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-12">
            <button class="btn btn-success" >新增</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover table-striped" id="emps_table">
                <thead>
                    <tr>
                        <th>员工编号</th>
                        <th>员工姓名</th>
                        <th>员工性别</th>
                        <th>邮箱</th>
                        <th>员工部门</th>
                        <th>操作按钮</th>
                    </tr>
                </thead>
                <tbody >

                </tbody>

            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6" id="page_info_area">

        </div>
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>
    <script type="text/javascript">
        $(function () {
        //    页面加载完成之后，直接去发送一个Ajax请求，要到分页数据
            to_page(1);

        });
        //查询方法
        function to_page(pn) {
            $.ajax({
                url:"${pageContext.request.contextPath}/emps",//请求的地址
                data:"pn="+pn,//请求的数据
                type:"GET",//请求的类型
                success:function (result) {
                    // console.log(result)
                    //1、解析并显示员工数据
                    build_emps_table(result);
                    //2、解析并显示分页信息
                    build_page_info(result);
                    //3、解析显示分页条数据源
                    build_page_nav(result);

                }

            });
        }
        //解析并显示员工数据
        function build_emps_table(result){
            //清空table表格
            $("#emps_table tbody").empty();

            var emps=result.extend.pageInfo.list;
            $.each(emps,function (index,item) {
                var empIdTd=$("<td></td>").append(item.empId);
                var empNameTd=$("<td></td>").append(item.empName);
                var genderTd=$("<td></td>").append(item.gender);
                var emailTd=$("<td></td>").append(item.email);
                var deptNameTd=$("<td></td>").append(item.department.deptName);
                //btn按钮
                var editBtn=$("<button></button>").addClass("btn btn-success btn-sm").append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                var delBtn=$("<button></button>").addClass("btn btn-danger btn-sm").append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
                var btnTd=$("<td></td>").append(editBtn).append(delBtn);

                $("<tr></tr>").append(empIdTd).append(empNameTd).append(genderTd).append(emailTd).append(deptNameTd).append(btnTd).appendTo($("#emps_table tbody"));
            });
        }
        //解析显示分页信息
        function  build_page_info(result){
            $("#page_info_area").empty();
            $("#page_info_area").append("当前页码【"+result.extend.pageInfo.pageNum+"】，总共【"+result.extend.pageInfo.pages+"】页，总【"+result.extend.pageInfo.total+"】条记录");
        }
        //解析并显示分页信息
        function  build_page_nav(result){
            $("#page_nav_area").empty();
            var ul=$("<ul></ul>").addClass("pagination");
            //第一个li
            var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
            var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;"));
            //判断此时是否为第一页，如果是，则此时向前切换页码的功能不可以使用
            if(result.extend.pageInfo.hasPreviousPage==false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else{
                //绑定单击事件
                firstPageLi.click(function () {
                    to_page(1);
                });
                prePageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum-1)
                });
            }

            var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;"));
            var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));

            //判断此时是否为最后一页，如果是，则此时向前切换页码的功能不可以使用
            if(result.extend.pageInfo.hasNextPage==false){
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            }else{
                //给下一页和末页添加单击事件
                nextPageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum+1)
                });
                lastPageLi.click(function () {
                    to_page(result.extend.pageInfo.pages);
                });
            }

            ul.append(firstPageLi).append(prePageLi);
            //遍历页码
            $.each(result.extend.pageInfo.navigatepageNums,function (index,item) {
                var numLi=$("<li></li>").append($("<a></a>").append(item));
                if(result.extend.pageInfo.pageNum==item){
                    numLi.addClass("active");
                }
                numLi.click(function () {
                    to_page(item);
                });
                ul.append(numLi);
            });
            ul.append(nextPageLi).append(lastPageLi);
            var navEle=$("<nav></nav>").append(ul);
            navEle.appendTo($("#page_nav_area"));
        }
    </script>
</div>
</body>
</html>

6.3.2、遇到的问题

解决问题一（点击之后以前的数据没有消失）
解决思路（每次查询之前，都把之前的数据清空一下）

$("#emps_table tbody").empty();
$("#page_info_area").empty();
$("#page_nav_area").empty();

由于每次拿到数据都去append，导致之前的数据一直存在，所以应该把之前的数据清空
在这里插入图片描述

解决问题二（当前页码为第一页或者最后一页时，点击上一页或者下一页时，当前页码依然跳转，出现不合理的参数）
解决思路（通过pageHelper插件的属性来设置）

    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
<!--            设置属性reasonable为true时，pageNum<=0默认为第一页-->
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>

解决问题三（使用Ajax查询(解析json字符串)和通过model查询的区别）

Ajax的妙用

使用Ajax页面不会刷新，Ajax是一种无需加载整个网页的情况下，能够更新部分网页，model会重构页面(请求转发或请求重定向)
客户可以用更短的时间看到需要改变的数据，服务器只需要处理单一的任务，而不需要生成整个页面
更多的处理放置在客户端，意味着将频繁的使用JavaScript进行开发

七、新增业务

在这里插入图片描述

backdrop:"static"指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。

7.1、添加模态框

<!-- Modal -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="empName" class="col-sm-2 control-label">名字</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName" placeholder="请输入名字">
                            <span  class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email" placeholder="xxx@qq.com">
                            <span  class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1" value="男" checked>男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2"  value="女">女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
<%--                        部门需要动态查询--%>
                        <div class="col-sm-4">
                            <select class="form-control" name="dId" id="dept_add_select">

                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>

7.2、给员工新增按钮绑定事件，弹出模态框

    //    给员工新增按钮绑定事件，弹出模态框
        $("#emp_add_modal_btn").click(function () {
             //清除表单数据(表单重置),jquery没有reset方法，需要取出dom元素
            reset_form("#empAddModal form");
            getDept();
            $("#empAddModal").modal({backdrop:"static"});
        });
                // 表单完整重置（表单的内容，表单的样式重置）方法
        function reset_form(ele){
            //重置表单内容
            $(ele)[0].reset();
            //重置表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }

7.3、弹出模态框的同时触发`getDept();`把option组件添加到下拉框组件中

        function getDept(){
            $.ajax({
                url:"${pageContext.request.contextPath}/depts",
                type:"GET",
                success:function (result){
                    $("#dept_add_select").empty();
                    //显示部门信息在下拉列表
                    $.each(result.extend.departments,function () {
                        var optionEle=$("<option></option>").append(this.deptName).attr("value",this.deptId);
                        optionEle.appendTo($("#dept_add_select"));
                    });
                }
            });
        }

7.4、部门信息需要实时检测，利用Ajax发起响应，不需要重构页面

controller层调用service层

@Controller
public class DepartmentController {

    @Autowired
    private DepartmentService departmentService;

    //返回所有的部门信息
    @RequestMapping("/depts")
    @ResponseBody
    public Msg getDepts(){
        List<Department> list=departmentService.getDepts();
        return Msg.success().add("departments",list);
    }
}

service层调用dao层

@Service
public class DepartmentService {

    @Autowired
    private DepartmentMapper departmentMapper;
    public List<Department> getDepts() {
        List<Department> departments = departmentMapper.selectByExample(null);
        return departments;
    }
}

7.5、点击保存按钮把信息添加到数据库中，发起请求，需要校验数据是否合法

        $("#emp_save_btn").click(function () {
            //一、要提交的数据需要进行校验
            if(!validate_add_form()){
                return false;
            }
            //二、判断保存按钮的状态，如果是error则return false；
            if(($(this).attr("ajax-va"))=="error"){
                return false;
            }
            //三、
            //1、模态框中填写的表单数据提交给服务器进行保存
            //2、发送Ajax请求保存员工
            //jquery里的serialize()方法可以序列化表格内容字符串，用于Ajax请求
            $.ajax({
                url:"${pageContext.request.contextPath}/emp",
                type:"POST",
                data:$("#empAddModal form").serialize(),
                success:function (result) {
                    //员工保存成
                    //1、关闭模态框
                    $("#empAddModal").modal("hide");
                    //2、来到最后一页，显示保存的数据
                    //可以用总记录数来跳转
                    to_page(999999999);
                }
            });
        });

7.5.1、开始校验输入的数据是否合法

        // 校验表单
        function validate_add_form(){
            //员工姓名
            var name=$("#empName").val();
            var regName=/(^[a-zA-Z0-9_-]{5,8}$)|([\u2E80-\u9FFF]{2,5})/;

            if(!regName.test(name)){
                show_validate_msg("#empName","error","您输入的名字格式不合法");
                return false;
            }else{
                show_validate_msg("#empName","success","");
            };
            //员工邮箱
            var email=$("#email").val();
            var regEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(!regEmail.test(email)){
                show_validate_msg("#email","error","您输入的邮箱格式不合法");
                return false;
            }else{
                show_validate_msg("#email","success","");

            };
            return true;
        }
        //抽取的公共方法，展示状态信息
        function show_validate_msg(ele,status,msg){
            //清除当前元素的状态
            $(ele).parent().removeClass("has-success has-error");
            if("success"==status){
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            }else if("error"==status){
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        };

7.5.2、Ajax校验用户名是否重复
客户端绑定改变事件函数，并且发送Ajax请求校验用户名是否可用

        //服务端验证用户名是否可用
        $("#empName").change(function () {
            //发送Ajax请求校验用户名是否可用
            var empName=this.value;
            $.ajax({
                url:"${pageContext.request.contextPath}/checkUser",
                data:"empName="+empName,
                type:"POST",
                success:function (result) {
                    if(result.code==100){
                        //成功
                        show_validate_msg("#empName","success","用户名可用");
                        //给员工按钮一个自定义的属性
                        $("#emp_save_btn").attr("ajax-va","success");
                    }else{
                        //失败
                        show_validate_msg("#empName","error","用户名不可用");
                        //用户名不可用时就应该让保存按钮失效
                        $("#emp_save_btn").attr("ajax-va","error");

                    }
                }
            });
        });

服务端接收请求，开始处理
controller层调用service层

    /**
     * 检验用户名是否可用
     * @param
     * @return
     * @author 许宝华
     * @creed: Talk is cheap,show me the code
     * @date 2021/5/31 9:27
     */
    @RequestMapping("/checkUser")
    @ResponseBody
    public Msg checkUser(@RequestParam("empName") String empName){
        boolean flag=employeeService.checkUser(empName);
        if(flag){
            //可用
            return Msg.success();
        }else{
            return Msg.fail();
        }

    }

service层调用dao层，完成查询

    /**
     * 验证员工姓名是否可用
     * @param empName
     * @return true ：代表当前姓名可用，否则返回false代表不可用
     * @author 许宝华
     * @creed: Talk is cheap,show me the code
     * @date 2021/5/31 9:35
     */
    public boolean checkUser(String empName) {
        EmployeeExample employeeExample = new EmployeeExample();
        //指定查询规则
        EmployeeExample.Criteria criteria = employeeExample.createCriteria();
        criteria.andEmpNameEqualTo(empName);
        long count = employeeMapper.countByExample(employeeExample);
        return count==0;
    }

遇到的问题：
1、表单重复提交问题（当用户提交完请求，浏览器会记录最后一次请求的全部信息，当用户按下功能键F5后，就会发起浏览器记录的最后一次请求），表单的样式也要清除
解决思路：点击新增按钮时，把模态框里的表单数据全部重置一遍

                   // 表单完整重置（表单的内容，表单的样式重置）方法
        function reset_form(ele){
            //重置表单内容
            $(ele)[0].reset();
            //重置表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }

在这里插入图片描述

2、如果用户名不可用，则点击保存按钮不提交表单数据
解决思路：给保存按钮添加一个自定义属性，然后在保存之前判断当前属性的状态

            if(($(this).attr("ajax-va"))=="error"){
                return false;
            }

3、后台校验通过，提示用户名可用，但是客户端校验用户名格式不正确,前后台提示内容不一致，给界面美观造成一定影响
解决思路：在后台也添加正则表达式判断,判断的内容与前台一致，提示的信息也一致，这样就不会因为提示信息内容不一样给界面美观造成影响

在这里插入图片描述

4、后台校验过一遍数据之后，发现用户名已经存在，当把邮箱输入之后，这时前台会在进行一次校验，而此时发现用户名合法，验证通过了
解决思路：给保存按钮添加一个自定义属性，然后在保存之前判断当前属性的状态

在这里插入图片描述

5、前台校验只是为了增加用户的体验性，但是不安全，可以篡改js内容实现表单的验证,例如用户可以禁用js代码

在这里插入图片描述
当用户名不合法时，此时给保存按钮添加了一个私有属性，可以通过篡改属性实现数据的存入,

抽取出来的方法

        // 表单完整重置（表单的内容，表单的样式重置）方法
        function reset_form(ele){
            //重置表单内容
            $(ele)[0].reset();
            //重置表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }

7.6、校验需要jquery前端校验+Ajax用户名重复校验+后端校验（基于SpringMVC的JSR303校验）

JSR303校验需要导入Hibernate-Validator,需要Tomcat7及以上的服务器

<!--        JSR303校验-->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>6.0.13.Final</version>
        </dependency>

给要校验的javaBean上标注校验注解

 	@Pattern(regexp = "(^[a-zA-Z0-9_-]{5,8}$)|([\\u2E80-\\u9FFF]{2,5})",message = "您输入的名字格式不合法")
    private String empName;

    private String gender;
    //可以是使用Email注解，也可以自定义
    //@Pattern(regexp = "^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$",message = "您输入的邮箱格式不合法")
    @Email(message = "邮箱格式错误")
    private String email;

告诉spring这个数据需要校验@Valid

    @RequestMapping(value="/emp",method = RequestMethod.POST)
    @ResponseBody
    public Msg saveEmp(@Valid Employee employee, BindingResult result){
        if(result.hasErrors()){
            Map<String,Object> map=new HashMap<>();
            //校验失败，应该返回失败，在模态框中显示校验失败的错误信息
            List<FieldError> fieldErrors = result.getFieldErrors();
            for (FieldError fieldError : fieldErrors) {
                System.out.println("错误的字段名"+fieldError.getField());
                System.out.println("错误的信息"+fieldError.getDefaultMessage());
                map.put(fieldError.getField(),fieldError.getDefaultMessage());
            }

            return Msg.fail().add("errorField",map);
        }else{
            employeeService.saveEmp(employee);
            return Msg.success();
        }

    }

模拟前端校验失效，而此时数据依然不能存入

        $("#emp_save_btn").click(function () {
            //要提交的数据需要进行校验
            // if(!validate_add_form()){
            //     return false;
            // }
            if(($(this).attr("ajax-va"))=="error"){
                return false;
            }
            //判断之前的Ajax用户名校验是否成功，如果成功才继续执行，

            //1、模态框中填写的表单数据提交给服务器进行保存
            //2、发送Ajax请求保存员工
            //jquery里的serialize()方法可以序列化表格内容字符串，用于Ajax请求
            $.ajax({
                url:"${pageContext.request.contextPath}/emp",
                type:"POST",
                data:$("#empAddModal form").serialize(),
                success:function (result) {
                    if(result.code==100){
                        //员工保存成
                        //1、关闭模态框
                        $("#empAddModal").modal("hide");
                        //2、来到最后一页，显示保存的数据
                        //可以用总记录数来跳转
                        to_page(999999999);
                    }else{
                        //显示失败信息
                        if(undefined!=result.extend.errorField.email){
                            //显示邮箱错误信息
                            show_validate_msg("#email","error",result.extend.errorField.email);

                        }
                        if(undefined!=result.extend.errorFields.empName){
                            //显示名字错误信息
                            show_validate_msg("#empName","error",result.extend.errorFields.empName);
                        }

                    }

                }
            });
        });

在这里插入图片描述

7.7、服务端接收保存信息的请求，开始处理

controller层调用service层

    /**
     * 保存用户信息
     * @param
     * @return
     * @author 许宝华
     * @creed: Talk is cheap,show me the code
     * @date 2021/5/30 12:49
     */
    @RequestMapping(value="/emp",method = RequestMethod.POST)
    @ResponseBody
    public Msg saveEmp(Employee employee){
        employeeService.saveEmp(employee);
        return Msg.success();
    }

service层调用dao层，完成保存

    //员工保存方法
    public void saveEmp(Employee employee) {
        employeeMapper.insertSelective(employee);
    }

八、修改业务

8.1、为编辑按钮绑定点击事件，弹出用户修改的模态框

由于数据和按钮是在发起Ajax请求之后才创建的，所以绑定单击事件时要注意
解决思路：
1、可以在创建按钮的时候绑定
2、绑定单击 live()方法给所有匹配的元素附加一个事件处理函数，即使这个元素是以后添加进来的依旧可以生效，由于新版jQuery没有live方法，可以使用on方法替代

        $(document).on("click",".edit_btn",function () {
            //清除表单数据(表单完整重置（表单的内容，表单的样式重置）),jquery没有reset方法，需要去除dom元素
            reset_form("#empUpdateModal form");

            getDept("#dept_update_select");

            $("#empUpdateModal").modal({
                backdrop:"static"});
        });

模态框

<%--员工修改的模态框--%>
<!-- Modal -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myUpdateModalLabel">员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="empName" class="col-sm-2 control-label">名字</label>
                        <div class="col-sm-10 ">
                            <p class="form-control-static" id="empName_update_static"></p>
                            <span  class="help-block"></span>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_update_input" placeholder="xxx@qq.com">
                            <span  class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="男" checked>男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_update_input"  value="女">女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <%--                        部门需要动态查询--%>
                        <div class="col-sm-4">
                            <select class="form-control" name="dId" id="dept_update_select">

                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>

8.2、发起Ajax请求拿到当前要修改员工的数据

controller层

    @RequestMapping(value = "/emp/{id}",method = RequestMethod.GET)
    @ResponseBody
    public Msg getEmp(@PathVariable("id") Integer id){
        Employee employee=employeeService.getEmp(id);
        return Msg.success().add("emp",employee);
    }

service层

    //查询员工信息
    public Employee getEmp(Integer id) {
        Employee employee = employeeMapper.selectByPrimaryKey(id);
        return employee;
    }

视图显示层

        $(document).on("click",".edit_btn",function () {
            //清除表单数据(表单完整重置（表单的内容，表单的样式重置）),jquery没有reset方法，需要去除dom元素
            reset_form("#empUpdateModal form");

            getDept("#dept_update_select");
            //如何获取id值呢
            //可以为编辑按钮添加一个自定义属性：editBtn.attr("edit_id",item.empId);
            getEmp($(this).attr("edit_id"));
            $("#empUpdateModal").modal({
                backdrop:"static"});


        });
        function getEmp(id){
            $.ajax({
                url:"${pageContext.request.contextPath}/emp/"+id,
                type:"GET",
                success:function (result) {
                    var empData=result.extend.emp;
                    $("#empName_update_static").text(empData.empName);
                    $("#email_update_input").val(empData.email);
                    $("#empUpdateModal input[name=gender]").val([empData.gender]);
                    $("#dept_update_select").val([empData.dId]);
                }
            })
        }

8.3、发起Ajax请求保存当前要修改员工的数据

使用RestURl风格，需要在web.xml中配置

<!--    使用Rest风格的URL-->
    <filter>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

controller层

    //此时注意的是这的id值的名称要和bean对象里的id名称一样，不然不会修改
    @RequestMapping(value = "/emp/{empId}",method = RequestMethod.PUT)
    @ResponseBody
    public Msg saveEmp(Employee employee){
        employeeService.updateEmp(employee);
        return Msg.success();
    }

service层

    //修改员工信息
    public void updateEmp(Employee employee) {
        employeeMapper.updateByPrimaryKeySelective(employee);
    }

视图显示层

        //点击更新按钮，更新员工信息
        $("#emp_update_btn").click(function () {
            //验证邮箱是否合法
            var email=$("#email_update_input").val();
            var regEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(!regEmail.test(email)){
                show_validate_msg("#email_update_input","error","您输入的邮箱格式不合法66666");
                return false;
            }else{
                show_validate_msg("#email_update_input","success","");

            };
            //发送Ajax请求保存员工数据
            $.ajax({
                url:"${pageContext.request.contextPath}/emp/"+$(this).attr("edit_id"),
                type:"POST",
                data:$("#empUpdateModal form").serialize()+"&_method=PUT",
                success:function (result) {
                    $("#empUpdateModal").modal("hide");
                    to_page(currentPage);
                }

            });
        });

发送POST请求

如果直接发送Ajax=PUT形式的请求，就会出现问题，会发现请求体中有数据，但是employee对象封装不上，根本原因是SQL语句拼接出现了错误
原因：是因为Tomcat
1、Tomcat将请求体中的数据封装成一个map
2、request.getParameter(“empName”)就会从这个map中取值
3、SpringMVC封装pojo对象时候，pojo中每个属性的值，都是通过调用request.getParameter()
究其底层原因就是因为ajax发送PUT请求引发的，PUT请求，请求体中的数据通过request.getParameter()拿不到，Tomcat发现是PUT请求就不会封装请求体中的数据为map

九、删除业务

9.1、发起ajax请求，进行删除操作

controller层

    //删除员工
    @RequestMapping(value = "/emp/{id}",method = RequestMethod.DELETE)
    @ResponseBody
    public Msg deleteEmpById(@PathVariable("id") Integer id){
        employeeService.deleteEmp(id);
        return Msg.success();
    }

service层

    public void deleteEmp(Integer id) {
        employeeMapper.deleteByPrimaryKey(id);
    }

视图显示层

        $(document).on("click",".delete_btn",function () {
            var empName=$(this).parents("tr").find("td:eq(1)").text();
            var empId=$(this).attr("del_id");
            if(confirm("确认删除【"+empName+"】吗?")){
                //确认，发送ajax请求删除
                //为删除按钮添加一个自定义的属性  delBtn.attr("del_id",item.empId);
                $.ajax({
                    url:"${pageContext.request.contextPath}/emp/"+empId,
                    type:"DELETE",
                    success:function (result) {
                        to_page(currentPage);
                    }
                });
            }
        });

9.2、完善全部删除功能

controller层（把单个删除和批量删除集成到一块）

    //单个批量删除员工
    @RequestMapping(value = "/emp/{ids}",method = RequestMethod.DELETE)
    @ResponseBody
    public Msg deleteEmpById(@PathVariable("ids") String ids){
        List<Integer> del_ids=new ArrayList<>();
        if(ids.contains("-")){
            //批量删除
            String[] str_ids=ids.split("-");
            //组装id的集合
            for (String str_id : str_ids) {
                del_ids.add(Integer.parseInt(str_id));
            }
            employeeService.deleteBatch(del_ids);
        }else{
            Integer id = Integer.parseInt(ids);
            employeeService.deleteEmp(id);
        }

        return Msg.success();
    }

service层

    //批量删除
    public void deleteBatch(List<Integer> ids) {
        EmployeeExample employeeExample = new EmployeeExample();
        EmployeeExample.Criteria criteria = employeeExample.createCriteria();
        criteria.andEmpIdIn(ids);
        employeeMapper.deleteByExample(employeeExample);
    }

视图显示层

 //完成全选/全不选按钮
        $("#checkAll").click(function () {
            //attr()获取checked是undefined
            //对于dom原生的属性，推荐prop()方法获取

            $(".check_item").prop("checked",$(this).prop("checked"));
        });
        //为每个复选框绑定单击事件
        $(document).on("click",".check_item",function () {
            var flag=$(".check_item:checked").length==$(".check_item").length;
            $("#checkAll").prop("checked",flag);

        });
        //点击全部删除就批量删除
        $("#emp_delete_all_btn").click(function () {
            var empNames="";
            var del_idStr="";
            $.each($(".check_item:checked"),function () {
                empNames+=$(this).parents("tr").find("td:eq(2)").text()+",";
                del_idStr+=$(this).parents("tr").find("td:eq(1)").text()+"-";
            });
            //去除多余的符号
            empNames=empNames.substring(0,empNames.length-1);
            del_idStr=del_idStr.substring(0,del_idStr.length-1);
            if(confirm("你确认删除这些【"+empNames+"】员工么")){
                //确认，发送ajax请求删除
                //为删除按钮添加一个自定义的属性  delBtn.attr("del_id",item.empId);
                $.ajax({
                    url:"${pageContext.request.contextPath}/emp/"+del_idStr,
                    type:"DELETE",
                    success:function (result) {
                        to_page(currentPage);
                    }
                });
            }
        });

十、总结与心得

在这里插入图片描述

Hua·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SSM整合之CRUD小demo

CRUD一、创建一个maven工程二、引入项目依赖的jar包【新知识mybatis逆向工程、spring单元测试】三、搭建数据库环境、建立基本结构和配置框架！四、整合配置文件4.1、没有使用mybatis逆向工程之前整合配置文件4.2、使用mybatis逆向工程之后整合配置文件4.2.1、创建mybatis逆向工程生成所需的配置文件generatorConfig.xml4.2.2、生成程序4.2.3、生成结果4.2.4、逆向工程的优缺点4.2.4、Spring整合Mybatis的相关的配置文件；spring
复制链接

扫一扫