基于Vue社区信息管理系统的设计与实现

需求分析2.1需求概括社区信息管理系统能够大大优化社区管理员的工作，同时为居民信息的存储、管理、查询提供更加安全、高效、便捷的操作方式，实现其对人口，楼栋，设备，车位的管理，将社区内的设施，服务，信息互联互通。将对社区设备能够精准落实的相关维护人员，避免出现由于安排不即使导致设备一直处于损坏状态。2.2总体需求根据社区管理的实际需求，考虑系统软件的实用性和稳定性以及简便性。总结了整个系统的使用流程和功能需求，以便对整个系统的架构有个初步的认识与搭建。2.2.1整体操作流程需求超级管理员或者管理员通过输入正确的账号与密码可以登录进入到社区信息理系统中。具体使用流程由图2.1所示。图2.1整体操作流程示意图2.2.2整体功能模块需求对于社区信息管理系统，要实现管理人员的登录，居民人口的管理，对居民信息的增删改查归档，楼栋管理，设备管理，车位管理，设置这几大功能模块。整体功能模块架构如图2.2所示。图2.2整体功能结构图①登录模块登录功能是系统的重要功能之一。登录可以让系统知道用户是谁，从而精准调取相应的信息去展示给用户。在登录功能中管理人员使用账号和密码进行登录，登录成功后进入系统首页。②首页在系统首页利用可视化技术展示社区相关的信息。③人口管理模块人口管理模块中包括了对居民信息的增删改查。1）点击新增或编辑，在新增/编辑页面输入居民的详细信息后点击保存会新增/修改一条居民信息。2）点击详情，跳转进入居民信息详情页面，在详情页面可以查看居民的详细信息。3）点击注销，填写注销理由会注销当前居民的信息，并存入归档信息中。4）在搜索框内输入姓名或者身份证号，点击搜索按钮，将搜索出来的数据信息展示在表格内。6）点击已归档，会跳转到归档界面，其实现删除，查看详情功能。④楼栋管理模块楼栋管理模块包括为楼栋管理与楼栋管理员两个部分。1）在楼栋管理页面中，点击新增，跳转到新增/编辑页面可以新增楼栋相关信息以及是否添加管理员。点击编辑，跳转到新/增编辑页面修改当条信息中的内容。点击删除，会删除当条信息。2）在楼栋管理员页面，点击新增，会弹出信息框填写具体信息，点击保存，会增加楼栋管理员且存入数据库，弹窗消失，楼栋管理员信息显示到界面上。点击移除，会弹出提示框，点击确定可以移除当前楼栋管理员。点击设置角色，可以修改当前管理员角色同时页能修改其它信息。⑤设备管理分为设备信息与报修信息。1）设备信息中展示的是公共设备信息，其中点击每一条信息的详情可以跳转到详情页看见该设备的所有信息，还有维修记录。点击新增会跳转到新增界面，填写设备相关信息后，点击保存会往数据库中增加该设备信息，点击编辑可以修改当前设备的信息。点击删除可以删掉该设备信息，同时也会删掉数据库里面的信息。2）报修信息中展示的是居民的报修，表格内会按更新时间的顺序展示所有的报修记录，点击编辑可以修改状态。同时可以通过自由组合筛选条件搜索需要的信息。⑥车位管理分为数据统计，车位管理和车库管理。1）数据统计是通过可视化技术，对车位，车库信息，年租与月租进行统计分析。2）车位管理中从后端请求的数据展示了所有车位信息，拥有新增车位，编辑车位，删除车位，搜索车位的功能。其中在新增与编辑时车库名称要从车库表中已存在的车库筛选，车位区域要在已筛选出的车库名称所拥有的区域内选择，车主要从已有的居民信息表中筛选，支持边输入边筛选，同时将自动填入该居民的手机号码。2）车库管理中从后端请求的数据展示了所有车库信息，拥有新增车库，编辑车库，删除车库，搜索车库的功能，对车库的新增编辑删除修都会对数据库中的信息进行操作。⑦设置超级管理员可以进入设置界面，界面表格默认展示了所有管理员的信息，实现管理员新增，删除，手机号搜索功能。2.3产品原型设计根据任务要求，使用Axure软件对每个功能模块进行了原型图设计[8]，其主要目的是为了在整个系统完成过程中有更好的逻辑设计体系，后期编写代码的过程中可以更好的每个模块逐步完成。2.3.1登录模块原型图登录模块原型图如图2.3所示。图2.3登录模块原型图2.3.2首页原型图首页统计了住户总数量，房屋总数量，楼栋总数量，近一周报修趋势，常住居民与流动居民统计对比，设备报修，报修率相关统计，流动人口统计分析，迁入迁出统计对比分析。首页数据可视化原型图如图2.4所示。图2.4首页原型图2.3.3人口管理模块原型图人口管理原型图包括对人口的增删改查以及归档。人口管理主页原型图如图2.5所示。图2.5人口管理模块原型图居民新增原型图如图2.6-2.7所示。 图2.6居民新增原型图图2.7居民新增原型图居民编辑原型图如图2.8所示。图2.8居民编辑原型图居民详情原型图如图2.9所示。图2.9居民详情原型图注销居民原型图如图2.10所示。图2.10居民注销原型图归档人口原型图如图2.11所示。图2.11归档人口原型图删除归档人口原型图如图2.12所示。图2.12删除归档人口原型图归档人口详情原型图如图2.13所示。图2.13归档人口详情原型图2.3.4楼栋管理模块原型图楼栋管理原型图如图2.14所示。图2.14楼栋管理原型图新增楼栋原型图如图2.15所示。图2.15新增楼栋原型图编辑楼栋原型图如图2.16所示。图2.16编辑楼栋原型图删除楼栋信息原型图如图2.17所示。图2.17编辑楼栋信息原型图楼栋管理员原型图如图2.18所示。图2.18楼栋管理员原型图新增楼栋管理员如图2.19所示。图2.19新增楼栋管理员原型图编辑楼栋管理员如图2.20所示。图2.20编辑楼栋管理员原型图移除楼栋管理员原型图如图2.21所示。图2.21移除楼栋管理员原型图2.3.5设备管理模块原型图设备信息原型图如图2.22所示。图2.22设备信息原型图新增设备信息原型图如图2.23所示。图2.23新增设备信息原型图编辑设备信息原型图如图2.24所示。图2.24编辑设备信息原型图设备详情原型图如图2.25所示。图2.25设备详情原型图报修信息原型图如图2.26所示。图2.26报修信息原型图新增报修信息原型图如图2.27所示。图2.27新增报修信息原型图编辑报修信息原型图如图2.28所示。图2.28编辑报修信息原型图2.3.6车位管理模块原型图车位管理原型图如图2.29所示。图2.29车位管理原型图新增车位信息原型图如图2.30所示。图2.30新增车位信息原型图编辑车位信息原型图如图2.31所示。图2.31编辑车位信息原型图车库管理原型图如图2.32所示。图2.32车库管理原型图新增车库信息原型图如图2.33所示。图2.33新增车库信息原型图数据统计原型图如图2.34所示。图2.34数据统计原型图2.3.7设置模块原型图设置模块原型图如图2.35所示。图2.35设置模块原型图新增管理员原型图如图2.36所示。图2.36新增管理员原型图2.4本章小结本章主要介绍了本次课题任务的需求概述、总体需求，并对同时对产品原型进行了分块设计，并对每个模块做了详细的原型图设计方便界面的实现。

