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