尚硅谷SSM框架——SSM实战演练学习笔记

向右看齐 2023-10-06 21:36 30阅读 0赞

## 一、搭建maven工程 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16]

### 1.1、补齐目录 ###

先项目上右键，选择属性  
先去掉，然后再勾上下图选项  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### 1.2、配置生成的web.xml的位置 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][31d15b77f1c44d049ccc17ea8be947b7.png]

## 二、 通过pom.xml引进相关jar依赖 ##

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
      <groupId>com.atguigu</groupId>
      <artifactId>ssm-crud</artifactId>
      <version>0.0.1-SNAPSHOT</version>
      <packaging>war</packaging>
      
      <dependencies>
      
      	
        
    	<dependency>
    	    <groupId>org.springframework</groupId>
    	    <artifactId>spring-webmvc</artifactId>
    	    <version>5.3.13</version>
    	</dependency>
    
    
    	
        
    	<dependency>
    	    <groupId>org.springframework</groupId>
    	    <artifactId>spring-jdbc</artifactId>
    	    <version>5.3.13</version>
    	</dependency>
        
        
        
    	<dependency>
    	    <groupId>org.springframework</groupId>
    	    <artifactId>spring-aspects</artifactId>
    	    <version>5.3.13</version>
    	</dependency>
    	
    	
        
    	<dependency>
    	    <groupId>org.mybatis</groupId>
    	    <artifactId>mybatis</artifactId>
    	    <version>3.4.2</version>
    	</dependency>
    	
    	
    	
    	<dependency>
    	    <groupId>org.mybatis</groupId>
    	    <artifactId>mybatis-spring</artifactId>
    	    <version>1.3.1</version>
    	</dependency>
    	
    	
        
    	<dependency>
    	    <groupId>c3p0</groupId>
    	    <artifactId>c3p0</artifactId>
    	    <version>0.9.1.2</version>
    	</dependency>
    	
        
        
        <dependency>
          <groupId>mysql</groupId>
          <artifactId>mysql-connector-java</artifactId>
          <version>8.0.26</version>
        </dependency>
        
        
        
        <dependency>
          <groupId>jstl</groupId>
          <artifactId>jstl</artifactId>
          <version>1.2</version>
        </dependency>
    
    	
        
    	<dependency>
    	    <groupId>javax.servlet</groupId>
    	    <artifactId>javax.servlet-api</artifactId>
    	    <version>3.1.0</version>
    	    <scope>provided</scope>
    	</dependency>
    
    
    	
        
        <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <version>4.12</version>
          <scope>test</scope>
        </dependency>
        
      </dependencies>
    </project>

## 三、 引进bootstrap和jQuery ##

https://v3.bootcss.com/  
![在这里插入图片描述][5bd4b135e7b044faae104e2cbf4d58a1.png]

### 3.1、使用[bootstrap][] ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 3]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
引入基本样式css和JavaScript和jQuery  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
使用  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 7]

## 四、配置相关xml文件 ##

### 4.1、配置web.xml ###

<?xml version="1.0" encoding="UTF-8"?>
    <web-app id="WebApp_ID" version="2.5" 
    	xmlns="http://java.sun.com/xml/ns/javaee" 
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	xsi:schemaLocation="http://JAVA.sun.com/xml/ns/javaee 
    	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    
    	
        
        <context-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </context-param>
         
        <listener>
            <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
        </listener>
        
        
        <servlet>
            <servlet-name>springDispatcherServlet</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>classpath:springmvc.xml</param-value>
            </init-param>
            <load-on-startup>1</load-on-startup>
        </servlet>
    
        
        <servlet-mapping>
            <servlet-name>springDispatcherServlet</servlet-name>
            <url-pattern>/</url-pattern>
        </servlet-mapping>
    
        
        <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>forceResponseEncoding</param-name>
                <param-value>true</param-value>
            </init-param>
            <init-param>
                <param-name>forceRequestEncoding</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>
    </web-app>

附：  
servlet-name标签出错的解决方案  
![在这里插入图片描述][448b4caa8f7648e5968b949b812e373a.png]  
![在这里插入图片描述][22fc5b545ff546e6ac9aca1df4403740.png]

### 4.2、配置spring的配置文件applicationContext.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:tx="http://www.springframework.org/schema/tx"
    	xmlns:aop="http://www.springframework.org/schema/aop"
    	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 http://www.springframework.org/schema/context/spring-context-4.3.xsd
    		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
    		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">
    
    	
    	
    	
    	<context:component-scan base-package="com.atguigu" >
    		
    		<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    	</context:component-scan>
    	
    	
    	<context:property-placeholder location="classpath:db.properties"/>
    	
    	<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
    		<property name="driverClass" value="${jdbc.driver}"></property>
    		<property name="jdbcUrl" value="${jdbc.url}"></property>
    		<property name="user" value="${jdbc.username}"></property>
    		<property name="password" value="${jdbc.password}"></property>
    	</bean>
    	
    	
    	
    	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean" >
    		
    		<property name="configLocation" value="classpath:mybatis-config.xml"></property>
    		
    		<property name="dataSource" ref="dataSource"></property>
    		
    		<property name="mapperLocations" value="classpath:mapper/*.xml"></property>
    	</bean>
    
    	
    	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    		
    		<property name="basePackage" value="com.atguigu.crud.dao"></property>
    	</bean>
        
    	
    	<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
    		
    		<property name="dataSource" ref="dataSource"></property>
    	</bean>
    	
    	
    	<aop:config>
    		
    		<aop:pointcut expression="execution(* com.atguigu.crud.service..*(..))" id="txPoint"/>
    		
    		<aop:advisor advice-ref="txAdvice" pointcut-ref="txPoint"/>
    	</aop:config>
    	
    	
    	<tx:advice id="txAdvice" transaction-manager="transactionManager">
    		<tx:attributes>
    			
    			<tx:method name="*"/>
    			
    			<tx:method name="get*" read-only="true"/>
    		</tx:attributes>
    	</tx:advice>
    	
    </beans>