3系统的设计与实现3.1系统的总体设计系统的总体设计包括系统的总体架构，系统的首页展示。3.1.1系统的总体架构根据功能需求分析，本系统将采用Vue相关技术设计pc端界面，Nodejs相关技术设计后端接口，MongoDB数据库存储数据[10]，超级管理员或者管理员可以通过账号和密码进入本系统，对居民信息，楼栋信息，设备信息，车位信息等进行操作，同时给超级管理员和管理员设置了不同的权限，区分了可操作内容。表现层，业务逻辑层，数据访问层，基础服务是本课题的主要架构体系，系统的架构图如图3.1所示。图3.1系统架构图3.1.2系统的首页界面系统的首页界面图如图3.2所示。图3.2系统首页图3.2系统模块设计①登录模块登录功能是是判断一个系统安全性的因素之一。本系统设置了两类用户，第一类是超级管理员，这一类用户是早已设置好，可以直接使用账号和密码登录进入系统首页；第二类是管理员，他们需要从超级管理员那里拿到账号和密码登录进入系统首页。①首页当管理员或者超级管理员成功登录系统之后，会进入到系统的首页。首页对本社区的住户总数量，房屋总数量，楼栋总数量，公共设备总数量的数据进行了呈现，利用ECharts图表可视化技术[11]，对近一周报修数量变化通过折线图显示，对社区常住人口与流动人口通过饼状图进行对比，对设备报修进行数据统计分析，对流动人统计分析，对迁入迁出人口统计。其首页部分关键代码如下所示。//报修总数，已处理，待处理，处理中，处理率

repairCount(){

get('/api/repair/getRepairInfoList').then((res)=>{

//报修总数

this.repairTotal=res.data.length

//待处理

constwaitHandle=res.data.filter((p)=>{

returnp.handleStatus==='待处理'

})

this.waitHandle=waitHandle.length

//处理中

constinHandle=res.data.filter((p)=>{

returnp.handleStatus==='处理中'

})

this.inHandle=inHandle.length

//已处理

consthasHandle=res.data.filter((p)=>{

returnp.handleStatus==='已处理'

})

this.hasHandle=hasHandle.length

this.handleRate=

(

(this.inHandle+this.hasHandle)/

this.repairTotal

).toFixed(4)*100

})

},

