基于MVVM框架的汽車銷售管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

丁海洋，王昊翔，姚全珠

（西京學(xué)院，陜西西安，710123）

0 引言

近年來，中國經(jīng)濟(jì)發(fā)展迅速，汽車企業(yè)的銷售訂單越來越多，因此對汽車企業(yè)的汽車銷售信息進(jìn)行了調(diào)查，發(fā)現(xiàn)隨著汽車銷售信息的增加，汽車店的銷售管理工作也越來越繁瑣。手動(dòng)管理不能再滿足當(dāng)前的需求，容易出錯(cuò)，并且具有大量數(shù)據(jù)。因此，為了提高汽車企業(yè)銷售管理的工作效率，有必要開發(fā)一款汽車銷售管理系統(tǒng)。

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

■1.1 系統(tǒng)體系結(jié)構(gòu)

汽車銷售管理系統(tǒng)采用B/S架構(gòu)、MVVM框架開發(fā)，是標(biāo)準(zhǔn)的MVC模式的改進(jìn)版。整個(gè)系統(tǒng)劃分為四層，依次是Dao層、Service層、Controller層 與View層，Dao層負(fù)責(zé)與數(shù)據(jù)庫的交互，Service層負(fù)責(zé)業(yè)務(wù)的應(yīng)用邏輯，Controller層負(fù)責(zé)請求的處理與業(yè)務(wù)流程的控制，View層負(fù)責(zé)頁面數(shù)據(jù)渲染。

本系統(tǒng)前端使用漸進(jìn)式框架Vue開發(fā)，后端是由SpringBoot框架開發(fā)，降低了前后端的耦合度，實(shí)現(xiàn)了前后端的分離。

■1.2 功能模塊設(shè)計(jì)

本系統(tǒng)主要分為了管理員與員工兩個(gè)用戶角色，其具體如下：

(1)管理員

管理員登錄后主要功能有個(gè)人信息、員工管理、汽車信息、銷售信息、統(tǒng)計(jì)報(bào)表、系統(tǒng)管理與公告管理。管理員的功能模塊圖如圖1所示。

圖1 管理員功能模塊圖

(2)員工

員工登錄后主要功能有公告信息、個(gè)人信息、汽車信息、銷售信息與統(tǒng)計(jì)報(bào)表，員工的功能模塊圖如圖2所示。

圖2 員工功能模塊圖

■1.3 數(shù)據(jù)庫設(shè)計(jì)

1.3.1 數(shù)據(jù)庫E-R圖設(shè)計(jì)

E-R圖為實(shí)體-聯(lián)系圖，提供了表示實(shí)體、屬性和聯(lián)系的方法，是用來描述現(xiàn)實(shí)世界的概念模型。實(shí)體即我們所說的對象或字段，屬性和方法，也就是某一個(gè)對象的屬性和方法。E-R圖是一種描述顯示數(shù)據(jù)類型間的關(guān)系的數(shù)據(jù)描述方法，E-R圖可以完整地映射出現(xiàn)實(shí)模型的關(guān)系。E-R圖中的三個(gè)最為重要的元素就是實(shí)體、屬性、關(guān)系，E-R圖即由這三點(diǎn)組成。汽車銷售管理系統(tǒng)的數(shù)據(jù)庫總體E-R圖如圖3所示。

圖3 數(shù)據(jù)庫總體E-R圖

1.3.2 數(shù)據(jù)庫表設(shè)計(jì)

汽車銷售管理系統(tǒng)需要有后臺(tái)的數(shù)據(jù)庫，本系統(tǒng)采用MySQL數(shù)據(jù)庫進(jìn)行數(shù)據(jù)的存儲(chǔ)，下面介紹數(shù)據(jù)庫中各個(gè)表的詳細(xì)信息。

(1)管理員信息表：用來儲(chǔ)存管理員信息，如表1所示。

表1 管理員信息表

(2)員工信息表：用來存儲(chǔ)員工信息，如表2所示。

表2 員工信息表

(3)汽車信息表：用來存儲(chǔ)汽車信息，如表3所示。

