欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用Mongodb实现打卡签到系统

程序员文章站 2022-05-29 08:34:59
使用excel文件导入数据,整合mongodb实现打卡签到系统 环境参数 开发工具:IDEA 基础环境:Maven+JDK8 主要技术:SpringBoot、Mongodb SpringBoot版本:2.2.6 实现步骤如下: 1.添加依赖 org.spr ......

使用excel文件导入数据,整合mongodb实现打卡签到系统

环境参数

  • 开发工具:idea
  • 基础环境:maven+jdk8
  • 主要技术:springboot、mongodb
  • springboot版本:2.2.6

 

实现步骤如下:

1.添加依赖

     <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-web</artifactid>
        </dependency>

        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-data-mongodb</artifactid>
        </dependency>

        <dependency>
            <groupid>org.projectlombok</groupid>
            <artifactid>lombok</artifactid>
            <optional>true</optional>
        </dependency>

        <!-- excel工具 -->
        <dependency>
            <groupid>org.apache.poi</groupid>
            <artifactid>poi-ooxml</artifactid>
            <version>4.0.1</version>
        </dependency>

        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-test</artifactid>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupid>org.junit.vintage</groupid>
                    <artifactid>junit-vintage-engine</artifactid>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupid>junit</groupid>
            <artifactid>junit</artifactid>
            <scope>test</scope>
        </dependency>

 

2.实体层

使用Mongodb实现打卡签到系统

 

 

3.业务service层

使用Mongodb实现打卡签到系统

 

 

4. service实现层

package com.ckf.mongodb_punch.service.impl;


import com.ckf.mongodb_punch.mapper.attendrepository;
import com.ckf.mongodb_punch.entity.attend;
import com.ckf.mongodb_punch.service.attendservice;
import org.apache.poi.hssf.usermodel.hssfrow;
import org.apache.poi.hssf.usermodel.hssfsheet;
import org.apache.poi.hssf.usermodel.hssfworkbook;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.data.mongodb.core.mongotemplate;
import org.springframework.data.mongodb.core.query.criteria;
import org.springframework.data.mongodb.core.query.query;
import org.springframework.data.mongodb.core.query.update;
import org.springframework.stereotype.service;
import org.springframework.web.multipart.multipartfile;

import java.io.ioexception;
import java.util.arraylist;
import java.util.list;

@service
public class attendserviceimpl implements attendservice {


    @autowired
    private attendrepository attendrepository;

    @autowired
    private mongotemplate mongotemplate;

    /**
     * 上传文件
     * @param classes
     * @param namelistexcel
     * @return
     */
    @override
    public string upload(string classes, multipartfile namelistexcel) {
        string result = "no";
        if (namelistexcel == null) {
            return result;
        }
        //实例化对象列表,用于存储excel中的数据
        list<attend> attendlist = new arraylist<attend>();

        //读取文件对象namelistexcel 中的数据(读取excel中每一行数据,存到对象,存到对象列表中)
        try {
            //根据路径获取这个操作excel的实例
            hssfworkbook wb = new hssfworkbook(namelistexcel.getinputstream());

            //根据页面index 获取sheet页
            hssfsheet sheet = wb.getsheetat(0);

            hssfrow row = null;
            //循环sesheet页中数据从第二行开始,第一行是标题
            for (int i = 1; i < sheet.getphysicalnumberofrows(); i++) {
                //获取每一行数据
                row = sheet.getrow(i);

                attend attend = new attend();
                //下面cellnum对应着下标,id是第一位对应着下标为0,name是第二位对应的下标为1,等等..
                attend.setid(integer.valueof((int) row.getcell(0).getnumericcellvalue()));
                attend.setname(row.getcell(1).getstringcellvalue());
                attend.setsign(integer.valueof((int) row.getcell(2).getnumericcellvalue()));
                attendlist.add(attend);
            }

        } catch (ioexception e) {
            e.printstacktrace();
        }
        system.out.println("解析excel中的数据:" + attendlist);

        /**
         * 如果成功就,写入mongodb中
         */
        attendrepository.saveall(attendlist);
        result = "ok";
        return result;
    }

    /**
     * 签到
     * @param name
     * @return
     */
    @override
    public string sign(string name) {
        query query = query.query(criteria.where("name").is(name));

        //局部修改的内容
        update update = new update();
        update.set("sign", 1);

        //attend 集合名 对应实体的集合名
        mongotemplate.updatefirst(query, update, "attend");
        return "ok";
    }

    /**
     * 全查询学生信息
     * @param sign
     * @return
     */
    @override
    public list<attend> findallbysign(integer sign) {
        return attendrepository.findallbysign(sign);
    }
}

 

5.controller层

package com.ckf.mongodb_punch.controller;

import com.ckf.mongodb_punch.entity.attend;
import com.ckf.mongodb_punch.service.attendservice;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.web.bind.annotation.getmapping;
import org.springframework.web.bind.annotation.postmapping;
import org.springframework.web.bind.annotation.restcontroller;
import org.springframework.web.multipart.multipartfile;

