基于AngularJS的電商運營管理系統設計

李平平，胡志勇

（1.武漢郵電科學研究院湖北武漢430074；2.武漢虹信技術服務有限責任公司湖北武漢430074）

基于AngularJS的電商運營管理系統設計

李平平1，胡志勇2

（1.武漢郵電科學研究院湖北武漢430074；2.武漢虹信技術服務有限責任公司湖北武漢430074）

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

電商運營管理系統；AngularJS；商品；會員；訂單

電商運營管理系統是為非物質文化遺產電商系統做支撐的，非物質文化遺產電商系統主要用于打造全國首家以宣傳非遺文化、銷售非遺藏品等內容為主導的綜合網絡平臺[1]。這里主要對運營管理平臺進行研究。

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

1 電商運營管理系統架構設計

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

業務層是通過Spring框架實現的，系統的大部分業務邏輯處理是在這里完成的，在場景層中使用@Autowired注入service相關的類和接口，就可以在場景層調用業務層的方法。同樣的，在業務層@Autowired注入dao相關的類，就可以實現與持久層之間的通信[6]。

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

2 電商運營管理系統總體設計

決定了電商運營管理系統所采用的框架后，將進一步研究非物質文化遺產電商運營管理系統的總體設計。電商運營管理系統的總體設計包含系統模塊劃分，介紹了系統主要包含哪些功能模塊；數據庫設計，介紹了系統個模塊的數據模型；接口設計，介紹了系統的使用的外部接口和內部接口。

2.1 模塊劃分

電商運營管理系統分為商品管理、訂單管理、會員管理、營銷管理、非遺管理、報表管理、創意空間、系統管理8個模塊。

2.2 數據庫設計

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

1）商品模塊

商品模塊的管理是電商系統的核心，如果這塊沒設計好，那么所有后期的復雜的需求基本都滿足不了。商品模塊相關共有6張表構成，如圖1所示。

圖1 商品數據庫結構圖

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

2）訂單模塊

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

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

2.3 接口設計

功能模塊和數據庫的設計成功完成后接下來就開始設計系統所的需要的接口了，接口分為內部接口和外部接口，內部接口就是系統內部相互進行數據傳輸的接口，外部接口就是與其他系統進行數據通信的接口。接下來將分別介紹。

1）外部接口

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

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

表1 貨物追蹤查詢接口參數

2）內部接口

內部接口就是本系統中各模塊和各層次間相互調用的接口[15]。

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

表2 商品模塊相關接口列表

3 模塊詳細設計

前面的章節通過模塊設計，數據庫設計，接口設計3個部分介紹了非物質文化遺產電商運營管理系統的總體設計[16]，接下來將展示非物質文化遺產電商運營管理系統的詳細設計。分為商品模塊的詳細設計和訂單模塊的詳細設計，這兩部分也是非物質文化遺產電商運營管理系統最核心的部分[17]。這里由于篇幅有限，只對這兩部分做介紹。

3.1 商品管理模塊

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

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

3.2 訂單管理

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

圖2 訂單流程圖

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

4 結束語

文中針對現有電商運營管理系統的不足，設計出了基于angulaJS的非物質文化遺產電商運營管理系統，將angulaJS的優點充分應用于電商運營管理系統項目中，能很方便的進行商品管理，訂單管理，客戶或者會員的管理，以及非遺資訊，非遺活動的管理，并且能大大降低各功能的實現難度。電商運營管理系統非常復雜龐大，只要耐心深入鉆研，就有很多可以完善的地方。

[1]蘇曉萍.電商時代非物質文化遺產的傳承與發展途徑研究[J].企業導報，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結合Spring MVC的信息訪問服務模式研究[J].計算機時代，2012（6）:25-26.

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

[5]黃競.基于jQuery框架的Web前端系統構建方法的研究與應用[D].北京：北京郵電大學，2013.

[6]謝強.基于MVC模式的物資管理系統的設計與實現[D].蘭州：蘭州理工大學，2016.

[7]薛尚嶺.基于J2EE的銀行前端業務系統的設計與實現[D].呼和浩特：內蒙古大學，2016.

[8]張妍.基于B2B電子商務平臺的會員管理系統的設計和實現[D].北京：北京郵電大學，2015.

[9]陳錦偉.基于MySQL的空間數據庫關鍵技術研究[D].南京：南京郵電大學，2013.

[10]王穎.基于MySQL的學生成績管理系統設計[J].電腦編程技巧與維護，2014（18）:37-38.

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

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

[13]楊惠.基于ZigBee技術的數據采集系統的設計[J].工業儀表與自動化裝置，2016（2）：54-57.

[14]趙紅梅.電子商務平臺質量評價體系的研究[D].首都經濟貿易大學，2009.

[15]思志學.構建基于MVC的Web開發框架[M].北京：電子工業出版社，2007.

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

[17]趙海廷.Java程序設計教程[M].北京：清華大學出版社，2012.

[18]王文齊，張革伕，張媛.供應鏈管理視角下的國內電子商務物流時間瓶頸問題研究[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—），女，湖北隨州人，碩士研究生。研究方向：互聯網。