使用Mongodb實現打卡簽到系統的例項程式碼
阿新 • • 發佈：2020-05-12
使用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.實體層
3.業務service層
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:[email protected]: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 +" " +object.name +"<br/>"; }) $("#complete p").html(complete); $.each(data.incomplete,object) { incomplete += object.id +" " +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配置類，添加了就沒有了。
新增配置類之後的效果圖
注意：匯入excel檔案（xsl工作表）的時候使用2003之前版本的，字尾帶XLS。
有哪裡不明白的地方記得下方留言哦。
專案已託管碼雲
地址：https://gitee.com/ckfeng/mongodb_punch.git
總結
到此這篇關於使用Mongodb實現打卡簽到系統的文章就介紹到這了,更多相關使用Mongodb實現打卡簽到系統內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！