王云曉 王海濤 張學(xué)誠

摘要：為了方便用戶報(bào)修并提高維修質(zhì)量和效率，該文設(shè)計(jì)了“搶單式”網(wǎng)上報(bào)修平臺。該平臺的用戶有普通注冊用戶、維修員工、部門管理員、系統(tǒng)管理員四類。平臺前端設(shè)計(jì)使用HTML5+CSS3+JavaScript技術(shù)，并使用了Bootstrap和jQuery技術(shù)進(jìn)行設(shè)計(jì)，實(shí)現(xiàn)PC端、平板和手機(jī)的三端適配。系統(tǒng)后端采用了SSM框架技術(shù)，包括數(shù)據(jù)處理層、頁面視圖層和業(yè)務(wù)控制層，實(shí)現(xiàn)后臺業(yè)務(wù)和數(shù)據(jù)處理。該系統(tǒng)實(shí)現(xiàn)了快捷、方便的網(wǎng)上報(bào)修，方便用戶隨時(shí)報(bào)修、員工及時(shí)接單及維修、管理員進(jìn)行信息匯總等，提高了工作效率。

關(guān)鍵詞：HTML5;CSS3;Bootstrap;SSM框架;MySql數(shù)據(jù)庫

中圖分類號：TP393? ? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）27-0083-02

1 開發(fā)目的

隨著社會的發(fā)展，社會分工越來越細(xì)，家庭或各單位的各種維修工作，也由專門的維修人員進(jìn)行完成。超出保修期的家用電器等維修，有時(shí)用戶會自己聯(lián)系維保人員上門服務(wù)。有的小區(qū)或企事業(yè)單位，有自己的物業(yè)或后勤，對各種維修任務(wù)也需要統(tǒng)計(jì)管理。

為了方便用戶報(bào)修并提高維修質(zhì)量和效率，我們提出了并設(shè)計(jì)了“搶單式”網(wǎng)上報(bào)修服務(wù)平臺。用戶注冊后，就可以在本平臺上報(bào)修。注冊并審核通過的維修員工，可以對平臺上的報(bào)修任務(wù)進(jìn)行搶單。平臺對報(bào)修任務(wù)和員工完成任務(wù)進(jìn)行統(tǒng)計(jì)分類匯總，對完成任務(wù)差的員工取消其搶單的權(quán)力。

該平臺可以面向社會，也可以在小區(qū)或企事業(yè)單位應(yīng)用，實(shí)現(xiàn)報(bào)修、維修、信息管理統(tǒng)計(jì)工作。

2 系統(tǒng)設(shè)計(jì)

本系統(tǒng)主要的功能是實(shí)現(xiàn)快捷、方便的網(wǎng)上報(bào)修的功能，實(shí)現(xiàn)用戶隨時(shí)報(bào)修、員工及時(shí)接單及維修、管理員方便地進(jìn)行信息匯總，提高工作效率。

2.1 系統(tǒng)功能

系統(tǒng)的主要功能有以下五個(gè)方面：

1）用戶登錄、注冊、密碼修改功能;

2）用戶在線報(bào)修功能;

3）員工接單（搶單）功能;

4）部門管理員信息維護(hù)和統(tǒng)計(jì)功能;

5）系統(tǒng)管理員實(shí)現(xiàn)報(bào)修類型、用戶、廣告管理，以及信息匯總統(tǒng)計(jì)功能;

6）退出登錄，前后端切換功能。

2.2 系統(tǒng)用戶

系統(tǒng)用戶包括游客、注冊用戶、員工、部門管理員、系統(tǒng)管理員等五類用戶，不同角色的用戶具有不同的權(quán)限。用戶登錄成功后，根據(jù)不同角色，跳轉(zhuǎn)到不同的頁面上，系統(tǒng)中的用戶角色和功能如圖1所示。

未注冊的游客用戶，只能訪問平臺開放的公開資源，包括首頁、服務(wù)項(xiàng)目、合作方式、聯(lián)系我們等頁面。

用戶注冊成功后成為注冊用戶，可以在線報(bào)修、查看自己的報(bào)修任務(wù)列表和報(bào)修任務(wù)的進(jìn)度狀態(tài)，在任務(wù)被分配（搶單）前，可以刪除或修改自己的報(bào)修任務(wù)。

注冊用戶可以申請成為維修員工。注冊用戶完善自己的信息，選擇工作類別后，系統(tǒng)管理員進(jìn)行審核，審核通過后成為維修員工，維修員工可以對報(bào)修任務(wù)進(jìn)行搶單、查看自己的維修任務(wù)列表等。

