springboot+mybatis-plus+Ajax+layui+mysql实现员工管理与日志管理

1. 环境搭建

首先下载安装好MySQL和IDEA，创建一个SpringBoot项目，在pom.xml文件中引入相关依赖：

<dependencies>
    <!-- Spring Boot -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Mybatis-Plus -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.4.1</version>
    </dependency>
    <!-- MySQL 驱动 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
    <!-- layui -->
    <dependency>
        <groupId>com.layui</groupId>
        <artifactId>layui</artifactId>
        <version>2.5.7</version>
    </dependency>
</dependencies>

同时，在application.properties文件中配置数据库相关信息：

# MySQL
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/employee_management?serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true
spring.datasource.username=root
spring.datasource.password=123456

# Mybatis-Plus
mybatis-plus.config.location=classpath:mybatis/mybatis-plus-config.xml

2. 创建Mybatis-Plus映射文件

在resources目录下创建mybatis文件夹并添加mybatis-plus-config.xml文件，在其中添加@EnableTransactionManagement注解，开启事务管理。

在mybatis文件夹下创建mapper文件夹，并创建EmployeeMapper.java和LogMapper.java文件，定义员工和日志的SQL操作：

EmployeeMapper.java：

public interface EmployeeMapper extends BaseMapper<Employee> {
    List<Employee> getEmployeeList();

    Integer deleteEmployee(Integer id);
}

LogMapper.java：

public interface LogMapper extends BaseMapper<Log> {
    List<Log> getLogList();
}

3. 创建Java代码

在src/main/java下创建entity、service和controller包，并分别创建Employee、Log、EmployeeService、LogService、EmployeeController和LogController。

Employee.java：

@Data
public class Employee {
    @TableId(type = IdType.AUTO)
    private Integer id;

    private String name;

    private Integer age;

    private String gender;

    private String address;

    private String phone;

    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private Date createTime;
}

Log.java：

@Data
public class Log {
    @TableId(type = IdType.AUTO)
    private Integer id;

    private Integer userId;

    private String operation;

    private String method;

    private String params;

    private String ip;

    private Date createTime;
}

EmployeeService.java：

public interface EmployeeService extends IService<Employee> {
    List<Employee> getEmployeeList();

    Integer deleteEmployee(Integer id);
}

EmployeeServiceImpl.java：

@Service
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee> implements EmployeeService {
    @Autowired
    private EmployeeMapper employeeMapper;

    @Override
    public List<Employee> getEmployeeList() {
        return employeeMapper.getEmployeeList();
    }

    @Override
    public Integer deleteEmployee(Integer id) {
        return employeeMapper.deleteEmployee(id);
    }
}

LogService.java：

public interface LogService extends IService<Log> {
    List<Log> getLogList();
}

LogServiceImpl.java：

@Service
public class LogServiceImpl extends ServiceImpl<LogMapper, Log> implements LogService {
    @Autowired
    private LogMapper logMapper;

    @Override
    public List<Log> getLogList() {
        return logMapper.getLogList();
    }
}

EmployeeController.java：

@RestController
@RequestMapping("/employee")
public class EmployeeController {
    @Autowired
    private EmployeeService employeeService;

    @GetMapping("/list")
    public List<Employee> getEmployeeList() {
        return employeeService.getEmployeeList();
    }

    @DeleteMapping("/delete")
    public Integer deleteEmployee(Integer id) {
        return employeeService.deleteEmployee(id);
    }
}

LogController.java：

@RestController
@RequestMapping("/log")
public class LogController {
    @Autowired
    private LogService logService;

    @GetMapping("/list")
    public List<Log> getLogList() {
        return logService.getLogList();
    }
}

4. 创建HTML页面

在src/main/resources/static下创建employee和log文件夹，并分别创建index.html和log.html文件：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<body>
<table class="layui-table">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>地址</th>
        <th>电话</th>
        <th>创建时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="employee_list"></tbody>
</table>
<script>
    $(document).ready(function () {
        layui.use(['layer', 'table'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var table = layui.table;

            // 初始化表格
            table.render({
                elem: '#employee_list'
                ,url: '/employee/list'
                ,cols: [[
                    {field: 'id', title: 'ID', sort: true}
                    ,{field: 'name', title: '姓名'}
                    ,{field: 'age', title: '年龄'}
                    ,{field: 'gender', title: '性别'}
                    ,{field: 'address', title: '地址'}
                    ,{field: 'phone', title: '电话'}
                    ,{field: 'createTime', title: '创建时间', sort: true}
                    ,{fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]]
                ,page: true
            });

            // 监听工具条
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('确认删除', function(index){
                        $.ajax({
                            type: 'DELETE',
                            url: '/employee/delete',
                            data: {id: data.id},
                            success: function () {
                                obj.del();
                                layer.close(index);
                            }
                        });
                    });
                }
            });
        });
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>

log.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<body>
<table class="layui-table">
    <thead>
    <tr>
        <th>ID</th>
        <th>用户ID</th>
        <th>操作</th>
        <th>方法</th>
        <th>参数</th>
        <th>IP地址</th>
        <th>时间</th>
    </tr>
    </thead>
    <tbody id="log_list"></tbody>
</table>
<script>
    $(document).ready(function () {
        layui.use(['layer', 'table'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var table = layui.table;

            // 初始化表格
            table.render({
                elem: '#log_list'
                ,url: '/log/list'
                ,cols: [[
                    {field: 'id', title: 'ID', sort: true}
                    ,{field: 'userId', title: '用户ID', sort: true}
                    ,{field: 'operation', title: '操作'}
                    ,{field: 'method', title: '方法'}
                    ,{field: 'params', title: '参数'}
                    ,{field: 'ip', title: 'IP地址'}
                    ,{field: 'createTime', title: '时间', sort: true}
                ]]
                ,page: true
            });
        });
    });
</script>
</body>
</html>

5. 运行程序

在MySQL中创建employee_management数据库，并在其中创建employee和log表，运行程序即可在浏览器中访问相关页面实现员工和日志的管理。