本篇文章将介绍如何使用springboot、mybatis
-plus、Ajax、layui以及mysql实现员工注册的基本功能，包括自
增id、姓名、年龄、性别、部门、入职时间以及密码。具体步骤如下：
1
.创建mysql数据库并创建员工表
首先，在mysql中创建一个名为employee的数据库，并在其中创建一个名为emp的员工表，包括以下字段：
id：员工
id，自
增字段
name：员工姓名
age：员工年龄
gender：员工性别
dept：员工所在部门
hiredate：员工入职时间
password：员工登录密码
2
.在pom
.xml文件中添加所需依赖
在pom
.xml文件中加入spring
-boot
-starter
-web、mybatis
-plus
-boot
-starter、mysql
-connector
-java、spring
-boot
-starter
-tomcat、lombok、fast
json、junit等必要的依赖（版本根据自己的项目需求选择）。
3
.创建Emp实体类
在实体类中定义员工的
id、姓名、年龄、性别、部门、入职时间以及密码，其中
id使用自
增注解实现。
import com
.baom
idou
.mybatisplus
.annotation
.IdType;
import com
.baom
idou
.mybatisplus
.annotation
.Table
Id;
import lombok
.Data;
@Data
public class Emp {
@Table
Id(value = "
id", type =
IdType
.AUTO)
private Long
id;
private String name;
private Integer age;
private Integer gender;
private String dept;
private String hiredate;
private String password;
}
4
.创建EmpDao接口
使用mybatis
-plus的BaseMapper接口进行DAO操作，继承BaseMapper<Emp>即可。
import com
.baom
idou
.mybatisplus
.core
.mapper
.BaseMapper;
import org
.springframework
.stereotype
.Repository;
@Repository
public interface EmpDao extends BaseMapper<Emp> {
}
5
.创建EmpServcie接口及其实现类EmpServiceImpl
在EmpServcie接口中定义员工注册所需的方法addEmp(Emp emp)，具体实现在EmpServiceImpl中。
import com
.baom
idou
.mybatisplus
.extension
.service
.IService;
public interface EmpServcie extends IService<Emp> {
boolean addEmp(Emp emp);
}
import com
.baom
idou
.mybatisplus
.extension
.service
.impl
.ServiceImpl;
import org
.springframework
.beans
.factory
.annotation
.Autowired;
import org
.springframework
.stereotype
.Service;
import org
.springframework
.transaction
.annotation
.Transactional;
@Service
@Transactional
public class EmpServiceImpl extends ServiceImpl<EmpDao, Emp> implements EmpServcie {
@Autowired
private EmpDao empDao;
@Overr
ide
public boolean addEmp(Emp emp) {
return empDao
.insert(emp) > 0;
}
}
6
.创建EmpController控制器
在EmpController中实现员工注册功能，使用Ajax技术实现前后端互动。
import com
.alibaba
.fast
json
.JSONObject;
import org
.springframework
.beans
.factory
.annotation
.Autowired;
import org
.springframework
.stereotype
.Controller;
import org
.springframework
.web
.bind
.annotation
.*;
@Controller
@RequestMapping("/emp")
public class EmpController {
@Autowired
private EmpServcie empServcie;
/**
* 员工注册
*
* @param emp
Json
* @return
*/
@PostMapping("/add")
@ResponseBody
public
JSONObject addEmp(@RequestBody
JSONObject emp
Json) {
JSONObject
jsonObject = new
JSONObject();
String name = emp
Json
.getString("name");
int age = emp
Json
.getInteger("age");
int gender = emp
Json
.getInteger("gender");
String dept = emp
Json
.getString("dept");
String hiredate = emp
Json
.getString("hiredate");
String password = emp
Json
.getString("password");
Emp emp = new Emp();
emp
.setName(name);
emp
.setAge(age);
emp
.setGender(gender);
emp
.setDept(dept);
emp
.setHiredate(hiredate);
emp
.setPassword(password);
if (empServcie
.addEmp(emp)) {
jsonObject
.put("msg", "success");
} else {
jsonObject
.put("msg", "fail");
}
return
jsonObject;
}
}
7
.创建员工注册页面
使用layui框架实现员工注册页面，引入layui需要的样式和脚本文件，使用AJAX将表单数据传输给后端实现员工注册。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf
-8">
<title>员工注册</title>
<link rel="stylesheet" href="https://cdn
.staticfile
.org/layui/2
.5
.4/css/layui
.css">
</head>
<body>
<form class="layui
-form">
<div class="layui
-form
-item">
<label class="layui
-form
-label">姓名</label>
<div class="layui
-input
-block">
<input type="text" name="name" 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="number" name="age" 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="gender" value="1" title="男" checked>
<input type="radio" name="gender" value="0" title="女">
</div>
</div>
<div class="layui
-form
-item">
<label class="layui
-form
-label">部门</label>
<div class="layui
-input
-block">
<select name="dept">
<option value="技术部">技术部</option>
<option value="市场部">市场部</option>
<option value="人力资源部">人力资源部</option>
</select>
</div>
</div>
<div class="layui
-form
-item">
<label class="layui
-form
-label">入职时间</label>
<div class="layui
-input
-block">
<input type="text" name="hiredate" 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="password" name="password" 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="formDemo">立即提交</button>
<button type="reset" class="layui
-btn layui
-btn
-primary">重置</button>
</div>
</div>
</form>
<script src="https://cdn
.staticfile
.org/jquery/3
.2
.1/jquery
.min
.js"></script>
<script src="https://cdn
.staticfile
.org/layui/2
.5
.4/layui
.all
.js"></script>
<script>
layui
.use('form', function () {
var $ = layui
.jquery, form = layui
.form;
//监听提交
form
.on('submit(formDemo)', function (data) {
var name = $("#name")
.val();
var age = $("#age")
.val();
var gender = $("input[name='gender']:checked")
.val();
var dept = $("#dept")
.val();
var hiredate = $("#hiredate")
.val();
var password = $("#password")
.val();
var
jsonData = {
"name": name,
"age": age,
"gender": gender,
"dept": dept,
"hiredate": hiredate,
"password": password
};
console
.log(
jsonData);
$
.ajax({
url: "/emp/add",
type: "POST",
contentType: "application/
json; charset=utf
-8",
data:
JSON
.stringify(
jsonData),
dataType: "
json",
success: function (result) {
if (result
.msg === "success") {
alert("注册成功");
} else {
alert("注册失败");
}
},
error: function () {
alert("服务器异常");
}
});
return false;
});
});
</script>
</body>
</html>
以上便是使用springboot、mybatis
-plus、Ajax、layui以及mysql实现员工注册（
id自
增，姓名，年龄，性别，部门，入职时间，密码）的全部步骤。通过以上的代码，我们可以达到员工注册的基本功能，同时也可以通过此次案例
学习如何使用Ajax技术实现前后端的数据传输，也可以了解如何使用mybatis
-plus实现在自
增id的情况下进行数据操作。
扫一扫
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
