总结.md

学生宿舍管理系统

一、目录结构

综合项目
├─ .vscode
│  └─ settings.json
├─ css
│  ├─ bootstrap.css
│  ├─ index.css //首页css文件
│  └─ login.css //登录页css文件
├─ html
│  ├─ admin
│  │  ├─ absence.html //缺勤记录
│  │  ├─ dorm.html //宿舍楼管理
│  │  ├─ editPwd.html //修改密码
│  │  ├─ houseparent.html //宿舍管理员管理
│  │  └─ student.html //学生管理
│  └─ login.html //登录页面
├─ img
│  ├─ bg.png
│  └─ 天空3.jpeg
├─ index.html //首页
├─ js
│  ├─ absence.js //缺勤记录
│  ├─ dorm.js //宿舍楼管理
│  ├─ editPwd.js //修改密码
│  ├─ houseparent.js //宿舍管理员管理
│  ├─ login.js //登录
│  └─ student.js //学生管理
├─ public
│  ├─ bootstrap.bundle.min.js
│  ├─ content.js //检测非法登录和生成左侧菜单
│  ├─ data.js //创建数据
│  ├─ function.js //公共函数
│  ├─ jquery-3.6.0.min.js
│  ├─ js.cookie.js
│  └─ mock.js

二、数据模板

//宿舍楼数据
let dorm_data = [{
    id: 1,
    name: "第一宿舍楼",
    intro: "这是第一宿舍楼，位于xxx"
}];

//宿舍管理员数据
let houseparent_data = [{
    id: 1,
    dorm_id: 1,
    name: "xxx",
    account: "xxx",
    phone: "17882311335",
    sex: "男"
}];

//学生数据
let student_data = [{
    id: 1,
    dorm_id: 1,
    student_ID: 20192995,
    name: "xxx",
    sex: "男",
    phone: "14184389112",
    dorm_number: "411"
}];

//缺勤记录数据
let absence_record_data = [{
    id: 1,
    student_id: 1,
    create_date: "xxx",
    remark: "xxx"
}];

三、用到的知识点

1、bootstrap框架

主要用于页面布局和一些bootstrap组件使用

2、mock.js

主要用于生成摸拟数据

3、js.cookie.js

主要用于记住密码时保存cookie，页面加载时获取cookie，取消记住密码时删除cookie

4、jQuery

主要用于操作Dom元素，添加事件等

5、localStorage

主要用于保存所有数据，登录成功后将生成的所有set到localStorage，在进入页面后把数据get出来，在数据被重新渲染之前，把数据再次set到localStorage。

另外还保存了所有页面的分页大小，当用户进入页面时，会获取之前设置的分页大小，如果获取不到，则默认分页大小为5

6、sessionStorage

用于保存登录的用户身份和用户名

用于检测非法登录

用于根据不同的登录身份获取对应的数据

退出登录时删除sessionStorage

7、setInterval

用于非法登录时定时跳转到登录页面

8、location.href

跳转页面

9、location.pathname

获取url文件路径

10、正则表达式

把获取到的文件路径中的文件截取下来，比如index.html，把index截取下来，跟左侧菜单id进行匹配，给匹配到的菜单添加上active类名

11、Map集合

登录界面将需要用到的页面元素set到Map集合里，在需要使用的时候get出来

12、e.preventDefault();

用于禁止用户输入空格

13、用到的一些数组方法

forEach：遍历数组

find：返回第一个符合条件的数据

findIndex：返回第一个符合条件的数据索引

splice：返回截取的数据，会改变原数据

map：将数组的所有成员依次执行参数函数，然后把每一次的执行结果组成一个新数组返回。

filter：返回一个符合条件的新数组

14、element.insertAdjacentHTML("beforeend", str);

在element最后添加str的html代码

15、事件委托

给父元素绑定点击事件，操作子元素

16、Array.isarray()

判断是否是数组

四、公共函数

1、加载页面时刷新表格，创建分页列表

2、分页类，创建分页对象

3、分页大小选择框的change事件

4、分页列表点击事件

5、渲染表格

6、全选框

7、取消搜索

8、取消按钮

9、数据大小

10、刷新表格

11、清除子元素

五、页面不同的部分

1、当前页面的数据

2、tr模板

3、增删查改