基于Yii2+AngularJS的MVC电商开发例子

梁英杰

摘要：电商软件的开发需要快速的迭代开发，Yii2+AngularJS是适合电商开发的非常优秀的框架，本文以组件化的开发方式，用Yii2以面向对象的MVC架构完美的支持底层，AngularJS做业务层的绑定，跟Html5+CSS3一起完美将界面显示。开发时合理利用浏览器做调试，大大减少了开发时间，是主流的电商软件的开发模式。

关键词：电商；Yii2 AngularJS；浏览器调试

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2016）27-0275-02

Yii是一个高性能的，完全面向对象的，适用于开发 WEB2.0 应用的 PHP 框架。和其他 PHP 框架类似，Yii 实现了 MVC设计模式并基于该模式组织代码。Yii 是一个通用的 Web 编程框架，基于组件的框架结构和设计精巧的缓存支持特点，使得其特别适合开发大型应用[1]，如门户网站、论坛、内容管理系统（CMS）、电子商务项目和 Web 服务等。

Yii 当前主要有1.1 和 2.0两个主要版本， 2.0 版完全重写了上一个版本1.1版，采用最新的技术和协议，包括依赖命名空间、T包管理器、PHP 代码规范、PSR Composer等等[2]。

Yii 2.0最明显的改变是对命名空间的使用。几乎所有的核心类都使用了命名空间，比如[yii/web/Request][3]。同时，类名前不再使用“C”前缀。命名空间的命名遵循目录结构，如yii/web/Request代表的相应类文件是位于Yii 框架的目录下的 web/Request.php。由于Yii的类装载机制，可以在未显示包含类文件的情况下使用任意的核心类。

还有一个特殊的改变时CComponent，Yii 2.0将1.1版本中的CComponent类拆分成两个类：[[yii＼base＼Object]] 和 [[yii/base/Component]]。其中，[[yii＼base＼Object|Object]]类是一个轻量级的基类，它通过getter 和setter提供了定义类属性（property）的方法。[[yii＼base＼Component|Component]]继承自[[yii ＼base＼Object|Object]]，并提供对事件（event）和行为（behavior）的支持。

Yii2具有更比Yii1更优的开发性能，对组件化的开发方式具有更好的支持。下面以一个电商开发的例子来讲解用Yii2进行组件化的快速开发。

电子商务是互联网高速发展下的产物，电子商务的快而新的特点使得开发中也必须要快而稳，因此传统的瀑布模型的软件开发模式并不适合，需要敏捷开发思想指导快速，迭代式开发。我们在系统开发中组建一个具有三种角色开发人员的团队，软件开发经理、开发工程师和美工。软件开发经理负责用Yii2框架搭建软件系统框架，将底层的代码进行封装，供业务层的人员调用，并规划整个项目的开发周期和组织协调整个项目组的开发，他是整个团队开发的核心。开发工程师充当业务层的开发，负责将底层的数据按业务逻辑需要，将数据展现到UI设计师设计的软件界面，从而完成整个项目的开发。

软件开发经理下载安装最新版的Yii2框架，安装PHPstudy软件作为软件运行环境工具，并配置运行环境，设定软件PHP的版本，指定文件存放路劲，设定运行端口。安装NetBeans软件作为开发编辑器，所有的非UI开发人员按此进行统一配置环境。系统进入迭代开发的时期，底层开发人员直接面向数据库操作，对数据进行封装，开发完成代码后利用第三方开发工具进行调试，调试通过再给业务层的人员进行调用，提高开发效率。

后台编写的接口没有界面进行绑定，不好进行调试，在给业务层进调用之前先调试。可以采用谷歌或火狐浏览器配套的开发工具，本文的系统选用火狐的HttpRequest插件进行调试，如图1所示。调试时，以json的模式模拟业务层对接口的类和方法进行调试，还有传递的参数封装起来进行传递，调用的结果也以json的方式返回。如图1左边就是对一个电商的满赠满减促销活动的底层方法的调试，代码编写时只支持英文模式，层与层之间用大括号包含起来，参数的格式为” key”：”value”，参数之间用”，”隔开。图1右边则是调用后的结果，如果方法中有错会给出错误提示，错误提示会给出编码的语法错误或是错误的sql语句提示，根据错误提示，开发人员能快速定位到错误原因，修改代码，再次进行调试。

业务逻辑层采用一款优秀的前端JS框架AngularJS进行开发，AngularJS已经封装有一些用于提高开发效率的类库，比如表弟的绑定，表单的验证，数据的缓存处理等，下面图2就是一个AngularJs拿来展示列表的绑定方法。先用AngularJS编业务逻辑，接着再用其强大的标签库绑定页面，进行数据的展示和获取。调试的时候就直接用浏览器的开发人员模式，如图2所示，在运行中，页面调用到的任何代码和方法都能清晰地看到参数的传递和调用后的反馈，出现问题能更快定位到，从而达到快速开发的目的。

除了调试工具促进开发效率，最重要的是采用组件化的MVC分层开发模式，并运用流行的yii2和AngularJS框架作为开发技术，要写的代码非常少。封装好底层框架，搭建好页面的调用结构，进行业务功能开发时只需做三件事，第一、利用Yii2提供的工具生成数据表的model类，省去了大量的开发时间；第二、用Yii2提供的结构化查询语句进行数据查找，第三、利用AngularJS提供的类库绑定到页面。

总结：整个开发过程非常简单快速，开发人员很容易上手，Yii2+AngularJS是个快速迭代开发的好框架组合。加上浏览器调试工具，一个轻量级的开发模式，适合各种中小型软件的开发。

参考文献：

[1] yii百度百科：http：//baike.baidu.com/link？url=Jmz-O00RJYqDMwclivX4Mi9qRbGzgbPDdEgLKkrde43qV7qSJMyeLeWNu5FZg5q7S3K029NXQ5c8b-Pw6LtLFK

[2] 知乎：linuor.http：//www.zhihu.com/question/22924271/answer/23115432

[3] 岳雨俭，尹柯，吴观茂.一种基于框架移动编程通信接口的设计与实现[J].计算机与数字工程，2014（12）：2428-2432.