城市快捷报修服务系统设计技术

王云晓 王海涛 张学诚

摘要：为了方便用户报修并提高维修质量和效率，该文设计了“抢单式”网上报修平台。该平台的用户有普通注册用户、维修员工、部门管理员、系统管理员四类。平台前端设计使用HTML5+CSS3+JavaScript技术，并使用了Bootstrap和jQuery技术进行设计，实现PC端、平板和手机的三端适配。系统后端采用了SSM框架技术，包括数据处理层、页面视图层和业务控制层，实现后台业务和数据处理。该系统实现了快捷、方便的网上报修，方便用户随时报修、员工及时接单及维修、管理员进行信息汇总等，提高了工作效率。

关键词：HTML5;CSS3;Bootstrap;SSM框架;MySql数据库

中图分类号：TP393        文獻标识码：A

文章编号：1009-3044（2021）27-0083-02

1 开发目的

随着社会的发展，社会分工越来越细，家庭或各单位的各种维修工作，也由专门的维修人员进行完成。超出保修期的家用电器等维修，有时用户会自己联系维保人员上门服务。有的小区或企事业单位，有自己的物业或后勤，对各种维修任务也需要统计管理。

为了方便用户报修并提高维修质量和效率，我们提出了并设计了“抢单式”网上报修服务平台。用户注册后，就可以在本平台上报修。注册并审核通过的维修员工，可以对平台上的报修任务进行抢单。平台对报修任务和员工完成任务进行统计分类汇总，对完成任务差的员工取消其抢单的权力。

该平台可以面向社会，也可以在小区或企事业单位应用，实现报修、维修、信息管理统计工作。

2 系统设计

本系统主要的功能是实现快捷、方便的网上报修的功能，实现用户随时报修、员工及时接单及维修、管理员方便地进行信息汇总，提高工作效率。

2.1 系统功能

系统的主要功能有以下五个方面：

1）用户登录、注册、密码修改功能;

2）用户在线报修功能;

3）员工接单（抢单）功能;

4）部门管理员信息维护和统计功能;

5）系统管理员实现报修类型、用户、广告管理，以及信息汇总统计功能;

6）退出登录，前后端切换功能。

2.2 系统用户

系统用户包括游客、注册用户、员工、部门管理员、系统管理员等五类用户，不同角色的用户具有不同的权限。用户登录成功后，根据不同角色，跳转到不同的页面上，系统中的用户角色和功能如图1所示。

未注册的游客用户，只能访问平台开放的公开资源，包括首页、服务项目、合作方式、联系我们等页面。

用户注册成功后成为注册用户，可以在线报修、查看自己的报修任务列表和报修任务的进度状态，在任务被分配（抢单）前，可以删除或修改自己的报修任务。

注册用户可以申请成为维修员工。注册用户完善自己的信息，选择工作类别后，系统管理员进行审核，审核通过后成为维修员工，维修员工可以对报修任务进行抢单、查看自己的维修任务列表等。

系统中的部门管理员，除了具有员工的权限外，还可以查看本部门的员工信息，对本部门完成的任务按年、月进行汇总统计，可以统计员工指定时间段内完成的任务。

系统管理员，具有系统的所有权限，可以添加和维护报修类型、审核用户信息、管理平台的通知公告信息，可以对广告进行增加、删除、停用、启用管理，对报修任务数量和完成情况进行统计分析。

3 系统实现技术

为了系统安全和维护方便，软件开发应用MVC设计模式，采用业务逻辑、数据处理和界面显示相分离的设计方法。

3.1 前端技术

前端是Web网站的门户，系统使用了HTML5+CSS3+JavaScript的技术实现前端页面，并且使用了Bootstrap框架和jQuery技术进行辅助开发，提高了开发的效率。

为了使系统能在PC端、平板和手机上同时应用，即能实现三端适配，前端开发采用了Bootstrap技术和CSS3@Media（媒体查询）技术，使系统能根据屏幕类型使用不同的布局进行显示。Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它使用栅格技术，使设计的网页能根据浏览器的类型进行适配，简洁灵活，使得Web开发更加快捷。

为了提高系统的业务处理效率和用户体验效果，网页设计中使用了特效、验证和页面交互技术，这些技术都用JavaScript和jQuery辅助实现。jQuery封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互等。登录验证、注册、报修和文件上传等，都用jQuery和JavaScript技术辅助设计实现。

3.2 后端开发

本系统采用了SSM框架进行后端的开发，大大提高了开发速度，并且使后台代码更加简洁与清晰，利于后期功能拓展与维护。

SSM（Spring+SpringMVC+MyBatis）框架集由Spring、MyBatis两个开源框架整合而成（SpringMVC是Spring中的部分内容），该架构用于开发结构合理，性能优越，代码健壮的应用程序，常作为数据源较简单的web项目的框架。SSM框架是标准的MVC模式，它将整个业务应用划分为表现层、业务逻辑层、数据访问层。

表现层是展现给用户的界面，即用户在使用一个系统的时候的所见所得。用户登录、注册、报修、信息查询等操作，以及管理员后台管理各种数据的操作，都属于表现层。

业务逻辑层是针对具体问题的处理，也可以说是对数据层的操作，对数据业务逻辑的处理。 用户提交数据后，根据系统的功能需求，进行业务处理和数据处理，并根据处理结果在相应的页面（视图）显示数据等功能，都属于业务逻辑层。