//住户总数,房屋总数，楼栋总数，设备总数

firstTotal(){

//住户总数

get('/api/resident/getResidentList').then((res)=>{

this.populationTotal=res.data.length

})

//房屋总数

//楼栋总数

get('/api/build/getBuildList').then((res)=>{

this.buildingTotal=res.data.length

letcount=0

for(leti=0;i<res.data.length;i++){

count+=res.data[i].houseTotal

}

this.houseTotal=count

})

//设备总数

get('/api/equipment/getEquipmentInfoList').then((res)=>{

this.equipmentTotal=res.data.length

})

},//获取近七天日期

getStandardDateBeforeWeek(){

letdates=[]

//获取当前日期

letnow=newDate()

//循环获取最近7天的日期

for(leti=0;i<7;i++){

//获取当前日期的时间戳

lettimestamp=now.getTime()

//计算i天前的时间戳

letdayTimestamp=24*60*60*1000//一天的毫秒数

letiDayAgoTimestamp=timestamp-i*dayTimestamp

//转换为日期对象

letdate=newDate(iDayAgoTimestamp)

//格式化日期为"yyyy-MM-dd"的字符串并存入数组

letmonth=('0'+(date.getMonth()+1)).slice(-2)

letday=('0'+date.getDate()).slice(-2)

dates.unshift(month+'-'+day)

}

this.dates=dates

},③人口管理人口管理指的是对居民信息进行管理，提供增删改查的一系列操作。1）新增居民信息，点击新增后会进入新增居民信息界面，填写居民的详细信息后，进行保存，会在数据库中新增本居民信息。对于新增居民信息的基本流程如图3.3所示。图3.3新增居民信息流程图2）编辑居民信息，点击编辑后会进入新增/编辑信息界面，修改居民所需修改的信息后，进行保存，会在数据库中修改本居民信息。对于修改居民信息的基本流程如图3.4所示。前端实现新增与编辑页复用关键代码如下所示。//编辑时初始化数据residentInit(){

//判断是否路径上携带参数，携带则说明是要编辑数据

console.log(this.$route.query)

if(this.$route.query?._id){

const{_id}=this.$route.query

post('/api/resident/getInfo',{_id}).then((data)=>{

if(data.error===0){

this.ruleForm=data.data

this.filterAttribute(this.ruleForm,this.ruleForm1)

this.filterAttribute(this.ruleForm,this.ruleForm2)

}else{

console.log('请求出错了')

}

})

}

},//提交新增或者修改的信息submit(){

this.ruleForm={...this.ruleForm1,...this.ruleForm2}

constdata=this.ruleForm//修改信息

if(this.$route.query._id){

constid=this.$route.query._id

patch('/api/resident/updateResident',{

id,

data

}).then((result)=>{

if(result.error===0){

this.$notify({

title:'成功',

message:'修改信息成功',

type:'success'

})//成功1s后自动跳转

setTimeout(()=>{

this.$router.go(-1)

},1000)

}else{

this.$notify.error({

title:'错误',

message:'修改信息失败'

})

}

})

}else{

//新增信息时

post('/api/resident/addResident',data).then((result)=>{

if(result.error===0){

this.$notify({

title:'成功',

message:'新增居民信息成功',

type:'success'

})//成功1s后自动跳转

setTimeout(()=>{

this.$router.go(-1)

},1000)

}else{

this.$notify.error({

title:'错误',

message:'新增居民信息失败'

})

}

})

}图3.4修改居民信息流程图3）注销该居民信息，点击注销，会触发弹窗，在弹窗内点击确定会删除该居民信息，点击取消弹窗消失，未删除该居民信息。对于删除居民信息的基本流程如图3.5所示。图3.5注销居民信息流程图4）点击详情，跳转进入详情界面，展示该居民的基本信息与家庭成员。5）在搜索框内输入姓名或者身份证号，点击搜索按钮，将搜索出来的数据信息展示在表格内。搜索空内容则会展示所有居民信息。对于搜索的基本流程如图3.6所示。图3.6搜索流程图6）点击已归档，会跳转到归档页面，里面存放着从居民信息中被注销的信息，可能是由于居民迁出，或者死亡而被存入归档。在归档页面，同时也拥有查看详情，彻底删除信息，根据身份证号或者姓名搜索的功能。④楼栋管理楼栋管理模块包括为楼栋管理与楼栋管理员两个部分。1）在楼栋管理页面中，点击新增，跳转到新增/编辑页面可以新增楼栋相关信息以及是否添加管理员，之后点击保存会往数据库中增加该楼栋信息。对于新增楼栋信息的基本流程如图3.7所示。图3.7新增楼栋信息流程图2）在楼栋管理页面中，点击编辑，会跳转到新增/编辑页面修改当条信息中的内容，之后点击保存会修改数据库中该条信息。对于编辑楼栋信息的基本流程如图3.8所示。新增与编辑时生成房间号的关键代码如下所示。//判断是哪种类型的房栋

