小程序做的学生宿舍管理系统

用户612041492213
9 阅读6分钟

学生宿舍管理系统微信小程序

项目简介

本项目是一个纯前端实现的微信小程序，用于管理学生宿舍信息。所有数据通过 wx.setStorageSync 和 wx.getStorageSync 进行本地持久化存储，在小程序关闭或重启后数据可以保留。

功能模块

系统主要包含以下几个功能模块，供管理员使用：

  1. 楼栋管理:
    • 添加新的楼栋信息（楼栋名称、描述）。
    • 查看所有楼栋列表。
    • 编辑已有的楼栋信息。
    • 删除楼栋信息（若楼栋下有房间，会提示并一同删除关联房间及清空学生住宿信息）。
  2. 房间管理:
    • 根据楼栋筛选房间。
    • 添加新的房间信息（所属楼栋、房间号、容纳人数）。
    • 查看房间列表及其当前入住学生姓名和数量。
    • 编辑已有的房间信息。
    • 删除房间信息（若房间内有学生，会提示禁止删除）。
  3. 学生管理:
    • 添加新的学生信息（姓名、学号、性别、联系方式）。
    • 查看所有学生列表及其住宿信息（楼栋-房间号）。
    • 编辑已有的学生信息。
    • 删除学生信息（若学生已入住，会提示禁止删除，需先办理退宿）。
  4. 学生入住管理:
    • 列出所有尚未分配宿舍的学生。
    • 为学生选择楼栋和该楼栋下的可用房间（显示剩余床位数）进行入住登记。
    • 自动记录当前日期为入住日期（可修改）。
  5. 退宿管理:
    • 列出所有已入住的学生及其住宿信息。
    • 为学生办理退宿手续，可填写退宿原因。
    • 记录退宿日期（自动为当前日期）。
    • 查看退宿记录列表（按退宿日期降序排列）。

技术实现

  • 框架: 微信小程序原生框架
  • 数据存储: 小程序全局变量 (app.js中的globalData)，并通过 wx.setStorageSync / wx.getStorageSync 实现本地持久化。
  • 页面导航: 使用微信小程序路由API (wx.navigateTo, wx.navigateBack)
  • UI: 使用微信小程序原生组件 (view, button, input, picker, form, radio-group等)

创作过程

  1. 需求分析与设计:

    • 明确了管理员角色下的五大核心功能：楼栋、房间、学生、入住、退宿管理。
    • 确定了纯前端实现，数据存储于全局变量并利用微信小程序本地存储API进行持久化。
    • 设计了基本的数据模型：buildings, rooms, students, checkOutRecords。

  2. 项目结构搭建:

    • 创建标准微信小程序项目结构。
    • 在 app.json 中注册所有页面路径。
    • 规划了 pages 目录下各个功能模块的文件夹。

  3. 全局数据模型与方法定义 (app.js):

    • 在 app.js 的 globalData 中初始化数据数组。
    • 实现了 onLaunch 时从本地存储加载数据，onHide 时将数据保存到本地存储的逻辑。
    • 编写了 generateId 方法用于生成唯一ID。
    • 为每个数据模型（楼栋、房间、学生）实现了增 (add)、删 (delete)、改 (update)、查 (getById, getAll) 的基本操作方法。
    • 实现了核心业务逻辑函数：checkInStudent 和 checkOutStudent，以及 getRoomOccupancy 等辅助函数。

  4. 核心功能模块开发 (Pages):

    • 首页 (index): 创建导航入口，链接到各个管理模块。
    • 楼栋管理:
      • buildingManagement 页：列表展示、删除操作（含关联房间删除逻辑）。
      • addBuilding 页：表单实现添加和编辑楼栋信息。
    • 房间管理:
      • roomManagement 页：楼栋选择器筛选、房间列表展示（含入住人数和学生名）、删除操作（检查房间是否有人）。
      • addRoom 页：表单实现添加和编辑房间信息，楼栋选择器。
    • 学生管理:
      • studentManagement 页：列表展示（含住宿信息）、删除操作（检查是否已入住）。
      • addStudent 页：表单实现添加和编辑学生信息。
    • 入住管理:
      • checkinManagement 页：列出未入住学生。
      • studentCheckin 页：展示学生信息，选择楼栋、可用房间（动态加载并显示余量），选择入住日期，执行入住操作。
    • 退宿管理:
      • checkoutManagement 页：列出已入住学生，执行退宿操作（可填写原因），展示退宿记录。

  5. 页面交互与联调:

    • 使用 wx.navigateTo 进行页面跳转，并通过 URL 参数传递 ID 等信息。
    • 使用 wx.showModal 进行删除确认和信息提示。
    • 使用 wx.showToast 进行操作结果反馈。
    • 各页面 onShow 生命周期函数用于在页面显示时刷新数据列表。
    • 通过 getApp() 获取全局 app 实例以调用其方法和访问 globalData。

  6. 样式与用户体验:

    • 为各页面编写了基础的 WXSS 样式，力求界面清晰、操作便捷。
    • 对表单输入进行了简单的非空校验。
    • 在关键操作前给出提示或确认框。

  7. 测试与优化:

    • 对各功能模块进行了基本流程测试。
    • 优化了数据加载和更新逻辑，确保数据一致性。
    • 修复了在房间和学生入住/退宿联动更新中的一些细节问题。

