基于Yii2+AngularJS的MVC電商開發(fā)例子

梁英杰

摘要：電商軟件的開發(fā)需要快速的迭代開發(fā)，Yii2+AngularJS是適合電商開發(fā)的非常優(yōu)秀的框架，本文以組件化的開發(fā)方式，用Yii2以面向?qū)ο蟮腗VC架構(gòu)完美的支持底層，AngularJS做業(yè)務(wù)層的綁定，跟Html5+CSS3一起完美將界面顯示。開發(fā)時(shí)合理利用瀏覽器做調(diào)試，大大減少了開發(fā)時(shí)間，是主流的電商軟件的開發(fā)模式。

關(guān)鍵詞：電商；Yii2 AngularJS；瀏覽器調(diào)試

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）27-0275-02

Yii是一個(gè)高性能的，完全面向?qū)ο蟮模m用于開發(fā) WEB2.0 應(yīng)用的 PHP 框架。和其他 PHP 框架類似，Yii 實(shí)現(xiàn)了 MVC設(shè)計(jì)模式并基于該模式組織代碼。Yii 是一個(gè)通用的 Web 編程框架，基于組件的框架結(jié)構(gòu)和設(shè)計(jì)精巧的緩存支持特點(diǎn)，使得其特別適合開發(fā)大型應(yīng)用[1]，如門戶網(wǎng)站、論壇、內(nèi)容管理系統(tǒng)（CMS）、電子商務(wù)項(xiàng)目和 Web 服務(wù)等。

Yii 當(dāng)前主要有1.1 和 2.0兩個(gè)主要版本， 2.0 版完全重寫了上一個(gè)版本1.1版，采用最新的技術(shù)和協(xié)議，包括依賴命名空間、T包管理器、PHP 代碼規(guī)范、PSR Composer等等[2]。

Yii 2.0最明顯的改變是對(duì)命名空間的使用。幾乎所有的核心類都使用了命名空間，比如[yii/web/Request][3]。同時(shí)，類名前不再使用“C”前綴。命名空間的命名遵循目錄結(jié)構(gòu)，如yii/web/Request代表的相應(yīng)類文件是位于Yii 框架的目錄下的 web/Request.php。由于Yii的類裝載機(jī)制，可以在未顯示包含類文件的情況下使用任意的核心類。

還有一個(gè)特殊的改變時(shí)CComponent，Yii 2.0將1.1版本中的CComponent類拆分成兩個(gè)類：[[yii＼base＼Object]] 和 [[yii/base/Component]]。其中，[[yii＼base＼Object|Object]]類是一個(gè)輕量級(jí)的基類，它通過(guò)getter 和setter提供了定義類屬性（property）的方法。[[yii＼base＼Component|Component]]繼承自[[yii ＼base＼Object|Object]]，并提供對(duì)事件（event）和行為（behavior）的支持。

Yii2具有更比Yii1更優(yōu)的開發(fā)性能，對(duì)組件化的開發(fā)方式具有更好的支持。下面以一個(gè)電商開發(fā)的例子來(lái)講解用Yii2進(jìn)行組件化的快速開發(fā)。

電子商務(wù)是互聯(lián)網(wǎng)高速發(fā)展下的產(chǎn)物，電子商務(wù)的快而新的特點(diǎn)使得開發(fā)中也必須要快而穩(wěn)，因此傳統(tǒng)的瀑布模型的軟件開發(fā)模式并不適合，需要敏捷開發(fā)思想指導(dǎo)快速，迭代式開發(fā)。我們?cè)谙到y(tǒng)開發(fā)中組建一個(gè)具有三種角色開發(fā)人員的團(tuán)隊(duì)，軟件開發(fā)經(jīng)理、開發(fā)工程師和美工。軟件開發(fā)經(jīng)理負(fù)責(zé)用Yii2框架搭建軟件系統(tǒng)框架，將底層的代碼進(jìn)行封裝，供業(yè)務(wù)層的人員調(diào)用，并規(guī)劃整個(gè)項(xiàng)目的開發(fā)周期和組織協(xié)調(diào)整個(gè)項(xiàng)目組的開發(fā)，他是整個(gè)團(tuán)隊(duì)開發(fā)的核心。開發(fā)工程師充當(dāng)業(yè)務(wù)層的開發(fā)，負(fù)責(zé)將底層的數(shù)據(jù)按業(yè)務(wù)邏輯需要，將數(shù)據(jù)展現(xiàn)到UI設(shè)計(jì)師設(shè)計(jì)的軟件界面，從而完成整個(gè)項(xiàng)目的開發(fā)。

