Yii2系列教程二：MVC,Forms和Layouts

上一篇文章咱們簡單地實現了Yii2框架安裝和Hello World，而在這一篇文章當中，咱們會帶着好奇之心去探索一下在Yii2中的幾個重要的元素組成：MVC，Forms和Layouts。

本文的目標是建立一個小小的表單應用，就是實現一個簡單的相似發微博的功能，可是我還不想牽扯到數據庫那一塊，由於其實數據庫和表在Yii2框架之中其實仍是有不少東西能夠講的，打算在下一篇的文章中會詳細講到。

MVC

模型(Model)對於我我的的簡單理解就是一個概念集合，在這個集合裏面包含該概念集合的多種數據，好比一個User會有姓名，性別等多個屬性，這個概念集合一般就是對於數據庫的一張表（若是尚未對應的數據表，則能夠看做是一個集合的屬性）；而每個具體的實例概念就對應一條數據記錄。好比在這一篇文章之中咱們會建立一個Status模型，表明狀態（來源於生活：發一條狀態），這個Status會有兩個重要的屬性，text和permissions，text就是狀態自己，permissions是狀態的權限。

視圖(Views)經過控制器想模型請求數據，並將數據以某種特定的版式展現給用戶。

控制器(Controller)能夠向Model和Views發送不一樣的指令，通常是向Model取數據，而後讀取視圖文件來渲染輸出數據。

在Yii2的應用中，通常是這樣的：某個URL指向某個控制器的特定action，而後控制器負責向特定的模型取數據，而後將數據分配給視圖渲染輸出。

在這裏說一下我我的的觀點，我以爲其實在MVC當中，可能應該作事最多的應該是Model，與之相迎合的是，Controller和Views則相對要輕一些，Controller負責協調Model和Views，Views負責展現數據。

在Yii2的項目當中，咱們將models文件放在/models/目錄之下，因此咱們在這個文件夾之下建立Status.php：

<?php namespace app\models; use yii\base\Model; class Status extends Model { const PERMISSIONS_PRIVATE = 10; const PERMISSIONS_PUBLIC = 20; public $text; public $permissions; public function rules() { return [ [['text','permissions'], 'required'], ]; } public function getPermissions() { return array (self::PERMISSIONS_PRIVATE=>'Private',self::PERMISSIONS_PUBLIC=>'Public'); } public function getPermissionsLabel($permissions) { if ($permissions==self::PERMISSIONS_PUBLIC) { return 'Public'; } else { return 'Private'; } } } 

這裏須要注意的是rules()這個方法，它會觸發Yii自帶的表單驗證規則，好比這裏就是text和permissions這兩個表單輸入框都不能爲空，至於getPermissions()這個方法是爲了在使用dropdown輸入框的時候使用的。

Status模型建立好以後，咱們就能夠接着建立對應的控制器和方法。在平時的開發中我習慣是爲每個模型都建立一個對應的控制器，裏面通常都是包含幾個最多見的方法：index, create, store, update, delete等。這裏我建立一個StatusController.php，這個文件應該是位於/controllers/文件夾當中，而咱們但願實現一個發表狀態的功能，咱們必須須要一個create操做方法，好比咱們的目的是：在用戶訪問http://localhost:8999/status/create的時候，咱們能夠展現建立一條狀態的頁面給用戶。

