基于AngularJS的電商運(yùn)營管理系統(tǒng)設(shè)計(jì)

李平平，胡志勇

（1.武漢郵電科學(xué)研究院湖北武漢430074；2.武漢虹信技術(shù)服務(wù)有限責(zé)任公司湖北武漢430074）

基于AngularJS的電商運(yùn)營管理系統(tǒng)設(shè)計(jì)

李平平1，胡志勇2

（1.武漢郵電科學(xué)研究院湖北武漢430074；2.武漢虹信技術(shù)服務(wù)有限責(zé)任公司湖北武漢430074）

為了滿足電商平臺日益增長的需求，對后臺的供應(yīng)鏈管理能力提出了更高的要求，如何使用最少的代碼在更短的時(shí)間內(nèi)開發(fā)出更高效的電商后臺運(yùn)營管理系統(tǒng)將具有很大的研究價(jià)值。本文設(shè)計(jì)的基于AngularJS的電商運(yùn)營管理系統(tǒng)很好的解決了這個(gè)難題。本文首先介紹了非物質(zhì)文化遺產(chǎn)電商運(yùn)營管理系統(tǒng)的實(shí)現(xiàn)目標(biāo)，然后給出了系統(tǒng)的整體設(shè)計(jì)方案，隨后給出了幾個(gè)重點(diǎn)功能模塊的設(shè)計(jì)，最后進(jìn)行了總結(jié)。通過對系統(tǒng)的整和詳細(xì)的設(shè)計(jì)，得出使用AngularJS前端框架開發(fā)運(yùn)營管理系統(tǒng)能有效的縮短30%的開發(fā)周期，減小20%的代碼量，并且便于維護(hù)的結(jié)論。

電商運(yùn)營管理系統(tǒng)；AngularJS；商品；會員；訂單

電商運(yùn)營管理系統(tǒng)是為非物質(zhì)文化遺產(chǎn)電商系統(tǒng)做支撐的，非物質(zhì)文化遺產(chǎn)電商系統(tǒng)主要用于打造全國首家以宣傳非遺文化、銷售非遺藏品等內(nèi)容為主導(dǎo)的綜合網(wǎng)絡(luò)平臺[1]。這里主要對運(yùn)營管理平臺進(jìn)行研究。

電商運(yùn)營管理系統(tǒng)旨在開發(fā)一個(gè)可以進(jìn)行商品管理，訂單管理，客戶或者會員的管理，以及非遺資訊，非遺活動的管理。利用信息化手段讓電商系統(tǒng)更高效的運(yùn)行，達(dá)到提升電商平臺用戶體驗(yàn)度的目的，并且讓電商運(yùn)營管理系統(tǒng)的管理人員能夠更方便地進(jìn)行電子商務(wù)的管理工作[2]，包括商品管理，訂單管理，客戶或者會員的管理，以及非遺資訊，以及非遺活動的管理等。

1 電商運(yùn)營管理系統(tǒng)架構(gòu)設(shè)計(jì)

基于AngularJS的非物質(zhì)文化電商運(yùn)營管理系統(tǒng)由四層架構(gòu)實(shí)現(xiàn)。本系統(tǒng)架構(gòu)大致可以定義為：客戶機(jī)或者瀏覽器上的表現(xiàn)層主要是通過AngularJS前端框架來實(shí)現(xiàn)，首先由客戶端瀏覽器顯示的視圖產(chǎn)生一個(gè)請求。如果請求被Controller Servlet（控制器）接收，那么它會在route-config.js文件中尋找請求的URI，找到對應(yīng)的Controller類后，Controller類執(zhí)行相應(yīng)的業(yè)務(wù)邏輯[3]。一旦Controller類處理完成業(yè)務(wù)邏輯后，會把控制權(quán)返回給ControllerServlet。Controller類提供一個(gè)鍵值對作為返回的一部分，它指明了處理的結(jié)果[4-5]。ControllerServlet使用這個(gè)鍵值對來決定在哪個(gè)視圖中顯示Controller的類處理結(jié)果。當(dāng)ControllerServlet成功把Controller類的處理結(jié)果傳送到對應(yīng)的視圖（view）中，請求的過程也就完成了。

業(yè)務(wù)層是通過Spring框架實(shí)現(xiàn)的，系統(tǒng)的大部分業(yè)務(wù)邏輯處理是在這里完成的，在場景層中使用@Autowired注入service相關(guān)的類和接口，就可以在場景層調(diào)用業(yè)務(wù)層的方法。同樣的，在業(yè)務(wù)層@Autowired注入dao相關(guān)的類，就可以實(shí)現(xiàn)與持久層之間的通信[6]。

