基于HTML5的多平臺汽車美容管理系統設計與實現

朱杰

摘 要： 根據目前汽車美容企業信息管理和服務客戶的需要，為提高企業管理效率，方便客戶及時了解相關業務信息，結合企業自身特點，提出了構建基于HTML5的汽車美容管理系統。采用JSP+MySQL為開發技術，詳細分析了系統需求，進行了總體設計，介紹了不同模塊的相關功能，實現了一個多平臺的汽車美容管理系統。

關鍵詞： HTML5； 汽車美容； 多平臺； 管理

中圖分類號：TP311 文獻標志碼：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引言

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

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

1 系統分析

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

按照這些基本要求，將用戶分為三類：管理員、員工、客戶。管理員擁有最高權限，負責客戶管理、項目管理、財務統計和系統維護等。員工通過登錄自己的帳號，能夠對一般美容項目的流程進行業務操作。客戶主要進行各種汽車美容項目及物品的選擇，同時也可以對已經選擇的物品進行退換，可查看各種消費單據，對本汽車美容店進行評價。系統能根據客戶的相關信息推薦相關業務等。

2 系統設計

本系統主要以eclipse作為開發平臺，MySQL作為后臺管理數據庫，應用JSP和HTML5技術，結合Java語言和Java Script腳本語言進行開發。

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

[汽車美容管理系統][基礎數據][項目管理][收費管理][查詢統計][客戶管理][車輛管理][員工管理][新增項目][修改項目][刪除項目][財務統計][收費登記]

3 數據庫設計

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

根據業務需求對數據庫進行設計，數據庫中包含多個表，以下簡要介紹主要的數據表及功能。

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

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

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

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

4 系統關鍵技術與功能實現

4.1 系統架構與主要技術

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

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

4.2 JDBC實現數據庫連接

JDBC（Java Data Base Connectivity，java數據庫連接）是一種用于執行SQL語句的Java API，可以為多種關系數據庫提供統一訪問，它由一組用Java語言編寫的類和接口組成。JDBC提供了一種基準，據此可以構建更高級的工具和接口，使得數據庫開發人員能夠編寫數據庫應用程序。

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

4.3 跨平臺

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

4.4 系統實現

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

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

5 結束語

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

參考文獻（References）：

[1] 張榮寬.基于C#的汽車美容管理系統設計與實現[D].電子科

技大學，2011：1-4

[2] 矯靜怡.基于HTML5的多平臺采購系統的設計與實現[D].

大連理工大學，2014：2-3

[3] 張飛.基于Java的多平臺高校設備管理系統研究[J].科技廣

場，2010.5：147-149.

[4] 任泰明.基于B/S結構的軟件開發技術[M].西安電子科技大

學出版社，2006.

[5] 李張永，陳和平，顧進廣.跨平臺移動Web開發框架與數據交

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

[6] 舒遠仲，黃文強，梅夢喆.基于HTML5跨平臺高校就業信息

服務系統的設計與實現[J].計算機時代，2016.3：93-96