开发工具： IDEA 2021 WebStorm 2021 Mysql 8.0
开发环境：JDK 8 TomCat 8.5.81 apache-maven-3.6.1
技术点：Spring + SpringMVC + Mybatis + Mysql + Html + layui + jquery

一、后端

前提条件：配置好 maven

链接：maven配置

1. 基础环境搭建

1、导入依赖

①打包方式 war

 <groupId>com.demo.ssm</groupId><artifactId>ssm</artifactId><packaging>war</packaging>

<!-- 基于Maven依赖传递性，导入spring-context依赖即可导入当前所需所有jar包 --><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-orm</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.springframework</groupId><artifactId>spring-test</artifactId><version>${spring.version}</version></dependency><!-- mvc --><dependency><groupId>org.springframework</groupId><artifactId>spring-web</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.10</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>2.0.7</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.2.12</version></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.2</version><scope>test</scope></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.31</version></dependency><dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>1.2.17</version></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.3.1</version></dependency><dependency><groupId>ch.qos.logback</groupId><artifactId>logback-classic</artifactId><version>1.2.11</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>4.0.1</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.13.4.2</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.4</version></dependency><dependency><groupId>org.thymeleaf</groupId><artifactId>thymeleaf-spring5</artifactId><version>3.0.15.RELEASE</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.24</version></dependency>

②添加web模块

网址：TomCat

③配置TomCat

TomCat Server => Local

2、解决TomCat 乱码问题：-Dfile.encoding=UTF-8

3、配置web.xml

 <!--配置springMVC的编码过滤器--><filter><filter-name>CharacterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param><init-param><param-name>forceEncoding</param-name><param-value>true</param-value></init-param></filter><filter-mapping><filter-name>CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- 配置处理请求方式PUT和DELETE的过滤器 --><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><!--自定义Spring配置文件的位置和名称--><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></context-param><!-- 配置SpringMVC的前端控制器，对浏览器发送的请求统一进行处理 --><servlet><servlet-name>DispatcherServlet</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><!-- 通过初始化参数指定SpringMVC配置文件的位置和名称 --><init-param><!-- contextConfigLocation为固定值 --><param-name>contextConfigLocation</param-name><!-- 使用classpath:表示从类路径查找配置文件，例如maven工程中的src/main/resources --><param-value>classpath:springMVC.xml</param-value></init-param><!--作为框架的核心组件，在启动过程中有大量的初始化操作要做而这些操作放在第一次请求时才执行会严重影响访问速度因此需要通过此标签将启动控制DispatcherServlet的初始化时间提前到服务器启动时--><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>DispatcherServlet</servlet-name><!--设置springMVC的核心控制器所能处理的请求的请求路径/所匹配的请求可以是/login或.html或.js或.css方式的请求路径但是/不能匹配.jsp请求路径的请求--><url-pattern>/</url-pattern></servlet-mapping><!-- 整个web容器的动向由这个监听器进行监听. 这个监听器可以监听项目的启动. 从而直接加载核心配置文件 --><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener>

4、配置SpringMVC配置文件

<!--    扫描组件--><context:component-scan base-package="com.demo.ssm.controller"/><!-- 配置Thymeleaf视图解析器 --><bean id="viewResolver"class="org.thymeleaf.spring5.view.ThymeleafViewResolver"><property name="order" value="1"/><property name="characterEncoding" value="UTF-8"/><property name="templateEngine"><bean class="org.thymeleaf.spring5.SpringTemplateEngine"><property name="templateResolver"><bean class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver"><!-- 视图前缀 --><property name="prefix" value="/WEB-INF/templates/"/><!-- 视图后缀 --><property name="suffix" value=".html"/><property name="templateMode" value="HTML5"/><property name="characterEncoding" value="UTF-8" /></bean></property></bean></property></bean><!-- 配置访问首页的视图控制 --><mvc:view-controller path="/" view-name="index"/><!-- 配置默认的servlet处理静态资源 --><mvc:default-servlet-handler /><!-- 开启MVC的注解驱动 --><mvc:annotation-driven />

5、搭建MyBatis环境

①创建属性文件jdbc.properties

#驱动名
jdbc.driver=com.mysql.cj.jdbc.Driver
#url
jdbc.url=jdbc:mysql://localhost:3306/ssm?serverTimezone=UTC&characterEncoding=UTF-8
#用户名
jdbc.username=root
#密码
jdbc.password=123456

