基于HTML5的多平臺汽車美容管理系統(tǒng)設(shè)計與實現(xiàn)

朱杰

摘 要： 根據(jù)目前汽車美容企業(yè)信息管理和服務(wù)客戶的需要，為提高企業(yè)管理效率，方便客戶及時了解相關(guān)業(yè)務(wù)信息，結(jié)合企業(yè)自身特點，提出了構(gòu)建基于HTML5的汽車美容管理系統(tǒng)。采用JSP+MySQL為開發(fā)技術(shù)，詳細(xì)分析了系統(tǒng)需求，進(jìn)行了總體設(shè)計，介紹了不同模塊的相關(guān)功能，實現(xiàn)了一個多平臺的汽車美容管理系統(tǒng)。

關(guān)鍵詞： HTML5； 汽車美容； 多平臺； 管理

中圖分類號：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號：1006-8228（2017）07-50-03

Design and realization of multi-platform car beauty management system based on HTML5

Zhu Jie

（Zhejiang International Maritime College， Zhoushan， Zhejiang 316000， China）

Abstracts： According to the needs of car beauty information management and customer service， to improve the efficiency of enterprise management， to facilitate customers to get the relevant the business information in time， the construction of car beauty management system based on HTML5 is put forward with the enterprise's own characteristics. Using the development technology of JSP and MySQL， the system requirements are analyzed in detail， and the related functions of different modules are introduced. Through the general design， a multi-platform car beauty management system is implemented.

Key words： HTML5； car beauty； multi-platform； management

0引言

隨著汽車美容店等相應(yīng)產(chǎn)業(yè)日益增多、規(guī)模逐漸增大，傳統(tǒng)的手工統(tǒng)計各項業(yè)務(wù)流程和資料管理已經(jīng)很難滿足當(dāng)前汽車美容店的發(fā)展需要，尤其是現(xiàn)今移動終端的大量普及，需要及時了解各類業(yè)務(wù)信息，為提高企業(yè)管理車輛、材料、人事等各類信息的效率，需要一整套完善的計算機化的汽車美容店信息管理解決方案[1]。

本文所設(shè)計的多平臺汽車美容管理系統(tǒng)為B/S模式，采用了當(dāng)前最為前沿的HTML5標(biāo)準(zhǔn)，可以支持所有主流PC操作系統(tǒng)和Android、IOS等主流移動端手機操作系統(tǒng)，真正實現(xiàn)多平臺支持，用戶只需要一個安裝瀏覽器的終端即可登錄系統(tǒng)完成操作，大大方便了用戶的操作和管理[2]。

1 系統(tǒng)分析

我們通過對汽車美容企業(yè)實際情況的調(diào)查，最終確定了系統(tǒng)幾個基本功能模塊：美容項目及其價格信息管理；客戶信息、客戶車輛信息管理；美容登記和收費管理；統(tǒng)計月度各種美容項目的美容次數(shù)；統(tǒng)計年度各客戶的美容次數(shù)；對美容業(yè)務(wù)材料庫存進(jìn)行規(guī)范化管理；對平板、手機等移動端提供支持。系統(tǒng)運行要穩(wěn)定，安全要有保證。

按照這些基本要求，將用戶分為三類：管理員、員工、客戶。管理員擁有最高權(quán)限，負(fù)責(zé)客戶管理、項目管理、財務(wù)統(tǒng)計和系統(tǒng)維護(hù)等。員工通過登錄自己的帳號，能夠?qū)σ话忝廊蓓椖康牧鞒踢M(jìn)行業(yè)務(wù)操作。客戶主要進(jìn)行各種汽車美容項目及物品的選擇，同時也可以對已經(jīng)選擇的物品進(jìn)行退換，可查看各種消費單據(jù)，對本汽車美容店進(jìn)行評價。系統(tǒng)能根據(jù)客戶的相關(guān)信息推薦相關(guān)業(yè)務(wù)等。

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

本系統(tǒng)主要以eclipse作為開發(fā)平臺，MySQL作為后臺管理數(shù)據(jù)庫，應(yīng)用JSP和HTML5技術(shù)，結(jié)合Java語言和Java Script腳本語言進(jìn)行開發(fā)。