軟件開發(fā)經(jīng)理下載安裝最新版的Yii2框架，安裝PHPstudy軟件作為軟件運(yùn)行環(huán)境工具，并配置運(yùn)行環(huán)境，設(shè)定軟件PHP的版本，指定文件存放路勁，設(shè)定運(yùn)行端口。安裝NetBeans軟件作為開發(fā)編輯器，所有的非UI開發(fā)人員按此進(jìn)行統(tǒng)一配置環(huán)境。系統(tǒng)進(jìn)入迭代開發(fā)的時(shí)期，底層開發(fā)人員直接面向數(shù)據(jù)庫(kù)操作，對(duì)數(shù)據(jù)進(jìn)行封裝，開發(fā)完成代碼后利用第三方開發(fā)工具進(jìn)行調(diào)試，調(diào)試通過(guò)再給業(yè)務(wù)層的人員進(jìn)行調(diào)用，提高開發(fā)效率。

后臺(tái)編寫的接口沒(méi)有界面進(jìn)行綁定，不好進(jìn)行調(diào)試，在給業(yè)務(wù)層進(jìn)調(diào)用之前先調(diào)試?？梢圆捎霉雀杌蚧鸷鼮g覽器配套的開發(fā)工具，本文的系統(tǒng)選用火狐的HttpRequest插件進(jìn)行調(diào)試，如圖1所示。調(diào)試時(shí)，以json的模式模擬業(yè)務(wù)層對(duì)接口的類和方法進(jìn)行調(diào)試，還有傳遞的參數(shù)封裝起來(lái)進(jìn)行傳遞，調(diào)用的結(jié)果也以json的方式返回。如圖1左邊就是對(duì)一個(gè)電商的滿贈(zèng)滿減促銷活動(dòng)的底層方法的調(diào)試，代碼編寫時(shí)只支持英文模式，層與層之間用大括號(hào)包含起來(lái)，參數(shù)的格式為” key”：”value”，參數(shù)之間用”，”隔開。圖1右邊則是調(diào)用后的結(jié)果，如果方法中有錯(cuò)會(huì)給出錯(cuò)誤提示，錯(cuò)誤提示會(huì)給出編碼的語(yǔ)法錯(cuò)誤或是錯(cuò)誤的sql語(yǔ)句提示，根據(jù)錯(cuò)誤提示，開發(fā)人員能快速定位到錯(cuò)誤原因，修改代碼，再次進(jìn)行調(diào)試。

業(yè)務(wù)邏輯層采用一款優(yōu)秀的前端JS框架AngularJS進(jìn)行開發(fā)，AngularJS已經(jīng)封裝有一些用于提高開發(fā)效率的類庫(kù)，比如表弟的綁定，表單的驗(yàn)證，數(shù)據(jù)的緩存處理等，下面圖2就是一個(gè)AngularJs拿來(lái)展示列表的綁定方法。先用AngularJS編業(yè)務(wù)邏輯，接著再用其強(qiáng)大的標(biāo)簽庫(kù)綁定頁(yè)面，進(jìn)行數(shù)據(jù)的展示和獲取。調(diào)試的時(shí)候就直接用瀏覽器的開發(fā)人員模式，如圖2所示，在運(yùn)行中，頁(yè)面調(diào)用到的任何代碼和方法都能清晰地看到參數(shù)的傳遞和調(diào)用后的反饋，出現(xiàn)問(wèn)題能更快定位到，從而達(dá)到快速開發(fā)的目的。

除了調(diào)試工具促進(jìn)開發(fā)效率，最重要的是采用組件化的MVC分層開發(fā)模式，并運(yùn)用流行的yii2和AngularJS框架作為開發(fā)技術(shù)，要寫的代碼非常少。封裝好底層框架，搭建好頁(yè)面的調(diào)用結(jié)構(gòu)，進(jìn)行業(yè)務(wù)功能開發(fā)時(shí)只需做三件事，第一、利用Yii2提供的工具生成數(shù)據(jù)表的model類，省去了大量的開發(fā)時(shí)間；第二、用Yii2提供的結(jié)構(gòu)化查詢語(yǔ)句進(jìn)行數(shù)據(jù)查找，第三、利用AngularJS提供的類庫(kù)綁定到頁(yè)面。

總結(jié)：整個(gè)開發(fā)過(guò)程非常簡(jiǎn)單快速，開發(fā)人員很容易上手，Yii2+AngularJS是個(gè)快速迭代開發(fā)的好框架組合。加上瀏覽器調(diào)試工具，一個(gè)輕量級(jí)的開發(fā)模式，適合各種中小型軟件的開發(fā)。

參考文獻(xiàn)：

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

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

[3] 岳雨儉，尹柯，吳觀茂.一種基于框架移動(dòng)編程通信接口的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與數(shù)字工程，2014（12）：2428-2432.