②创建MyBatis的核心配置文件mybatis-config.xml

<configuration><!--properties?,settings?,typeAliases?,typeHandlers?,objectFactory?,objectWrapperFactory?,reflectorFactory?,plugins?,environments?,databaseIdProvider?,mappers?--><!--将下划线_映射为驼峰    --><settings><setting name="mapUnderscoreToCamelCase" value="true"/></settings><plugins><!--配置分页插件--><plugin interceptor="com.github.pagehelper.PageInterceptor"/></plugins>
</configuration>

6、创建日志文件log4j.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE log4j:configuration SYSTEM "log4j.dtd">
<log4j:configuration xmlns:log4j="http://jakarta.apache.org/log4j/"><appender name="STDOUT" class="org.apache.log4j.ConsoleAppender"><param name="Encoding" value="UTF-8"/><layout class="org.apache.log4j.PatternLayout"><param name="ConversionPattern" value="%-5p %d{MM-dd HH:mm:ss,SSS}%m (%F:%L) \n"/></layout></appender><logger name="java.sql"><level value="debug"/></logger><logger name="org.apache.ibatis"><level value="info"/></logger><root><level value="debug"/><appender-ref ref="STDOUT"/></root>
</log4j:configuration>

7、创建Spring的配置文件并配置 applicationContext.xml

    <!--扫描组件--><context:component-scan base-package="com.demo.ssm"><context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/></context:component-scan><!-- 引入jdbc.properties --><context:property-placeholder location="classpath:mysql.properties"/><!-- 配置Druid数据源 --><bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"><property name="driverClassName" value="${jdbc.driver}"/><property name="url" value="${jdbc.url}"/><property name="username" value="${jdbc.username}"/><property name="password" value="${jdbc.password}"/></bean><!-- 配置用于创建SqlSessionFactory的工厂bean  ==> mybatis核心配置文件的读取 --><bean class="org.mybatis.spring.SqlSessionFactoryBean"><!-- 设置MyBatis配置文件的路径（可以不设置） --><property name="configLocation" value="classpath:mybatis-config.xml"></property><property name="mapperLocations" value="classpath:com/demo/ssm/mapper/*.xml"/><!-- 设置数据源 --><property name="dataSource" ref="dataSource"/><!-- 设置类型别名所对应的包 --><property name="typeAliasesPackage" value="com.demo.ssm.pojo"></property></bean><!-- 开启基于注解的Aop--><aop:aspectj-autoproxy/><bean id="transactionManager"class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><property name="dataSource" ref="dataSource"/></bean><!--开启事务的注解驱动通过注解@Transactional所标识的方法或标识的类中所有的方法，都会被事务管理器管理事务--><!-- transaction-manager属性的默认值是transactionManager，如果事务管理器bean的id正好就是这个默认值，则可以省略这个属性 --><tx:annotation-driven transaction-manager="transactionManager" /><!--配置mapper接口的扫描配置由mybatis-spring提供，可以将指定包下所有的mapper接口创建动态代理并将这些动态代理作为IOC容器的bean管理--><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><property name="basePackage" value="com.demo.ssm.mapper"/></bean>

8、数据库字段

CREATE TABLE `user`  (`user_id` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户id',`user_section` varchar(25) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '部门 市场部...',`card_no` varchar(25) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '身份证好',`user_name` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '姓名',`user_sex` int NULL DEFAULT NULL COMMENT '性别',`user_age` varchar(25) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '年龄',`user_role` varchar(25) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '角色 产品经理...',PRIMARY KEY (`user_id`) USING BTREE,INDEX `user_section`(`user_section` ASC) USING BTREE,CONSTRAINT `section` FOREIGN KEY (`user_section`) REFERENCES `user_section` (`user_section`) ON DELETE RESTRICT ON UPDATE CASCADE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;INSERT INTO `user` VALUES ('556715', '研发部', '3432423', '高启胜', 1, '33', '技术研发');
INSERT INTO `user` VALUES ('556764', '后勤', '13123123123', '曹孟德', 1, '44', '卫生清洁');
INSERT INTO `user` VALUES ('556768', '财务', '2019212', '高启强', 1, '33', '老板');
INSERT INTO `user` VALUES ('556775', '市场部', '12312521', '胡佳玉', 0, '24', '产品维护');
INSERT INTO `user` VALUES ('556787', '财务', '1631263712', '老6', 1, '66', '会计');
INSERT INTO `user` VALUES ('556790', '研发部', '1312312', '花花', 1, '34', '技术研发');SET FOREIGN_KEY_CHECKS = 1;

CREATE TABLE `user_section`  (`user_section` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '部门',INDEX `section`(`user_section` ASC) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;INSERT INTO `user_section` VALUES ('后勤');
INSERT INTO `user_section` VALUES ('售后服务');
INSERT INTO `user_section` VALUES ('市场部');
INSERT INTO `user_section` VALUES ('研发部');
INSERT INTO `user_section` VALUES ('财务');
INSERT INTO `user_section` VALUES ('销售');SET FOREIGN_KEY_CHECKS = 1;

2、后端代码

1. 目录结构

注意：resources 下的目录创建方式不是 . 是com/demo/ssm/mapper

2.1、代码

2.1、pojo 实体类

@Data
public class User {private String userId;//用户idprivate String userSection;//部门private String cardNo;//身份证号private String userName;//用户姓名private String userSex;//用户性别private String userAge;//用户年龄private String userRole;//用户角色}@Data
public class UserSection {private String userSection;}

2.2、Controller层

@Controller
@RequestMapping(path = "/user")
@CrossOrigin  // 解决跨域问题
public class UserController {@Autowiredprivate UserService userService;@RequestMapping("/queryUserPage")@ResponseBodypublic Result getStudents(String page, String limit, String userName) {Result result = new Result();Map<String, Object> params = new HashMap<>();params.put("pageNum", page);params.put("pageSize", limit);params.put("userName", userName);result = userService.getUserList(params);return  result;}@RequestMapping("/createUser")@ResponseBodypublic Result createUser(User user) {Random random = new Random();Integer number = random.nextInt(100);user.setUserId( 5567 + String.valueOf(number));return userService.createUser(user);}@RequestMapping(value = "/deleteUserByIdList",method = RequestMethod.POST)@ResponseBodypublic Result deleteUserByIdList(String userId) {List userIds = new ArrayList();for (String userIdStr : userId.split(",")) {userIds.add(userIdStr.trim());}return userService.deleteUserByIdList(userIds);}@RequestMapping("/updateUserById")@ResponseBodypublic Result updateUserById(User user) {return userService.updateUserById(user);}@RequestMapping("/selectSection")@ResponseBodypublic Result selectSection(){return userService.selectSection();}
}

2.2、service层

public interface UserService {/*** 分页查询 User*/Result getUserList(Map<String, Object> params);/*** 下拉框 部门 userSection* @return userSection*/Result selectSection();/*** 添加 User* @param user* @return 返回码*/Result createUser(User user);/*** 根据 userId 批量删除用户* @param userIds* @return*/Result deleteUserByIdList(@Param("list") List userIds);/*** 根据 userId 更新用户* @return 返回码*/Result updateUserById(User user);}