如何使用

  1. 环境准备:
  2. 导入项目:
    • 打开微信开发者工具。
    • 选择 "导入项目"。
    • AppID：可使用测试号，或注册自己的小程序AppID。如果使用测试号，某些高级API可能受限，但本项目功能基本不受影响。
    • 项目名称：自定义。
    • 目录：选择包含 project.config.json (或直接是小程序根目录) 的文件夹。
  3. 编译与预览:
    • 点击开发者工具中的 "编译" 按钮。
    • 可以在模拟器中查看和操作，或点击 "预览" 生成二维码，用手机微信扫描体验。
  4. 操作流程:
    • 首次使用: 由于数据为空，需要先从 "楼栋管理" 开始，添加楼栋。
    • 然后进入 "房间管理"，选择楼栋后添加房间。
    • 接着在 "学生管理" 中添加学生信息。
    • 之后可以在 "学生入住管理" 为未分配宿舍的学生办理入住。
    • 最后，可以在 "退宿管理" 中为已入住学生办理退宿，并查看退宿记录。
    • 所有数据都会保存在手机本地，下次打开小程序时数据依然存在。

注意事项

  • 数据持久化: 本项目已使用 wx.setStorageSync 将数据保存在用户本地，关闭小程序或微信后数据不会丢失。但如果用户清理微信缓存或卸载小程序，数据会丢失。
  • 数据关联与校验:
    • 删除楼栋时，会一并删除其下的所有房间，并清空这些房间内学生的入住状态。
    • 删除房间时，如果房间内有学生，则禁止删除。
    • 删除学生时，如果学生已入住，则禁止删除。
    • 这些是简化的处理逻辑，实际复杂系统中可能需要更完善的约束和提示。
  • 并发与冲突: 这是一个单机版纯前端应用，不涉及多用户并发操作和数据冲突问题。
  • 扩展性: 当前为基础版本，可根据实际需求进一步扩展功能，如：
    • 更复杂的查询与统计。
    • 用户权限管理（如区分学生端和管理员端）。
    • 与后端服务器同步数据。
    • 更完善的UI/UX设计。

办理退宿.png

房间编辑.png

房间管理.png

楼栋编辑.png

楼栋管理.png

入住登记.png

入住管理.png

学生编辑.png

学生管理.png

学生入住登记.png

学生入住管理.png

学生退宿管理.png

主页.png

avatar
文章
阅读
粉丝