### 4.3、配置springmvc的配置文件springmvc.xml ###

### 4.4、配置数据库连接文件db.properties ###

jdbc.driver=com.mysql.cj.jdbc.Driver
    jdbc.url=jdbc:mysql://localhost:3306/ssm_crud?serverTimezone=Hongkong
    jdbc.username=root
    jdbc.password=75688

### 4.5、mybatis-config.xml配置 ###

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE configuration
     PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
     "http://mybatis.org/dtd/mybatis-3-config.dtd">
     
    	<configuration>
    	
    		 <settings>
    		 	
    		 	<setting name="mapUnderscoreToCamelCase" value="true"/>
    		 </settings>
    		 
    		 
    		 <typeAliases>
    		 	<package name="com.atguigu.crud.bean"></package>
    		 </typeAliases>
    		 
    	</configuration>

## 五、创建数据库表 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 8]

## 六、mybatis逆向工程 ##

### 6.1、引入mabatis逆向工程所需依赖 ###

![在这里插入图片描述][c24dc9fa964a42c1917881e82965041b.png]

### 6.2、mbg.xml ###

参考http://mybatis.org/generator/  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 9]

<?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>
      	
      	
        <jdbcConnection 
        	driverClass="com.mysql.cj.jdbc.Driver"
            connectionURL="jdbc:mysql://localhost:3306/ssm_crud?serverTimezone=Hongkong"
            userId="root"
            password="75688">
        </jdbcConnection>
    
        <javaTypeResolver >
          <property name="forceBigDecimals" value="false" />
        </javaTypeResolver>
    
    	
        <javaModelGenerator 
        	targetProject=".\src\main\java"
        	targetPackage="com.atguigu.crud.bean" >
          <property name="enableSubPackages" value="true" />
          <property name="trimStrings" value="true" />
        </javaModelGenerator>
    	
    	
        <sqlMapGenerator 
        	targetProject=".\src\main\resources"
        	targetPackage="mapper">
          <property name="enableSubPackages" value="true" />
        </sqlMapGenerator>
    
    	
        <javaClientGenerator type="XMLMAPPER" 
        	targetProject=".\src\main\java"
    	    targetPackage="com.atguigu.crud.dao">
          <property name="enableSubPackages" value="true" />
        </javaClientGenerator>
    
        
    	<table tableName="tbl_emp" domainObjectName="Employee"></table>
    	<table tableName="tbl_dept" domainObjectName="Department"></table>
      </context>
    </generatorConfiguration>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_12_color_FFFFFF_t_70_g_se_x_16]

### 6.3、使用逆向工程生成代码 ###

参考官方文档  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 10]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 11]

#### 6.3.1、MBGTest.java ####

package com.atguigu.crud.test;
    
    import java.io.File;
    import java.util.ArrayList;
    import java.util.List;
    
    import org.mybatis.generator.api.MyBatisGenerator;
    import org.mybatis.generator.config.Configuration;
    import org.mybatis.generator.config.xml.ConfigurationParser;
    import org.mybatis.generator.exception.XMLParserException;
    import org.mybatis.generator.internal.DefaultShellCallback;
    
    public class MBGTest {
        
    	public static void main(String[] args) throws Exception, XMLParserException {
        
    		System.out.println("============开始执行逆向工程============");
    		List<String> warnings = new ArrayList<String>();
    		boolean overwrite = true;
    		File configFile = new File("mbg.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("============执行逆向工程结束============");
    	}
    }

运行上面代码将自动生成逆向工程  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16]

## 七、自定义SQL查询 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 12]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 13]

### 7.1、新增查询1 ###

查询结果封装  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 14]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 15]

### 7.2、新增查询2 ###

![在这里插入图片描述][9803c2d42f2149e29b6666b4ddd53d7c.png]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 16]

## 八、使用spring单元测试 ##

![在这里插入图片描述][9361f490ea4b4fc4a1e39490af9b1bb7.png]

### 8.1、简单插入 ###

@RunWith(SpringJUnit4ClassRunner.class)//使用Springtest测试框架
    @ContextConfiguration(locations= {
        "classpath:applicationContext.xml"})
    public class MapperTest {
        
    	@Autowired
    	DepartmentMapper departmentMapper ;
    	
    	@Autowired
    	EmployeeMapper employeeMapper;
    	
    	@Test
    	public void testCRUD() {
        
    		//1、部门插入测试
    		//departmentMapper.insertSelective(new Department(null,"销售部"));
    		
    		//2、员工插入测试
    		employeeMapper.insertSelective(new Employee(null,"苗丹","M","0103123@qq.com",1));
    	}
    }

### 8.2、批量插入 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 17]

