小程序做的机房信息管理系统

机房管理微信小程序

这是一个纯前端实现的机房管理微信小程序，专为课程设计、毕业设计或小型内部管理场景打造。项目代码简洁、结构清晰，易于理解和扩展。

功能介绍

本小程序包含三大核心管理模块，由一个统一的管理员角色进行操作。

1. 管理员登录

   • 提供一个固定的登录界面。
   • 管理员账号：admin
   • 管理员密码：admin

2. 机房管理

   • 列表展示：以列表形式展示所有机房信息（如：机房名称、容量）。
   • 添加机房：可以添加新的机房信息。
   • 编辑机房：可以修改已有机房的信息。
   • 删除机房：可以删除指定的机房。

3. 电脑管理

   • 列表展示：展示所有电脑信息（如：电脑编号、所属机房、状态）。
   • 添加电脑：可以录入新电脑，并将其分配到已有的机房。
   • 编辑电脑：可以修改电脑的信息。
   • 删除电脑：可以删除电脑信息。

4. 学生管理

   • 列表展示：展示所有学生信息（如：姓名、学号）。
   • 添加学生：可以录入新的学生信息。
   • 编辑学生：可以修改学生的信息。
   • 删除学生：可以删除学生信息。

技术实现

• 纯前端：整个小程序没有后端服务，所有逻辑均在小程序内部完成。
• 全局数据：使用小程序 app.js 的 globalData 作为内存数据库，用于存储、更新和删除所有管理数据。应用关闭后数据会重置。
• 模块化页面：每个功能模块（机房、电脑、学生）都拥有自己独立的列表页和表单页，结构清晰。

创作过程

1. 需求分析：明确了管理员、机房管理、电脑管理、学生管理四大核心需求，并确定了纯前端、全局变量存储的技术方案。
2. 项目结构设计：
   • app.js: 定义全局数据结构（机房、电脑、学生列表）和初始数据。
   • pages/login: 实现管理员登录功能。
   • pages/index: 作为登录后的主菜单/仪表盘。
   • pages/lab: 存放机房管理的列表页和表单页。
   • pages/computer: 存放电脑管理的列表页和表单页。
   • pages/student: 存放学生管理的列表页和表单页。
3. 页面开发：
   • 使用 WXML 和 WXSS 构建静态页面布局。
   • 使用 JavaScript 实现页面逻辑，包括数据绑定、事件处理（增、删、改、查）。
   • 数据交互：所有页面的数据操作都通过 getApp().globalData 来读取和修改全局数据。
   • 页面通信：
     • 列表页跳转到表单页时，通过 URL query 参数传递 id 来区分是"新增"还是"编辑"。
     • 表单页完成操作后，使用 wx.navigateBack() 返回列表页。
     • 列表页使用 onShow 生命周期函数来监听页面的显示事件，每次返回列表页时都重新从 globalData 获取最新数据并刷新列表，确保数据同步。
4. 功能完善：添加了如删除前的确认提示 (wx.showModal)、操作后的成功提示 (wx.showToast) 等，提升了用户体验。
5. 文档编写：最后，创建此 readme.md 文件，记录项目的功能和实现细节。