handleDecide(data){

consthouses=[]

if(data.houseType==='两梯四户'||data.houseType==='四梯四户'){//根据户型自动生成房间号

for(leti=1;i<=data.floor;i++){

for(letj=1;j<=4;j++){

lethouse=`${i}0${j}`

houses.push(house)

}

}

}elseif(data.houseType==='两梯六户'||data.houseType==='四梯六户'){//根据户型自动生成房间号

for(leti=1;i<=data.floor;i++){

for(letj=1;j<=6;j++){

lethouse=`${i}0${j}`

houses.push(house)

}

}

}

constbuilding=data.building

constcontent={building,houses}//发送请求增加楼栋房间号

post('/api/build/addHouse',content).then(res=>{

if(res.error===0){

console.log('成功');

console.log(res.data);

}

})

},//得到el-options选中值

hanleChange(val){

console.log(val)

constfilManager=this.managers.filter((p)=>{

returnp._id===val

})

this.ruleForm.telephone=filManager[0].telephone

this.ruleF=filManager[0].name

}图3.8新增楼栋信息流程图3）在楼栋管理页面中，点击删除，会弹出提示框，点击确定会删除当条信息，并从界面上移除。对于删除楼栋信息的基本流程如图3.9所示。图3.9删除楼栋信息流程图4）在楼栋管理员页面，点击新增，会弹出信息框填写具体信息，点击保存，会增加楼栋管理员且存入数据库，弹窗消失，楼栋管理员信息显示到界面上。点击移除，会弹出提示框，点击确定可以移除当前楼栋管理员。点击设置角色，可以修改当前管理员角色同时页能修改其它信息。⑤设备管理分为设备信息与报修信息，设备信息中展示的是公共设备信息，报修信息中展示的是居民的报修。在设备信息界面，点击新增会跳转到新增界面，填写设备相关信息，其中所在区域是根据楼栋信息选择的，点击保存会往数据库中增加该设备信息。对于新增设备信息的基本流程如图3.10所示。图3.10新增设备信息流程图2）在设备信息界面，点击编辑会跳转到编辑界面，修改设备相关信息后，点击保存会修改数据库中的该设备信息。其流程如图3.11所示。图3.11编辑设备信息流程图3）在设备信息界面，点击删除，会弹出提示框，点击确定会删除当条信息，并从界面上移除，删掉数据库里面的信息。其流程如图3.12所示。图3.12删除设备信息流程图4）在设备信息界面，点击详情可以跳转到详情页看见该设备的所有信息还有维修记录，还有维修记录。点击删除可以删掉该设备信息，同时也会删掉数据库里面的信息。5）报修信息界面中展示的是居民的报修，通过居民打电话告知管理员需要报修设备的信息，管理员会对报修信息进行新增，通知或联系维修人员进行维修，并跟踪处理状态点击编辑可以修改状态。对于新增报修信息的基本流程如图3.13所示。 图3.13新增报修信息流程图6）在报修信息界面点击编辑，信息会自动被填入对应地方，修改信息点击保存，信息存入数据库，并展示在界面上。其流程如图3.14所示。新增与编辑实现逻辑关键代码如下所示。//点击编辑

handleEdit(index,row){//出现遮罩

this.showMask=true

console.log(index,row)

const_id=row._id

//得到当条维修信息

post('/api/repair/getRepairInfo',{_id}).then((data)=>{

if(data.error===0){

this.filterAttribute(data.data,this.repairForm)

erForm=data.data

}else{

console.log('请求出错了')

}

})

},//点击新增

addRepair(){//初始化值为空

this.repairF=''

this.repairForm.telephone=''

this.repairForm.repairType=''

this.repairForm.address=''

this.repairForm.equipName=''

this.repairForm.equipNumber=''

this.repairForm.description=''

this.repairForm.repairTime=''

this.repairForm.handleStatus=''

this.showMask=true

},//保存asynchanlerConfirm(showMask){

//编辑报修

//使用了一个中间变量

this.showMask=showMask

const_id=erForm?._id