@RunWith(SpringJUnit4ClassRunner.class)//使用Springtest测试框架
    @ContextConfiguration(locations= {
        "classpath:applicationContext.xml"})
    public class MapperTest {
        
    	@Autowired
    	EmployeeMapper employeeMapper;
    	
    	@Autowired
    	SqlSession sqlSession;
    	
    	@Test
    	public void testCRUD() {
        
    		//批量插入员工数据
    		EmployeeMapper mapper = sqlSession.getMapper(EmployeeMapper.class);
    		for(int i=0;i<968;i++){
        
    			String uid= UUID.randomUUID().toString().toString().substring(0,5)+i;
    			mapper.insertSelective(new Employee(null, uid, "M", uid+"@qq.com", 1));
    		}
    		System.out.println("============批量插入员工数据完成============");
    	}
    }

## 九、PageHelper分页插件的使用 ##

### 9.1、引进PageHelper maven依赖 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_11_color_FFFFFF_t_70_g_se_x_16]

### 9.2、在mybatis-config.xml注册PageHelper分页插件 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 18]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 19]

## 十、查询功能 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 20]  
![在这里插入图片描述][485648e547fd445586caa97053e7079f.png]  
controller处理请求  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 21]

Service执行业务逻辑  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 22]  
分页查询的单元测试

//使用Spring测试模块提供的测试请求功能，测试curd请求的正确性
    @RunWith(SpringJUnit4ClassRunner.class)//使用Springtest测i试框架
    @ContextConfiguration(locations = {
        "classpath:applicationContext.xml","classpath:springmvc.xml"})
    @WebAppConfiguration
    public class MvcTest {
        
    	
    	//传入Springmvc的ioc 
    	 @Autowired
    	 WebApplicationContext context;
    	
    	//虚拟mvc请求，获取到处理结果。
    	MockMvc mockMvc ;
    	
    	@Before
    	public void initMokcMvc(){
        
    		mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
    	}
    	
    	@Test
    	public void testPage() throws Exception {
        
    		//模拟发送请求，获取第5页数据，得到返回值
            MvcResult mvcResult = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn","5"))
                    .andReturn();
     
            //请求成功以后  请求域中有pageINfo；我们可以取出来pageInfo进行验证
            MockHttpServletRequest request = mvcResult.getRequest();
            PageInfo pageInfo = (PageInfo) request.getAttribute("pageInfo");
            //进行输出
            System.out.println("当前页码："+pageInfo.getPageNum());
            System.out.println("总页码："+pageInfo.getPages());
            System.out.println("总记录数："+pageInfo.getTotal());
           
            int[] nums = pageInfo.getNavigatepageNums();
            System.out.println("在页面需要连续显示的页码：");
    		
    		for (int i:nums ) {
        
    			System. out.print(" "+i);
    		}
    		System. out.println("");
    		//也获取员工数据
    		List<Employee> list = pageInfo.getList();
    		for (Employee employee : list) {
        
    			System.out.println("ID: "+employee.getEmpId( )+"== >Name："+employee.getEmpName());
    		}
    	}
    }

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_10_color_FFFFFF_t_70_g_se_x_16]

### 10.1、前端页面设计 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 23]

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>员工列表</title>
    		<%
    			pageContext.setAttribute("APP_PATH", request.getContextPath());
    		%>
    		
    
    		
    		<link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    		
    		<script src="${APP_PATH}/static/js/jquery-3.6.0.min.js"></script>
    		
    		<script src="${APP_PATH}/static/bootstrap-3.4.1-dist/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-8">
    					<button class="btn btn-primary">新增</button>
    					<button class="btn btn-danger">删除</button>
    				</div>
    			</div>
    			
    			<div class="row">
    				<div class="col-md-12">
    					<table class="table table-hover">
    						
    						<tr>
    							<th>#</th>
    							<th>empName</th>
    							<th>gender</th>
    							<th>email</th>
    							<th>deptName</th>
    							<th>operator</th>
    						</tr>
    						
    						<c:forEach items="${pageInfo.list}" var="emp">
    							<tr>
    								<td >${emp.empId}</td>
    								<td >${emp.empName}</td >
    								<td >${emp.gender=="M"?"male":"female"}</td >
    								<td >${emp.email}</td >
    								<td >${emp.department.deptName}</td >
    								<td >
    									<button class="btn btn-primary 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>
    								</td >
    							</tr>
    						</c:forEach>
    					</table>
    				</div>
    			</div>
    			
    			<div class="row">
    				
    				<div class="col-md-6">
    					<span>当前${pageInfo.pageNum}页，总${pageInfo.pages}页，共${pageInfo.total}条记录</span>
    				</div>
    				
    				<div class="col-md-6">
    					<nav aria-label="Page navigation">
    						<ul class="pagination">
    							<li>
    								<a href="${APP_PATH}/emps?pn=1">首页</a>
    							</li>
    							
    							<c:if test="${pageInfo.hasPreviousPage }">
    								<li>
    									<a href="${APP_PATH}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous"> 
    										<span aria-hidden="true">«</span>
    									</a>
    								</li>
    							</c:if>
    							
    							<c:forEach items="${pageInfo.navigatepageNums}" var="pageNumber">
    								<c:if test="${pageNumber == pageInfo.pageNum}">
    									<li class="active">
    										<a href="#">${pageNumber}</a>
    									</li>
    								</c:if>
    								<c:if test="${pageNumber != pageInfo.pageNum}">
    									<li>
    										<a href="${APP_PATH}/emps?pn=${pageNumber}">${pageNumber}</a>
    									</li>
    								</c:if>
    							</c:forEach>
    							
    							<c:if test="${pageInfo.hasNextPage }">
    								<li>
    									<a href="${APP_PATH}/emps?pn=${pageInfo.pageNum+1}" aria-label="Next"> 
    										<span aria-hidden="true">»</span>
    									</a>
    								</li>
    							</c:if>
    							
    							<li>
    								<a href="${APP_PATH}/emps?pn=${pageInfo.pages}">末页</a>
    							</li>
    						</ul>
    					</nav>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 24]

