springboot+mybatis-plus+Ajax+layui+mysql实现员工管理与日志管理
时间: 2023-05-26 14:04:47 浏览: 260
SpringBoot+MyBatis-Plus+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:
```java
public interface EmployeeMapper extends BaseMapper<Employee> {
List<Employee> getEmployeeList();
Integer deleteEmployee(Integer id);
}
```
LogMapper.java:
```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:
```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:
```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:
```java
public interface EmployeeService extends IService<Employee> {
List<Employee> getEmployeeList();
Integer deleteEmployee(Integer id);
}
```
EmployeeServiceImpl.java:
```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:
```java
public interface LogService extends IService<Log> {
List<Log> getLogList();
}
```
LogServiceImpl.java:
```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:
```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:
```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:
```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:
```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表,运行程序即可在浏览器中访问相关页面实现员工和日志的管理。
阅读全文