持久層（DAO層）是用來與數(shù)據(jù)庫進(jìn)行交互的，實(shí)現(xiàn)對數(shù)據(jù)庫進(jìn)行增刪改查操作[7]。本系統(tǒng)是采用MyBatis框架實(shí)現(xiàn)的，MyBatis應(yīng)用程序根據(jù)XML配置文件創(chuàng)建SqlSessionFactory，SqlSessionFactory會再根據(jù)相關(guān)配置來獲取一個(gè)SqlSession，這些配置來源于兩個(gè)地方，一個(gè)是XML配置文件，另一個(gè)是Java代碼的注解。SqlSession包含了執(zhí)行sql所必須的全部方法，可以通過SqlSession實(shí)例直接運(yùn)行映射的sql語句，完成對數(shù)據(jù)的增刪改查和事務(wù)提交等[8]，用完之后自動關(guān)閉SqlSession。MyBatis的著力點(diǎn)，則在于Beans與SQL之間的映射關(guān)系。然后通過映射配置文件，將SQL所需的參數(shù)，以及返回的結(jié)果字段通過ResultMap映射到指定Beans。

2 電商運(yùn)營管理系統(tǒng)總體設(shè)計(jì)

決定了電商運(yùn)營管理系統(tǒng)所采用的框架后，將進(jìn)一步研究非物質(zhì)文化遺產(chǎn)電商運(yùn)營管理系統(tǒng)的總體設(shè)計(jì)。電商運(yùn)營管理系統(tǒng)的總體設(shè)計(jì)包含系統(tǒng)模塊劃分，介紹了系統(tǒng)主要包含哪些功能模塊；數(shù)據(jù)庫設(shè)計(jì)，介紹了系統(tǒng)個(gè)模塊的數(shù)據(jù)模型；接口設(shè)計(jì)，介紹了系統(tǒng)的使用的外部接口和內(nèi)部接口。

2.1 模塊劃分

電商運(yùn)營管理系統(tǒng)分為商品管理、訂單管理、會員管理、營銷管理、非遺管理、報(bào)表管理、創(chuàng)意空間、系統(tǒng)管理8個(gè)模塊。

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

上一節(jié)介紹了電商運(yùn)營管理系統(tǒng)的模塊劃分，接下來將設(shè)計(jì)各個(gè)模塊的數(shù)據(jù)結(jié)構(gòu)。在WEB應(yīng)用方面MySQL是最好的關(guān)系數(shù)據(jù)庫管理系統(tǒng)的應(yīng)用軟件之一，電商運(yùn)營管理系統(tǒng)使用的數(shù)據(jù)庫是mysql5.6，其體積小、速度快、成本低，一般中小型網(wǎng)站的開發(fā)選擇的數(shù)據(jù)庫都是MySQL[9]。結(jié)構(gòu)設(shè)計(jì)工具采用的是SQLyog，SQLyog是一個(gè)易于使用的、快速而簡潔的圖形化管理mysql數(shù)據(jù)庫的工具[10-13]，它能夠有效地管理你的數(shù)據(jù)庫。由于篇幅有限，本節(jié)將給出商品模塊，訂單模塊，會員模塊這3個(gè)部分的數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)。

1）商品模塊

商品模塊的管理是電商系統(tǒng)的核心，如果這塊沒設(shè)計(jì)好，那么所有后期的復(fù)雜的需求基本都滿足不了。商品模塊相關(guān)共有6張表構(gòu)成，如圖1所示。

圖1 商品數(shù)據(jù)庫結(jié)構(gòu)圖

其中商品分類與商品是一對多的關(guān)系，一個(gè)分類中包含多個(gè)商品；一個(gè)商品有多種規(guī)格，每個(gè)規(guī)格有若干個(gè)規(guī)格值；每個(gè)分類頁對應(yīng)有自己的屬性，每個(gè)屬性也有若干個(gè)屬性值；屬性值和規(guī)格值都存在表goods_attr_spe_value中。

2）訂單模塊

訂單模塊的管理是電商系統(tǒng)的重要部分，整個(gè)電商系統(tǒng)都是圍繞的訂單來運(yùn)作的，后臺管理系統(tǒng)很大一部分工作都是在對訂單進(jìn)行操作，從下單—付款—發(fā)貨—確認(rèn)收貨，訂單模塊相關(guān)的數(shù)據(jù)庫設(shè)計(jì)如下圖所示，訂單模塊共設(shè)計(jì)了4張表格，分別是：訂單信息表，訂單詳情表，訂單處理操作表，以及訂單評論表。

其中訂單信息表存放訂單基本信息，也是訂單模塊的主表；訂單詳情表將存放是訂單所包含的各個(gè)商品相關(guān)信息；訂單處理信息表存放對訂單進(jìn)行操作的信息，從下單到訂單完成的所有操作記錄都將保存于這個(gè)表中；訂單評論表存放對訂單的評價(jià)信息。