### 10.2、返回json数据 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 25]  
![在这里插入图片描述][5283777c3b924a2083cfb35ff7acf9de.png]

准备通用的返回类

package com.atguigu.crud.bean;
    
    import java.util.HashMap;
    import java.util.Map;
    
    /**
     * 通用的返回类
     */
    public class Msg {
        
    	//状态码 100-success 200-fail
    	private int code;
    	
    	//提示信息
    	private String msg;
    	
    	//用户返回给浏览器的数据
    	private Map<String, Object> extend = new HashMap<String, Object>();
    	
    	/*================自定义方法开始=======================*/
    	public static Msg success() {
        
    		Msg msg = new Msg();
    		msg.setCode(100);
    		msg.setMsg("处理成功!");
    		return  msg;
    	}
    	
    	public static Msg fail() {
        
    		Msg msg = new Msg();
    		msg.setCode(200);
    		msg.setMsg("处理失败!");
    		return  msg;
    	}
    	
    	public Msg add(String key,Object value) {
        
    		this.getExtend().put(key, value);
    		return this;
    	}
    	/*================自定义方法结束=======================*/
    	public int getCode() {
        
    		return code;
    	}
    	public void setCode(int code) {
        
    		this.code = code;
    	}
    	public String getMsg() {
        
    		return msg;
    	}
    	public void setMsg(String msg) {
        
    		this.msg = msg;
    	}
    	public Map<String, Object> getExtend() {
        
    		return extend;
    	}
    	public void setExtend(Map<String, Object> extend) {
        
    		this.extend = extend;
    	}
    	
    }

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 26]  
![在这里插入图片描述][b1b859fb190f4d35966b0ebaef35f860.png]

### 10.3、使用ajax ###

#### 10.3.1、使用ajax发起请求 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_16_color_FFFFFF_t_70_g_se_x_16]

#### 10.3.2、jQuery遍历语法 ####

![在这里插入图片描述][9177dd9786ea489482c84c6ad7d0599e.png]

#### 10.3.3、jQuery添加样式和标签属性 ####

![在这里插入图片描述][b4414931e2b248b2b17fe8b80af35cce.png]

#### 10.3.4、jQuery将新增控件添加到页面语法 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_16_color_FFFFFF_t_70_g_se_x_16 1]

#### 10.3.5、jQuery点击事件 ####

![在这里插入图片描述][15f059d9aa0149f188bfe0b042bc85b1.png]

#### 10.3.6、jQuery清空表格数据 ####

![在这里插入图片描述][0a5696b6341e4c7382b2a5305aa81993.png]

## 十一、新增功能 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 27]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 28]

### 11.1、前端校验 ###

#### 11.1.1、jQuery获取表单的值 ####

![在这里插入图片描述][342b00cdf6204da7bc74334e8df84549.png]

#### 11.1.2、jQuery正则表达式使用 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 29]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]

### 11.2、后端数据校验 ###

前后端都要进行数据校验  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 30]

#### 11.2.1、后端优化校验JSR303和Hibernate Validator ####

使用Hibernate Validator  
![在这里插入图片描述][32c3495d4c7744ee8614dfc077f793d4.png]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 31]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 32]

## 十二、编辑功能 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_19_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 33]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 34]

### jQuery按钮点击事件 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 35]

## 十三、删除功能 ##

