系统基于Springboot、SSM、ajax实现的打卡功能,给新手们一个小参考,欢迎指正!
实现的功能:9点20之前正常打卡,9点20到10点打卡算迟到,需要填写迟到原因,10点之后不能打卡,下午5点之前不能签退。打卡能记录登录用户的ID和用户名、IP地址和所在地。
1、model层
public class PunchClock {
private Integer id;//标识
private Long userid;//用户ID
private Date punch_inTime;//打卡时间
private Date punch_outTime;//签退时间
private Date attendanceTime;//考勤时间
private String remark;//迟到原因备注
private String userip;//ip地址
private String loginaddress;//登录地址
private String developername;//用户名
getter和setter;
2、dao层
public interface PunchClockDao {
//打卡
int up_out(PunchClock punchClock);
//签退
int add_in(PunchClock punchClock);
//迟到原因备注
int late_result(PunchClock punchClock);
//查询当前用户是否已经打卡
PunchClock if_punchin(PunchClock punchClock);
//查询当前用户是否已经签退
PunchClock if_punchout(PunchClock punchClock);
}
3、service层
@Transactional
public interface PunchClockManager {
int up_out(PunchClock punchClock);
int add_in(PunchClock punchClock);
int late_result(PunchClock punchClock);
PunchClock if_punchin(PunchClock punchClock);
PunchClock if_punchout(PunchClock punchClock);
}
4、serviceImpl层
@Service
@Transactional
public class PunchClockServiceImpl implements PunchClockManager {
@Autowired
private PunchClockDao punchClockDao;
@Override
public int up_out(PunchClock punchClock) {
return punchClockDao.up_out(punchClock);
}
@Override
public int add_in(PunchClock punchClock) {
return punchClockDao.add_in(punchClock);
}
@Override
public PunchClock if_punchin(PunchClock punchClock) {
return punchClockDao.if_punchin(punchClock);
}
@Override
public PunchClock if_punchout(PunchClock punchClock) {
return punchClockDao.if_punchout(punchClock);
}
@Override
public int late_result(PunchClock punchClock) {
return punchClockDao.late_result(punchClock);
}
}
5、controller层
@Controller
@RequestMapping(value = "punch_clock")
public class PunchClockController {
@Autowired
private PunchClockManager punchClockManager;
@RequestMapping(value = "punchClock")
public ModelAndView punchClock(HttpServletRequest request,
HttpServletResponse response) {
ModelAndView mv = new ModelAndView("admin/user/punchClock");
return mv;
}
@RequestMapping(value = "lateinfo")
public ModelAndView lateinfo(HttpServletRequest request,
HttpServletResponse response) {
ModelAndView mv = new ModelAndView("admin/user/lateinfo");
return mv;
}
//获取打卡时间
@RequestMapping(value = "in_time.do")
@ResponseBody
public String in_time() throws Exception {
String in_time = "";
//获取当前操作的用户
User user = (User) SecurityUtils.getSubject().getPrincipal();//集成shiro
//user类里面只需要用户id和用户名,各位自由发挥
PunchClock punchClock = new PunchClock();
Date date = new Date();
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");//考勤时间格式化
SimpleDateFormat format = new SimpleDateFormat("HH:mm:ss");//打卡时间格式化
punchClock.setAttendanceTime(dateFormat.parse(dateFormat.format(date)));
punchClock.setUserid(user.getId());
PunchClock pc = punchClockManager.if_punchin(punchClock);
if(pc == null){
in_time = "当前暂未打卡!";
}else {
in_time = format.format(pc.getPunch_inTime());
}
return in_time;
}
//获取签退时间
@RequestMapping(value = "out_time.do")
@ResponseBody
public String out_time() throws Exception {
String out_time = "";
//获取当前操作的用户
User user = (User) SecurityUtils.getSubject().getPrincipal();
PunchClock punchClock = new PunchClock();
Date date = new Date();
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");//考勤时间格式化
SimpleDateFormat format = new SimpleDateFormat("HH:mm:ss");//打卡时间格式化
punchClock.setAttendanceTime(dateFormat.parse(dateFormat.format(date)));
punchClock.setUserid(user.getId());
PunchClock pc = punchClockManager.if_punchout(punchClock);
if(pc == null){
out_time = "当前暂未签退!";
}else {
out_time = format.format(pc.getPunch_outTime());
}
return out_time;
}
//上班打卡
@RequestMapping(value = "punch_in.do")
@ResponseBody
public int punch_in(String loginaddress, HttpServletRequest request) throws Exception {
//操作记录条数,初始化为0
int resultTotal = 0;
//获取用户IP地址
String ip = request.getHeader("x-forwarded-for");
if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
ip = request.getHeader("Proxy-Client-IP");
}
if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
ip = request.getHeader("WL-Proxy-Client-IP");
}
if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
ip = request.getRemoteAddr();
}
if (ip == null || ip.length() == 0 || ip.indexOf(":") > -1) {
try {
ip = InetAddress.getLocalHost().getHostAddress();
} catch (UnknownHostException e) {
ip = null;
}
}
//获取当前操作的用户
User user = (User) SecurityUtils.getSubject().getPrincipal();
//打卡控制
PunchClock punchClock = new PunchClock();
Date date = new Date();
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");//考勤时间格式化
SimpleDateFormat format = new SimpleDateFormat("HH:mm:ss");//打卡时间格式化
Date inTime = format.parse("09:20:00");
Date outTime = format.parse("10:00:00");
punchClock.setPunch_inTime(format.parse(format.format(date)));
punchClock.setUserid(user.getId());
punchClock.setDevelopername(user.getDeveloperName());
Date nowTime = format.parse(format.format(date));//当前时分秒
punchClock.setAttendanceTime(dateFormat.parse(dateFormat.format(date)));
punchClock.setUserip(ip);
punchClock.setLoginaddress(loginaddress);
//先查询用户是否已经打过卡
if ( punchClockManager.if_punchin(punchClock) == null) {
if (nowTime.before(outTime) && nowTime.after(inTime)) {//迟到
punchClockManager.add_in(punchClock);
resultTotal = -2;
} else if (nowTime.after(outTime)) {//缺席
resultTotal = -3;
} else if (nowTime.before(inTime)){
resultTotal = punchClockManager.add_in(punchClock);
}
}else{
resultTotal = -4; //已经打过卡了
}
return resultTotal;
}
//迟到说明情况
@RequestMapping(value = "late.do")
@ResponseBody
public int late(String remark) throws Exception {
//获取当前操作的用户
User user = (User) SecurityUtils.getSubject().getPrincipal();
int resultTotal = 0;
PunchClock punchClock = new PunchClock();
Date date = new Date();
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");//考勤时间格式化
punchClock.setAttendanceTime(dateFormat.parse(dateFormat.format(date)));
punchClock.setUserid(user.getId());
punchClock.setRemark(remark);
resultTotal = punchClockManager.late_result(punchClock);
return resultTotal;
}
//下班签退
@RequestMapping(value = "punch_out.do")
@ResponseBody
public int Punch_out(HttpServletRequest request) throws Exception {
//获取当前操作的用户
User user = (User) SecurityUtils.getSubject().getPrincipal();
Date date = new Date();
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");//考勤时间格式化
SimpleDateFormat format = new SimpleDateFormat("HH:mm:ss");//打卡时间格式化
PunchClock punchClock = new PunchClock();
punchClock.setPunch_outTime(format.parse(format.format(date)));
Date nowTime = format.parse(format.format(date));//当前时分秒
punchClock.setUserid(user.getId());
punchClock.setAttendanceTime(dateFormat.parse(dateFormat.format(date)));
int resultTotal = 0;
Date inTime = format.parse("17:00:00");
//防止用户重复签退
if(punchClockManager.if_punchout(punchClock) == null) {
if (nowTime.before(inTime)) {//早退提示
resultTotal = -2;
} else if (nowTime.after(inTime)){
resultTotal = punchClockManager.up_out(punchClock);
}
}else{
resultTotal = -3;
}
return resultTotal;
}
}
6、mapper
<insert id="add_in" parameterType="cn.xx.model.PunchClock">
insert into sys_userpunchclock(id,userid,developername,punch_inTime,attendanceTime,userip,loginaddress)
values(null,#{userid},#{developername},#{punch_inTime},#{attendanceTime},#{userip},#{loginaddress})
</insert>
<update id="up_out" parameterType="cn.xx.model.PunchClock">
update sys_userpunchclock set
punch_outTime=#{punch_outTime} where attendanceTime=#{attendanceTime} and userid=#{userid}
</update>
<update id="late_result" parameterType="cn.xx.model.PunchClock">
update sys_userpunchclock set
remark=#{remark} where attendanceTime=#{attendanceTime} and userid=#{userid}
</update>
<select id="if_punchin" resultType="cn.xx.model.PunchClock">
select punch_inTime from sys_userpunchclock where attendanceTime=#{attendanceTime} and userid=#{userid}
</select>
<select id="if_punchout" resultType="cn.xx.model.PunchClock">
select punch_outTime from sys_userpunchclock where attendanceTime=#{attendanceTime} and userid=#{userid}
</select>
7、页面
7.1、跳转打卡
function punchC() {
layer.open({
title: '打卡',
area: ['650px', '350px'],
type: 2,
content: '${pageContext.request.contextPath}/punch_clock/punchClock',//跳转controller
cancel: function () {
}
});
}
7.2、打卡页面
<body>
<div class="layui-form-item">
<div class="layui-input-block">
<form class="layui-form">
<div align="center">
当前位置:<p id="city"></p>
</div><br>
<div class="layui-form-item" }>
<label class="layui-form-label">打卡时间:</label>
<div class="layui-input-block" style="width: 250px">
<input type="text" id="in_text" name='' required value=""
autocomplete="off" class="layui-input" readonly>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="width: 400px">
<button class="layui-btn" type="button" id="in_btn">打卡</button>
</div>
</div>
</div>
<br>
<div class="layui-form-item" }>
<label class="layui-form-label">签退时间:</label>
<div class="layui-input-block" style="width: 250px">
<input type="text" id="out_text" name='' required value=""
autocomplete="off" class="layui-input" readonly>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="width: 400px">
<button class="layui-btn" type="button" id="out_btn">签退</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function (){
$.ajax({
url: '${pageContext.request.contextPath}/punch_clock/in_time.do',
type: 'POST',
dataType: 'json',
data: {
},
success: function (in_time) {
out_time()
document.getElementById('in_text').value = in_time;
},
error: function (XMLHttpRequest) {
console.log('XMLHttpRequest:');
console.log(XMLHttpRequest);
alert('网络异常!尝试刷新网页解决问题');
}
})
function out_time(){
$.ajax({
url: '${pageContext.request.contextPath}/punch_clock/out_time.do',
type: 'POST',
dataType: 'json',
data: {
},
success: function (out_time) {
document.getElementById('out_text').value = out_time;
},
error: function (XMLHttpRequest) {
console.log('XMLHttpRequest:');
console.log(XMLHttpRequest);
alert('网络异常!尝试刷新网页解决问题');
}
})
}
$('#in_btn').on('click',function () {
var loginaddress = $("#city").text();
$.ajax({
url: '${pageContext.request.contextPath}/punch_clock/punch_in.do',
type: 'POST',
dataType: 'json',
data: {
loginaddress: loginaddress,
},
success: function (result) {
//1:打卡成功,2:打卡失败(超过9点20,打卡状态为迟到),3:打卡失败(超过9点20后任不打卡,超过10点为缺席)
if (result >= 1) {
layer.msg("打卡成功!");
} else if (result == -2) {
layer.confirm("打卡成功,您已迟到,请填写迟到原因!",{
btn:['确定','取消']
},function (){
layer.open({
title: '迟到原因说明',
area: ['650px', '250px'],
type: 2,
content: '${pageContext.request.contextPath}/punch_clock/lateinfo',
cancel: function () {
}
});
},function () {
})
} else if (result == -3) {
layer.msg("打卡失败,当前状态为缺勤!");
}else if(result == -4){
layer.msg("您已打卡,请勿重复打卡!");
}
},
error: function (XMLHttpRequest) {
console.log('XMLHttpRequest:');
console.log(XMLHttpRequest);
alert('网络异常!尝试刷新网页解决问题');
}
})
})
$('#out_btn').on('click',function () {
$.ajax({
url: '${pageContext.request.contextPath}/punch_clock/punch_out.do',
type: 'POST',
dataType: 'json',
data: {
},
success: function (result) {
if (result >= 1) {
layer.msg("签退成功!");
out_time();
} else if (result == -2) {
layer.msg("早退提示:当前未到签退时间!");
}else if(result == -3){
layer.msg("您已签退,请勿重复签退!");
}
},
error: function (XMLHttpRequest) {
console.log('XMLHttpRequest:');
console.log(XMLHttpRequest);
alert('网络异常!尝试刷新网页解决问题');
}
})
})
$(function(){
//获取城市ajax
$.ajax({
url: 'http://api.map.baidu.com/location/ip?ak=ia6HfFL660Bvh43exmH9LrI6',
type: 'POST',
dataType: 'jsonp',
success:function(data) {
$('#city').html(JSON.stringify(data.content.address_detail.province + "," + data.content.address_detail.city))
}
});
})
})
</script>
</body>
7.3迟到原因填写
<body>
<div class="layui-form-item">
<div class="layui-input-block">
<form class="layui-form">
<div class="layui-form-item" }>
<br><br><br>
<label class="layui-form-label">迟到原因:</label>
<div class="layui-input-block" style="width: 250px">
<input type="textbox" id="lateresult" name='' required
autocomplete="off" class="layui-input" >
</div><br>
<div class="layui-form-item">
<div class="layui-input-block" style="width: 400px">
<button class="layui-btn" type="button" id="latego">确定</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$('#latego').on('click',function () {
var remark = document.getElementById('lateresult').value;
$.ajax({
url: '${pageContext.request.contextPath}/punch_clock/late.do',
type: 'POST',
dataType: 'json',
data: {
remark: remark,
},
success: function (result) {
if (result > 0) {
layer.confirm("迟到原因填写成功!",{
btn:['确定']
},function (){
window.parent.location.reload();
})
}
},
error: function (XMLHttpRequest) {
console.log('XMLHttpRequest:');
console.log(XMLHttpRequest);
alert('网络异常!尝试刷新网页解决问题');
}
})
})
</script>
</body>
实现效果:
打卡展示图片把时间控制注释掉了,成功记录功能的完成