2.3 接口設(shè)計(jì)

功能模塊和數(shù)據(jù)庫的設(shè)計(jì)成功完成后接下來就開始設(shè)計(jì)系統(tǒng)所的需要的接口了，接口分為內(nèi)部接口和外部接口，內(nèi)部接口就是系統(tǒng)內(nèi)部相互進(jìn)行數(shù)據(jù)傳輸?shù)慕涌冢獠拷涌诰褪桥c其他系統(tǒng)進(jìn)行數(shù)據(jù)通信的接口。接下來將分別介紹。

1）外部接口

外部接口是系統(tǒng)與其他系統(tǒng)進(jìn)行通信的橋梁，電商運(yùn)營管理系統(tǒng)使用的外部接口是德邦快遞的貨物追蹤查詢接口[14]。

物流查詢接口如表1所示。

表1 貨物追蹤查詢接口參數(shù)

2）內(nèi)部接口

內(nèi)部接口就是本系統(tǒng)中各模塊和各層次間相互調(diào)用的接口[15]。

商品模塊包含5個(gè)內(nèi)部接口，分別是分頁獲取商品列表，查詢商品詳細(xì)信息，新增商品，修改商品信息，刪除該商品這幾個(gè)接口。接口傳入和返回參數(shù)具體信息如表2所示。

表2 商品模塊相關(guān)接口列表

3 模塊詳細(xì)設(shè)計(jì)

前面的章節(jié)通過模塊設(shè)計(jì)，數(shù)據(jù)庫設(shè)計(jì)，接口設(shè)計(jì)3個(gè)部分介紹了非物質(zhì)文化遺產(chǎn)電商運(yùn)營管理系統(tǒng)的總體設(shè)計(jì)[16]，接下來將展示非物質(zhì)文化遺產(chǎn)電商運(yùn)營管理系統(tǒng)的詳細(xì)設(shè)計(jì)。分為商品模塊的詳細(xì)設(shè)計(jì)和訂單模塊的詳細(xì)設(shè)計(jì)，這兩部分也是非物質(zhì)文化遺產(chǎn)電商運(yùn)營管理系統(tǒng)最核心的部分[17]。這里由于篇幅有限，只對這兩部分做介紹。

3.1 商品管理模塊

商品管理模塊分為商品分類，商品屬性，商品信息，商品評論管理四個(gè)部分。根據(jù)需求和業(yè)務(wù)邏輯，商品分類中，可以進(jìn)行添加刪除類別，在刪除的時(shí)候要判斷該類別下是否存在商品，如果存在則此商品類別不能被刪除；商品屬性進(jìn)行刪除操作的時(shí)候也是如此，如果該屬性被占用，則不能刪除。

頁面渲染的時(shí)候通過ng-app告訴Angular引擎從這里開始是angularJS管理的內(nèi)容；使用ngcontroller設(shè)置控制器controller；列表頁面中使用angularJS的ng-repeat指令結(jié)合{{}}可以直接將查詢列表在頁面展示；新增修改頁面中只需要綁定ngmodel并利用{{}}就能很方便地進(jìn)行數(shù)據(jù)操作[18]，這也是AngularJS的優(yōu)勢之一。

3.2 訂單管理

會員從下單到完成訂單的流程如圖2所示，其中會員在未付款和已付款但商家未發(fā)貨的時(shí)候可以取消訂單，商家一旦發(fā)貨，會員只能在確認(rèn)收貨后進(jìn)行申請退貨操作。

圖2 訂單流程圖

訂單是由電商系統(tǒng)生成的，電商運(yùn)營管理系統(tǒng)對訂單的管理主要體現(xiàn)在對訂單的查詢和操作上，針對每個(gè)狀態(tài)的訂單的有不同的操作，如圖7所示。使用angularJS，進(jìn)行操作處理之后不再需要額外的代碼進(jìn)行DOM操作來保證頁面上訂單信息的同步。我們要做的只是綁定一個(gè)參數(shù)于ng-model上，只要這個(gè)參數(shù)在一個(gè)位置發(fā)生改變，其他位置會隨之一起被更新，不需要任何額外的DOM操作，這樣可以節(jié)省大量的代碼，開發(fā)者的重心就可以大部分放在數(shù)據(jù)本身上面，而不必去擔(dān)心頁面數(shù)據(jù)的同步問題。

4 結(jié)束語

