作者主頁：編程千紙鶴

作者簡介：Java、前端、Pythone開發多年，做過高程，項目經理，架構師

主要內容：Java項目開發、畢業設計開發、面試技術整理、最新技術分享

一，項目簡介

目前整個社會經濟和生活，都嚴重依賴于互聯網，如果沒有了互聯網和信息化技術的應用，市場可能會一蹶不振，嚴重影響經濟的發展水平，影響人們的生活質量。計算機的發展，不管是從硬件還是軟件，都有很多技術儲備，每年都有很多的技術和軟件產生，縱觀各個領域，無一不用互聯網軟件，辦公用的還是電腦居多，但是人手一臺智能設備已經變成了現在人們的生活日常，哪怕的普通的老百姓都成了上知天文下知地理的所在，這些都依賴于互聯網技術。互聯網技術在信息的傳播方面是巨大的，而信息的處理就變成了各種產業管理者和維護者的重任。人們已經習慣了互聯網的存在，所以經常操作一些互聯網產品變成了日常，所以開發一個高校公寓管理系統，讓人們使用是沒有一點問題的，并且在這個過程中不僅能夠規范高校公寓信息管理的使用流程還有信息處理流程，也能讓整個信息的傳播處理，都存在一種可控制的范圍。

當開發軟件變成了一個潮流之后，會發現不管任何行業都能開發適合自己的軟件，不管是內部員工管理，還是財務管理，甚至業務管理都可以數據化，并且可以對這些數據集中處理，進而根據數據處理結果就自然而然的提高了管理水平，最重要的是，開發一個軟件投入使用，開發過程其實就是梳理行業痛點的過程，就是讓軟件來彌補行業的管理漏洞，不斷的優化事物的處理流程。學生公寓管理系統就是一款專門開發的軟件，通過Web技術，讓使用者可以在任何一臺智能設備上面通過瀏覽器進行操作使用，對數據的處理不在局限于地域距離，只要軟件開發到位，使用起來方便，達到預期目的，會發現有軟件和沒有軟件的區別是很大的，有了這款軟件之后，會發現數據的存儲安全方面，比起之前的滿屋尋找記錄的優勢是多么的巨大。

?本系統以VSCODE為開發工具，運用mongodb數據庫技術，開發了一個學生公寓管理系統。此系統實現的功能具體如下:
?? 1.用戶登錄功能：用戶通過登入界面輸入用戶名稱和登錄密碼，經過身份驗證模塊識別用戶的合法性，然后查詢相關信息。用戶身份主要有系統管理員和學生兩個，不同的身份進入系統所操作的功能模塊不同。

?? 2.水電管理功能：該功能可以查收公寓的水電費繳納情況，提醒學生交費，并實現在線充值功能，通過支付寶沙箱實現在交繳費功能。
?? 3.公寓住宿人員管理功能：主要對公寓住宿人員進行信息的管理操作，主要包含公寓人員新增、查詢、修改和刪除操作。
?? 4.安全設施管理功能：主要對公寓配套的像消防器材等安全管理的設施信息進行基本的管理功能。
?? 5.外來訪客管理功能：主要對外來到訪人員進行信息登記，以備查詢使用。

?? 6.宿舍報修管理：學生可以登陸系統進行報修，管理員在后臺對報修的信息進行管理，可以根據維修情況修改報修的狀態。

?? 7.宿舍樓管理功能：主要對宿舍樓信息進行管理，并指派宿舍管理人員。

?? 8.宿舍管理：主要對宿舍住宿情況進行管理，可以為宿舍添加住宿人員等，并指定宿舍長。?

二，環境介紹

語言環境：NODEJS

數據庫：mon

應用服務器：NODEJS

開發工具：VSCODE或IDEA

vue3+elementplus+vite+koa2+MongoDB

三，系統展示

5.1? 系統的實現平臺

學生公寓管理系統在系統從屬性應該屬于學校內部信息化建設平臺的一個組成部分，其中涉及到的用戶信息也可以來源于學校內部信息化平臺，也可以獨立作為一個用戶體系。目前我們所設計的用戶是獨立設計的，可以通地我們提供頁面登陸窗口登錄，登陸后即可根據不同身份來操作學生公寓管理系統中的不同業務模塊。系統所使用的數據庫應該與校內信息化平臺的后臺數據庫的相關數據保持同步，當信息平臺的用戶信息修改后，應該可以借助第三方組件比消息通信組件RabbmitMQ或Cancal等組將信息同步到本系統數據庫。