if(_id){

constdata={...this.repairForm}

awaitpatch('/api/repair/updateRepairInfo',{_id,data}).then(

(result)=>{

if(result.error===0){

this.$notify({

title:'成功',

message:'修改信息成功',

type:'success'

})

this.reload()

}else{

this.$notify.error({

title:'错误',

message:'修改信息失败'

})

}

}

)

}else{

//新增报修信息

constdata=this.repairForm

//console.log(data);

awaitpost('/api/repair/addRepair',data).then((result)=>{

if(result.error===0){

this.$notify({

title:'成功',

message:'新增报修信息成功',

type:'success'

})

this.reload()

}else{

this.$notify.error({

title:'错误',

message:'新增报修信息失败'

})

}

})

}

},图3.14修改报修信息流程图7）在报修界面的搜索功能，由3块组成，分别可以通过时间段筛选，处理状态筛选，设备名称筛选，同时也可以任意组合这几个条件来进行筛选，空白时搜索就是全部的报修信息。对于搜索报修信息的基本流程如图3.15所示。搜索逻辑实现的关键代码如下所示。//前端实现逻辑handlerSearch(){

letstartTime

letendTime

if(!this.value2){

startTime=''

endTime=''

}else{

startTime=this.value2[0]

endTime=this.value2[1]

}

constquery={

startTime,

endTime,

handleStatus:this.handleStatus,

equipName:this.input

}

console.log('参数：',query)

post('api/repair/getRepIListByKeywords',query).then((res)=>{

console.log('res:',res)

this.filtableData=res.data

})

},//后端实现逻辑/**

*根据筛选条件查询报修信息

*/asyncfunctiongetRepIListByKeywords(

startTime,

endTime,

handleStatus,

equipName){letquery

//三个条件都没有

if(!startTime&&!endTime&&!handleStatus&&!equipName){

query={}

}elseif(!startTime&&!endTime){

query={

$and:[

{

handleStatus:handleStatus

},

{

equipName:{$regex:equipName}

}

]

}}elseif(!handleStatus){

//任意两个都有

query={

$and:[

{

repairTime:{$gte:startTime,$lte:endTime}

},

{

equipName:{$regex:equipName}

}

]

}}elseif(!equipName){//任意两个都有

query={

$and:[

{

repairTime:{$gte:startTime,$lte:endTime}

},

{

handleStatus:handleStatus

}

]

}}else{//三个都有

query={

$and:[

{

repairTime:{$gte:startTime,$lte:endTime}

},

{

handleStatus:handleStatus

},

{

equipName:{$regex:equipName}

}

]

}

}

//查询单条报修信息

constres=awaitRepair.find(query)

returnres}图3.15搜索报修信息流程图⑥车位管理车位管理模块内分为数据统计，车位管理与车库管理。1）数据统计是通过可视化技术，对车库信息，车位信息，年租与月租进行统计分析。2）在车位管理页面展示了所有车位信息，点击新增会弹出一个输入面板，在面板内输入信息需要根据顺序输入，因为车位区域是根据选择了的车库进行选择的，它们之间存在着先后联动关系，手机号码会根据选择的业主自动填入。对于新增车位信息的基本流程如图3.16所示。图3.16新增车位信息流程图2）在车位管理页面点击编辑会弹出输入面板，进入编辑的输入面板会自动初始化该车位的信息在里面显示，修改编辑页的内容也需要按照顺序修改。对于编辑车位信息的基本流程如图3.17所示。新增与编辑车位时得到车库名称与车主相关联的内容的关键代码如下所示。

//获取所有车库信息

asyncgetGarageList(){

try{

awaitget('/api/garage/getGarageList').then((res)=>{

console.log(res)

if(res.error===0){

this.garages=res.data

}else{

console.log('出错了')

}

})

}catch(error){

console.log(error)

}

},//得到车库el-options选中值

hanleChange1(val){

console.log(val)

constfilAddress=this.garages.filter((p)=>{

returnp.carport===val

})

this.filAddress=filAddress

},

//获取焦点时触发

handleFocus(){

get('/api/resident/getResidentList').then((res)=>{

if(res.error===0){

this.owners=res.data

}else{

console.log('获取失败')

}

})

},

//得到业主el-options选中值