表3 汽車信息表

(4)銷售信息表：用來存儲(chǔ)汽車的銷售信息，如表4所示。

表4 銷售信息表

userId 員工編號 int 10 否 是userName 員工名稱varchar 20 否 是consumerName 客戶名 varchar 20 否 是consumerPhone客戶電話varchar 20 否 是

2 系統(tǒng)實(shí)現(xiàn)

本系統(tǒng)的實(shí)現(xiàn)分為管理員與員工兩種模式，系統(tǒng)流程圖如圖4所示。本系統(tǒng)采用的是B/S架構(gòu)、MVVM框架開發(fā)，將視圖UI與業(yè)務(wù)邏輯分開，實(shí)現(xiàn)了前后端的分離，達(dá)到了解耦的目的，前后端的交互通過Axios跨域?qū)崿F(xiàn)。

圖4 系統(tǒng)流程圖

本系統(tǒng)前端是由漸進(jìn)式框架Vue開發(fā)，Vue框架是基于模塊化與組件化，模塊化思想是封裝好模塊對外提供接口，組件化思想是用組件拼湊出完整的頁面，實(shí)現(xiàn)代碼的復(fù)用。前端通過調(diào)用后端提供的接口API向后端發(fā)送請求，前端接收到后端返回的數(shù)據(jù)后先對數(shù)據(jù)進(jìn)行存放，最后通過數(shù)據(jù)的雙向綁定對頁面進(jìn)行渲染。

本系統(tǒng)后端是由SpringBoot框架實(shí)現(xiàn)，它主要負(fù)責(zé)接收并處理前端的請求、與數(shù)據(jù)庫交互以及返回給前端所需的數(shù)據(jù)，后端不需要關(guān)心數(shù)據(jù)如何加載到前端中以及前端頁面如何渲染。后端主要分為三層，依次為Dao層、Service層、Controller層，Controller層負(fù)責(zé)接收并處理前端的請求，還負(fù)責(zé)給前端提供調(diào)用的接口API，收到前端的請求后，依次調(diào)用Service與Dao層，最后以JSON格式將數(shù)據(jù)返回給前端。

本系統(tǒng)數(shù)據(jù)庫選用的是MySQL數(shù)據(jù)庫，服務(wù)器使用的是SpringBoot內(nèi)置的Tomcat服務(wù)器，開發(fā)環(huán)境是JDK1.8.0。之所以采用MVVM框架是因?yàn)槠渚哂械婉詈?、可重用性、?dú)立開發(fā)、測試方便等優(yōu)點(diǎn)。系統(tǒng)運(yùn)行只需用戶調(diào)用API接口向后臺(tái)發(fā)送請求，后臺(tái)對接收到的請求進(jìn)行業(yè)務(wù)處理，再將處理的結(jié)果返回給前端，前端收到后臺(tái)返回的數(shù)據(jù)后將其渲染到頁面，系統(tǒng)的前后端交互過程如圖5所示。

圖5 前后端交互圖

3 結(jié)論

汽車銷售管理系統(tǒng)是汽車銷售企業(yè)的重要組成部分，本系統(tǒng)的開發(fā)加強(qiáng)了汽車企業(yè)對汽車銷售信息的管理，提高了綜合管理能力，促進(jìn)了汽車產(chǎn)業(yè)的快速發(fā)展。本文設(shè)計(jì)并實(shí)現(xiàn)了基于汽車企業(yè)銷售訂單的汽車銷售管理系統(tǒng)，該系統(tǒng)采用了IntelliJ IDEA與Visual Studio Code編譯軟件、Tomcat服務(wù)器、MySQL數(shù)據(jù)庫、JDK1.8.0開發(fā)環(huán)境、Google Chrome瀏覽器，包含了員工與管理員兩種模式。本系統(tǒng)的開發(fā)將促進(jìn)信息技術(shù)在汽車銷售企業(yè)中的應(yīng)用和發(fā)展，同時(shí)還能提高汽車企業(yè)的核心競爭力。