springboot+mybatis-plus+Ajax+layui+mysql实现员工注册(id自增,姓名,年龄,性别,部门,入职时间,密码)
时间: 2023-05-28 12:02:46 浏览: 210
本篇文章将介绍如何使用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、fastjson、junit等必要的依赖(版本根据自己的项目需求选择)。
3.创建Emp实体类
在实体类中定义员工的id、姓名、年龄、性别、部门、入职时间以及密码,其中id使用自增注解实现。
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
@Data
public class Emp {
@TableId(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.baomidou.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.baomidou.mybatisplus.extension.service.IService;
public interface EmpServcie extends IService<Emp> {
boolean addEmp(Emp emp);
}
import com.baomidou.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;
@Override
public boolean addEmp(Emp emp) {
return empDao.insert(emp) > 0;
}
}
6.创建EmpController控制器
在EmpController中实现员工注册功能,使用Ajax技术实现前后端互动。
import com.alibaba.fastjson.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 empJson
* @return
*/
@PostMapping("/add")
@ResponseBody
public JSONObject addEmp(@RequestBody JSONObject empJson) {
JSONObject jsonObject = new JSONObject();
String name = empJson.getString("name");
int age = empJson.getInteger("age");
int gender = empJson.getInteger("gender");
String dept = empJson.getString("dept");
String hiredate = empJson.getString("hiredate");
String password = empJson.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的情况下进行数据操作。
阅读全文