城市快捷報修服務系統設計技術

王云曉 王海濤 張學誠

摘要：為了方便用戶報修并提高維修質量和效率，該文設計了“搶單式”網上報修平臺。該平臺的用戶有普通注冊用戶、維修員工、部門管理員、系統管理員四類。平臺前端設計使用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模式，它將整個業務應用劃分為表現層、業務邏輯層、數據訪問層。

表現層是展現給用戶的界面，即用戶在使用一個系統的時候的所見所得。用戶登錄、注冊、報修、信息查詢等操作，以及管理員后臺管理各種數據的操作，都屬于表現層。

業務邏輯層是針對具體問題的處理，也可以說是對數據層的操作，對數據業務邏輯的處理。 用戶提交數據后，根據系統的功能需求，進行業務處理和數據處理，并根據處理結果在相應的頁面（視圖）顯示數據等功能，都屬于業務邏輯層。