开发工具： 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、导入依赖
①打包方式 war
<groupId>com.demo.ssm</groupId>
<artifactId>ssm</artifactId>
<packaging>war</packaging>
<properties>
<spring.version>5.3.23</spring.version>
</properties>
<!-- 基于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 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、后端代码
目录结构
注意：resources 下的目录创建方式不是 . 是com/demo/ssm/mapper
2.1、代码
2.1、pojo 实体类
@Data
public class User {
private String userId;//用户id
private 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 {
@Autowired
private UserService userService;
@RequestMapping("/queryUserPage")
@ResponseBody
public 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")
@ResponseBody
public 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)
@ResponseBody
public Result deleteUserByIdList(String userId) {
List userIds = new ArrayList();
for (String userIdStr : userId.split(",")) {
userIds.add(userIdStr.trim());
}
return userService.deleteUserByIdList(userIds);
}
@RequestMapping("/updateUserById")
@ResponseBody
public Result updateUserById(User user) {
return userService.updateUserById(user);
}
@RequestMapping("/selectSection")
@ResponseBody
public 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 {
@Autowired
private UserMapper userMapper;
@Transactional(readOnly = true)
@Override
public 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
@Override
public Result selectSection() {
Result result = new Result();
List<UserSection>sections = userMapper.selectSection();
result.setData(sections);
result.setStatus(1);
result.setMsg("成功获取 部门信息");
return result;
}
@Transactional
@Override
public Result createUser(User user) {
Result result = new Result();
int i = userMapper.createUser(user);
if (1==i){
result.setStatus(1);
result.setMsg("添加成功");
}
return result;
}
@Transactional
@Override
public Result deleteUserByIdList(List userIds) {
Result result = new Result();
int i = userMapper.deleteUserByIdList(userIds);
result.setData(i);
result.setStatus(1);
result.setMsg("删除成功");
return result;
}
@Transactional
@Override
public 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 = 1
and user_id = #{userId,jdbcType=VARCHAR}
</update>
</mapper>
二、前端
3.1、资源：laui jquery-3.6.0.min.js
网址：layui
网址：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> {{ '男' }}</span>
{{# } else if(d.userSex === '0'){ }}
<span style="color: #F581B1;"><i class="fa fa-female" aria-hidden="true" style="color: #0c0c0c"></i> {{ '女' }}</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') {
//拿到当前行的id
userIdList = 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>
