springboot+mybatis-plus+Ajax+layui+mysql实现员工注册(id自增,姓名,年龄,性别,入职时间,部门,密码)
时间: 2023-05-26 20:04:55 浏览: 126
springboot+mybatis+mysql员工管理系统
5星 · 资源好评率100%
这里提供一个比较简单的实现方式,具体细节可以根据需求进行调整。
1. 创建实体类Employee,包含id、name、age、gender、hireDate、department、password属性,使用Lombok注解简化代码。
```java
@Data
public class Employee {
@TableId(type = IdType.AUTO)
private Long id;
private String name;
private Integer age;
private String gender;
private Date hireDate;
private String department;
private String password;
}
```
2. 在Mapper接口中定义增删改查方法。这里使用Mybatis-Plus的BaseMapper来进行快速开发,不需要写SQL语句。
```java
@Mapper
public interface EmployeeMapper extends BaseMapper<Employee> {
}
```
3. 创建Controller,定义员工注册接口。使用Ajax进行异步请求,返回JSON格式数据。
```java
@RestController
@RequestMapping("/employee")
public class EmployeeController {
@Autowired
private EmployeeMapper employeeMapper;
@PostMapping("/register")
public Result register(@RequestBody Employee employee) {
if (employee == null) {
return Result.error("参数错误");
}
employeeMapper.insert(employee); // 插入员工信息
return Result.ok("注册成功");
}
}
```
4. 创建前端页面,使用Layui框架进行布局和样式设计。使用jQuery和Ajax进行异步请求和数据传输。这里只提供HTML代码和JavaScript代码的框架,具体细节可以根据需求进行调整。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工注册</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label" for="name">姓名</label>
<div class="layui-input-block">
<input type="text" id="name" name="name" lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" for="age">年龄</label>
<div class="layui-input-block">
<input type="text" id="age" name="age" lay-verify="required|number" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" for="gender">性别</label>
<div class="layui-input-block">
<input type="radio" name="gender" value="男" title="男" checked>
<input type="radio" name="gender" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" for="hireDate">入职时间</label>
<div class="layui-input-block">
<input type="date" id="hireDate" name="hireDate" lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" for="department">部门</label>
<div class="layui-input-block">
<select id="department" name="department" lay-verify="required">
<option value="">请选择部门</option>
<option value="行政部">行政部</option>
<option value="人力资源部">人力资源部</option>
<option value="研发部">研发部</option>
<option value="产品部">产品部</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" for="password">密码</label>
<div class="layui-input-block">
<input type="password" id="password" name="password" lay-verify="required" 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="register">注册</button>
</div>
</div>
</form>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script>
layui.use(['form', 'layer'], function(){
var form = layui.form;
var layer = layui.layer;
// 监听表单提交事件
form.on('submit(register)', function(data){
var url = '/employee/register'; // 请求地址
var dataType = 'json'; // 返回数据类型
var contentType = 'application/json'; // 发送数据类型
var dataString = JSON.stringify(data.field); // 数据转换为JSON字符串
var success = function(data) { // 请求成功回调函数
if (data.code == 0) { // 注册成功
layer.msg(data.msg, {icon: 1});
} else { // 注册失败
layer.msg(data.msg, {icon: 2});
}
};
var error = function() { // 请求失败回调函数
layer.msg('请求失败', {icon: 2});
};
$.ajax({
url: url,
dataType: dataType,
type: 'POST',
contentType: contentType,
data: dataString,
success: success,
error: error
});
return false; // 阻止表单提交
});
});
</script>
</body>
</html>
```
以上是基于Spring Boot、Mybatis-Plus、Ajax和Layui框架实现员工注册的简单示例,希望对你有所帮助。如有不足之处,欢迎指正和讨论。
阅读全文