汽車美容管理系統(tǒng)包括基礎(chǔ)數(shù)據(jù)管理、項目管理、收費管理、查詢統(tǒng)計四大模塊。四大模塊分別包含各自的子模塊。基礎(chǔ)數(shù)據(jù)管理包括客戶管理、車輛管理、員工管理；項目管理包括新增項目、查詢信息、信息修改、刪除項目；收費管理包括登記收費、財務(wù)統(tǒng)計。系統(tǒng)功能模塊圖如圖1所示。

[汽車美容管理系統(tǒng)][基礎(chǔ)數(shù)據(jù)][項目管理][收費管理][查詢統(tǒng)計][客戶管理][車輛管理][員工管理][新增項目][修改項目][刪除項目][財務(wù)統(tǒng)計][收費登記]

3 數(shù)據(jù)庫設(shè)計

本系統(tǒng)采用MySQL數(shù)據(jù)庫[3]，MySQL所使用的SQL語言是用于訪問數(shù)據(jù)庫的最常用的標(biāo)準(zhǔn)化語言。由于其體積小、速度快、總成本低，而且具有開放源代碼這一特點，一般中小型網(wǎng)站的開發(fā)都選擇MySQL作為Web數(shù)據(jù)庫。另外，它的許多新特性和關(guān)鍵問題的改進(jìn)，以及完整的企業(yè)級技術(shù)與工具，為系統(tǒng)功能的實現(xiàn)提供了便利。

根據(jù)業(yè)務(wù)需求對數(shù)據(jù)庫進(jìn)行設(shè)計，數(shù)據(jù)庫中包含多個表，以下簡要介紹主要的數(shù)據(jù)表及功能。

⑴ 客戶信息表，用于客戶信息儲存與管理，包括姓名、年齡、性別、聯(lián)系方式、地址等。

⑵ 車輛信息表，用于車輛信息儲存與管理，包括車主、品牌等。

⑶ 項目信息表，用于項目信息儲存與管理，包括名稱、材料、價格等。

⑷ 記錄信息表，用于管理收費信息，包括汽車ID、美容項目、日期等。

4 系統(tǒng)關(guān)鍵技術(shù)與功能實現(xiàn)

4.1 系統(tǒng)架構(gòu)與主要技術(shù)

系統(tǒng)開發(fā)必須考慮用戶使用方便。我們采用B/S結(jié)構(gòu)[4]和以MVC模式為基礎(chǔ)的Web應(yīng)用程序框架[5]。其中MVC模式主要包括三部分：視圖（View）、模型（Model）和控制器（Controller），各個部分負(fù)責(zé)不同的功能，方便了后期的修改與維護(hù)，同時也大大提高了開發(fā)效率。

HTML5技術(shù)實際上是由HTML5、CSS3和Java Script組合而成的，其設(shè)計目的是在移動設(shè)備上支持多媒體。HTML5不僅提供了新元素支持的功能，如video、audio、和canvas標(biāo)記，更重要的是添加了對腳本和布局之間的原生交互能力。jQuery Easy UI 框架是基于 jQuery的一個前臺UI界面的插件，支持 HTML5，雖簡單，但功能強大，為開發(fā)人員節(jié)省時間。特別是Easy UI支持兩種渲染方式，javascript方式（如：$（'#p'）.panel（{...}））和html標(biāo)記方式（如：class="easyui-panel"）。jQuery Easy UI 提供了用于創(chuàng)建跨瀏覽器網(wǎng)頁的完整的組件組合，包括功能強大的 datagrid（數(shù)據(jù)網(wǎng)絡(luò)）、treegrid（樹形表格）、panel（面板）、combo（下拉組合）等等[6]。

4.2 JDBC實現(xiàn)數(shù)據(jù)庫連接

JDBC（Java Data Base Connectivity，java數(shù)據(jù)庫連接）是一種用于執(zhí)行SQL語句的Java API，可以為多種關(guān)系數(shù)據(jù)庫提供統(tǒng)一訪問，它由一組用Java語言編寫的類和接口組成。JDBC提供了一種基準(zhǔn)，據(jù)此可以構(gòu)建更高級的工具和接口，使得數(shù)據(jù)庫開發(fā)人員能夠編寫數(shù)據(jù)庫應(yīng)用程序。