hanleChange2(val){

console.log(val)

constfilOwners=this.owners.filter((p)=>{

returnp._id===val

})

this.ruleForm.owner=filOwners[0]?.name

this.ruleForm.telephone=filOwners[0]?.telephone

}}图3.17编辑车位信息流程图3）在车位管理页面点击删除，会弹出提示框，点击确定可以成功删除该车位信息并从界面与数据库移除掉。⑦设置1）设置界面设置了使用权限，只有超级管理员可以进入设置界面，初始界面中表格展示了所有管理员的信息，点击新增可以跳转到新增界面新增管理员。对于新增管理员的基本流程如图3.18所示。图3.18新增管理员信息流程图2）点击删除可以删除本管理员，可以通过手机号筛选出你要查找的管理员。3.3数据库设计本系统采用MongoDB数据库，其MongoDB数据库主要优势有：①文档存储数据存储以BSON/JSON文档[11]，整个项目的数据表示可采用统一的模型。所有这一切都无需任何前期架构设计。②可扩展性MongoDB被用在一些规模庞大的环境中，通过分片数据缩放处理理论上可实现更高的吞吐量。③支持动态查询MongoDB支持丰富的查询表达式，可以实现复杂的数据查询需求。④灵活性MongoDB使用灵活的文档模型，不需要预先定义严格的数据结构，这使得MongoDB非常适合处理半结构化数据和非结构化数据总的来说，MongoDB数据库具有灵活、易用、高性能等优点，适用于各种需要处理大量数据的应用程序。3.3.1关系图通过前期的需求分析，确定表结构、各个表的字段、设计表与表之间的关系，通过powerdesigner设计出对应的数据库模型[12]。社区信息管理系统关系图如图3.19所示。图3.19社区信息管理系统关系图3.3.2数据字典本系统共有11张表，user表是登录用户表，resident表是居民信息表，building表楼栋信息表，manager表是楼栋管理员信息表，equipment表是公共设备信息表，repair表是报修信息表，worker表是维修人员信息表，filerecord表归档人员信息表，parking表是车位信息表，garage表是车库信息表，house表是房间信息表，表结构如表3.1-3.11所示。表3.1user表列名数据类型字段类型长度是否为空备注_idvarcharvarchar255否管理员idusernamevarcharvarchar11否用户名passwordvarcharvarchar10否密码namevarcharvarchar4否姓名imgUrlvarcharvarchar255否头像timeoutintegerinteger2否过期时间表3.2resident表列名数据类型字段类型长度是否为空备注_idvarcharvarchar255否居民信息idnamevarcharvarchar4否姓名sexvarcharvarchar1否性别agevarcharvarchar3否年龄nationvarcharvarchar6否民族birthdaydatedate否出生日期idCardvarcharvarchar18否身份证号marriagevarcharvarchar2否婚姻状况personTypevarcharvarchar2否常住/流动educationvarcharvarchar4否文化程度educationvarcharvarchar4否文化程度telephonevarcharvarchar11否手机号码villagevarcharvarchar4否小区buildingvarcharvarchar10否所属楼栋housevarcharvarchar5否房间号relationshipvarcharvarchar4否与户主关系politicalvarcharvarchar2否政治面貌joinTimevarcharvarchar10是加入时间partyBranchvarcharvarchar255否所属党支部表3.3building表列名数据类型字段类型长度是否为空备注_idvarcharvarchar255否楼栋信息idvillagevarcharvarchar4否小区floorintegerinteger2否楼层数buildingvarcharvarchar3否楼栋号houseTotalintegerinteger4否住房总数areavarcharvarchar255否建筑面积completiondatedate否建成日期namevarcharvarchar4否管理员姓名telephonevarcharvarchar11否手机号码表3.4manager表列名数据类型字段类型长度是否为空备注_idvarcharvarchar255否管理员idnamevarcharvarchar4否管理员姓名telephonevarcharvarchar11否手机号码rolevarcharvarchar6否角色foundervarcharvarchar4否创建人imgUrlvarcharvarchar255否头像表3.5equipment表列名数据类型字段类型长度是否为空备注_idvarcharvarchar255否公共设备idequipNumbervarcharvarchar255否设备编号equipNamevarcharvarchar255否设备名称brandvarcharvarchar255否设备品牌workervarcharvarchar4否维修人员addressvarcharvarchar255否地址statusvarcharvarchar2否正常/异常表3.6repair表列名数据类型字段类型长度是否为空备注续表3.6_idvarcharvarchar255否报修信息idequipNumbervarcharvarchar255否设备编号equipNamevarcharvarchar255否设备名称namevarcharvarchar4否报修人repairTypevarcharvarchar2否公共/私人addressvarcharvarchar255否地址descriptionvarcharvarchar255否故障描述handleStatusvarcharvarchar4否处理状态telephonevarcharvarchar11否手机号码repairTimedate否报修时间表3.7worker表列名数据类型字段类型长度是否为空备注_idvarcharvarchar255否公共设备idworkervarcharvarchar4否维修人telephonevarcharvarchar11否手机号码idCardvarcharvarchar18否身份证号表3.8filerecord表列名数据类型字段类型长度是否为空备注_idvarcharvarchar255否注销信息idnamevarcharvarchar4否姓名sexvarcharvarchar1否性别agevarcharvarchar3否年龄nationvarcharvarchar6否民族birthdaydatedate否出生日期idCardvarcharvarchar18否身份证号marriagevarcharvarchar2否婚姻状况personTypevarcharvarchar2否常住/流动educationvarcharvarchar4否文化程度telephonevarcharvarchar11否手机号码villagevarcharvarchar4否小区buildingvarcharvarchar10否所属楼栋续表3.8housevarcharvarchar5否房间号relationshipvarcharvarchar4否与户主关系politicalvarcharvarchar2否政治面貌joinTimevarcharvarchar10是加入时间partyBranchvarcharvarchar255否所属党支部reasonvarcharvarchar255否注销原因currentTimevarcharvarchar255否注销时间表3.9parking表列名数据类型字段类型长度是否为空备注_idvarcharvarchar255否车位信息idcarportvarcharvarchar10否车库名称addressvarcharvarchar10否车位地址parkNumbervarcharvarchar10否车位号areavarcharvarchar3否面积ownervarcharvarchar4否车主telephonevarcharvarchar11否手机号码表3.10garage表列名数据类型字段类型长度是否为空备注_idvarcharvarchar255否车库信息idcarportvarcharvarchar10否车库名称addressvarcharvarchar10否车位地址notesvarcharvarchar255否备注表3.11house表列名数据类型字段类型长度是否为空备注_idvarcharvarchar255否房间信息idbuildingvarcharvarchar10否楼栋名称housesvarcharvarchar10否房间号3.4本章小结本章是系统的设计与实现，主要由系统的总体设计，系统模块设计，数据库设计这几部分组成。在系统的总体设计中阐述了技术的选型，总体架构图以及系统的首页界面。在系统模块设计中，主要由登录，首页，楼栋管理，设备管理，设置几大模块组成，并对其中功能进行了详细地介绍，绘制出操作流程图。在数据库设计中介绍了本系统采用MongoDB数据库的优势[13]，关系图以及数据字典。