import java.util.hashmap;
import java.util.list;
import java.util.map;


@restcontroller
public class attendcontroller {

    @autowired
    private attendservice attendservice;

    @getmapping("/sign")
    public string sign(string name){
        /**
         * 将名字传给服务层,mongodb修改登录状态
         */
        attendservice.sign(name);
        return "ok";
    }

    /**
     * 上传文件
     * @param classes
     * @param namelistexcel
     * @return
     */
    @postmapping("/upload")
    public string upload(string classes, multipartfile namelistexcel){
        /**
         * 接收到前台传过来的文件对象,交给service层或者excel工具类来解析数据
         * system.out.println("接收前台表单提交数据:"+classes+namelistexcel);
         */
        string result = attendservice.upload(classes,namelistexcel);
        return result;
    }

    /**
     * 查询未签到同学 和已签到同学
     * @return
     */
    @getmapping("/list")
    public map list(){
        map result = new hashmap<string,object>();
        /**
         * 已签到
         */
        list<attend> complete = attendservice.findallbysign(1);
        result.put("complete",complete);

        /**
         * 未签到
         */
        list<attend> incomplete = attendservice.findallbysign(0);
        result.put("incomplete",incomplete);
        return result;
    }
}

 

6.application.yml

这里使用的是mongodb的安全认证配置

spring:
  data:
    mongodb:
      uri: mongodb://ckf_user:123456@192.168.85.154:27017/attend_db

 

默认单例配置如下

spring:
  data:
    mongodb:
      uri: mongodb://localhost:27017/attend_db

 

这里使用的是异步实现的

7.list.html代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>考勤管理页面</title>
    <style>
        #complete,#incomplete{
            width: 50%;
            float: left;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

    <h3>导入名单</h3>
    班级名称:
    <input type="text" name="classes" id="classes"/>
    请选择导入文件
    <input type="file" name="namelist" id="namelist"/>
    <input type="button" id="upload" value="上传">
    <hr/>

    <div id="incomplete">
        <h3>未签到的</h3>
        <p></p>

    </div>

    <div id="complete">
        <h3>已签到</h3>
        <p></p>
    </div>

</body>
<script type="text/javascript">

    $(function () {
        //初始化页面查询结果
        $.ajax({
            type:"get",
            url:"/list",
            success:function(data){
                console.log(data);
                var complete ="";
                var incomplete ="";

                $.each(data.complete,function (index,object) {
                    complete +=  object.id +"&nbsp;" +object.name +"<br/>";
                })
                $("#complete p").html(complete);
                $.each(data.incomplete,function (index,object) {
                    incomplete +=  object.id +"&nbsp;" +object.name +"<br/>";
                })
                $("#incomplete p").html(incomplete);

            }
        });


        $("body").on("click","#upload",function(){
            //将数据打包到formdata对象中
            var formdata = new formdata();
            formdata.append("classes",$("#classes").val());
            formdata.append("namelistexcel",$("#namelist")[0].files[0]);

            $.ajax({
                type:"post",
                url:"/upload",
                //datatype:"json",
                data:formdata,
                processdata: false,
                contenttype: false,
                success:function(data){
                    console.log(data);
                    if(data=="ok"){
                        alert("上传成功,即将刷新页面")
                        //刷新当前页面
                        location.reload();
                    }else {
                        alert("上传失败,请重新上传")
                    }
                }
            });
        })
    })

</script>
</html>

 

签到打卡代码如下:

8.sign-in.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>签到页面</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

    请输入你的姓名:<input type="text" id="name"/>
    <input type="button" id="sign" value="签到"/>

</body>
<script type="text/javascript">

    $(function () {
        $("body").on("click","#sign",function(){

            $.ajax({
                type:"get",
                url:"/sign",
                data:{"name":$("#name").val()},
                success:function(data){
                    console.log(data);
                    if(data=="ok"){
                        alert("签到成功,返回签到页面")
                        //刷新当前页面
                        location.reload();
                    }else {
                        alert("签到成功,请重新签到")
                    }
                }
            });
        })
    })

</script>
</html>

 

list.html页面效果图

使用Mongodb实现打卡签到系统

 

工作表效果图

使用Mongodb实现打卡签到系统

 

 

 远程工具查询刚导入的数据如下

数据后面有包的路径是因为导入数据的时候没有添加mongodb配置类,添加了就没有了。

使用Mongodb实现打卡签到系统

 

添加配置类之后的效果图 

使用Mongodb实现打卡签到系统

 

 

注意:导入excel文件(xsl工作表)的时候使用2003之前版本的,后缀带xls。

 有哪里不明白的地方记得下方留言哦。

 

项目已托管码云

地址:https://gitee.com/ckfeng/mongodb_punch.git

还有待更新.....