王云曉 王海濤 張學誠
摘要:為了方便用戶報修并提高維修質量和效率,該文設計了“搶單式”網上報修平臺。該平臺的用戶有普通注冊用戶、維修員工、部門管理員、系統(tǒng)管理員四類。平臺前端設計使用HTML5+CSS3+JavaScript技術,并使用了Bootstrap和jQuery技術進行設計,實現PC端、平板和手機的三端適配。系統(tǒng)后端采用了SSM框架技術,包括數據處理層、頁面視圖層和業(yè)務控制層,實現后臺業(yè)務和數據處理。該系統(tǒng)實現了快捷、方便的網上報修,方便用戶隨時報修、員工及時接單及維修、管理員進行信息匯總等,提高了工作效率。
關鍵詞:HTML5;CSS3;Bootstrap;SSM框架;MySql數據庫
中圖分類號:TP393? ? ? ? 文獻標識碼:A
文章編號:1009-3044(2021)27-0083-02
1 開發(fā)目的
隨著社會的發(fā)展,社會分工越來越細,家庭或各單位的各種維修工作,也由專門的維修人員進行完成。超出保修期的家用電器等維修,有時用戶會自己聯(lián)系維保人員上門服務。有的小區(qū)或企事業(yè)單位,有自己的物業(yè)或后勤,對各種維修任務也需要統(tǒng)計管理。
為了方便用戶報修并提高維修質量和效率,我們提出了并設計了“搶單式”網上報修服務平臺。用戶注冊后,就可以在本平臺上報修。注冊并審核通過的維修員工,可以對平臺上的報修任務進行搶單。平臺對報修任務和員工完成任務進行統(tǒng)計分類匯總,對完成任務差的員工取消其搶單的權力。
該平臺可以面向社會,也可以在小區(qū)或企事業(yè)單位應用,實現報修、維修、信息管理統(tǒng)計工作。
2 系統(tǒng)設計
本系統(tǒng)主要的功能是實現快捷、方便的網上報修的功能,實現用戶隨時報修、員工及時接單及維修、管理員方便地進行信息匯總,提高工作效率。
2.1 系統(tǒng)功能
系統(tǒng)的主要功能有以下五個方面:
1)用戶登錄、注冊、密碼修改功能;
2)用戶在線報修功能;
3)員工接單(搶單)功能;
4)部門管理員信息維護和統(tǒng)計功能;
5)系統(tǒng)管理員實現報修類型、用戶、廣告管理,以及信息匯總統(tǒng)計功能;
6)退出登錄,前后端切換功能。
2.2 系統(tǒng)用戶
系統(tǒng)用戶包括游客、注冊用戶、員工、部門管理員、系統(tǒng)管理員等五類用戶,不同角色的用戶具有不同的權限。用戶登錄成功后,根據不同角色,跳轉到不同的頁面上,系統(tǒng)中的用戶角色和功能如圖1所示。
未注冊的游客用戶,只能訪問平臺開放的公開資源,包括首頁、服務項目、合作方式、聯(lián)系我們等頁面。
用戶注冊成功后成為注冊用戶,可以在線報修、查看自己的報修任務列表和報修任務的進度狀態(tài),在任務被分配(搶單)前,可以刪除或修改自己的報修任務。
注冊用戶可以申請成為維修員工。注冊用戶完善自己的信息,選擇工作類別后,系統(tǒng)管理員進行審核,審核通過后成為維修員工,維修員工可以對報修任務進行搶單、查看自己的維修任務列表等。
系統(tǒng)中的部門管理員,除了具有員工的權限外,還可以查看本部門的員工信息,對本部門完成的任務按年、月進行匯總統(tǒng)計,可以統(tǒng)計員工指定時間段內完成的任務。
系統(tǒng)管理員,具有系統(tǒng)的所有權限,可以添加和維護報修類型、審核用戶信息、管理平臺的通知公告信息,可以對廣告進行增加、刪除、停用、啟用管理,對報修任務數量和完成情況進行統(tǒng)計分析。
3 系統(tǒng)實現技術
為了系統(tǒng)安全和維護方便,軟件開發(fā)應用MVC設計模式,采用業(yè)務邏輯、數據處理和界面顯示相分離的設計方法。
3.1 前端技術
前端是Web網站的門戶,系統(tǒng)使用了HTML5+CSS3+JavaScript的技術實現前端頁面,并且使用了Bootstrap框架和jQuery技術進行輔助開發(fā),提高了開發(fā)的效率。
為了使系統(tǒng)能在PC端、平板和手機上同時應用,即能實現三端適配,前端開發(fā)采用了Bootstrap技術和CSS3@Media(媒體查詢)技術,使系統(tǒng)能根據屏幕類型使用不同的布局進行顯示。Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包。它使用柵格技術,使設計的網頁能根據瀏覽器的類型進行適配,簡潔靈活,使得Web開發(fā)更加快捷。
為了提高系統(tǒng)的業(yè)務處理效率和用戶體驗效果,網頁設計中使用了特效、驗證和頁面交互技術,這些技術都用JavaScript和jQuery輔助實現。jQuery封裝了JavaScript常用的功能代碼,提供了一種簡便的JavaScript設計模式,優(yōu)化了HTML文檔操作、事件處理、動畫設計和Ajax交互等。登錄驗證、注冊、報修和文件上傳等,都用jQuery和JavaScript技術輔助設計實現。
3.2 后端開發(fā)
本系統(tǒng)采用了SSM框架進行后端的開發(fā),大大提高了開發(fā)速度,并且使后臺代碼更加簡潔與清晰,利于后期功能拓展與維護。
SSM(Spring+SpringMVC+MyBatis)框架集由Spring、MyBatis兩個開源框架整合而成(SpringMVC是Spring中的部分內容),該架構用于開發(fā)結構合理,性能優(yōu)越,代碼健壯的應用程序,常作為數據源較簡單的web項目的框架。SSM框架是標準的MVC模式,它將整個業(yè)務應用劃分為表現層、業(yè)務邏輯層、數據訪問層。
表現層是展現給用戶的界面,即用戶在使用一個系統(tǒng)的時候的所見所得。用戶登錄、注冊、報修、信息查詢等操作,以及管理員后臺管理各種數據的操作,都屬于表現層。
業(yè)務邏輯層是針對具體問題的處理,也可以說是對數據層的操作,對數據業(yè)務邏輯的處理。 用戶提交數據后,根據系統(tǒng)的功能需求,進行業(yè)務處理和數據處理,并根據處理結果在相應的頁面(視圖)顯示數據等功能,都屬于業(yè)務邏輯層。