SpringBoot、SSM、ajax实现考勤打卡功能（详细实现），供新手参考!

系统基于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>

实现效果：

---

---

---

---

---

---

---

打卡展示图片把时间控制注释掉了，成功记录功能的完成