??? 本部分主要介紹一下系統運行的環境要求，以及具體實現的相關功能模塊實現的功能介紹及UI界面展示。

5.2? 管理員功能模塊的實現

??? 學生公寓管理系統登陸界面。系統分為二類用戶，分別是管理員、學生，用戶登陸時選擇自己賬戶對應的身份，提交信息到后臺驗證，驗證通過后即可實現和目前身份匹配的相關功能模塊的使用。為了安全起見，本登陸操作增加了圖形驗證碼，通過驗證碼可以防止惡意登陸，驗證碼校驗通過后，才會校驗賬戶信息。

圖5.1 學生公寓管理系統主界面

5.2.1? 系統管理主頁

??? 本次所設計的學生公寓管理系統，為方便對學生、宿舍、水電費等的相關統計，直觀的了解目前學校各宿舍的相關的業務數據。具體展示效果如下圖5.2所示：

圖5.2 管理首頁主界面

5.2.2? 水電費管理模塊

學生公寓管理系統中水電費管理模塊的實現，它的基本功能是查詢管理各宿舍所使用的水電費的信息，并實現在線繳費的功能。首先查詢到各宿舍目前水電費充值情況，然后提醒宿舍進行及時充值。具體展示如下圖5.3、圖5.4所示：

圖5.3 電費信息管理主界面

圖5.4 水費信息管理界面

5.2.3? 宿舍人員信息模塊

學生公寓管理系統中對于在校公寓住宿人員信息管理功能的實現，主要管理本校在校公寓住宿人員的相關信息。首先查詢到所有在校住宿的學員，將其信息查詢并以分頁形式在前端頁面進行展示，并且能對住宿學生的人信息進行添加、搜索等管理操作。具體展示如下圖5.5所示：

圖5.5 住宿人員管理界面

5.2.4? 安全設施信息管理模塊

學生公寓管理系統中安全設施信息管理模塊的實現，它的基本功能是查詢管理修改宿舍樓中配置的安全設施信息。首先查詢到所有安全配置設施信息以分頁形式進行展示，并且能對安全設施信息進行添加查詢等管理。具體展示如下圖5.6所示：

圖5.6 安全設施信息管理界面

5.2.5 訪客信息管理模塊

學生公寓管理系統中來訪人員信息管理模塊的實現，它的基本功能是查詢管理修改外來人員的到訪信息。首先查詢到所有到訪問登記信息以分頁形式進行展示，并且能對到訪信息進行相關管理。具體展示如下圖5.7所示：

圖5.7 訪客信息管理界面

5.2.6? 報修信息模塊

學生公寓管理系統中報修信息管理模塊的實現，它的基本功能是查詢管理修改各宿舍上報的報修信息。首先查詢到所有報修信息以分頁形式進行展示，并且能對報修信息進行修改刪除等管理。根據維修情況來修改報修的維修狀態，并根據是否人為損壞來確定宿舍人員支付的維修金額。具體展示如下圖5.8、5.9所示：

圖5.8 報修信息管理界面

圖5.9 報修狀態修改界面

5.2.7? 宿舍樓管理信息模塊

學生公寓管理系統中對各學生住宿的宿舍樓管理模塊的實現，它的基本功能是查詢管理各宿舍樓的基本信息。首先查詢到所有宿舍樓信息以分頁形式進行展示，并且能對各宿舍樓信息進行添加、修改和刪除等管理。具體展示如下圖5.10、5.11所示：

圖5.10宿舍樓管理界面

圖5.11宿舍樓添加界面

5.2.8? 宿舍信息模塊

在本次開發設計的學生公寓管理系統中，對學生公寓信息進行相關管理的實現，它的基本功能是查詢管理修改宿舍的基本信息。首先查詢到所有宿舍信息以分頁形式進行展示，并且能對宿舍信息進行增加、修改、刪除和搜索等管理。具體展示如下圖5.12所示：

圖5.12 宿舍信息管理界面

四，核心代碼展示

