基于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—），女，湖北随州人，硕士研究生。研究方向：互联网。