4系统测试4.1测试目的本系统使用的是VSCode开发工具，前端是基于Vue框架编写，后端采用的Nodejs+Koa2+MongoDB编写[14]，编译环境是Windows系统。软件测试的目的是确定当前软件可以在系统中正确运行，符合功能需求[15]。本系统采用黑盒测试方法，对系统的功能模块进行测试。4.2测试用例设计下面将从登录，首页，人口管理，楼栋管理，设备管理，设置这几个模块出发，分别测试每个功能模块正确实现其功能。4.2.1登录本系统设置了两类登录用户，第一类是超级管理员，第二类是管理员，他们只需要使用自己的账号与密码就能登录进入首页，并提示登录成功，否者会有失败提示。如表4.1和图4.1-4.2所示是登录界面的用例测试及结果。表4.1登录测试编号测试模块测试用例预期结果实际结果1登录功能账号码：admin提示登录成功，跳转到首页登录成功，跳转到首页2账号码：123登录失败，提示错误登录失败，提示错误图4.1登录测试1图4.2登录测试24.2.2首页首页实时展示了住户总数，房屋总数，楼栋总数，设备总数，常住与流动居民对比，设备报修总数，已处理报修数，待处理报修数，处理中报修数，以及报修处理率。如图4.3所示是首页界面的测试结果。图4.3首页测试4.2.3人口管理人口管理中需要实现对居民信息的新增，注销，查看详情，编辑，搜索，已归档的功能，其中编辑时会初始化数据，在已归档中要实现搜索，查看详情，删除的功能。如表4.2和如图4.4-4.15所示是人口管理模块的测试用例与测试结果。表4.2人口管理模块测试编号测试模块测试用例预期效果实际效果续表4.2编号测试模块测试用例预期效果实际效果1新增信息点击新增，填写居民信息，点击保存提示成功，并展示在人口管理界面提示成功，并展示在人口管理界面2查看详情点击李四的查看详情跳转到详情页，并展示相关信息跳转到详情页，并展示相关信息3编辑信息点击编辑，修改相关信息后，点击保存提示成功，并展示在人口管理界面提示成功，并展示在人口管理界面4人口管理界面搜索输入身份证或者姓名，点击搜索存在则会成功展示该居民成功展示该居民5注销信息点击注销，填写理由成功注销，并从人口管理界面移除成功注销，并从界面移除6查看归档信息点击已归档跳转到归档界面，界面展示归档人员的信息跳转到归档界面，展示归档人员的信息7归档界面详情查看点击查看详情跳转到详情页，成功展示信息跳转到详情页，成功展示信息9归档界面删除信息点击删除，根据提示点击确定成功删除，从归档界面移除成功删除，从归档界面移除图4.4新增居民信息测试图4.5编辑居民信息测试图4.6查看居民详细信息测试图4.7搜索居民信息测试1图4.8搜索居民信息测试2图4.9注销居民信息测试1图4.10注销居民信息测试2图4.11查看归档信息测试图4.12查看归档详情测试图4.13归档界面搜索测试图4.14归档界面删除信息测试1图4.15归档界面删除信息测试24.2.4楼栋管理①楼栋管理楼栋管理实现新增，编辑和删除功能，其中编辑时会初始化数据。如表4.3和图4.16-4.18所示是楼栋管理的测试用例与测试结果。表4.4楼栋管理测试用例编号测试模块测试用例预期效果实际效果1新增楼栋点击新增，填写相关信息，点击保存提示成功，并展示在楼栋管理界面提示成功，展示在楼栋管理界面2编辑信息点击编辑，修改信息，点击保存提示成功，并展示在楼栋管理界面提示成功，展示在楼栋管理界面图4.16新增楼栋信息测试图4.17编辑楼栋信息测试图4.18删除楼栋信息测试②楼栋管理员楼栋管理员实现新增，移除，设置角色，搜索功能，其中设置角色时会初始化数据。如表4.5和图4.19-4.24所示是楼栋管理员的测试用例与测试结果。表4.5楼栋管理员测试用例编号测试模块测试用例预期效果实际效果1新增楼栋管理员信息点击新增，填写相关信息，点击保存提示成功，并展示在楼栋管理界面提示成功，展示在楼栋管理界面2编辑楼栋管理员信息点击编辑，修改信息，点击保存提示成功，并展示在楼栋管理界面提示成功，展示在楼栋管理界面3搜索输入手机号或者姓名存在则会成功展示该管理员信息成功展示3删除信息点击删除，点击弹窗确定提示成功，并从界面成功删除提示成功，并从界面成功删除图4.19新增楼栋管理员信息测试1图4.20新增楼栋管理员信息测试2图4.21设置角色测试1图4.22设置角色测试2图4.23搜索楼栋管理员测试图4.24删除楼栋管理员测试4.2.5设备管理设备管理模块分为设备信息与报修信息。①设备信息设备信息中展示了所有设备实现新增，编辑，删除，查看详情，搜索的功能，其中在编辑时会初始化数据，查看详情里面可以看见公共设备的维修记录。如表4.6和图4.25-4.31所示是设备信息的测试用例与测试结果。表4.6设备信息测试用例编号测试模块测试用例预期效果实际效果1新增设备点击新增，填写相关信息，点击保存提示成功，并展示在设备信息界面提示成功，展示在设备信息界面2编辑信息点击编辑，修改相关信息后，点击保存提示成功，并展示在设备信息界面提示成功，并展示在设备信息界面3查看详情点击查看详情跳转到详情界面，并成功展示信息跳转到详情界面，并成功展示信息4搜索输入设备名称或者编号存在则会成功展示该管理员信息成功展示5删除信息点击删除，点击弹窗确定提示成功，并从界面成功删除提示成功，并从界面成功删除图4.25新增设备信息测试1图4.26新增设备信息测试2图4.27编辑设备信息测试1图4.28编辑设备信息测试2图4.29搜索设备信息测试图4.30查看设备详情信息测试图4.31删除设备信息测试②报修信息报修信息中展示了所有报修，实现新增，编辑，搜索的功能，其中在编辑时会初始化数据，搜索可以自由组合条件。如表4.7和图4.32-4.38所示是报修信息的测试用例与测试结果。表4.7报修信息测试用例编号测试模块测试用例预期效果实际效果1新增报修点击新增，填写相关信息，点击保存提示成功，并展示在报修信息界面提示成功，展示在报修信息界面2编辑信息点击编辑，修改信息，点击保存提示成功，并展示在报修信息界面提示成功，展示在报修信息界面4搜索组合不同的搜索条件存在则会成功展示该管理员信息成功展示图4.32报修信息界面测试图4.33新增报修信息测试1图4.34新增报修信息测试2图4.35编辑报修信息测试1图4.36编辑报修信息测试2图4.37搜索功能测试1图4.38搜索功能测试24.2.6车位管理车位管理模块分为车位管理和车库管理。①车位管理车位管理展示了所有车位信息，实现了新增，编辑，删除，搜索的功能，新增车位时车库名称，车库区域要按顺序填写，因为它们之间有的联系有先后顺序，手机号码会在选择车主时自动填入，编辑车位时会初始化数据。如表4.8和图4.39-4.42所示是车位管理的测试用例与测试结果。表4.8车位管理测试用例编号测试模块测试用例预期效果实际效果1新增车位信息点击新增，顺序填写相关信息，点击保存提示成功，并展示在车位管理界面提示成功，并展示在车位管理界面2编辑车位信息点击编辑，修改相关信息，点击保存提示成功，并展示车位管理界面提示成功，并展示在车位管理界面3搜索输入车位号或者车主姓名存在则会成功展示