mybatis-plus+springboot+layui+ajax+mysql实现员工注册(id自增,姓名,密码,年龄,性别,入职时间,部门)
时间: 2023-05-30 21:03:28 浏览: 280
创建springboot + mybatis项目,实现登录、注册功能详细过程
1. 创建员工实体类Employee,包含属性id(自增长)、name、password、age、gender、hireDate、department。
```java
public class Employee {
@TableId(type = IdType.AUTO)
private Long id;
private String name;
private String password;
private Integer age;
private String gender;
private Date hireDate;
private String department;
//省略getter和setter方法
}
```
2. 创建员工Mapper接口EmployeeMapper,继承BaseMapper<Employee>。
```java
public interface EmployeeMapper extends BaseMapper<Employee> {
}
```
3. 创建员工Service接口EmployeeService,定义员工相关的服务方法。
```java
public interface EmployeeService {
boolean save(Employee employee);
boolean updateById(Employee employee);
boolean removeById(Long id);
Employee getById(Long id);
List<Employee> list();
}
```
4. 创建员工Service实现类EmployeeServiceImpl,注入EmployeeMapper并实现定义的服务方法。
```java
@Service
public class EmployeeServiceImpl implements EmployeeService {
@Autowired
private EmployeeMapper employeeMapper;
@Override
public boolean save(Employee employee) {
return employeeMapper.insert(employee) > 0;
}
@Override
public boolean updateById(Employee employee) {
return employeeMapper.updateById(employee) > 0;
}
@Override
public boolean removeById(Long id) {
return employeeMapper.deleteById(id) > 0;
}
@Override
public Employee getById(Long id) {
return employeeMapper.selectById(id);
}
@Override
public List<Employee> list() {
return employeeMapper.selectList(null);
}
}
```
5. 创建员工Controller类EmployeeController,注入EmployeeService并编写员工相关的RESTful API。
```java
@RestController
@RequestMapping("/employee")
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
@PostMapping("/save")
public Result save(Employee employee) {
boolean result = employeeService.save(employee);
return result ? Result.success() : Result.error();
}
@PostMapping("/update")
public Result update(Employee employee) {
boolean result = employeeService.updateById(employee);
return result ? Result.success() : Result.error();
}
@GetMapping("/remove")
public Result remove(Long id) {
boolean result = employeeService.removeById(id);
return result ? Result.success() : Result.error();
}
@GetMapping("/get")
public Result get(Long id) {
Employee employee = employeeService.getById(id);
return Result.success().data(employee);
}
@GetMapping("/list")
public Result list() {
List<Employee> employees = employeeService.list();
return Result.success().data(employees);
}
}
```
6. 创建前端页面,使用LayUI框架和Ajax技术实现员工注册页面。其中,使用layui.form.on监听表单提交事件,通过Ajax方式提交表单数据。
```html
<!DOCTYPE html>
<html>
<head>
<title>员工注册</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md6">
<form class="layui-form" action="#" method="post">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="请输入姓名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-block">
<input type="text" name="age" placeholder="请输入年龄" 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="gender" value="男" title="男" checked>
<input type="radio" name="gender" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入职时间</label>
<div class="layui-input-block">
<input type="text" name="hireDate" placeholder="请输入入职时间" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门</label>
<div class="layui-input-block">
<input type="text" name="department" placeholder="请输入部门" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
layui.use(['form'], function () {
var form = layui.form;
//监听表单提交事件
form.on('submit(submit)', function (data) {
$.ajax({
type: 'POST',
url: '/employee/save',
data: data.field,
success: function (res) {
if (res.code == 0) {
layer.msg('注册成功');
} else {
layer.msg('注册失败');
}
},
error: function () {
layer.msg('系统异常,请稍后再试');
}
});
return false;
});
});
</script>
</body>
</html>
```
7. 启动Spring Boot应用,访问员工注册页面,填写员工信息并提交表单,即可完成员工注册。
阅读全文