有了JDBC，向各種關(guān)系數(shù)據(jù)發(fā)送SQL語句就是一件很容易的事。換言之，有了JDBC API，就不必為訪問Sybase數(shù)據(jù)庫專門寫一個程序，為訪問Oracle數(shù)據(jù)庫又專門寫一個程序，或為訪問Informix數(shù)據(jù)庫又編寫另一個程序等等。程序員只需用JDBC API寫一個程序就夠了，它可以向相應(yīng)數(shù)據(jù)庫發(fā)送SQL調(diào)用。同時，將Java語言和JDBC結(jié)合起來使程序員不必為不同的平臺編寫不同的應(yīng)用程序，只須寫一遍程序就可以讓它在任何平臺上運行，這也是Java語言“編寫一次，處處運行”的優(yōu)勢。其結(jié)構(gòu)如圖2所示。

4.3 跨平臺

HTML5技術(shù)的優(yōu)點在于可以跨平臺使用，現(xiàn)在智能移動終端的普及，以及移動互聯(lián)網(wǎng)產(chǎn)業(yè)的快速發(fā)展，有越來越多的人傾向于移動終端。但是目前不同的移動設(shè)備會有不同的操作系統(tǒng)平臺，開發(fā)過程中就要開發(fā)不同版本的程序，這對于開發(fā)者無疑增加了開發(fā)難度和維護(hù)成本。跨平臺開發(fā)技術(shù)很好的解決了這一問題，而且開發(fā)成本低于本地應(yīng)用，不同的操作系統(tǒng)上可以擁有統(tǒng)一的用戶交互體驗，對于開發(fā)者而言，可以把更多的精力專注于創(chuàng)意和應(yīng)用本身[6]。

4.4 系統(tǒng)實現(xiàn)

本系統(tǒng)開發(fā)采用基于模型視圖控制器（MVC.Model-View-Controller）的設(shè)計模式。Model層用來實現(xiàn)業(yè)務(wù)邏輯，View層用來顯示用戶界面，Controller層主要負(fù)責(zé)View層和Model層之間的控制關(guān)系。具體實現(xiàn)時，把Servlet用作應(yīng)用程序的控制器，把JSP文檔作為視圖，JavaBeans被用來表示模型。在這種設(shè)計模式下，各層次之間的數(shù)據(jù)傳遞如圖3所示。

所有的請求都被發(fā)送給作為控制器的Servlet，它接受請求，并根據(jù)請求信息將它們分發(fā)給適當(dāng)?shù)腏SP來響應(yīng)。同時，Servlet還根據(jù)JSP的需求生成JavaBeans的實例并輸出給JSP環(huán)境。JSP可以通過直接調(diào)用方法或使用UseBean的自定義標(biāo)簽得到JAVABeans中的數(shù)據(jù)。這種設(shè)計模式很好地實現(xiàn)了數(shù)據(jù)層與表示層分離，使開發(fā)工作更加容易和迅速。

5 結(jié)束語

本文通過系統(tǒng)分析、系統(tǒng)設(shè)計、數(shù)據(jù)庫設(shè)計、HTML5的研究等，實現(xiàn)了基于HTML5汽車美容管理系統(tǒng)，基本能夠達(dá)到預(yù)期的目標(biāo)，系統(tǒng)能夠正常使用，方便了工作人員，大大提高了汽車美容店的工作效率，同時也使得客戶能隨時查看消費業(yè)務(wù)信息，企業(yè)能夠高效地管理業(yè)務(wù)。未來系統(tǒng)若能夠與加入微信公眾號相結(jié)合，將會使企業(yè)、客戶使用渠道更加廣泛、應(yīng)用面更廣。

參考文獻(xiàn)（References）：

[1] 張榮寬.基于C#的汽車美容管理系統(tǒng)設(shè)計與實現(xiàn)[D].電子科

技大學(xué)，2011：1-4

[2] 矯靜怡.基于HTML5的多平臺采購系統(tǒng)的設(shè)計與實現(xiàn)[D].

大連理工大學(xué)，2014：2-3

[3] 張飛.基于Java的多平臺高校設(shè)備管理系統(tǒng)研究[J].科技廣

場，2010.5：147-149.

[4] 任泰明.基于B/S結(jié)構(gòu)的軟件開發(fā)技術(shù)[M].西安電子科技大

學(xué)出版社，2006.

[5] 李張永，陳和平，顧進(jìn)廣.跨平臺移動Web開發(fā)框架與數(shù)據(jù)交

互方法[J].計算機工程與設(shè)計，2014.35（5）： 1827-1832

[6] 舒遠(yuǎn)仲，黃文強，梅夢喆.基于HTML5跨平臺高校就業(yè)信息

服務(wù)系統(tǒng)的設(shè)計與實現(xiàn)[J].計算機時代，2016.3：93-96