> [**文档+项目下载**](https://admin-root.oss-cn-beijing.aliyuncs.com/img/SSM-Case.zip?Expires=1607353672&OSSAccessKeyId=TMP.3Kf1t5rGUqpYpD8JUu2r9YoNPmueJNzH3WV6yF8n1ChNojGr8PZiHSgpi8vPeBFHX5QDd9yz7YKYDU2ViJmz1wLhPttuZB&Signature=W3lFhBTbpU5nM7alIoDy8reiEiY%3D&versionId=CAEQCRiBgIDcsI32sRciIGYwMjZmMTcwOWY0NDQwYmQ5Yzk5MTg4YmMwODE2NTVi&response-content-type=application%2Foctet-stream)

## 一、SSM-CRUD 介绍
### 1.1 技术点
**基础框架**-ssm（SpringMVC+Spring+MyBatis）
**数据库**-MySQL
**前端框架**-layui快速搭建简洁美观的界面
**项目的依赖管理**-Maven
**逆向工程**-MyBatis Generator
### 1.2 功能点
**分页**
**数据校验：**
**ajax**
**Rest风格的URI；**使用HTTP协议请求方式的动词，来表示对资源的操作（GET（查询），POST（新增），PUT（修改），DELETE（删除））
**jackson**
##二、整合准备工作
### 2.1 创建Maven【web】工程

![image-20201116100533562](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202094813.png)

![image-20201116100744216](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202094831.png)

![image-20201116100955070](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202094846.png)

![image-20201116101018012](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202094908.png)

- Spring
- Spring MVC
- MyBatis
- 数据库连接池、驱动包
- 其它（log4j、lombok、jstl、servlet、junit等等）

```xml
<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <spring.version>4.3.7.RELEASE</spring.version>
</properties>

<dependencies>
    
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>${spring.version}</version>
    </dependency>

<dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</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-aspects</artifactId>
        <version>${spring.version}</version>
    </dependency>

<dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.4.1</version>
    </dependency>

<dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>1.3.0</version>
    </dependency>

<dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.1.9</version>
    </dependency>

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

<dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>5.0.0</version>
    </dependency>

<dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.8.8</version>
    </dependency>

<dependency>
        <groupId>org.hibernate</groupId>
        <artifactId>hibernate-validator</artifactId>
        <version>5.4.1.Final</version>
    </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.8</version>
        <scope>provided</scope>
    </dependency>

<dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>

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

<dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.12</version>
        <scope>test</scope>
    </dependency>
</dependencies>
```
### 2.4 引入Layui前端框架

#### 2.4.0 Layui官网

[https://www.layui.com/](https://www.layui.com/)

#### 2.4.1 引入Layui

**创建static目录**

在webapp目录下，创建static目录

![image-20201116113416386](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202095408.png)

**把下载好的Layui引入到static目录下**

![image-20201122163707090](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202095157.png)

解压放在static目录下

![image-20201122164043718](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202095348.png)

#### 2.4.2 Layui的简单使用

```html
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="http://localhost:8080/ssm">
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>

layer.msg('Hello World');
    });
</script>

</body>
</html>
```
### 2.5 编写配置文件

#### 2.5.1 spring相关的配置

##### ① 编写数据源，测试数据库的连接

如果使用外部文件的话，要引入 context 名称空间

```xml
xmlns:context="http://www.springframework.org/schema/context"

xsi:schemaLocation="http://www.springframework.org/schema/context 
					http://www.springframework.org/schema/context/spring-context.xsd"
```

编写mysql.properties文件

```properties
driverClass=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/mybatis?useUnicode=true&characterEncoding=utf8&useSSL=true
user=root
password=root
```

在 application.xml 文件里编写数据源。代码如下

```xml

<context:property-placeholder location="classpath:mysql.properties"/>

<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
    <property name="driverClassName" value="${driverClass}"/>
    <property name="url" value="${url}"/>
    <property name="username" value="${user}"/>
    <property name="password" value="${password}"/>
</bean>
```

测试连接数据库

```java
private static final String CLASS_PATH = "classpath:application.xml";

@Test
public void testConnection() throws SQLException {
    ApplicationContext context = new ClassPathXmlApplicationContext(CLASS_PATH);
    DataSource dataSource = context.getBean("dataSource", DataSource.class);
    Connection connection = dataSource.getConnection();
    System.out.println(connection);
}
```

![image-20201101150217486](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202095807.png)

##### ② 配置事务管理器和开启事务注解

> 声明式事务

事务管理器

```xml
<bean class="org.springframework.jdbc.datasource.DataSourceTransactionManager"
      id="transactionManager">
    <property name="dataSource" ref="dataSource"/>
</bean>
```

开启事务注解

`tx`：名称空间：

```xml
xmlns:tx="http://www.springframework.org/schema/tx"

xsi:schemaLocation="
    http://www.springframework.org/schema/tx 
    http://www.springframework.org/schema/tx/spring-tx.xsd"
```

```xml

<tx:annotation-driven transaction-manager="transactionManager"/>
```

##### ③ 开启注解扫描

```xml

<context:component-scan base-package="com.dhw">
    
    <context:exclude-filter type="annotation"
            expression="org.springframework.stereotype.Controller"/>
    
    <context:exclude-filter type="annotation"
            expression="org.springframework.web.bind.annotation.ControllerAdvice"/>
</context:component-scan>
```

#### 2.5.2 SpringMVC相关的配置

##### ① 编写web.xml文件

**配置前端控制器**

```xml
<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:spring-mvc.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>
```

**配置引用 spring.xml 文件**

```xml
<context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:application.xml</param-value>
</context-param>

<listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
```

**配置RESTful风格**

```xml
<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>
```

**配置字符编码过滤器**

```xml
<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>forceRequestEncoding</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>forceResponseEncoding</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
```

**完整版**

```xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="3.1"
         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_3_1.xsd">

<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>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>

<filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

<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>

<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:spring-mvc.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>

<context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:application.xml</param-value>
    </context-param>

<listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
</web-app>
```

##### ② 编写spring.xml配置文件

**配置视图解析器**

```xml

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="WEB-INF/view/"/>
    <property name="suffix" value=".jsp"/>
</bean>
```

**开启注解扫描（spring mvc）**

```xml

<context:component-scan base-package="com.dhw" use-default-filters="false">
    
    <context:include-filter type="annotation"
            expression="org.springframework.stereotype.Controller"/>
    
    <context:include-filter type="annotation"
            expression="org.springframework.web.bind.annotation.ControllerAdvice"/>
</context:component-scan>
```

**处理静态资源**

```xml


<mvc:default-servlet-handler/>

<mvc:annotation-driven/>
```

#### 2.5.3 整合关键配置

> 引入：整合MyBatis目的：
>
> 1. spring管理所有组件。mapper的实现类。
>
>    service ==> Dao   @Autowired:自动注入mapper；
>
> 2. spring用来管理事务，spring声明式事务

```xml

<bean class="org.mybatis.spring.SqlSessionFactoryBean" id="sqlSessionFactory">
    
    <property name="dataSource" ref="dataSource"/>
    
    <property name="mapperLocations" value="classpath:mapper/*.xml"/>
    
    <property name="configLocation" value="classpath:mybatis-config.xml"/>
    
    <property name="typeAliasesPackage" value="com.dhw.ssm.entity"/>
</bean>

<bean id="configure" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    
    <property name="basePackage" value="com.dhw.ssm.mapper"/>
</bean>
```

#### 2.5.4 编写MyBatis相关的配置

**设置别名**

```xml
<settings>
    <setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>
```

### 2.6 编写逆向工程

#### 2.6.1 导入逆向工程的jar包

```xml
<dependency>
    <groupId>org.mybatis.generator</groupId>
    <artifactId>mybatis-generator-core</artifactId>
    <version>1.3.2</version>
</dependency>
```

#### 2.6.2 编写逆向工程的配置文件

**一定要放到项目的根目录上**：[mbg.xml](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202100115.xml?Expires=1606878195&OSSAccessKeyId=TMP.3KfNy2kJAVcXY6aQtg2cGBYmJGRo85CcorD6DUvqtZWKM65ieUknGfawWUHGTg8d1hHrgnCXxcFVSPt3btXwYdSYjiCqef&Signature=6n4eYfApMvgX%2FnMGh2kEa%2Fj6kZI%3D&versionId=CAEQCRiBgICLtN2EsRciIGQ1NjU5MWQ4YjlmODQ2MzJhYmExNTMyMDc3ZjFmMmRi&response-content-type=application%2Foctet-stream)

#### 2.6.3 运行代码生成器生成代码

```java
@Test
public void testGenerator() throws Exception {
    List<String> warnings = new ArrayList<String>();
    boolean overwrite = true;
    File configFile = new File("mbg.xml");
    System.out.println(configFile);
    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);
}
```

#### 2.6.4 介绍生成的Mapper接口

```java
package com.dhw.ssm.mapper;

import com.dhw.ssm.entity.*;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/**
 * @author
 */
public interface EmployeeMapper {
    /**
     * 按照条件进行统计
     *
     * @param example 条件
     * @return 总数
     */
    int countByExample(EmployeeExample example);

/**
     * 按照条件删除
     *
     * @param example 条件
     * @return 执行行数
     */
    int deleteByExample(EmployeeExample example);

/**
     * 按照主键删除
     *
     * @param empId 主键
     * @return 执行行数
     */
    int deleteByPrimaryKey(Integer empId);

/**
     * 插入数据
     *
     * @param record 员工对象
     * @return 执行行数
     */
    int insert(Employee record);

/**
     * 按照有选择的进行插入
     *
     * @param record 员工对象
     * @return 执行行数
     */
    int insertSelective(Employee record);

/**
     * 按照条件的查询
     *
     * @param example 条件
     * @return 执行结果
     */
    List<Employee> selectByExample(EmployeeExample example);

/**
     * 按照主键的查询
     *
     * @param empId 主键
     * @return 执行结果
     */
    Employee selectByPrimaryKey(Integer empId);

/**
     * 按照条件、有选择的更新
     *
     * @param record  员工对象
     * @param example 条件
     * @return 执行行数
     */
    int updateByExampleSelective(@Param("record") Employee record, @Param("example") EmployeeExample example);

/**
     * 按照条件更新，全字段的
     *
     * @param record  员工对象
     * @param example 条件
     * @return 执行行数
     */
    int updateByExample(@Param("record") Employee record, @Param("example") EmployeeExample example);

/**
     * 按照主键、有选择的更新
     *
     * @param record 员工对象
     * @return 执行行数
     */
    int updateByPrimaryKeySelective(Employee record);

/**
     * 按照主键、全字段的更新
     *
     * @param record 员工对象
     * @return 执行行数
     */
    int updateByPrimaryKey(Employee record);
}
```

#### 2.6.5 修改之前生成的文件

【EmployeeMapper.java】

```java
/**
 * 按照条件的查询员工和部门
 *
 * @param example 条件
 * @return 执行结果
 */
List<Employee> selectByExampleWithDepartment(EmployeeExample example);

/**
 * 按照主键的查询员工和部门
 *
 * @param empId 主键
 * @return 执行结果
 */
Employee selectByPrimaryKeyWithDepartment(Integer empId);
```

【EmployeeMapper.xml】

```xml
<resultMap id="WithDeptBaseResultMap" type="com.dhw.ssm.entity.Employee">
    <id column="emp_Id" property="empId" jdbcType="INTEGER"/>
    <result column="last_Name" property="lastName" jdbcType="VARCHAR"/>
    <result column="email" property="email" jdbcType="VARCHAR"/>
    <result column="gender" property="gender" jdbcType="INTEGER"/>
    <result column="dept_Id" property="deptId" jdbcType="INTEGER"/>
    <association property="department" javaType="Department">
        <id column="dept_Id" property="deptId" jdbcType="INTEGER"/>
        <result column="dept_Name" property="deptName" jdbcType="VARCHAR"/>
    </association>
</resultMap>

<sql id="WithDept_Column_List">
    emp_Id, last_Name, email, gender, e.dept_Id,dept_Name
</sql>

<select id="selectByExampleWithDepartment" resultMap="WithDeptBaseResultMap">
    select
    <if test="distinct">
        distinct
    </if>
    <include refid="WithDept_Column_List"/>
    from employee e
    left join department d on d.dept_Id = e.dept_Id
    <if test="_parameter != null">
        <include refid="Example_Where_Clause"/>
    </if>
    <if test="orderByClause != null">
        order by ${orderByClause}
    </if>
</select>

<select id="selectByPrimaryKeyWithDepartment" resultMap="WithDeptBaseResultMap">
    select
    <include refid="WithDept_Column_List"/>
    from employee e
    left join department d on d.dept_Id = e.dept_Id
    where emp_Id = #{empId,jdbcType=INTEGER}
</select>
```

#### 2.6.6 测试Mapper接口

**① 添加spring-test模块**

```xml
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-test</artifactId>
    <version>${spring.version}</version>
    <scope>test</scope>
</dependency>
```

**② `@ContextConfiguration`指定spring配置文件的位置**

```java
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(
        locations = {"classpath:application.xml"}
)
```

**③ 直接`Autowired`要使用的组件即可**

```java
@Autowired
private DepartmentMapper departmentMapper;

@Autowired
private EmployeeMapper employeeMapper;
```

**④ 测试CURD**

```java
@Test
public void testCRUD() {
    // 1. 插入一个部门
    Department department = new Department(3, "人事部名");
    departmentMapper.insert(department);

// 2. 插入一个员工
    Employee employee = new Employee("张三","张三@qq.com",0,3);
    employeeMapper.insert(employee);

// 3. 根据empId查询员工
    Employee employeeKey = employeeMapper.selectByPrimaryKey(1031);
    System.out.println(employeeKey);

// 4. 根据empId查询员工和部门
    Employee employeeAndDepartment = employeeMapper.selectByPrimaryKeyWithDepartment(1031);
    System.out.println(employeeAndDepartment);

// 5. 根据empId和empName查询员工
    EmployeeExample example = new EmployeeExample();
    example.or().andEmpIdEqualTo(1031).andLastNameEqualTo("张三");
    List<Employee> employees = employeeMapper.selectByExample(example);
    System.out.println(employees);
}
```

**完整的代码**

```java
package com.dhw.ssm;

import com.dhw.ssm.entity.*;
import com.dhw.ssm.mapper.*;
import org.apache.ibatis.session.SqlSession;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.internal.DefaultShellCallback;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import javax.sql.DataSource;
import java.io.File;
import java.sql.*;
import java.util.*;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(
        locations = {"classpath:application.xml"}
)
public class MapperTest {

@Autowired
    private DepartmentMapper departmentMapper;

@Autowired
    private EmployeeMapper employeeMapper;

@Test
    public void testCRUD() {
        // 1. 插入一个部门
        Department department = new Department(3, "人事部名");
        departmentMapper.insert(department);

// 2. 插入一个员工
        Employee employee = new Employee("张三","张三@qq.com",0,3);
        employeeMapper.insert(employee);

// 3. 根据empId查询员工
        Employee employeeKey = employeeMapper.selectByPrimaryKey(1031);
        System.out.println(employeeKey);

// 4. 根据empId查询员工和部门
        Employee employeeAndDepartment = 
            employeeMapper.selectByPrimaryKeyWithDepartment(1031);
        System.out.println(employeeAndDepartment);

// 5. 根据empId和empName查询员工
        EmployeeExample example = new EmployeeExample();
        example.or().andEmpIdEqualTo(1031).andLastNameEqualTo("张三");
        List<Employee> employees = employeeMapper.selectByExample(example);
        System.out.println(employees);
    }
}
```

>[**项目下载**](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202100528.zip?Expires=1606878352&OSSAccessKeyId=TMP.3KfNy2kJAVcXY6aQtg2cGBYmJGRo85CcorD6DUvqtZWKM65ieUknGfawWUHGTg8d1hHrgnCXxcFVSPt3btXwYdSYjiCqef&Signature=auzCn%2Fa5TkTk%2BoK3V%2BoMAW9kcFU%3D&versionId=CAEQCRiBgMCYkeWEsRciIDQzYmIwNWU4MThmMDRlNzhhOGU5MjZhZWRmOWMxYzNk&response-content-type=application%2Foctet-stream "项目下载")
>**上篇：【Layui + SSM，CURD案例-准备环境篇】**http://www.kuangstudy.com/bbs/1333953918794797057

## 三、整合CRUD

### 3.1 CURD-查询

**使用步骤**

1. 访问index.jsp页面
2. index.jsp页面发送出查询员工列表请求
3. EmployeeController来接受请求，查出员工数据
4. 返回到index.jsp页面进行展示
6. URI：/getAllEmployee

#### ① 修改index.jsp页面

##### 1.1 添加表格组件

> 数据表格演示：[https://www.layui.com/demo/table.html](https://www.layui.com/demo/table.html)
>
> 数据表格文档：[https://www.layui.com/doc/modules/table.html](https://www.layui.com/doc/modules/table.html)

创建一个table实例最简单的方式是，在页面放置一个元素 *`<table id="demo"></table>`*，然后通过 *`table.render()`* 方法指定该容器，如下所示：

![image-20201124140412326](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101146.png)

如下代码：

```jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="http://localhost:8080/ssm/">
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>

<table id="demo" lay-filter="test"></table>

table.render({
            elem: '#demo' // 绑定容器（table 的 id 属性）
            , url: 'static/json/user.json' // 设置数据接口
            , cols: [[ // 在表头设定对应的字段
                {field: 'id', width: 80, title: 'ID', sort: true}
                , {field: 'username', width: 80, title: '用户名'}
                , {field: 'sex', width: 80, title: '性别', sort: true}
                , {field: 'city', width: 80, title: '城市'}
                //minWidth：局部定义当前单元格的最小宽度
                , {field: 'sign', title: '签名', width: '30%', minWidth: 100}
                , {field: 'experience', title: '积分', sort: true}
                , {field: 'score', title: '评分', sort: true}
                , {field: 'classify', title: '职业'}
                , {field: 'wealth', width: 137, title: '财富', sort: true}
            ]]
        });
    });
</script>

</body>
</html>
```

数据接口可参考：[返回的数据](https://www.layui.com/demo/table/user/?page=1&limit=30)

##### 1.2 添加工具栏和分页

> 数据表格演示：[https://www.layui.com/demo/table/toolbar.html](https://www.layui.com/demo/table/toolbar.html)
>
> 数据表格文档：[https://www.layui.com/doc/modules/table.html](https://www.layui.com/doc/modules/table.html)
>
> 按钮演示：[https://www.layui.com/demo/button.html](https://www.layui.com/demo/button.html)
>
> 按钮文档：[https://www.layui.com/doc/element/button.html](https://www.layui.com/doc/element/button.html)
>
> 颜色文档：[https://www.layui.com/doc/element/color.html](https://www.layui.com/doc/element/color.html)
>
> 图标文档：[https://www.layui.com/doc/element/icon.html](https://www.layui.com/doc/element/icon.html)

在表格组件的基础上，添加表头工具栏、分页、行级工具栏功能。

在*`table.render()`*里添加 toolbar 属性、`page`属性、`limit`属性、`limits`属性，属性介绍如下：

- **属性文档：**[基础参数一览表 ](https://www.layui.com/doc/modules/table.html#options)

在*`cols`*表头里添加 toolbar 属性即可，属性介绍：

- **属性文档：**[表头参数一览表 ](https://www.layui.com/doc/modules/table.html#cols)

代码如下：

```jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="http://localhost:8080/ssm/">
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>

<table id="demo" lay-filter="test"></table>

</body>
</html>
```

执行结果：

![image-20201125100417220](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101153.png)

#### ② 发送出查询员工列表请求

##### 2.1 修改接口地址和表头

> 数据表格文档：[异步数据接口 ](https://www.layui.com/doc/modules/table.html#async)

数据的异步请求由以下几个参数组成：

| 参数名 |                                                              |
| ------ | ------------------------------------------------------------ |
| url    | 接口地址。默认会自动传递两个参数：*?page=1&limit=30*（该参数可通过 request 自定义）<br/>*page* 代表当前页码、*limit* 代表每页数据量 |
| method | 接口http请求类型，默认：get                                  |
| where  | 接口的其它参数。如：*where: {token: 'sasasas', id: 123}*     |

代码如下：

```js
table.render({
    elem: '#demo'
    , url: 'getAllEmployee' //数据接口
    , page: true //开启分页
    , limit: 10
    , limits: [10, 20, 30]
    , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    , cols: [[ //表头
        {type: 'checkbox'},
        {field: 'empId', title: '员工编号', sort: true},
        {field: 'lastName', title: '姓名'},
        {field: 'gender', title: '性别', sort: true},
        {field: 'email', title: '邮箱'},
        {field: 'deptName', title: '部门名称'},
        {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
    ]]
});
```

##### 2.2 编写mapper接口

**首先批量插入1000条数据**

在application.xml添加如下代码：

```xml
<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
    <constructor-arg ref="sqlSessionFactory" name="sqlSessionFactory"/>
    <constructor-arg name="executorType" value="BATCH"/>
</bean>
```

在MapperTest添加如下测试代码：

```java
@Autowired
private SqlSession sqlSession;

@Test
public void testBatch() {
    // 批量插入员工
    EmployeeMapper sessionMapper = sqlSession.getMapper(EmployeeMapper.class);
    for (int i = 0; i < 900; i++) {
        int depId = (int) (Math.random() * 3 + 1);
        String gender = String.valueOf((int) (Math.random() * 2 + 1));
        String uid = UUID.randomUUID().toString().substring(0, 5) + i;
        sessionMapper.insertSelective(new Employee(uid, uid + "@qq.com", gender, depId));
    }
}
```

**前端table表格，需要如下的json格式：**

![image-20201125104711589](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101156.png)

根据如上的json格式，得出结论：查询总行数，查询所有的数据并分页。

【PageDataHelper.java】

```java
package com.dhw.ssm.helper;
import lombok.Data;
import java.util.*;

/**
 * 分页参数，分页结果集等
 * @author
 */
@Data
public class PageDataHelper {

/**
     * 页码
     */
    private int page;

/**
     * 每页显示条数
     */
    private int pageSize;

public PageDataHelper() {
    }

public PageDataHelper(int page, int pageSize) {
        this.page = page;
        this.pageSize = pageSize;
    }

public static PageDataHelper pagingOracleVersion(int page, int pageSize) {
        return new PageDataHelper((page - 1) * pageSize, page * pageSize);
    }

public static PageDataHelper pagingMySQLVersion(int page, int pageSize) {
        return new PageDataHelper((page - 1) * pageSize, pageSize);
    }

public static Map<String, Object> pagingEncapsulation(List<?> data, int count) {
        Map<String, Object> map = new HashMap<>(16);
        map.put("code", 0);
        map.put("msg", "");
        map.put("count", count);
        map.put("data", data);
        return map;
    }
}
```

【EmployeeMapper.java】

```java
/**
 * 分页
 *
 * @param pageDataHelper 分页参数类
 * @return 分页执行结果
 */
List<Employee> selectByExamplePaging(PageDataHelper pageDataHelper);
```

【EmployeeMapper.xml】

```xml
<select id="selectByExamplePaging" resultMap="WithDeptBaseResultMap">
    select
    <include refid="WithDept_Column_List"/>
    from employee e
    left join department d on d.dept_Id = e.dept_Id
    order by e.emp_Id asc
    limit #{page},#{pageSize}
</select>
```

##### 2.3 编写service类

【EmployeeService.java】

```java
public interface EmployeeService {
    /**
     * 查找所有员工和页面
     *
     * @param pageDataHelper 分页参数类
     * @return 执行结果
     */
    List<Employee> findAllEmployeeAndPage(PageDataHelper pageDataHelper);

/**
     * 获取员工总数
     *
     * @return 执行行数
     */
    Integer findEmployeeCount();

}
```

【EmployeeServiceImpl.java】

```java
@Service
public class EmployeeServiceImpl implements EmployeeService {

@Resource
    private EmployeeMapper employeeMapper;

@Override
    public List<Employee> findAllEmployeeAndPage(PageDataHelper pageDataHelper) {
        List<Employee> employees = employeeMapper.selectByExamplePaging(pageDataHelper);
        return employees;
    }

@Override
    public Integer findEmployeeCount() {
        return employeeMapper.countByExample(null);
    }
}
```

##### 2.4 编写controller类

```java
@RestController
public class EmployeeController {

@Resource
    private EmployeeService employeeService;

@GetMapping("/getAllEmployee")
    public Map<String, Object> getAllEmployee(
            @RequestParam(defaultValue = "1", value = "page") int page,
            @RequestParam(defaultValue = "10", value = "limit") int limit) {
        PageDataHelper pageDataHelper = PageDataHelper.pagingMySQLVersion(page, limit);
        List<Employee> employeeList = employeeService.findAllEmployeeAndPage(pageDataHelper);
        Integer count = employeeService.findEmployeeCount();
        return PageDataHelper.pagingEncapsulation(employeeList, count);
    }
}
```

#### ③ 返回到index.jsp页面进行展示

先访问控制器的url测试一下：[http://localhost:8080/ssm/getAllEmployee](http://localhost:8080/ssm/getAllEmployee)

返回结果如图：

![image-20201125111759226](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101206.png)

然后访问：[http://localhost:8080/ssm/](http://localhost:8080/ssm/)

![image-20201125112017803](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101204.png)

此时性别和部门名称不准确，解决办法：在`cols`里添加如下代码即可：

```js
templet: function (d) {}
```

> 数据表格文档：[自定义模板 ](https://www.layui.com/doc/modules/table.html#templet)

完整代码：

```js
//第一个实例
table.render({
    elem: '#demo'
    , url: 'getAllEmployee' //数据接口
    , page: true //开启分页
    , limit: 10
    , limits: [10, 20, 30]
    , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    , cols: [[ //表头
        { type: 'checkbox'}, 
        { field: 'empId', title: '员工编号', sort: true }, 
        { field: 'lastName', title: '姓名' },
        { field: 'gender', title: '性别', sort: true,
            templet: function (d) {
                return d.gender == 1 ? "男" : "女";
            }
        },
        { field: 'email',title: '邮箱' }, 
        { field: 'deptName', title: '部门名称',
            templet: function (d) {
                return d.department.deptName;
            }
        }, 
        { fixed: 'right', title: '操作',toolbar: '#barDemo', width: 150 }
    ]]
});
```

![image-20201125112839228](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101211.png)

### 3.2 CURD-新增

![image-20201130171013249](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101213.png)

1. 在index.jsp页面点击”新增”

2. 弹出新增对话框

3. 去数据库查询部门列表，显示在对话框中

4. 用户输入数据，并进行校验

jquery前端校验，ajax用户名重复校验，重要数据（后端校验(JSR303)，唯一约束）；

5. 完成保存

6. URI:

1. `/emp/{id}` GET 查询员工
   2. `/emp`  POST 保存员工
   3. `/emp/{id}`  PUT  修改员工
   4. `/emp/{id}`  DELETE 删除员工

> 文档
>
> - 弹出框：[https://www.layui.com/doc/modules/layer.html](https://www.layui.com/doc/modules/layer.html)
>
> - 表单：
>   - [https://www.layui.com/doc/element/form.html](https://www.layui.com/doc/element/form.html)
>   - [https://www.layui.com/doc/modules/form.html](https://www.layui.com/doc/modules/form.html)
>
> 演示
>
> - 弹出框：
>   - [https://layer.layui.com/?alone](https://layer.layui.com/?alone)
>   - [https://www.layui.com/demo/layer.html](https://www.layui.com/demo/layer.html)
> - 表单：[https://www.layui.com/demo/form.html](https://www.layui.com/demo/form.html)

#### ① 添加弹出框和表单组件

> [监听头工具栏事件 ](https://www.layui.com/doc/modules/table.html#ontoolbar)
>
> [监听行工具事件](https://www.layui.com/doc/modules/table.html#ontool)

如果想表格的按钮生效，必须要加[事件监听](https://www.layui.com/doc/modules/table.html#on)，用来监听这些按钮的。我们来看看是怎么写的吧，代码如下：

```js
//监听头部工具栏事件
table.on('toolbar(test)', function (obj) {
    //获取选中行的数据
    var checkStatus = table.checkStatus(obj.config.id).data;
    console.log(checkStatus)
    console.log(obj)
    switch (obj.event) {
        case 'add':
            layer.msg('添加');
            break;
        case 'deleteBatches':
            layer.msg('批量删除');
            break;
    }
});

//监听工具条
//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
table.on('tool(test)', function (obj) {
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    console.log(data)
    console.log(layEvent)
    console.log(tr)
    if (layEvent === 'remove') { //删除
        // 询问弹出框
        layer.confirm('真的删除行么', function (index) {
            layer.close(index);
        });
    } else if (layEvent === 'edit') { //编辑
		layer.msg('编辑');
    }
});
```

表格的按钮都绑定了事件监听器，我们来编写新增和编辑的弹出框吧。代码如下：

```js
layer.open({
    type: 1,
    skin: 'layui-layer-lan',
    area: ['420px', '240px'], //宽高
    btn: ['按钮一', '按钮二', '按钮三'],
    content: 'html内容',
    yes: function (index, layero) {
        //按钮【按钮一】的回调
    }
    , btn2: function (index, layero) {
        //按钮【按钮二】的回调

//return false 开启该代码可禁止点击该按钮关闭
    }
});
```

弹出框有了，在`content`属性上，加上`#id`来指定`form`表单。弹出框：

```js
layer.open({
    type: 1,
    title: '添加',
    skin: 'layui-layer-lan', //加上边框
    btn: ['确定', '关闭'],
    area: ['520px', '420px'], //宽高
    content: $("#updateForm"),
    yes: function (index, layero) {
        //按钮【按钮一】的回调
    }
    , btn2: function (index, layero) {
        //按钮【按钮二】的回调
        //return false 开启该代码可禁止点击该按钮关闭
    }
});
```

表单：

```jsp
<div class="site-text" style="margin: 5%; display: none" id="updateForm">
    <form class="layui-form">
        <input id="distinguish" type="hidden" value="添加">
        <input id="empId" name="empId" type="hidden" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="lastName" lay-verify="title" autocomplete="off" placeholder="请输入姓名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="男" title="男" checked="">
                <input type="radio" name="gender" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <select name="modules" lay-verify="required" lay-search="">
                    <option value="">请选择或搜索部门</option>
                    <option value="0">开发部门</option>
                    <option value="1">财务部门</option>
                    <option value="2">人事部名</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入邮箱"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
```

#### ② 需求：点击提交按钮的时候，进行前端校验

> [表单验证 ](https://www.layui.com/doc/modules/form.html#verify)
>
> [预设元素属性](https://www.layui.com/doc/modules/form.html#attr)

我们对表单的验证进行了非常巧妙的支持，大多数时候你只需要在表单元素上加上*`lay-verify=""`* 属性值即可。如：

```html
<input type="text" lay-verify="email"> 
 

<input type="text" lay-verify="required|phone|number">
```

`lay-verify`：属性值

- required（必填项）
- phone（手机号）
- email（邮箱）
- url（网址）
- number（数字）
- date（日期）
- identity（身份证）
- 自定义值

添加了前端校验，代码如下：

```html
<div class="site-text" style="margin: 5%; display: none" id="updateForm">
    <form class="layui-form" id="formTable" lay-filter="form-Table">
        <input id="distinguish" type="hidden" value="添加">
        <input id="empId" name="empId" type="hidden" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="lastName" lay-verify="required" autocomplete="off" placeholder="请输入姓名"
                       class="layui-input" lay-reqtext="用户名是必填项，岂能为空？">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="1" title="男" checked="">
                <input type="radio" name="gender" value="2" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <select name="deptId" lay-verify="required" lay-search=""
                        id="selectDepartment">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-filter="email"
                       placeholder="请输入邮箱"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

<button id="submit" class="layui-btn" lay-submit lay-filter="*" style="display: none">立即提交</button>
    </form>
</div>
```

> 注意：这些校验必须要用submit添加，要不然没有效果。
>
> 触发事件：`$("#submit").click();`

校验成功：

![image-20201130173329048](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101221.png)

#### ③ 动态查询部门

查询部门信息的时候，是要点击添加按钮或者编辑按钮，才会调用ajax请求。目的可以减少资源的浪费。

来看看我们要怎么做吧？首先我们添加表单组件：

```js
layui.use(['table','form'], function () {
        var table = layui.table;
        var form = layui.form;
})
```

再使用ajax请求，去数据库查询部门列表，显示在对话框中。

1. 把下拉框的静态数据删除，如下

```html
   <select name="deptId" lay-verify="required" lay-search=""
           id="selectDepartment">
   
   </select>
   ```

2. 使用ajax同步请求，url：getAllDepartment

> 第一种：
   >
   > ```js
   > $.ajax({
   >  url: '',
   >  type: "get",
   >  dataType: "json",
   >  async: false, //这得注意是同步
   >  success: function (result) {
   > 
   >  }
   > });
   > form.render('select'); //需要渲染一下
   > ```

第二种：

> 在`$.post()`（或者`$.get()`）前把ajax设置为同步：`$.ajaxSettings.async = false;`

```js
   function dynamic() {
       var select = '<option value="">请选择或搜索部门</option>';
       $.ajaxSettings.async = false;
       $.get("getAllDepartment", function (result) {
           for (let x in result) {
               select += '<option value = "' + result[x].deptId + '">'
                   + result[x].deptName + '</option>';
           }
           $("#selectDepartment").html(select);
       }, "json")
       form.render('select'); //需要渲染一下
   }
   ```

3. 在弹出框之前调用`dynamic()`函数。

【DepartmentService.java】

```java
public interface DepartmentService {

/**
     * 查询所有的部门信息
     *
     * @return 部门信息集合列表
     */
    List<Department> findAllDepartments();
}

@Service
public class DepartmentServiceImpl implements DepartmentService {

@Resource
    DepartmentMapper departmentMapper;

@Override
    public List<Department> findAllDepartments() {
        return departmentMapper.selectByExample(null);
    }
}
```

【EmployeeController】

```java
@GetMapping("/getAllDepartment")
public List<Department> getAllDepartment() {
    return departmentService.findAllDepartments();
}
```

最终结果：

![image-20201201095618237](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101228.png)

#### ④ 新增员工操作

> 姓名：张三
>
> 性别：男
>
> 部门：开发部门
>
> 邮箱：2235356876@qq.com

![image-20201201100303082](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101232.png)

在确定按钮的回调函数里，使用ajax请求，请求添加员工信息。

添加员工信息，大家应该都会吧。那我快速写完吧~

> 注意点：按照我们平时的思维，会在如下图地方使用ajax。这样是不行的~
>
> ![image-20201201105159138](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101234.png)
>
> 请看页面f12，如下图：看见控制台就知道了吧。
>
> ![image-20201201104225593](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101236.png)

解决方法：[监听submit提交](https://www.layui.com/doc/modules/form.html#onsubmit)

```js
form.on('submit(*)', function(data){
    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
```

使用了submit监听器，会怎么样呢，如下图：

![image-20201201104622257](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101239.png)

必填项没有填不会调用submit监听器：

![image-20201201104745102](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101241.png)

而且layui帮我们准备了，不需要使用`$('#formTable').serialize()`获取表单值，使用layui提供的`data.field`。

![image-20201201104915801](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101243.png)

完整 submit监听器 代码：

> 首先添加隐藏域用来区分：新增/修改
>
> html：`<input id="distinguish" type="hidden" value="添加">`
>
> js：`$("#distinguish").val("添加|修改");`

```js
form.on('submit(*)', function (data) {
    if ($("#distinguish").val() == '添加') {
        $.post("addEmployeeInfo", data.field, function (result) {
            if (result) {
                table.reload('test', {
                    page: {
                        curr: 1
                        //重新从第 1 页开始
                    }
                });
                // 清空form表单文本框的值
                document.getElementById("formTable").reset();
                layer.close(layer.index);
                layer.msg("添加成功")
            } else {
                layer.msg("失败成功")
            }
        }, "json");
    } else {
        layui.msg("修改")
    }
    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
```

> 美化弹出框：https://fly.layui.com/extend/notice/#download
>
> 导入css和js：
>
> ```html
> <link rel="stylesheet" href="static/notice.css">
> <script src="static/notice.js"></script>
> ```
>
> 使用说明：
>
> ```js
> layui.use(['notice'], function () {
>  var notice = layui.notice; // 允许别名 toastr
>  
>  notice.warning("成功");
>  notice.info("提示信息：毛都没有...");
>  notice.error("大佬，我咋知道怎么肥四！");
>  notice.success("大佬，我咋知道怎么肥四！");
> });
> ```
>
> ![image-20201201141834215](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101247.png)

完整后端代码：

【controller】

```java
@PostMapping(value = "/addEmployeeInfo")
public Boolean addEmployeeInfo(Employee employee) {
    return employeeService.insertEmployeeInfo(employee);
}
```

【service】

```java
/**
* 插入员工信息
*
* @param employee 员工
* @return
*/
Boolean insertEmployeeInfo(Employee employee);

@Override
public Boolean insertEmployeeInfo(Employee employee) {
    if (employeeMapper.insertSelective(employee) != 0) {
        return true;
    }
    return false;
}
```

### 3.3 CURD-修改

![image-20201201155928728](https://admin-root.oss-cn-beijing.aliyuncs.com/img/20201202101249.png)

1. 点击编辑
2. 弹出用户修改的模态框（显示用户信息）
3. 点击更新，完成用户修改

#### ① 修改员工操作

>[表单赋值 / 取值 ](https://www.layui.com/doc/modules/form.html#val)
>
>[表格重载](https://www.layui.com/doc/modules/table.html#reload)

修改和新增代码都差不多，不如把他们抽取出来，具体如下：

```js
function update(type) {
    $("#distinguish").val(type);
    layer.open({
        type: 1,
        title: type,
        skin: 'layui-layer-lan', //加上边框
        btn: ['确定', '关闭'],
        area: ['520px', '420px'], //宽高
        content: $("#updateForm"),
        yes: function (index, layero) {
            $("#submit").click();
            return false;
        }
        , btn2: function (index, layero) {
            // 清空form表单文本框的值
            document.getElementById("formTable").reset();
            layer.close(index);
            return false;
        }
    });
}
```

> Rest风格的url请求，要添加`<input type="hidden" id="method" name="_method">`放在form标签下即可。

```js
form.on('submit(*)', function (data) {
    let url = "";
    if ($("#distinguish").val() === '添加') {
        url = "addEmployeeInfo";
        $("#method").val("POST");
    } else {
        url = "editEmployeeInfo";
        $("#method").val("PUT");
    }
    $.post(url, data.field, function (result) {
        if (result) {
            table.reload('test', {
                page: {
                    curr: 1
                    //重新从第 1 页开始
                }
            });
            // 清空form表单文本框的值
            document.getElementById("formTable").reset();
            layer.closeAll();
            notice.warning("操作成功");
        } else {
            notice.error("操作失败");
        }
    }, "json");
    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
```

在弹出框之前就给表单赋值

```js
//给表单赋值
form.val("form-Table", data);
```

**后端代码：**

【service】

```java
/**
* 修改员工信息
*
* @param employee 员工
* @return
*/
@Override
public Boolean updateEmployeeInfo(Employee employee) {
    if (employeeMapper.updateByPrimaryKeySelective(employee) != 0) {
        return true;
    }
    return false;
}
```

【controller】

```java
@PutMapping("/editEmployeeInfo")
public Boolean editEmployeeInfo(Employee employee) {
    return employeeService.updateEmployeeInfo(employee);
}
```

### 3.4 CURD-删除和批量删除

#### ① 删除单个

```js
layer.confirm('真的删除行么', function (index) {
    $.post("removeEmployeeInfo", {
        'empId': data.empId,
        '_method': 'DELETE'
    }, function (result) {
        if (result) {
            table.reload('test', {
                page: {
                    curr: 1
                    //重新从第 1 页开始
                }
            });
            layer.closeAll();
            notice.warning("操作成功");
        } else {
            notice.error("操作失败");
        }
    }, 'json');
    layer.close(index);
});
```

后端代码：

```java
// service
@Override
public Boolean deleteEmployeeInfo(Integer empId) {
    if (employeeMapper.deleteByPrimaryKey(empId) != 0) {
        return true;
    }
    return false;
}

// controller
@DeleteMapping("/removeEmployeeInfo")
public Boolean removeEmployeeInfo(Integer empId) {
    return employeeService.deleteEmployeeInfo(empId);
}
```

#### ② 批量删除

```js
case 'deleteBatches' :
	let arr = new Array();
    for (let x in checkStatus) {
        arr.push(checkStatus[x].empId);
    }
    layer.confirm('真的删除行么', function (index) {
        $.post("removeEmployeeInfoInBulk", {
            '_method': 'DELETE',
            'empIds': JSON.stringify(arr)
        }, function (result) {
            if (result) {
                table.reload('test', {
                    page: {
                        curr: 1
                        //重新从第 1 页开始
                    }
                });
                layer.closeAll();
                notice.warning("操作成功");
            } else {
                notice.error("操作失败");
            }
        }, 'json');
    });
    break;
```

后端：

> Json使用：https://www.cnblogs.com/dupang/p/5673097.html

【Controller】

```java
@DeleteMapping("/removeEmployeeInfoInBulk")
public Boolean removeEmployeeInfoInBulk(String empIds) {
    ObjectMapper objectMapper = new ObjectMapper();
    List<Integer> list = null;
    try {
        list = objectMapper.readValue(empIds, List.class);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return employeeService.deleteEmployeeInfoInBulk(list);
}
```

【Service】

```java
/**
 * 批量删除员工信息
 * @param empIds 编号
 * @return
 */
Boolean deleteEmployeeInfoInBulk(List<Integer> empIds);

@Override
public Boolean deleteEmployeeInfoInBulk(List<Integer> empIds) {
    if (employeeMapper.deleteByPrimaryKeyInBulk(empIds) != 0) {
        return true;
    }
    return false;
}
```

【mapper】

```java
/**
 * 通过主键批量删除
 *
 * @param empIds 多个编号
 * @return 执行行数
 */
int deleteByPrimaryKeyInBulk(@Param("empIds") List<Integer> empIds);
```

```xml
<delete id="deleteByPrimaryKeyInBulk" parameterType="java.lang.Integer">
    delete from employee where emp_Id in
    <foreach collection="empIds" item="empId" open="(" separator="," close=")">
        #{empId}
    </foreach>
</delete>
```

Layui + SSM，CURD案例

总共已有 0 条评论