文中針對現(xiàn)有電商運(yùn)營管理系統(tǒng)的不足，設(shè)計(jì)出了基于angulaJS的非物質(zhì)文化遺產(chǎn)電商運(yùn)營管理系統(tǒng)，將angulaJS的優(yōu)點(diǎn)充分應(yīng)用于電商運(yùn)營管理系統(tǒng)項(xiàng)目中，能很方便的進(jìn)行商品管理，訂單管理，客戶或者會員的管理，以及非遺資訊，非遺活動的管理，并且能大大降低各功能的實(shí)現(xiàn)難度。電商運(yùn)營管理系統(tǒng)非常復(fù)雜龐大，只要耐心深入鉆研，就有很多可以完善的地方。

[1]蘇曉萍.電商時(shí)代非物質(zhì)文化遺產(chǎn)的傳承與發(fā)展途徑研究[J].企業(yè)導(dǎo)報(bào)，2014（16）:87-88.

[2]HONGWen-qiang，CHEChao，ZHANGQiang，WEIXiao-peng.Hibernate Combined TableViewer in the Application of Medicines Inventory Management System[J].Computer Aided Drafting，Design and Manufacturing，2014（2）:48-53.

[3]丁振凡.基于AJAX結(jié)合Spring MVC的信息訪問服務(wù)模式研究[J].計(jì)算機(jī)時(shí)代，2012（6）:25-26.

[4]徐雯，高建華.基于Spring MVC及MyBatis的Web應(yīng)用框架研究[J].微型電腦應(yīng)用，2012（7）:1-4.

[5]黃競.基于jQuery框架的Web前端系統(tǒng)構(gòu)建方法的研究與應(yīng)用[D].北京：北京郵電大學(xué)，2013.

[6]謝強(qiáng).基于MVC模式的物資管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].蘭州：蘭州理工大學(xué)，2016.

[7]薛尚嶺.基于J2EE的銀行前端業(yè)務(wù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].呼和浩特：內(nèi)蒙古大學(xué)，2016.

[8]張妍.基于B2B電子商務(wù)平臺的會員管理系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)[D].北京：北京郵電大學(xué)，2015.

[9]陳錦偉.基于MySQL的空間數(shù)據(jù)庫關(guān)鍵技術(shù)研究[D].南京：南京郵電大學(xué)，2013.

[10]王穎.基于MySQL的學(xué)生成績管理系統(tǒng)設(shè)計(jì)[J].電腦編程技巧與維護(hù)，2014（18）:37-38.

[11]呂東，張弛，康小寧，等.智能變電站異常數(shù)據(jù)識別及恢復(fù)方法[J].陜西電力，2016（7）：6-9，14.

[12]龔成瑩,邢敬宏,?胡銀保.基于JSON的Android移動終端與PHP及MySQL數(shù)據(jù)通信[J].工業(yè)儀表與自動化裝置，2013（1）：63-65.

[13]楊惠.基于ZigBee技術(shù)的數(shù)據(jù)采集系統(tǒng)的設(shè)計(jì)[J].工業(yè)儀表與自動化裝置，2016（2）：54-57.

[14]趙紅梅.電子商務(wù)平臺質(zhì)量評價(jià)體系的研究[D].首都經(jīng)濟(jì)貿(mào)易大學(xué)，2009.

[15]思志學(xué).構(gòu)建基于MVC的Web開發(fā)框架[M].北京：電子工業(yè)出版社，2007.

[16]米林.軟件開發(fā)周期中的需求分析[J].軟件工程師，2013（3）:42-43.

[17]趙海廷.Java程序設(shè)計(jì)教程[M].北京：清華大學(xué)出版社，2012.

[18]王文齊，張革伕，張媛.供應(yīng)鏈管理視角下的國內(nèi)電子商務(wù)物流時(shí)間瓶頸問題研究[J].物流工程與管理，2013（6）:3-5.

Design of electric business operation management system based on AngularJS

LI Ping?ping1，HU Zhi?yong2
（1.Wuhan Research Institute of Postamp;Telecommunications，Wuhan430074，China；2.Wuhan Hong Xin Technology Service Co.，Ltd.，Wuhan430074，China）

In order to meet the growing needs of business platform，put forward higher requirements on the supply chain management background，how to use the least amount of code in a shorter period of time to develop business background management system more efficient will have great research value.In this paper，the design of the AngularJS based business operation management system to solve this problem.This paper first introduces the goal of the intangible cultural heritage of the business operation management system，and then gives the overall design scheme of the system，then gives the design of several key function modules，finally summarized.Through the overall and detailed design of the system，it is concluded that the use of AngularJS front-end framework development and operation management system can effectively shorten the development cycle of 30%，reduce the amount of code，and facilitate the maintenance of the conclusion of the 20%.

electric business operation management system；AngularJS；commodity；member；order

TN99

A

1674-6236（2017）22-0041-04

2016-10-15稿件編號：201610070

李平平（1992—），女，湖北隨州人，碩士研究生。研究方向：互聯(lián)網(wǎng)。