## 十四、jsp完整代码 ##

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>employees list</title>
    		
    		<%
    			pageContext.setAttribute("APP_PATH", request.getContextPath());
    		%>
    		
    		
    		<link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    		
    		<script src="${APP_PATH}/static/js/jquery-3.6.0.min.js"></script>
    		
    		<script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    	</head>
    	<body>
    		
    		<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">×</span>
    						</button>
    						<h4 class="modal-title">员工修改</h4>
    					</div>
    					<div class="modal-body">
    						<form class="form-horizontal">
    							<div class="form-group">
    								<label for="empName_add_input" class="col-sm-2 control-label">empName</label>
    								<div class="col-sm-10">
    									<p class="form-control-static" id="empName_update_static"></p>
    								</div>
    							</div>
    							<div class="form-group">
    								<label for="email_add_input" class="col-sm-2 control-label">email</label>
    								<div class="col-sm-10">
    									<input type="text" class="form-control" name="email" id="email_update_input" placeholder="aaa@aaa.aaa"> <span
    									 class="help-block"></span>
    								</div>
    							</div>
    							<div class="form-group">
    								<label class="col-sm-2 control-label">gender</label>
    								<div class="col-sm-10">
    									<label class="radio-inline"> <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked">
    										男
    									</label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_update_input" value="W"> 女
    									</label>
    								</div>
    							</div>
    							<div class="form-group">
    								<label class="col-sm-2 control-label">deptName</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>
    
    		
    		<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">×</span>
    						</button>
    						<h4 class="modal-title" id="myModalLabel">员工添加</h4>
    					</div>
    					<div class="modal-body">
    						<form class="form-horizontal">
    							<div class="form-group">
    								<label for="empName_add_input" class="col-sm-2 control-label">empName</label>
    								<div class="col-sm-10">
    									<input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName"> 
    									<span id="helpBlock2" class="help-block"></span>
    								</div>
    							</div>
    							<div class="form-group">
    								<label for="email_add_input" class="col-sm-2 control-label">email</label>
    								<div class="col-sm-10">
    									<input type="email" class="form-control" name="email" id="email_add_input" placeholder="aaa@qq.com"> <span
    									 class="help-block"></span> <span id="helpBlock2" 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_add_input" value="M" checked="checked">
    										男
    									</label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_add_input" value="W"> 女
    									</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>
    
    		
    		<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-8">
    					<button id="emp_add_modal_btn" class="btn btn-primary">添加</button>
    					<button id="emp_delete_all_btn" class="btn btn-danger">删除</button>
    				</div>
    			</div>
    			
    			
    			
    			<div class="row">
    				<div class="col-md-12">
    					<table class="table table-hover" id="emps-table">
    						
    						<thead>
    							<tr>
    								<th><input type="checkbox" id="check_all"></th>
    								<th>员工Id</th>
    								<th>员工姓名</th>
    								<th>性别</th>
    								<th>email</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>
    			
    		</div>
    
    		<script type="text/javascript">
    			/*===================全局变量=================*/
    			var totalRecord;//总记录数
    			var currentPage;//当前页码
    			
    			/*========页面加载完成以后，直接发送ajax请求，要到分页数据=========*/
    			$(function() {
         
    				to_page(1);//默认显示第一页
    			})
    
    			/*===================查询所有信息=================*/
    			function to_page(pageNumber) {
         
    				$.ajax({
         
    					url: "${APP_PATH}/emps/",
    					data: "pn=" + pageNumber,
    					type: "GET",
    					success: function(result) {
         
    						//console.log(result);
    						//1、解释并显示员工数据
    						bulid_emps_table(result);
    						//2、解释并显示分页文字信息
    						bulid_page_info(result);
    						//3、解释并显示分页导航信息
    						bulid_page_nav(result);
    					}
    				});
    			}
    			
    			/*=================解释并显示员工数据===============*/
    			function bulid_emps_table(result) {
         
    				//先清空表体数据
    				$("#emps-table tbody").empty();
    				var emps = result.extend.pageInfo.list;
    				$.each(emps, function(index, item) {
         
    					var checkBoxTd = $("<td></td>").append("<input type='checkbox' class='check_item'/>");
    					var empIdTd = $("<td></td>").append(item.empId);
    					var empNameTd = $("<td></td>").append(item.empName);
    					var empGenderTd = $("<td></td>").append(item.gender == "M" ? 'male' : "female");
    					var empEmailTd = $("<td></td>").append(item.email);
    					var deptNameTd = $("<td></td>").append(item.department.deptName);
    					
    					var editBtn = $("<button></button>")//添加button，并返回button对象
    						.addClass("btn btn-primary btn-sm edit_btn")//给button添加样式
    						.append($("<span></span>").addClass("glyphicon glyphicon-pencil"))//给span添加样式
    						.append("编辑");//给span添加内容
    					//为编辑按钮添加一个自定义的属性，来表示当前员工id
    					editBtn.attr("edit_id", item.empId);
    					
    					var delBtn = $("<button></button>")
    						.addClass("btn btn-danger btn-sm delete_btn")
    						.append($("<span></span>").addClass("glyphicon glyphicon-trash"))
    						.append("删除");
    					//为删除按钮添加属性表示id
    					delBtn.attr("del_id", item.empId);
    					
    					//将编辑按钮和删除按钮放在同一个单元格中
    					var btnTd = $("<td></td>")
    						.append(editBtn)
    						.append(" ")
    						.append(delBtn);
    					
    					//将单元格添加到行显示
    					$("<tr></tr>").append(checkBoxTd)
    								  .append(empIdTd)
    								  .append(empNameTd)
    								  .append(empGenderTd)
    								  .append(empEmailTd)
    								  .append(deptNameTd)
    								  .append(btnTd)
    								  .appendTo("#emps-table tbody");
    				})
    			}
    
    			/*=================解释并显示分页文字信息===============*/
    			function bulid_page_info(result) {
         
    				$("#page-info-area").empty()//先清空
    					.append("当前" + result.extend.pageInfo.pageNum + "页，总" +
    					result.extend.pageInfo.pages + "页，共" +
    					result.extend.pageInfo.total + "条记录");
    				
    				//记录当前总记录数
    				totalRecord = result.extend.pageInfo.total;
    				//记录当前页吗，更新员工信息后，需返回显示当前页
    				currentPage = result.extend.pageInfo.pageNum;
    			}
    
    			/*=================解释并显示分页导航信息===============*/
    			function bulid_page_nav(result) {
         
    				$("#page_nav_area").empty();//先清空
    				
    				var ul = $("<ul></ul>").addClass("pagination");
    				//构建元素
    				var firstPageLi = $("<li></li>")
    						.append($("<a></a>").append("首页").attr("href", "#"));
    				var prePageLi = $("<li></li>")
    						.append($("<a></a>").append("«"));
    				
    				//如果请求结果没有前一页，则首页和前一页按钮不能点击
    				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("»"));
    				var lastPageLi = $("<li></li>")
    					.append($("<a></a>").append("末页").attr("href", "#"));
    				
    				//如果请求结果没有有后一页，则末页和后一页按钮不能点击
    				if (!result.extend.pageInfo.hasNextPage) {
         
    					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);
    					});
    				}
    
    				//页码1，2，3，4
    				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);
    
    				//把ul加入到nav
    				var navEle = $("<nav></nav>").append(ul);
    				navEle.appendTo("#page_nav_area");
    			}
    
    			/*=================重置表格信息===============*/
    			function reset_form(ele) {
         
    				//清空表单内容
    				$(ele)[0].reset();
    				//清空表单样式
    				$(ele).find("*").removeClass("has-error has-success");
    				//清空校验信息
    				$(ele).find(".help-block").text("");
    			}
    
    			/*=================添加功能：点击新增按钮弹出模态框===============*/
    			$("#emp_add_modal_btn").click(function() {
         
    				//清除表单数据（表单重置）
    				reset_form("#empAddModal form");
    				//发送ajax请求，查出部门信息，显示在下拉列表中
    				getDepts("#empAddModal select");
    				//弹出模态框
    				$("#empAddModal").modal({
         
    					backdrop: "static"
    				});
    			});
    			
    			/*=============查出所有部门信息，显示在下拉列表中=============*/
    			function getDepts(selectName) {
         
    				$.ajax({
         
    					url: "${APP_PATH}/depts",
    					type: "GET",
    					success: function(result) {
         
    						$(selectName).empty();//清空
    						//使用each循环显示所有部门到下拉列表中
    						$.each(result.extend.depts, function() {
         
    							var optionEle = $("<option></option>")
    								.append(this.deptName)
    								//添加一个自定义的属性，来表示当前部门id
    								.attr("value", this.deptId);
    							optionEle.appendTo(selectName);
    						});
    					}
    				});
    			}
    			
    			/*=================校验用户名是否可用===============*/
    			$("#empName_add_input").change(
    				function() {
         
    					//发送ajax请求校验用户名是否可用
    					var empName = this.value;
    					$.ajax({
         
    						url: "${APP_PATH}/checkuser/",
    						data: "empName=" + empName,
    						type: "POST",
    						success: function(result) {
         
    							if (result.code == 100) {
         
    								show_validate_msg(
    										"#empName_add_input",
    										"success", 
    										"用户名可用"
    										);
    								$("#emp_save_btn").attr("ajax-va", "success");
    							} else {
         
    								show_validate_msg(
    										"#empName_add_input",
    										"error", 
    										result.extend.va_msg
    										);
    								$("#emp_save_btn").attr("ajax-va", "error");
    							}
    						}
    					})
    
    				});
    			
    			/*=================点击保存，保存员工===============*/
    			$("#emp_save_btn").click(
    					function() {
         
    						//1、模态框中填写的数据提交到服务器进行保存
    						//2、先对提交给服务器的数据进行校验
    						if (!validate_add_form()) {
         
    							return false;
    						}
    						//1、判断之前的ajax用户名校验是否成功
    						if ($(this).attr("ajax-va") == "error") {
         
    							return false;
    						}
    						//保存新增数据
    						$.ajax({
         
    							url: "${APP_PATH}/emp/",
    							type: "POST",
    							data: $("#empAddModal form").serialize(),
    							success: function(result) {
         
    								if (result.code == 100) {
         
    									//员工保存成功
    									//1、关闭模态框
    									$("#empAddModal").modal('hide');
    									//2、来到最后一页，显示刚才保存的数据
    									//发送ajax请求显示最后一页数据即可
    									to_page(totalRecord);
    								} else {
         
    									// 显示失败信息
    									if (undefined != result.extend.errorFields.email) {
         
    										//显示邮箱的错误信息
    										show_validate_msg(
    											"#email_add_input",
    											"error",
    											result.extend.errorFields.email);
    									}
    									if (undefined != result.extend.errorFields.empName) {
         
    										//员工的错误信息
    										show_validate_msg(
    											"#empName_add_input",
    											"error",
    											result.extend.errorFields.empName);
    									}
    								}
    							}
    						});
    					})
    					
    			/*=============先对提交给服务器的数据进行校验=============*/		
    			function validate_add_form() {
         
    				//1、校验员工姓名信息
    				var empName = $("#empName_add_input").val();//员工姓名获取输入框的输入值
    				//a-z0-9_-六到十六位，或二到五位中文
    				var regName = /(^[a-z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;//校验规则
    				//使用test()进行校验，员工姓名不符合校验规则
    				if (!regName.test(empName)) {
         
    					show_validate_msg(
    							"#empName_add_input", 
    							"error",
    							"用户名为2-5中文或4-16英文数字组合"
    							);
    					return false;
    				}
    				//2、校验邮箱信息
    				var empEmail = $("#email_add_input").val();
    				var regEmail = /^([a-zA-Z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
    				//邮箱不符合校验规则
    				if (!regEmail.test(empEmail)) {
         
    					show_validate_msg(
    							"#email_add_input", 
    							"error", 
    							"邮箱格式错误"
    							);
    					return false;
    				} else {
         
    					show_validate_msg(
    							"#email_add_input", 
    							"success", 
    							""
    							);
    				}
    				return true;
    			}
    			
    			/*===============回显校验信息===============*/
    			function show_validate_msg(ele, status, msg) {
         
    				//首先清空当前元素
    				$(ele).parent().removeClass("has-success has-error");
    				$(ele).next("span").text("");
    				if ("success" == status) {
         
    					$(ele).parent().addClass("has-success");
    				} else if ("error" == status) {
         
    					$(ele).parent().addClass("has-error");
    				}
    				$(ele).next("span").text(msg);
    			}
    
    			/*=============编辑功能：=============*/
    			//1）、我们是按钮创建之前就绑定了click，所以绑不上
    			//2）、可以在创建按钮的时候绑定事件
    			//3）、绑定点击.live()
    			//jquery新版没有live，使用on方法进行替代
    			$(document).on("click", ".edit_btn", function() {
         
    				//清除表单数据（表单重置）
    				reset_form("#empUpdateModal form");
    				
    				//1、查出部门信息，显示部门列表
    				getDepts("#empUpdateModal select");
    
    				//2、查出员工信息，显示员工信息
    				getEmp($(this).attr("edit_id"));
    				
    				//3、把员工的id传递给模态框的更新按钮
    				$("#emp_update_btn").attr("edit_id", $(this).attr("edit_id"));
    				$("#empUpdateModal").modal({
         
    					backdrop: "static"
    				});
    			})
    
    			/*=============根据id获取部门信息=============*/
    			function getEmp(id) {
         
    				$.ajax({
         
    					url: "${APP_PATH}/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=empGender]").val([empData.gender]);
    						$("#empUpdateModal select").val([empData.dId]);
    					}
    				})
    			}
    			
    			/*=============点击更新，更新员工信息=============*/
    			$("#emp_update_btn").click(function() {
         
    				//验证邮箱是否合法
    				//1、校验邮箱信息
    				var empEmail = $("#email_update_input").val();
    				var regEmail = /^([a-zA-Z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    				if (!regEmail.test(empEmail)) {
         
    					show_validate_msg(
    							"#email_update_input", 
    							"error", 
    							"邮箱格式错误"
    							);
    					return false;
    				} else {
         
    					show_validate_msg(
    							"#email_update_input", 
    							"success", 
    							""
    							);
    				}
    				//2、发送ajax请求，保存更新员工信息
    				$.ajax({
         
    					url: "${APP_PATH}/emp/" + $(this).attr("edit_id"),
    					type: "PUT",
    					data: $("#empUpdateModal form").serialize(),
    					success: function() {
         
    						$("#empUpdateModal").modal("hide");
    						to_page(currentPage);
    					}
    				});
    			});
    
    			/*=============单个删除=============*/
    			$(document).on("click", ".delete_btn", function() {
         
    				//1、弹出确认删除对话框
    				var empName = $(this).parents("tr").find("td:eq(2)").text();
    				var empId = $(this).attr("del_id");
    				if (confirm("确认删除【" + empName + "】吗？")) {
         
    					//发送ajax请求删除
    					$.ajax({
         
    						url: "${APP_PATH}/emp/" + empId,
    						type: "DELETE",
    						success: function(result) {
         
    							alert(result.msg);
    							//回到本页
    							to_page(currentPage);
    						}
    					});
    				}
    			});
    
    			/*=============完成全选/全不选功能=============*/
    			$("#check_all").click(function() {
         
    				var is_All_Check = $(this).prop("checked");
    				$(".check_item").prop("checked", is_All_Check);
    			});
    
    			/*=============check_item，复选框选择操作=============*/
    			$(document).on("click", ".check_item", function() {
         
    				//判断当前选择中的元素是否选满
    				var flag = $(".check_item:checked").length == $(".check_item").length;
    				$("#check_all").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() + ",";
    					//组织员工id字符串
    					del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "-";
    				});
    				//去除empnames多余的“,”
    				empNames = empNames.substring(0, empNames.length - 1);
    				//去除员工删除id多余的“-”
    				del_idstr = del_idstr.substring(0, del_idstr.length - 1);
    				
    				if (confirm("确认删除【" + empNames + "】吗？")) {
         
    					//发送ajax请求
    					$.ajax({
         
    						url: "${APP_PATH}/emp/" + del_idstr,
    						type: "DELETE",
    						success: function(result) {
         
    							alert(result.msg);
    							//回到当前页面
    							to_page(currentPage);
    							$("#check_all").prop("checked", false);
    						}
    					})
    
    				}
    			});
    		</script>
    	</body>
    </html>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/41f8c15aba4d4c34bc58f7564212f537.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e6883da15d7a466493d6deb65c7b83da.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/78f8a2c3155d4e668d26cd5f3db4943b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/bc597039e34b4f0e9cad20cc7d70f8ad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[31d15b77f1c44d049ccc17ea8be947b7.png]: https://img-blog.csdnimg.cn/31d15b77f1c44d049ccc17ea8be947b7.png
[5bd4b135e7b044faae104e2cbf4d58a1.png]: https://img-blog.csdnimg.cn/5bd4b135e7b044faae104e2cbf4d58a1.png
[bootstrap]: https://www.bootcss.com/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/41a33168d6e6456c8d1652d0e29cec70.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/0d2d254b86ff48d896ba29ce11807bba.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/4aa32cbf4f334aecbbf80baa984a6a93.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/82afdb9005754e8095a56d3d69ad6315.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/8809d49ea9b843728c8c36099171f286.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[448b4caa8f7648e5968b949b812e373a.png]: https://img-blog.csdnimg.cn/448b4caa8f7648e5968b949b812e373a.png
[22fc5b545ff546e6ac9aca1df4403740.png]: https://img-blog.csdnimg.cn/22fc5b545ff546e6ac9aca1df4403740.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/c38bc631b68143db82a17593ebe8e7cd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[c24dc9fa964a42c1917881e82965041b.png]: https://img-blog.csdnimg.cn/c24dc9fa964a42c1917881e82965041b.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/6746b136deaa49e587389f96a3cb4d4f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f42f156c650646ceb541c78914d4aebb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/85132f5988e047c48cb09aff885438a1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/b1a2f8ef132d42caa9c7cd169595e6e4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/702d2b3596f84c0d8036c23f1e1618a6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/9fce4ff673824be6a1e8549d70f68f40.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/7b959a7695eb4a7c9f2f9acd8204f7a0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/93b08f4b0c1642739fda6e22611a7143.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 15]: https://img-blog.csdnimg.cn/c4b93ff7f3754ced8a0811c22682b5e0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[9803c2d42f2149e29b6666b4ddd53d7c.png]: https://img-blog.csdnimg.cn/9803c2d42f2149e29b6666b4ddd53d7c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 16]: https://img-blog.csdnimg.cn/c103755466da450581578cb7e78cbde7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[9361f490ea4b4fc4a1e39490af9b1bb7.png]: https://img-blog.csdnimg.cn/9361f490ea4b4fc4a1e39490af9b1bb7.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 17]: https://img-blog.csdnimg.cn/6aebb967b18b4a2ea88e9a5de443adf2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f6d392e4fe994ff2ac7c1429420a876d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 18]: https://img-blog.csdnimg.cn/038f345d06024dd3ab1d86a226d13eba.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 19]: https://img-blog.csdnimg.cn/9415ae09f6744f85b4737408d65e7d04.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 20]: https://img-blog.csdnimg.cn/f659420045274897b1e567e059944b3a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[485648e547fd445586caa97053e7079f.png]: https://img-blog.csdnimg.cn/485648e547fd445586caa97053e7079f.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 21]: https://img-blog.csdnimg.cn/81fa8010bbb5456484bc60c34d8efec4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 22]: https://img-blog.csdnimg.cn/a1922cd7ddc34c68b8c976e5ff4ab70a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d0636835ced247cf8f3749f5cbfea1a5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 23]: https://img-blog.csdnimg.cn/ab4fc03083ce4016b05953e0be094ac1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 24]: https://img-blog.csdnimg.cn/440e26499ec44514b22e8aa51e6a48be.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 25]: https://img-blog.csdnimg.cn/ab8a8910f07b46fbb99c8c585067ebcd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[5283777c3b924a2083cfb35ff7acf9de.png]: https://img-blog.csdnimg.cn/5283777c3b924a2083cfb35ff7acf9de.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 26]: https://img-blog.csdnimg.cn/5e2b0c0a561d4e048f81e1cd969b25fb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[b1b859fb190f4d35966b0ebaef35f860.png]: https://img-blog.csdnimg.cn/b1b859fb190f4d35966b0ebaef35f860.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/59c5462d3b4a4340aeac816ecc215b2f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_16,color_FFFFFF,t_70,g_se,x_16
[9177dd9786ea489482c84c6ad7d0599e.png]: https://img-blog.csdnimg.cn/9177dd9786ea489482c84c6ad7d0599e.png
[b4414931e2b248b2b17fe8b80af35cce.png]: https://img-blog.csdnimg.cn/b4414931e2b248b2b17fe8b80af35cce.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_16_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e8d51113d18647e997991e9f11c24ed4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_16,color_FFFFFF,t_70,g_se,x_16
[15f059d9aa0149f188bfe0b042bc85b1.png]: https://img-blog.csdnimg.cn/15f059d9aa0149f188bfe0b042bc85b1.png
[0a5696b6341e4c7382b2a5305aa81993.png]: https://img-blog.csdnimg.cn/0a5696b6341e4c7382b2a5305aa81993.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 27]: https://img-blog.csdnimg.cn/81bbbdcc826b42e78a15500beb729058.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 28]: https://img-blog.csdnimg.cn/1d07f4c796a6484381a311d7e25f9881.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[342b00cdf6204da7bc74334e8df84549.png]: https://img-blog.csdnimg.cn/342b00cdf6204da7bc74334e8df84549.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 29]: https://img-blog.csdnimg.cn/0c8e226307464fe8be487bce5eb279ec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/fe49944cfe5146228f46970cf31dc37d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 30]: https://img-blog.csdnimg.cn/d1749e299fb24fe691ebc6fbffa70201.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[32c3495d4c7744ee8614dfc077f793d4.png]: https://img-blog.csdnimg.cn/32c3495d4c7744ee8614dfc077f793d4.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 31]: https://img-blog.csdnimg.cn/5b721bc51c5148a9826046be9d778893.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 32]: https://img-blog.csdnimg.cn/9b8634321bf149378757eefef3c974c9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/35c750b3f92e4387962437df013d0c68.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 33]: https://img-blog.csdnimg.cn/121d7cd04fdf42a2b702cfac68ff19fa.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 34]: https://img-blog.csdnimg.cn/f33a317bdf0e475e9a663cd46854e4d0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 35]: https://img-blog.csdnimg.cn/1fef874d471a4df98b8426e7af447589.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16