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

梁英杰

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

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

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2016）27-0275-02

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

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

Yii 2.0最明顯的改變是對命名空間的使用。幾乎所有的核心類都使用了命名空間，比如[yii/web/Request][3]。同時，類名前不再使用“C”前綴。命名空間的命名遵循目錄結(jié)構(gòu)，如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更優(yōu)的開發(fā)性能，對組件化的開發(fā)方式具有更好的支持。下面以一個電商開發(fā)的例子來講解用Yii2進行組件化的快速開發(fā)。

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

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

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

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

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

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

參考文獻：

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

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

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