基于局域网IP的考勤系统设计与实现

作者:不染心

时间:2022/7/2

源码地址: https://mbd.pub/o/author-aWaVlmpkYw==/work


文章目录

  • 基于局域网IP的考勤系统设计与实现
  • 一、项目总结
  • 二、项目结构
  • 三、后端
  • 四、前端
  • 五、数据库
  • 六、项目部署
  • 1、导入数据库文件
  • 2、导入Java后端
  • 3、导入Vue前端


一、项目总结

🍀 相关技术总结:

  • 前端vue+elementUI;
  • 后端java和springboot;
  • 数据库mysql+mybatis;

🍀 开发工具:

  • IDEA用作开发SpringBoot:IDEA下载
  • VScode用作开发vue前端:VScode下载
  • Navicat作为MySql客户端:数据库、jdk相关下载

🍀 开发环境:

  • Java开发环境
  • Vue开发环境
  • MySql数据库



员工考勤系统架构_mybatis



管理端页面1



员工考勤系统架构_开发语言_02



管理端页面2




员工考勤系统架构_mybatis_03



移动端(学生签到页面)



员工考勤系统架构_开发语言_02



管理端(签到记录管理页面)




员工考勤系统架构_员工考勤系统架构_05



系统详细设计文档(目录)



员工考勤系统架构_数据库_06



系统详细设计文档(总图)

二、项目结构




员工考勤系统架构_员工考勤系统架构_07



系统功能模块图



员工考勤系统架构_员工考勤系统架构_08



项目后端框架图

🍀 后端

allApi文件夹为后端

整个项目包含controller、dao、entity、service、utils包

controller层:是用来与前端进行交互的桥梁,用于调用接口时相关的业务,通过调用controller层,将去调用相关的业务层代码并将数据放回给前端。

entity层:一般是数据库中每一张表对应一个实体。

dao层:数据持久化层,就是将数据库的访问具体化为代码的形式,使用的数据持久化框架时Mybatis。

service层时所有的内部业务逻辑都是放到该层处理。

utils层中包含一些常用的函数,包括跨域访问模块和拦截器模块。

🍀 前端

admin文件夹为前端

src.api文件夹中存放调用后端接口的请求方法

src.views文件夹中存放编写的前端界面,login为登录界面、nourishManage为培养目标管理页面、professionManage为专业管理界面、userManage为用户管理界面、subjectManage为用户管理界面。

三、后端




员工考勤系统架构_数据库_09

后端代码结构


四、前端




员工考勤系统架构_数据库_10

前端代码结构




员工考勤系统架构_数据库_11

前端代码结构


五、数据库




员工考勤系统架构_数据库_12

数据库表


六、项目部署

1. allApi是springboot 后端代码(按照以下方法2导入项目)
2. vue-admin-template-IPadministrator 管理端(按照以下方法3导入项目)
3. vueProMobileTemplate-master 移动端,学生签到端(按照以下方法3导入项目)
4. ipsign2.sql是数据库文件,存储了项目中的数据(按照以下方法1导入数据)

1、导入数据库文件

  • 直接在navicat中新建一个submanage的数据库
  • 然后再用记事本打开ipsign2.sql,复制其内容
  • 在该数据库中执行脚本文件中的内容

2、导入Java后端

  • 安装好IDEA
  • 直接用IDEA打开allApi文件夹



员工考勤系统架构_数据库_13

直接用IDEA打开allApi文件夹


3、导入Vue前端

  • vscode打开admin项目文件夹
  • 新建terminal窗口
  • 在窗口中输入命令npm run dev



员工考勤系统架构_mybatis_14

直接用vscode打开admin文件夹





员工考勤系统架构_数据库_15

输入命令即运行成功





员工考勤系统架构_java_16

在浏览器中输入地址