系統(tǒng)中的部門管理員，除了具有員工的權(quán)限外，還可以查看本部門的員工信息，對本部門完成的任務(wù)按年、月進(jìn)行匯總統(tǒng)計(jì)，可以統(tǒng)計(jì)員工指定時(shí)間段內(nèi)完成的任務(wù)。

系統(tǒng)管理員，具有系統(tǒng)的所有權(quán)限，可以添加和維護(hù)報(bào)修類型、審核用戶信息、管理平臺的通知公告信息，可以對廣告進(jìn)行增加、刪除、停用、啟用管理，對報(bào)修任務(wù)數(shù)量和完成情況進(jìn)行統(tǒng)計(jì)分析。

3 系統(tǒng)實(shí)現(xiàn)技術(shù)

為了系統(tǒng)安全和維護(hù)方便，軟件開發(fā)應(yīng)用MVC設(shè)計(jì)模式，采用業(yè)務(wù)邏輯、數(shù)據(jù)處理和界面顯示相分離的設(shè)計(jì)方法。

3.1 前端技術(shù)

前端是Web網(wǎng)站的門戶，系統(tǒng)使用了HTML5+CSS3+JavaScript的技術(shù)實(shí)現(xiàn)前端頁面，并且使用了Bootstrap框架和jQuery技術(shù)進(jìn)行輔助開發(fā)，提高了開發(fā)的效率。

為了使系統(tǒng)能在PC端、平板和手機(jī)上同時(shí)應(yīng)用，即能實(shí)現(xiàn)三端適配，前端開發(fā)采用了Bootstrap技術(shù)和CSS3@Media（媒體查詢）技術(shù)，使系統(tǒng)能根據(jù)屏幕類型使用不同的布局進(jìn)行顯示。Bootstrap是Twitter推出的一個(gè)用于前端開發(fā)的開源工具包。它使用柵格技術(shù)，使設(shè)計(jì)的網(wǎng)頁能根據(jù)瀏覽器的類型進(jìn)行適配，簡潔靈活，使得Web開發(fā)更加快捷。

為了提高系統(tǒng)的業(yè)務(wù)處理效率和用戶體驗(yàn)效果，網(wǎng)頁設(shè)計(jì)中使用了特效、驗(yàn)證和頁面交互技術(shù)，這些技術(shù)都用JavaScript和jQuery輔助實(shí)現(xiàn)。jQuery封裝了JavaScript常用的功能代碼，提供了一種簡便的JavaScript設(shè)計(jì)模式，優(yōu)化了HTML文檔操作、事件處理、動畫設(shè)計(jì)和Ajax交互等。登錄驗(yàn)證、注冊、報(bào)修和文件上傳等，都用jQuery和JavaScript技術(shù)輔助設(shè)計(jì)實(shí)現(xiàn)。

3.2 后端開發(fā)

本系統(tǒng)采用了SSM框架進(jìn)行后端的開發(fā)，大大提高了開發(fā)速度，并且使后臺代碼更加簡潔與清晰，利于后期功能拓展與維護(hù)。

SSM（Spring+SpringMVC+MyBatis）框架集由Spring、MyBatis兩個(gè)開源框架整合而成（SpringMVC是Spring中的部分內(nèi)容），該架構(gòu)用于開發(fā)結(jié)構(gòu)合理，性能優(yōu)越，代碼健壯的應(yīng)用程序，常作為數(shù)據(jù)源較簡單的web項(xiàng)目的框架。SSM框架是標(biāo)準(zhǔn)的MVC模式，它將整個(gè)業(yè)務(wù)應(yīng)用劃分為表現(xiàn)層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層。

表現(xiàn)層是展現(xiàn)給用戶的界面，即用戶在使用一個(gè)系統(tǒng)的時(shí)候的所見所得。用戶登錄、注冊、報(bào)修、信息查詢等操作，以及管理員后臺管理各種數(shù)據(jù)的操作，都屬于表現(xiàn)層。

業(yè)務(wù)邏輯層是針對具體問題的處理，也可以說是對數(shù)據(jù)層的操作，對數(shù)據(jù)業(yè)務(wù)邏輯的處理。 用戶提交數(shù)據(jù)后，根據(jù)系統(tǒng)的功能需求，進(jìn)行業(yè)務(wù)處理和數(shù)據(jù)處理，并根據(jù)處理結(jié)果在相應(yīng)的頁面（視圖）顯示數(shù)據(jù)等功能，都屬于業(yè)務(wù)邏輯層。