2.3、vo层 状态码

@Data
public class Result {private Integer status;private String msg;private long count;private Object data;
}

2.4、serviceImpl层

@Service
public class UserServiceImpl implements UserService {@Autowiredprivate UserMapper userMapper;@Transactional(readOnly = true)@Overridepublic Result getUserList(Map<String, Object> params) {Result result = new Result();PageHelper.startPage(params);List<User> students = userMapper.getUserList(params);PageInfo info = new PageInfo(students);result.setStatus(0);//数据表格状态码成功 0（特殊）result.setMsg("查询成功");result.setCount(info.getTotal());result.setData(info.getList());return result;}@Transactional@Overridepublic Result selectSection() {Result result = new Result();List<UserSection>sections = userMapper.selectSection();result.setData(sections);result.setStatus(1);result.setMsg("成功获取 部门信息");return result;}@Transactional@Overridepublic Result createUser(User user) {Result result = new Result();int i = userMapper.createUser(user);if (1==i){result.setStatus(1);result.setMsg("添加成功");}return result;}@Transactional@Overridepublic Result deleteUserByIdList(List userIds) {Result result = new Result();int i = userMapper.deleteUserByIdList(userIds);result.setData(i);result.setStatus(1);result.setMsg("删除成功");return result;}@Transactional@Overridepublic Result updateUserById(User user) {Result result = new Result();int i= userMapper.updateUserById(user);result.setStatus(1);result.setMsg("更新成功");result.setData(i);return result;}
}

2.5、mapper层

@Mapper
public interface UserMapper {/*** 分页查询 User* @return List<User>*/List<User> getUserList(Map<String, Object> params);/*** 添加 User* @param user* @return 返回码*/Integer createUser(User user);/*** 根据 userId 批量删除用户* @param userIds* @return*/Integer deleteUserByIdList(@Param("list") List userIds);/*** 根据 userId 更新用户* @return 返回码*/Integer updateUserById(User user);/*** 下拉框 userSection* @return*/List<UserSection> selectSection();
}

2.6、mapper映射文件

<!-- namespace :接口全定向名-->
<mapper namespace="com.demo.ssm.mapper.UserMapper"><resultMap id="BaseResultMap" type="com.demo.ssm.pojo.User" ><id property="userId" column="user_id" jdbcType="VARCHAR" /><!--用户id--><result property="userSection" column="user_section" jdbcType="VARCHAR" /><!--部门--><result property="cardNo" column="card_no" jdbcType="VARCHAR" /><!--证件号码--><result property="userName" column="user_name" jdbcType="VARCHAR" /><!--用户姓名--><result property="userSex" column="user_sex" jdbcType="VARCHAR" /><!--用户性别--><result property="userAge" column="user_age" jdbcType="VARCHAR" /><!--用户年龄--><result property="userRole" column="user_role" jdbcType="VARCHAR" /><!--用户角色--></resultMap><sql id="Base_Column_List" >user_id, user_section, card_no, user_name, user_sex, user_age, user_role</sql><select id="selectSection" resultMap="BaseResultMap" resultType="userSection">select user_section from user_section</select><!--分页查询用户--><select id="getUserList" resultMap="BaseResultMap" parameterType="java.lang.Integer">select<include refid="Base_Column_List" />from user<where><if test="userName !=null and userName != ''">user_name like '%${userName}%'</if></where></select><!--添加用户信息--><insert id="createUser" parameterType="com.demo.ssm.pojo.User" >insert into User(<include refid="Base_Column_List" />)values(#{userId}, #{userSection}, #{cardNo}, #{userName}, #{userSex}, #{userAge}, #{userRole})</insert><!--根据 user_id 批量删除用户--><delete id="deleteUserByIdList" parameterType="java.util.List">delete from user where user_id in <foreach collection="list" item="item" index="index" open="(" close=")" separator=",">#{item,jdbcType=VARCHAR}</foreach></delete><!--根据 user_id 更新用户信息--><update id="updateUserById" parameterType="com.demo.ssm.pojo.User" >update user<set ><if test="cardNo != null" >card_no = #{cardNo,jdbcType=VARCHAR},</if><if test="userSection != null" >user_section = #{userSection,jdbcType=VARCHAR},</if><if test="userName != null" >user_name = #{userName,jdbcType=VARCHAR},</if><if test="userSex != null" >user_sex = #{userSex,jdbcType=VARCHAR},</if><if test="userAge != null" >user_age = #{userAge,jdbcType=VARCHAR},</if><if test="userRole != null" >user_role = #{userRole,jdbcType=VARCHAR}</if></set>where 1 = 1and user_id = #{userId,jdbcType=VARCHAR}</update>
</mapper>

二、前端

3.1、资源：laui jquery-3.6.0.min.js

1. 网址：layui

2. 网址：jquery

jquery下载，复制下来自己保存为一个jquery-3.6.0.min.js的文件

3.2、创建页面

1、index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>user_list</title><link rel="stylesheet" href="./static/layui/css/layui.css"><script src="./static/jqury-3.6.0.min.js"></script>
<script src="./static/layui/layui.js"></script>
</head>
<body><div id="box">
<!--原始容器-->
<script type="text/html" id="top"><div class="layui-inline"><input class="layui-input" name="userName" id="userName" autocomplete="off" placeholder="请输入姓名"></div><button class="layui-btn layui-btn-sm" lay-event="search">查寻</button><button class="layui-btn layui-btn-sm" lay-event="add">增加</button><button class="layui-btn layui-btn-sm" lay-event="batch_delete">删除</button>
</script><script type="text/html" id="sexTpl">{{#  if(d.userSex === '1'){ }}<span style="color: #ffb800;"><i class="fa fa-male" aria-hidden="true" style="color: #0c0c0c"></i>&nbsp;&nbsp;{{ '男' }}</span>{{#  } else if(d.userSex === '0'){ }}<span style="color: #F581B1;"><i class="fa fa-female" aria-hidden="true" style="color: #0c0c0c"></i>&nbsp;&nbsp;{{ '女' }}</span>{{#  }  }}</script><script type="text/html" id="toolbarDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script><table  id="user" lay-filter="test"></table>
</div>
<script>var userIdList= '';layui.use(['table', 'layer'], function () {var table = layui.table,layer = layui.layer,$ = layui.$;// 创建渲染实例table.render({elem: '#user', url: 'http://localhost:8089/user/queryUserPage'   //数据接口, page: true   //开启分页,toolbar: '#top'//开启头部工具栏 id,defaultToolbar: ['filter', 'exports', 'print'], cols: [[   //表头{field: 'userId', title: 'ID', type: 'checkbox', align: 'center'}, {field: 'userSection', title: '部门', align: 'center'}, {field: 'cardNo', title: '身份证号', align: 'center'}, {field: 'userName', title: '姓名', align: 'center'}, {field: 'userSex', title: '性别', templet: '#sexTpl',width:70,align:'center'}, {field: 'userAge', title: '年龄', align: 'center'}, {field: 'userRole', title: '角色', align: 'center'}, {title: '操作', toolbar: '#toolbarDemo', align: 'center'}]],parseData: function(res){ //res 即为原始返回的数据console.log(res);return {"code": res.status, //解析接口状态"msg": res.msg, //解析提示文本"count": res.count, //解析数据长度"data": res.data //解析数据列表};}});//头部工具栏table.on('toolbar(test)', function (obj) {switch (obj.event) {case 'search'://先获得input框的值var userName = $('#userName').val();//重载表格table.reload('user', {where: {'userName': userName,}, page: {curr: 1//重新从第 1 页开始}});break;case 'add':layer.open({type: 2,title: '添加用户信息',content: 'addPage.html',area: ['500px', '400px']});break;case 'batch_delete'://先获取到选中的行var rowData = table.checkStatus('user').data;//'idTest' 即为基础参数 id 对应的值console.log(rowData) //获取选中行的数据 可作为是否有选中行的条件if (rowData.length == 0) {layer.msg("未选择数据");return;}layer.open({content: '确认删除',btn: '确认',yes: function (index, layero) {if(rowData.length > 0){for(var  i in  rowData){userIdList += rowData[i].userId + ","}userIdList = userIdList.substring(0,userIdList.lastIndexOf(','))console.log(userIdList)}$.ajax({url:'http://localhost:8089/user/deleteUserByIdList',type:'POST',data: {'userId':userIdList},dataType: 'json',success: function (msg) {if (msg.status == 1) {layer.msg(msg.msg, {icon: 6, time: 900})table.reload('user')} else {layer.msg(msg.msg, {icon: 5, time: 900})}}})}});break;}});//单元格事件table.on('tool(test)', function (obj) {//当前行的数据var data = obj.data;var layEvent = obj.event;if (layEvent === 'edit') {//拿到父页面该行的数据，将数据填充进子页面layer.open({title: '修改用户信息',type: 2,content: 'updatePage.html',area: ['500px', '400px'],success: function (layero, index) {var iframeWin = window[layero.find('iframe')[0]['name']];//将父窗口拿到的值，填充进子窗口iframeWin.layui.form.val('updateForm', {'userId': data.userId,'userSection':data.userSection,'cardNo':data.cardNo,'userName':data.userName,'userSex':data.userSex,'userAge':data.userAge,'userRole':data.userRole   });iframeWin.layui.form.render();}})return false;} else if (layEvent === 'del') {//拿到当前行的iduserIdList = data.userId;$.ajax({url: 'http://localhost:8089/user/deleteUserByIdList',type: 'POST',data: {'userId':userIdList},dataType: 'json',success: function (msg) {if (msg.status == 1) {layer.msg(msg.msg, {icon: 6, time: 900})table.reload('user')} else {layer.msg(msg.msg, {icon: 5, time: 900})}}})}});});
</script>
</body>
</html>

2、addPage.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css"><script src="./static/layui/layui.js"></script><script src="./static/jqury-3.6.0.min.js"></script>
</head>
<body>
<form class="layui-form"><div class="layui-form-item" style="width: 310px"><label class="layui-form-label">部门</label><div class="layui-input-block"><select name="userSection" id="section" lay-verify="required"></select></div></div><div class="layui-form-item"><label class="layui-form-label">证件号码</label><div class="layui-input-block"><!--校验身份证号:   required lay-verify="required|identity"--><input type="text" style="width: 200px" name="cardNo" required lay-verify="required"placeholder="请输入身份证号"autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">姓名</label><div class="layui-input-block"><input type="text" style="width: 200px" name="userName" required lay-verify="required"placeholder="请输入姓名"autocomplete="off"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="userSex" value="1" title="男"><input type="radio" name="userSex" value="0" title="女" checked></div></div><div class="layui-form-item"><label class="layui-form-label">年龄</label><div class="layui-input-block"><input type="text" style="width: 200px" name="userAge" required lay-verify="required"placeholder="请输入年龄"autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">角色</label><div class="layui-input-block"><input type="text" style="width: 200px" name="userRole" required lay-verify="required"placeholder="请输入角色"autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="add">添加</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div>
</form>
<script>var sections = ''layui.use(['form', 'layer'], function () {var form = layui.form,layer = layui.layer,$ = layui.$;//拿到下拉框数据,从user_section表中，拿到 userSection$.ajax({url: 'http://localhost:8089/user/selectSection',type: 'POST',dataType: 'json',success: function (data) {// console.log(data.data)var option = '<option>部门</option>';var select = $('#section');sections = data.data;console.log(sections)for (var section of sections) {// console.log(section.userSection)option += '<option value="' + section.userSection + '">' + section.userSection + '</option>'}select.html(option);form.render('select')}});//监听表单并提交form.on('submit(add)', function (data) {$.ajax({url: 'http://localhost:8089/user/createUser',type: 'GET',data: data.field,dataType: 'json',success: function (data) {if (data.status == 1) {layer.msg(data.msg, {icon: 1,time:2000,},function () {//子页面拿到父页面的当前iframe层的索引，并关闭var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引//子页面重载父页面parent.layui.table.reload('user');parent.layer.close(index); //再执行关闭});} else {layer.msg(data.msg, {icon: 5})}}})return false;});});
</script>
</body>
</html>

3、updatePage.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>更新</title><link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css"><script src="./static/layui/layui.js"></script><script src="./static/jqury-3.6.0.min.js"></script></head>
<body>
<form class="layui-form" lay-filter="updateForm"><input type="hidden" name="userId"><div class="layui-form-item" style="width: 310px"><label class="layui-form-label">部门</label><div class="layui-input-block"><select name="userSection" id="section" lay-verify="required"></select></div></div><div class="layui-form-item"><label class="layui-form-label">身份证号</label><div class="layui-input-block"><input type="text" style="width: 200px" name="cardNo" required lay-verify="required"placeholder="请输入证件号码"autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">姓名</label><div class="layui-input-block"><input type="text" style="width: 200px" name="userName" required lay-verify="required"placeholder="请输入姓名"autocomplete="off"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="userSex" value="1" title="男"><input type="radio" name="userSex" value="0" title="女" checked></div></div><div class="layui-form-item"><label class="layui-form-label">年龄</label><div class="layui-input-block"><input type="text" style="width: 200px" name="userAge" required lay-verify="required"placeholder="请输入年龄"autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">角色</label><div class="layui-input-block"><input type="text" style="width: 200px" name="userRole" required lay-verify="required"placeholder="请输入职业"autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="update">修改</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div>
</form>
<script>layui.use(['form', 'layer'], function () {var form = layui.form,layer = layui.layer,$ = layui.$;//拿到下拉框数据,从user_section表中，拿到 userSection$.ajax({url: 'http://localhost:8089/user/selectSection',type: 'POST',dataType: 'json',success: function (data) {console.log(data.data)var option = '<option>部门</option>';var select = $('#section');sections = data.data;// console.log(sections)for (var section of sections) {// console.log(section.userSection)option += '<option value="' + section.userSection + '">' + section.userSection + '</option>'}select.html(option);form.render('select')}});form.on('submit(update)', function (data) {$.ajax({url: 'http://localhost:8089/user/updateUserById',type:'GET',data: data.field,dataType: 'json',success: function (msg) {if (msg.status == 1) {layer.msg(data.msg, {icon: 1,time:2000,},function () {//子页面拿到父页面的当前iframe层的索引，并关闭var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index); //再执行关闭//子页面重载父页面parent.layui.table.reload('user');});} else {layer.msg(data.msg, {icon: 5})}}})return false;});});
</script>
</body>
</html>