<?php namespace app\controllers; use Yii; use yii\web\Controller; use app\models\Status; class StatusController extends Controller { public function actionCreate() { $model = new Status; if ($model->load(Yii::$app->request->post()) && $model->validate()) { // $model 有post數據時直接展現 return $this->render('view', ['model' => $model]); } else { // 沒有數據的時候，直接渲染create視圖 return $this->render('create', ['model' => $model]); } } } 

首先，根據URL的規則，咱們建立了一個actionCreate()方法，在這個方法裏，咱們經過條件判斷來肯定展現某個特定的視圖。

建立好控制器和方法以後，咱們就能夠走到下一步了：建立視圖。在Yii2中，視圖文件的存放位置跟控制器的名字是息息相關的，好比上面咱們建立了一個StatusController，咱們如今首先須要在views/建立一個status/文件夾，而後在這個文件夾裏建立各個跟StatusController相關的視圖文件，好比上面actionCreate()中return $this->render()兩個視圖：view.php和create.php

Forms

首先，咱們須要一個Create視圖來展現咱們建立Status的表單(create.php):

<?php use yii\helpers\Html; use yii\widgets\ActiveForm; use app\models\Status; ?> <?php $form = ActiveForm::begin();?> <?= $form->field($model, 'text')->textArea(['rows' => '4'])->label('Status Update'); ?> <?= $form->field($model, 'permissions')->dropDownList($model->getPermissions(), ['prompt'=>'- Choose Your Permissions -']) ?> <div class="form-group"> <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?> </div> <?php ActiveForm::end(); ?> 

在咱們平時開發web應用的時候，表單幾乎老是每時每刻都得存在，只要是須要收集信息的地方就須要表單。而Yii2在對錶單支持這方面作得很是不錯，就如你看到的同樣，上面的Yii2 ActiveForm就是Yii2內置的用來幫助咱們生成表單的小組件，這裏須要注意的是dropDownList這個輸入框式怎麼實現的，它直接使用了getPermissions()，這個方法正好返回了一個咱們須要的數組。

這時候訪問：http://localhost:8999/status/create 就能夠看到上面建立的表單了：

至於爲何就自動排版好了，不用咱們寫css，那是由於Yii2默認會給咱們加載Bootstrap的css文件，因此咱們在使用的時候直接指定類名就OK了。並且很明顯地，咱們能夠看到，一旦輸入框在失去焦點的時候，若是裏面沒有輸入任何內容，每一個輸入框就會有相應的錯誤提示，用戶體驗很不錯。這個實際上是得益於咱們在Status模型中聲明的rules()方法，Yii2會根據指定的規則經過js在前端給出相應的驗證。

而後咱們嘗試填入一些內容，你就會看到輸入框的變化了：

點擊Submit 按鈕，表單會提交到StatusController的actionCreate()方法，一旦有post數據傳過來，就會渲染view.php視圖：

到這裏，其實咱們就走通整個MVC的過程，而且在這個過程當中，咱們順帶說了一下Forms的知識點。

Layouts

爲何要說Layouts呢？由於Layouts在Yii中其實能夠看做是視圖中常常重複用到的部分，好比一個HTML文件的header，navigation bar 和footer等，這些都是幾乎是在每個視圖文件中都會用到，因此Yii採起了一種一勞永逸的方法來管理這些共用的部分：Layouts就應運而生。這樣你就不用在每個view文件中重複沒必要要的代碼了，並且又特別好管理。

Yii容許你建立多個Layouts，不過我貌似還沒遇到那樣的使用場景，因此仍是沒法給出有實證的說法，無論怎麼說，一個Layouts就基本夠用了。

最後，咱們藉着Layouts的東風來看看咱們怎麼修改一下Yii2的默認導航欄：添加一個新的導航。

在上一節我就提到過views\layouts\main.php這個文件，裏面的具體結構你能夠直打開來看看，咱們這裏改動的是Nav::widget這部分：

echo Nav::widget([ 'options' => ['class' => 'navbar-nav navbar-right'], 'items' => [ ['label' => 'Home', 'url' => ['/site/index']], [ 'label' => 'Status', 'items' => [ ['label' => 'Create', 'url' => ['/status/create']], ], ], ['label' => 'About', 'url' => ['/site/about']], ['label' => 'Contact', 'url' => ['/site/contact']], Yii::$app->user->isGuest ? ['label' => 'Login', 'url' => ['/site/login']] : ['label' => 'Logout (' . Yii::$app->user->identity->username . ')', 'url' => ['/site/logout'], 'linkOptions' => ['data-method' => 'post']], ], ]); 

咱們在原本的基礎之上添加了下面這個內容：

[
    'label' => 'Status', 'items' => [ ['label' => 'Create', 'url' => ['/status/create']], ], ], 

這樣以後，刷新一下頁面，你就能夠看到咱們的導航變化了。並且很神奇的是：這裏還實現了dropdown menu的功能，這個其實就是使用Bootstrap的dropdown menu來實現的。

嗯，這篇文章貌似講得差很少了，至少我不知道還改講些什麼了，接下來的文章我會嘗試講講Yii2的數據庫相關的內容，先睡覺。

源碼會放在 Github：https://github.com/JellyBool/helloYii