【《菜市场商铺管理系统设计与实现》8700字（论文）】

[摘要]本文主要是针对南宁市淡村菜市场中铺主与租户之间的水电费用及铺位管理仍使用人工的现状，使用Vue.js、Node.js以及MongoDB技术，设计并实现相应的水电费用及铺位管理系统。设计从当今世界处于信息化时代的角度，体现出了水电费用信息及铺位管理信息化的必要性。从整体角度分析了本系统和其它系统的接口，对租户与铺主相关的人员，系统分别为其设计相应的功能模块。设计从系统的需求、系统概要设计等各个方面对系统的开发过程进行描述。系统采用了前端和后台分离的设计理念，前端使用Vue脚手架创建项目，设计大概模板；后台采用基于Node.js的Koa2框架，数据库使用MongoDB数据库。整个系统设计并实现了商铺铺主对商铺管理、租户管理及申请商铺、水电费用管理等相应的功能。同时，良好的数据接口也为市场对商铺管理以后统一信息化管理提供了便利。[关键词]：商铺管理；Vue.js；Node.js；Mongoose.js1前言1.1选题背景随着进入21世纪的信息化时代，人们生活中处处可见人工智能、网络订单、网络化管理等。南宁市淡村菜市场管理部门是服务于菜市场中的商铺铺主及租户，其主要职责是做好菜市场每天的可持续运营。科学技术的发展、网络化的普及使得原先在菜市场中的管理方式越来越不能够满足租户及商铺铺主的需求。复杂的材料收集，不间断却又非必要性的走动使得两者迫切需要智能化、网络化的管理方式。而在各大城市中，简便化、智能化的网络管理方式普及了各个区域，其中不乏有各种区域性的商铺管理。本文旨在不对现在菜市场运营方式进行改造的前提下，设计开发出基于网络的商铺管理系统，以节约租户与商铺铺主之间各种非必要性的交互时间。系统可以适应性的运用与类似需要进行商铺管理区域，有着较为重要的应用价值。1.2国内外现状就国内外对商铺进行信息化、智能化管理进行现状分析得知，当今的商铺管理是逐步向着网络化的管理方向进行。通过计算机信息技术手段来处理商铺租借，可以实现智能化管理商铺从而减少该区域进行商铺管理所消耗的人力物力。所以，开发一个能实现对南宁市淡村菜市场商铺管理智能化，是十分的有意义的。对于中方与其他各国各区域实现该类信息系统的方式来讲，是有一定不同之处的。可能由于对菜市场的运营方式不同或国家的发展政策不太相同，在使用计算机系统实现数据的处理或数据交互方式有着不一致之处。但是，当前国家有着十分强硬的计算机科学技术能力，掌握一定的管理系统研究方法，相信不久这类管理系统会沿用到国家甚至外国区域。1.3选题研究意义本次课题的研究对于处在南宁市淡村菜市场中的商铺铺主及租户来说，可以明确菜市场中的信息化流程。在了解清楚系统所需要实际操作后，可以通过对系统过程的分析，进一步明确未来智能化管理各项数据。在技术层面，通过系统开发可以了解web开发趋势、开发技术、开发思路。设计系统时。还要考虑系统实现的实用性、安全性、可维护性等方面。这有助于提高一个系统整体性的把握。1.4选题研究内容本次课题比较注重系统的实用性和较好的实现预期管理工作的计算机信息化。总的来说，南宁市淡村菜市场商铺管理系统期望达到的目标如下[1]。（1）优化工作流程，节约资源：通过计算机技术网络化数据呈现方式，减少空余商铺查询等人工处理流程，减少手工作业负担，避免不必要的错漏及资源浪费。（2）信息资料电子信息化：对市场的商铺信息，所有的租户信息，水电信息都可以在以电子信息的形式展示在系统中，可随时查询。（3）提高工作效率：便利的查询租户详细信息，对商场存在的空余商铺，铺主及租户可随时查询。（4）加强管理：可以将主要数据存放到数据库中，数据库具备一定的安全性能，并且可以实现随时查用。同时可进行对应的校验管理，安全地管理商场中各租户信息及商铺资料。（5）系统稳定性、易操作性：通过实现一个实用的菜市场商铺管理系统，操作人员可以轻松利用系统进行商铺管理。2原先商铺管理及优化分析 通过各途径调研及菜市场中的业务部门的沟通，可以知道的是该市场的商铺管理主要还是围绕三个对象展开（商铺铺主、租户、商铺）、进行水电及其他费用、信息通知以及商铺租借管理。以下是对原先商铺数据管理进行分析。2.1商铺信息管理分析商铺信息管理流程是先由铺主进行登记在册，对商铺信息进行记录。主要记录数据就有位置、商铺种类等，定期检查商铺信息，商铺是否在登记名册上，如有不在登记册上的商铺，可以进行添加记录，最后将记录归档到相应位置，结束对商铺信息管理的流程。如已在册商铺信息存在变化，则将对应的商铺进行商铺信息的更新，如果商铺信息没有变化，最后将记录归档到相应位置，结束对商铺信息管理的流程。2.2租户数据管理分析租户信息管理流程是将准备好的租户信息册，对租户信息册编码出的目录。租户申请租用商铺时，查找租户是否在信息册中，如果信息册中不存在该租户信息，则准备新的租户记录表记录租户信息，然后对租户信息记录表进行编码，存放到租户信息册中。如果租户申请租用商铺时查找租户信息册，该租户信息存在信息册上，则进行后续手续即可。2.3租户申请商铺流程分析铺主受理租户商铺申请，首先要查询商铺信息是否是未出租状态的商铺，如果是已出租的商铺则不给予办理。如若是未出租状态的商铺，先进行查看租户信息，需完善租户个人信息后给予同意权限进行办理，铺主同意后租户需缴纳租费并签约方可使用。2.4水电费用管理分析水电费用及其他费用管理流程，包括水电管理部门、物业部门给予铺主各商铺间的费用信息，铺主再将费用信息对照出相对应的租户，租户方可进行缴费。2.5管理流程优化设计通过各项原先管理流程可知，在市场管理规范下，需要经过多个部门、消耗诸多人力进行管理。缺点就是各数据间的基本上是独立性的，如查找已出租所属租户信息需先查找到已出租的商铺，通过商铺查找租户信息册方可完成查找，过程复杂且不易操作所以。3系统分析及开发设计3.1系统特点 （1）系统实现的网页页面简洁、直观，系统设计操作方便，架构清晰明了。 （2）系统有着功能多样性，并且具备着后台管理功能。 （3）系统是由管理员及普通用户两种类型人员进行使用，普通用户又分为两种即租户及商铺铺主，其中用户之间关联性、交互性较强。可通过相应渠道改良，增强系统的安全性。 （4）本系统主要是针对在南宁市淡村菜市场中的商铺进行管理，可以延伸至同为有着商铺管理的区域。3.2用户类型和特征本系统主要涉及的用户（1）商铺铺主：商铺铺主是本次系统实现的核心用户，没有了商铺的存在，系统将没有任何意义。他们的主要操作是进行商铺的管理，添加商铺水电信息。使用系统的方式是手机。查看商铺缴费情况，以便采取相应措施。（2）租户：系统的主要用户，使用系统的方式是手机。进行商铺申请及查看个人商铺信息等。（3）市场管理员：主要负责维护系统数据安全等。3.3系统分析 南宁市淡村菜市场管理系统主要是服务于该市场中的商铺铺主及租户之间，在开发之前需要对系统进行一个流程分析，改流程分析的重点在于对系统进行需求分析，根据明确的需求，逐步进行设计。该系统的主要职责是减少租户于铺主之间的人工性操作管理，而使市场管理更加规范化、智能化，从而更好的维持着市场的良好运营。再依据用户进行分析，根据不同用户类别进行操作流程分析，从而逐步进行设计，具体管理流程根据各信息表的不同而进行。3.3.1需求分析计算机的普及、系统开发技术的高速发展让计算机信息化系统形成了普遍大众化的现状，现实中的人工管理所需费用使得简洁、易操作、可维护的计算机化管理系统更加让人容易接受，与传统的商铺管理模式相比，计算机信息化的管理方式更具优势。伴着随信息技术的发展，信息化管理比以往更加容易实现。目前，市场中的商铺管理活动主要是存在着以下需求：（1）商铺申请，首先需要检查商铺空余情况，不能单靠记忆中是否是空铺而进行。以传统的方式进行申请商铺，租户需要经过铺主了解多层信息，上门办理相应手续，这样一来，如若处于多人申请的时候，可能会引起信息错漏等情况的出现。（2）租户查询水电信息，在传统的查询系统中，商铺铺主需要先获取到水电信息，再将水电信息逐一登记以便租户查询，数据繁杂，传统模式下需要消耗大量时间进行登记并且计算出所需费用。（3）缴费信息的繁杂度无疑是给双方极大的不便，更新每个月的缴费信息及查找往期的缴费信息都是一项繁杂的手续，会造成客户资料及资金的安全性问题的出现。本次课题研究就是在管理商铺，租户信息管理，水电及各项费用上进行研究及分析。3.3.2系统开发技术分析在当今的信息化时代中，人人都会运用网络进行数据的交互，目前软件、网页、或小程序等都是人们热衷使用的。在这次项目开发中，我们使用web中的MVVM模型进行设计开发。该定义是Model（数据层）View（视图层）View-Model（数据视图层），这是一种双向数据绑定的响应式框架，使用该模型的目的是修改View，Model数据对应数据发生变化；Model数据发生变化，不需要修改DOM，直接更新DOM。对于前端，JavaScript可以在浏览器直接修改HTML的DOM结构和CSS样式来实现一些动画效果。Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底层向上逐层应用。Vue的核心库只关注视图层，容易上手。Vue的核心特点-可组合的视图组件：一个页面映射为组件树。划分组件可维护、可重用、可测试，也就是一个页面由多个组件设计而成。后台使用Node.js框架使用Koa，是express的下一代基于Node.js的Web框架，Koa有Koa1、Koa2两种版本，koa2使用了promise并配备了async来实现程序的异步，koa2中写异步代码将不再想Express那样子层层嵌套，代码用以书写和阅读。数据库引用MongoDB数据库，MongoDB更加侧重于写入性能，MongoDB适合业务逻辑中“低价值”数据的场景。MongoDB是文档行数据库，为非结构化的文档添加一个新字段是很快速的操作，并且不会影响已有数据。MongoDB可以充分利用系统的内存资源，查询速度更快[2]。通过前面进行一系列问题的分析，我们大概知道引入该系统的目的及意义。所以本系统的主要是研发实现针对淡村菜市场商铺管理的管理系统。系统主要是实现租户对自己商铺的申请，查询及所需费用的功能，以实现淡村菜市场中管理的安全，简便快捷的目标。根据系统的目标，系统主要实现以下一些目标与功能。3.4系统目标及功能设计分析3.4.1系统目标系统主要实现对商铺及铺主之间相应的商铺信息化查询、缴费等，铺主对商铺水电进行查询更新等管理来实现菜市场中商铺水电管理的安全、快捷、方便的目标。系统中租户及商铺信息表都可以租户及铺主自行添加修改或删除，对系统进行模块化设计，可以流出一定的可扩展空间。3.4.2系统用例设计分析PC端系统管理员，包含如下用例（1）用户登录：为用户提供身份验证的逻辑处理，需要用户账号密码都填写正确方可进行后续相关操作。（2）商铺管理：网络化管理商铺信息，比如商铺的类别，位置，出租状态，租金等，还可以对商铺信息进行添加、修改、删除、查询等操作。（3）租户管理：录入租户信息，便于对租户进行相关管理，可填写电话、姓名及地址等信息。租户可在登录后进行信息的录入，此外可以对租户的信息进行修改，删除，查询等。（4）水电费用信息管理：显示租户当月应缴纳的水费、电费、物业费、租金等。图1系统管理员用例图手机端功能（1）租户：通过注册账号密码，进入后完善个人相关信息，完善信息后，系统会自动获取信息，录入后台，操作简单快捷，登录后可以查看个人中心。申请摊位以及获取个人商铺费用信息，接收短信等。租户用例图：如图2（2）商铺铺主：铺主可以对商铺管理进行增删改查等、处理商铺申请信息、商铺费用信息管理、发送短信。商铺铺主用例图：如图3图2租户用例图图3商铺铺主用例图3.5系统结构设计根据功能概述对系统进行结构设计，系统主要分为前台及后端数据存储与处理，前台主要设计用户登录、租户信息管理、商铺管理、水电信息录入设计、短信发送设计；后台主要涉及用户登录信息管理、商铺信息管理、租户信息管理。以此设计总体结构体系，如图4图4系统设计结构示意图3.6系统类图系统通过类图设计进行细化，包括确定类的属性和增加类的操作两个部分。对类的属性，主要考虑功能直接想关的、重要的属性。其主要类图及其类关联如类图：图5所示图5系统设计结构示意图4.系统开发过程4.1系统数据库设计根据系统的用户类型分析及功能概念模型设计，在MongoDB数据库工具创建一个数据库，该数据库使用默认用户：root，数据库主要包含六个信息表：登录数据信息表、商铺信息表、租户信息表、缴费信息表、信息模板表、信息发送模块表。在MongoDB各个数据表中，每个表的每一个数据都存在一个唯一的ID，后台可以通过这个ID进行数据表关联查询。画出主要ER图如图所示图6铺主、租户与商铺实体关系E-R图图7商铺费用信息与短信实体关系E-R图4.1.1登录数据信息表登录数据信息主要有用户名（手机号）、密码、用户类别、注册时间。表1user_login（登录信息表）列名数据类型允许空值默认值说明nameString否账号passwordString否密码categoryString是租户用户类型_idObjectId否IDdateDate否创建时间4.1.2商铺信息表记录商铺信息，主要有商铺所属类别、商铺地址、租金、租户ID。如：表2shop（商铺信息表）列名数据类型允许空值默认值说明shopNameString是商铺区域shopAddressString是商铺地址rentNumber是租金_idObjectId否IDdateDate否创建时间_extend_tenancyString是续约时间remarksString是备注handle是处理categoryString是未出租出租状态user_idString是登录IDtenancyString是租期4.1.3租户信息表存储租户信息，主要有租户姓名、地址、电话。如：表3userInformation（租户信息表）列名数据类型允许空值默认值说明nameString是姓名addressString是地址photoNumber是电话_idObjectId否IDuser_idString是登录IDdateDate否创建时间4.1.4费用信息表：记录租户所属商铺各种应缴纳的费用，主要有物业费、水费、电费等信息。如表4PInformation（费用信息表）列名数据类型允许空值默认值说明monthString是月份hydropowerString是用电量/度PropertyNumber是物业费_idObjectId否IDPaymentStatusObjectId是未缴费userInformation_idObjectId是租户IDshop_idObjectId是商铺IDinformationObjectId是短信IDdateDate否创建时间4.1.5短信模板信息表通过该数据表对信息模板进行数据操作。如表5information（短信模板表）列名数据类型允许空值默认值说明textString是短信内容titleString是短信标题remarksString是false是否启用_idObjectId否IDdateDate否创建时间4.1.6短信发送数据表主要记录对租户未缴费的当月信息发送给租户，具体管理商铺信息表、缴费信息表、租户信息表、短信模板表、发送状态、信息状态。表6sending（短信发送表）列名数据类型允许空值默认值说明information_idObjectId是短信模板IDuserInformation_idObjectId是租户信息IDsendingString是未发送发送状态shop_idObjectId是商铺IDPInformation_idObjectId是费用信息IDcategoryString是未读信息状态_idObjectId否IDdateDate否创建时间4.2系统功能实现模块设计4.2.1用户登录模块根据实际要求，设计系统的功能模块，用户登录模块是本系统的第一个页面，采用同一个页面，任何用户必须在验证账号密码正确才能进入本系统。验证账号密码正确后，判断账号所属的类别，如租户登录、铺主登录及管理员登录是否合法以及应当具有哪些权限，然后根据权限不同返回不同模块的页面。登录页面：通过vue.js的element组件库进行登陆页面设计，form表单对用户输入账号密码进行格式及是否为空验证，验证完成后，form表单收集用户名及密码传给后台，后台查找数据库数据，并对数据库数据进行对比分析，反馈给前台。每个账号都设置相应类别，分别是租户、铺主、水电员工及管理员。。登录注册页面如所示。图8用户登录页面图9用户注册页面图10登录页面核心代码在Vue.js设计中，通过method方法处理点击事件函数，登录模块中核心处理函数有，如：图11、图12图11登录设计核心代码方法图12登录设计核心代码方法后台主要是对用户登录账号密码进行创建及查找验证，核心代码如：图13图13登录后端设计核心代码方法4.2.2租户功能设计（1）完善个人资料：由传统的纸质版租户信息资料改为登录后填写个人资料表单，个人资料表单存储在租户信息表中。点击编辑是，可填写资料。点击完成即可退出编辑具体设计如下图所示