const buildModel = require('../../models/build') const getAllBuildList = async ctx => {await buildModel.find({}).then((res) => {ctx.body = { code: 200, msg: "查詢所有樓宇成功", data: res }}) } const addBuild = async ctx => {const addData = ctx.request.bodyawait buildModel.create(addData).then(() => {ctx.body = { code: 200, msg: "添加新樓宇成功", result: true }}).catch(() => {ctx.body = { code: 400, msg: "添加新樓宇失敗", result: false }}) } const removeBuild = async ctx => {const removeData = ctx.request.bodyconsole.log(removeData)await buildModel.findOneAndRemove(removeData).then(() => {ctx.body = { code: 200, msg: "刪除樓宇成功", result: true }}).catch(() => {ctx.body = { code: 200, msg: "刪除樓宇成功", result: false }}) } module.exports = {getAllBuildList,addBuild,removeBuild }

const dormModel = require('../../models/dorm') const studentModel = require('../../models/student') const addDorm = async ctx => {const addData = ctx.request.bodyawait dormModel.findOne({ code: addData.code }).then(async (res) => {if (res && res.belongTo === addData.belongTo) {ctx.body = { code: 200, msg: '該宿舍已存在', result: false }}else {await dormModel.create(addData).then(() => {ctx.body = { code: 200, msg: '新增宿舍成功', result: true }})}}) } const getAllDormList = async ctx => {await dormModel.find({}).then(async (res) => {ctx.body = { code: 200, msg: "獲取所有寢室信息成功", data: res }}) } const getDormPersonnel = async ctx => {const { userIdList } = ctx.request.bodyconst result = []return new Promise((resolve, reject) => {userIdList.forEach(async (user_id, index) => {await studentModel.find({ user_id }).then((res) => {result.push(res[0])})if (index === userIdList.length - 1) {resolve()}})}).then(() => {return ctx.body = { code: 200, msg: '獲取寢室成員信息成功', data: result }}) } const addUserToDorm = async ctx => {const addData = ctx.request.bodyawait dormModel.findById({ _id: addData.toDormId }).then(async (res) => {await dormModel.updateOne({ _id: addData.toDormId }, { personnel: [...res.personnel, ...addData.addUserId] }).then(async () => {await studentModel.findOneAndUpdate({ user_id: addData.addUserId }, { dorm: res.code, building: res.belongTo }).then(() => {console.log(res)ctx.body = { code: 200, msg: '添加學生至宿舍成功', result: true }})})}) } const removeUserToDorm = async ctx => {const removeData = ctx.request.bodyawait dormModel.findById({ _id: removeData.dormId }).then(async (res) => {const personnel = res.personnelconst removeIndex = res.personnel.indexOf(removeData.userId)personnel.splice(removeIndex, 1)await dormModel.updateOne({ _id: removeData.dormId }, { personnel: res.personnel }).then(async () => {await studentModel.findOneAndUpdate({ user_id: removeData.userId }, { dorm: '無', building: '無' }).then(() => {ctx.body = { code: 200, msg: '該學生從宿舍中刪除成功', result: true }})})}) } const deleteDorm = async ctx => {const deleteData = ctx.request.bodyvar personnel = []await dormModel.findOne({ code: deleteData.code, belongTo: deleteData.belongTo }).then(async (res) => {personnel = res.personnelawait dormModel.deleteOne({ code: deleteData.code, belongTo: deleteData.belongTo }).then(() => {return new Promise((resolve, reject) =>personnel.forEach(async (user_id, index) => {await studentModel.findOneAndUpdate({ user_id }, { dorm: '無', building: '無' })if (index === personnel.length - 1) {resolve()}})).then(() => {ctx.body = { code: 200, msg: "刪除宿舍成功", result: true }})})}) } const changeDormAdmin = async ctx => {const changeData = ctx.request.bodyawait dormModel.findByIdAndUpdate({ _id: changeData._id }, { admin: changeData.admin }).then(() => {ctx.body = { code: 200, msg: "修改寢室長成功", result: true }}) } const getDormByBuild = async ctx => {const building = ctx.query.buildingconsole.log(building)await dormModel.find({ belongTo: building }).then((res) => {ctx.body = { code: 200, msg: '獲取樓宇對應宿舍成功', data: res }}) } module.exports = {addDorm,getAllDormList,getDormPersonnel,addUserToDorm,removeUserToDorm,deleteDorm,changeDormAdmin,getDormByBuild } const facilitiesModel = require('../../models/facilities') const handleTime = require('../../../tools/O').timeHandler const addFacilitiesInspectTerm = async ctx => {addData = ctx.request.bodyaddData.inspectTime = handleTime()await facilitiesModel.create(addData).then(() => {ctx.body = { code: 200, msg: "添加檢查設施信息成功", result: true }}).catch(() => {ctx.body = { code: 400, msg: "添加檢查設施信息失敗", result: false }}) } const getFacilitiesInepectData = async ctx => {await facilitiesModel.find({}).then((res) => {ctx.body = { code: 200, msg: "獲取公寓檢查設施表成功", data: res }}) }module.exports = {addFacilitiesInspectTerm,getFacilitiesInepectData } const repairModel = require('../../models/repair') const getAllRepairFormList = async ctx => {await repairModel.find().then((res) => {ctx.body = { code: 200, msg: "獲取用戶報修單成功", data: res }}) } const deleteRepair = async ctx => {const deleteData = ctx.request.bodyawait repairModel.findOneAndDelete({ deleteData }).then(() => {ctx.body = { code: 200, msg: "刪除保修單成功", result: true }}) } const changeRepairState = async ctx => {const changeData = ctx.request.bodyawait repairModel.findByIdAndUpdate({ _id: changeData._id }, changeData).then(async () => {ctx.body = { code: 200, msg: "改變保修單狀態成功", result: true }}).catch(err => {console.log(err)ctx.body = { code: 200, msg: "改變保修單狀態失敗", result: false }}) } module.exports = {getAllRepairFormList,deleteRepair,changeRepairState }

