限时 5折! 详情

yii2入门-第一个Yii程序

17648 0 0

之前考虑过要不要砍掉该章节,直接上手教你搭建简单的博客系统。出于实战基础加之自C语言的书籍出版以来,几乎所有的编程书籍都讲述了一个Hello World的例子作为开始。虽然我们仅仅是学习Yii2,但是好歹我们这也是高大上的Yii嘛,我们也尊重传统,来一段Hello World快速入门!

你将学会什么

  1. 了解到MVC设计模式中的V和C是什么
  2. 如何创建一个操作(action)
  3. 如何创建对应的视图文件(模板)
  4. 简单了解到操作的命名规范
  5. 什么是路由

开始之前的准备

Yii是什么?为什么要学Yii呢?是啥,就是一个框架,如果要加一些形容词,我觉得高性能、易扩展等词最适合不过了。

MVC相信就不用多说了,Yii2无疑更好的基于MVC对代码进行了一定的组织。简洁优雅不说......我们还是不拍yii马屁了,说重点。

我们知道,客户端向服务端发起一个请求,服务端是必须要有对应的响应地址才是可以的。这个响应的地址在Yii2中又是怎么进行描述的呢?先来介绍下什么是操作。

操作,其实就是一个action(action是动作的意思),也可以描述为我们前面说的响应地址。TA是控制器(controller)的组成部分,再说白了其实就是类(class)的操作方法(function)。

如何创建一个操作呢?给类创建一个方法你会不,非要说的那么白才明白不是太好,对吧。

也就是说我们需要先有一个类(控制器)呗,没错!如下示例就是包含了两个操作 index 和create的控制器test。

namespace frontend\controllers; 

use yii\web\Controller; 

class TestController extends Controller 
{ 
    public function actionIndex () {} 
    public function actionCreate () {} 
}

有同学要较真了,控制器不是test吗,为啥你的是TestController?还有啊,说好的操作名是index和create为啥你的都有前缀action?controller跟action去掉可不可以?答:不可以,必须带上!Yii2规定:声明的控制器必须带上Controller后缀,同时操作必须带上action前缀!

也就是说这是框架的硬性规定,用这套框架,遵守框架的规则那肯定是没问题的。

通常情况下,控制器用来处理请求有关的资源类型,其实就是做一些操作的,比如我们要处理文章之类的数据,控制器应命名为Article恰当些,尽量做到见名知意。Action当然也是如此,比如我们要创建一篇文章,action理应为add或者create为好。

那有同学要说了,我就想叫操作名为createArticle怎么办?这个没人约束你,还是那句话,见名知意就好。

yii2中操作名(action)遵循驼峰式命名,也就是说如果你是多个单词,请保证你的命名规则是actionCreateArticle而不是actionCreatearticle!当然,这只是一种规范,你不这样做也没人拦你。需要提醒的是多个单词驼峰式命名(actionAaaBbb形态),通过浏览器访问该地址的时候,action的访问形式应该是 aaa-bbb 形态。即这样用连接符-连接而不是aaaBbb哦

接下来我们访问已经创建好的操作:

  1. 首先我们先配置下域名 advanced.dev 指向 frontend\web目录,我们后文所指的该域名均指向这里
  2. 在 frontend\controllers\ 目录下新建 TestController.php 文件,内容参考上面我们创建 Test 控制器的代码

地址栏输入 http://advanced.dev/index.php?r=test/index 访问看看结果,我们会发现一片空白,什么也没有!很明显,我们的的操作方法index里空空如也,没做任何输出。要不我们做点什么?别急,我们先来看看这个地址,TA究竟做了什么,为什么能请求到我们指定的操作。

这就需要我们引入一个新的概念-路由。感觉挺好哈,这名字都没听过。不过不要紧,我换个说法你就明白了,访问地址,路由就是我们的访问地址!明白了吧,TA就是用于定位控制器操作的地址!我们这里重点是讲明白概念,不做深究,具体细节需要的可以去查看官方文档。

输出Hello World!

该明白的该说的都说了,饶了一大圈终于要说本文的重点了: 输出 Hello World

public function actionIndex () 
{ 
    echo "Hello World!"; 
}

现在在回过来看看,是不是很简单!

我们改变点什么,看看如何动态的输出 Hello Ketty,Hello Anmy?

public function actionIndex ($name) 
{ 
    echo "Hello {$name}!"; 
}

该操作接收一个参数 name ,理应程序上会输出 Hello, xxx 的字样。

现在我们依然访问 http://advanced.dev/index.php?r=test/index 会发现页面报错了,提示错误缺少参数:name!也就是说,我们访问该操作时应该传进来一个参数 name!我们把地址修改为 http://advanced.dev/index.php?r=test/index&name=Kitty, 这个时候页面正常输出了Hello Kitty!手动修改地址栏的name值,页面上输出的内容也会随之进行改变!

我们知道,操作其实就类似MVC中的C层,C层也就是处理业务逻辑的一层,如此一来,像上面在控制器的操作方法中输出内容明显就不太合适了。

既然要输出内容,我们看看Yii2的V层又是如何进行操作(此操作非彼操作,不要妄加揣摩)的呢?

我们引入新的概念-视图。视图是啥?视图就是我们的模版文件。我们在 frontend\views\ 目录下创建文件夹test, 然后在test目录下创建一个视图文件index.php,文件内容如下

<div class="test-index"> 
    <h1>Hello World!</h1> 
</div>

说明一点:frontend\views下面创建的文件夹应与控制器保持一致,如此一来才方便我们对很多文件进行管理。

这里额外提醒一句,如果控制器的名字是 AaaBbb,那么你应该创建的文件夹名是 aaa-bbb。

下面我们再来看看如何让C层与V层衔接

修改你的index操作如下

public function actionIndex ($name) 
{ 
    // echo "Hello {$name}!"; 
    return $this->render('index'); 
}

仅仅是在之前的操作index内写了一行代码,用于操作视图文件。

这里我们调用的是controller的render方法,该方法用于渲染布局。所谓的渲染布局指的是加载公共的头尾以及我们指定的视图文件 index.php

接着我们在视图文件内动态输出 Hello xxx! 但是视图文件的变量哪来的呢?我们可以在index操作中通过render方法的第二个参数向视图文件内传递变量。

// controller 
public function actionIndex ($name) 
{ 
    // echo "Hello {$name}!"; 
    return $this->render('index', [ 
        'name' => $name, 
    ]); 
} 

//view 
<div class="test-index"> 
    <h1>Hello <?= $name ?>!</h1> 
</div>

如此,我们既掌握了视图,又实现了想要输出的 Hello xxx!

但是啊但是,这个时候,如果我们地址栏输入的参数name值等于 <script>alert(111)</script>,我们想要的结果是Hello <script>alert(111)</script>!实际上并非如此!如此一来,就难免会遭遇XSS攻击!为了安全起见,页面上输出的信息我们很有必要安全地处理一下!

<div class="test-index"> 
    <h1>Hello <?= yii\helpers\Html::encode($name) ?>!</h1> 
</div>

实际上这里我们也仅仅是简单的谈了一下如何避免XSS跨站攻击。

注:yii\helpers\Html 是一个官方自带的工具类,这里先了解一下,后面我们会大量的使用官方自带的工具类。

下一节我们将要直接开讲简单的博客管理系统,本篇我们主要涉及的基本概念 操作、视图、路由等,希望你能掌握透彻,有任何问题下方均可留言交流!