图14租户个人中心设计页面图15租户个人中心前端设计核心代码图16租户个人中心后台设计核心代码（2）申请租用商铺功能设计：租户在申请商铺时，只可以看待未出租状态的商铺，申请商铺时先确认所需要申请的日期，点击申请后确认即可。查看未出租商铺信息呈现方式：表格。核心代码如下图所示图17租户申请商铺前端设计核心代码图18租户申请商铺前端设计核心代码（3）查看个人商铺功能：租户可以查阅自身申请成功的商铺，可以对商铺进行延期申请及退租申请。租户个人商铺信息呈现方式：表格。核心代码如下图19租户查看个人商铺前端设计核心代码（4）短信查看功能设计：租户查看个人所需接收的短信，短信来源有商铺铺主发送。短信查看功能核心代码如下图20查看短信功能前端设计核心代码4.2.3铺主功能设计（1）商铺信息管理功能：对所拥有的商铺进行管理，可进行单一添加商铺，商铺数据在查询时就会呈现出一个表格，铺主可以对表格进行编辑更改、删除商铺。数据核心代码图如下所示图21首页商铺管理设计核心代码（2）处理申请商铺：对商铺的租用申请及退租申请进行处理，对已出租的商铺可以进行续约或者退租申请，对为出租的商铺进行租用申请。处理商铺核心代码，图如下图22铺主对申请商铺管理设计核心代码（3）录入水电信息及：对已出租商铺进行查找，按月登记用户的水电费用信息。通过前端Vue.js中的响应式原理，使用$set可以改变对应数据的数据，从而对表格进行单项编辑、获取数据，核心代码如图22。图23铺主对商铺水电信息管理前端设计核心代码图24铺主对商铺水电信息管理后端设计核心代码（4）短信发送功能：编辑短信模板，启用一个短信模板向所有已租用商铺的租户发送费用代缴费短信图25铺主对短信模板信息管理前台设计核心代码4.2.4后台管理设计模块后台管理设计主要是通过Vue.js中的tabs标签页进行设计。分隔内容上有管理但属于不同类别的数据集合，其核心代码设计如图图26管理系统设计前台核心代码图27管理系统设计后台核心代码4.3系统实现与调试该商铺管理系统的设计实现是在win1064位操作系统、使用VisualStudioCode开发软件、在Node.js、以及MongoDB数据库环境下实现的。运行浏览器在谷歌浏览器进行调试成功运行。调试成功步骤如下打开MongoDB数据库——通过CMD命令行运行，运行前端Vue项目，打开运行后端Node.js即可，调试地址http://localhost:8080/4.4进一步工作（1）系统存在一定的不确定性：由于是第一次进行开发设计，所学有限，对系统中会出现的本身没发现的错误或有待完善的功能，操作人员的水平也是影响本次系统使用的因素。因此，不能保证本次系统能够完全适应所有使用的用户，是否出现瑕疵错漏甚至是更大的缺陷都是这次系统所可能出现的不确定性（2）功能的全面性：系统设计是围绕商铺租借管理为核心进行设计开发的，其主要考虑的用户不多，可能商铺管理也会涉及到其他部门，如物业部门等各部门间的联合管理，这些依旧是需要在后期完善的结束语本次系统设计有前端后台及数据库设计，设计出了二十多个Vue框架文件及Node.js文件及数据表。通过这次毕业设计，我从CSS基础开始学习，到JavaScript再到Vue.js、Node.js、MongoDB数据库学习以及接触Mongoose等知识。很感谢同学及老师给予的学习资源及他们对我学习思路的讲解，培养了我寻找错落、设计思路、逻辑、使用各种网络资源，让我可以快速的规划出这次系统的设计目标及实现，自身的编程实力及培养了一定的编程思维，一点点引导培养我对系统开发的概念意识。通过学习到开发设计的实现，总共花费的时间近似有半年，前期的学习对后来各项开发都有着相当大的设计。老师引导的设计思路与系统分析使我在后来进行设计时少走了非常多的弯路。中期时，通过不断进行调试系统，查缺补漏，不断修改与完善。最后进行撰写与修改论文。整个过程是不断学习与完善的过