前端頁面

<template><div class="build"><div class="build-list"><div class="title"><div class="left-title"><p>公寓樓宇表</p><el-button type="primary" @click="activeAddUserCheckBoxEvent">添加</el-button><el-button type="primary" @click="refreshBuildListEvent">刷新</el-button></div><el-inputclass="search-input"type="text":suffix-icon="Search"placeholder="請輸入你要搜索的內容"v-model="data.buildSearchKeyWord"@input="searchRepairListEvent"></el-input></div><el-table stripe border :data="VuexData.allBuildList" style="width: 100%"><el-table-columnproperty="name"label="樓宇名稱"show-overflow-tooltipwidth="120"/><el-table-columnproperty="admin"label="負責人"show-overflow-tooltipwidth="200"/><el-table-columnproperty="sex"label="性別"show-overflow-tooltipwidth="200"/><el-table-column property="phonenumber" label="聯系電話" /><el-table-column width="120" fixed="right" label="操作"><template #default="scope"><el-buttontype="primary"size="small"@click="deleteBuildEvent(scope.row)">刪除</el-button></template></el-table-column></el-table></div><el-dialog v-model="data.activeAddBuild" title="添加樓宇" width="40%"><el-formref="ruleFormRef":model="ruleForm"status-icon:rules="rules"label-width="120px"class="demo-ruleForm"><el-form-item label="樓宇名" prop="name"><el-inputv-model="ruleForm.name"type="text"placeholder="請輸入樓宇名"autocomplete="off"/></el-form-item><el-form-item label="樓宇管理員：" prop="admin"><el-inputv-model="ruleForm.admin"type="text"placeholder="請輸入樓宇管理員名字"autocomplete="off"/></el-form-item><el-form-item label="管理員性別" placeholder="請選擇性別" prop="sex"><el-selectv-model="ruleForm.sex"class="m-2"placeholder="管理員性別"prop="sex"><el-optionv-for="i in ['男', '女']":key="i":label="i":value="i"></el-option></el-select></el-form-item><el-form-item label="管理員手機號" prop="phonenumber"><el-inputv-model="ruleForm.phonenumber"type="text"placeholder="請輸入管理員手機號"autocomplete="off"/></el-form-item><el-form-item><el-button type="primary" @click="postBuildData">提交</el-button><el-button @click="resetForm(ruleFormRef)">重置</el-button></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="data.activeAddBuild = false">關閉</el-button><el-button type="primary" @click="postBuildData">提交</el-button></span></template></el-dialog></div> </template><script lang="ts" setup> import { Search } from "@element-plus/icons-vue"; import message from "element-plus/es/components/message"; import { reactive, ref, onMounted } from "vue"; import { ElMessage, ElTable, ElMessageBox } from "element-plus"; import { useStore } from "vuex"; import O from "../../tools/O"; import type { FormInstance } from "element-plus"; interface User {date: string;name: string;address: string; } const store = useStore(); const multipleTableRef = ref<InstanceType<typeof ElTable>>(); const multipleSelection = ref<User[]>([]); const VuexData = reactive({allBuildList: store.state.vx_admin.allBuildList, }); const refreshBuildListEvent = () => {VuexData.allBuildList = store.state.vx_admin.allBuildList;ElMessage({message: "刷新成功",type: "success",}); }; const data = reactive({buildSearchKeyWord: ref(""),activeAddBuild: ref(false), }); const activeAddUserCheckBoxEvent = () => {data.activeAddBuild = true; }; const searchRepairListEvent = () => {if (data.buildSearchKeyWord.trim() === "") {return (VuexData.allBuildList = store.state.vx_admin.allBuildList);}VuexData.allBuildList = VuexData.allBuildList.filter((repair) => {return (repair.name.includes(data.buildSearchKeyWord) ||repair.sex.includes(data.buildSearchKeyWord) ||repair.admin.includes(data.buildSearchKeyWord) ||repair.phonenumber.includes(data.buildSearchKeyWord));}); }; const ruleFormRef = ref<FormInstance>();const checkAddInspectData = (rule: any, value: any, callback: any) => {if (!value) {return callback(new Error("該項不能為空"));}callback(); };const ruleForm = reactive({name: "",sex: "",phonenumber: "",admin: "", });const rules = reactive({name: [{ validator: checkAddInspectData, trigger: "blur" }],sex: [{ validator: checkAddInspectData, trigger: "blur" }],phonenumber: [{ validator: checkAddInspectData, trigger: "blur" }],admin: [{ validator: checkAddInspectData, trigger: "blur" }], });const resetForm = (formEl: FormInstance | undefined) => {if (!formEl) return;formEl.resetFields(); }; const postBuildData = () => {store.dispatch("vx_admin/addBuild", ruleForm).then((res) => {ElMessage({message: res.msg,type: res.result ? "success" : "error",});data.activeAddBuild = false;VuexData.allBuildList = store.state.vx_admin.allBuildList;}); }; const deleteBuildEvent = (removeData: Object) => {store.dispatch("vx_admin/deleteBuild", removeData).then((res) => {ElMessage({message: res.msg,type: res.result ? "success" : "error",});VuexData.allBuildList = store.state.vx_admin.allBuildList;}); }; onMounted(async () => {await store.dispatch("vx_admin/getAllBuildList").then((res) => {VuexData.allBuildList = res.data;}); }); </script><style lang='scss' scoped> .build {width: 90%;margin: 0 auto;margin-top: 50px;box-shadow: 0 0 10px 5px #e8e8e8;border-radius: 20px;.title {display: flex;justify-content: space-between;align-items: center;.left-title {display: flex;justify-content: flex-start;align-items: center;}button {margin-left: 20px;}.search-input {width: 300px;}}.build-list {padding: 20px;> div:not(:first-child) {margin-top: 40px;}.title {font-size: 18px;}.pay-electric-box {margin-top: 20px;display: flex;justify-content: flex-start;align-items: center;> div:not(:first-child) {margin-left: 20px;}.floor {color: #000;font-size: 16px;}.electric-surplus {color: #d63031;}.used-electric {color: #b2bec3;}}.pay-history {.title {display: flex;justify-content: flex-start;align-items: center;button {margin-left: 20px;}}.history-box {margin-top: 20px;}}} } </style>

五，項目總結

數據庫設計

從需求分析可以看出，本系統存在以下幾個實體：

管理員實體：主要存儲管理員登陸的賬戶和密碼

宿舍類實體：主要存儲宿舍樓名稱、管理員、性別、電話號碼

訪客登記實體：用于存儲來訪人、來訪時間、登記管理員、來訪宿舍等。

宿舍實體：用于存儲宿舍編號、管理員、人員信息（集合）、人員詳情信息（集合）、水電費信息等。

水電費支付記錄實體：用于支付人、類型、金額、時間等。

報修實體：用于存儲報修類型、時間、人員、位置、問題及描述等。

維修實體：用于存儲維修設施的名字、所屬宿舍類、宿舍編號、金額、損壞原因等。

學生實體：用于存儲學生姓名、姓別、編號、專業、班級、所屬宿舍、密碼 、宿舍樓、學號等。

總結

以上是生活随笔為你收集整理的Node+Vue实现高校公寓管理系统设计与开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。