摘要:而且很明顯地,我們可以看到,一旦輸入框在失去焦點的時候,如果里面沒有輸入任何內容,每個輸入框就會有相應的錯誤提示,用戶體驗很不錯。
原文來自: https://jellybool.com/post/programming-with-yii2-exploring-mvc-forms-a...
上一篇文章我們簡單地實現了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:
``` "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的時候,我們可以展示創建一條狀態的頁面給用戶。
``` 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):
= $form->field($model, "text")->textArea(["rows" => "4"])->label("Status Update"); ?> = $form->field($model, "permissions")->dropDownList($model->getPermissions(), ["prompt"=>"- Choose Your Permissions -"]) ?>= Html::submitButton("Submit", ["class" => "btn btn-primary"]) ?>
在我們平時開發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在Yii中其實可以看作是視圖中經常重復用到的部分,比如一個HTML文件的header,navigation bar 和footer等,這些都是幾乎是在每一個視圖文件中都會用到,所以Yii采取了一種一勞永逸的方法來管理這些共用的部分:Layouts就應運而生。這樣你就不用在每一個view文件中重復不必要的代碼了,而且又特別好管理。
Yii允許你創建多個Layouts,不過我貌似還沒遇到那樣的使用場景,所以還是無法給出有實證的說法,不管怎么說,一個Layouts就基本夠用了。
最后,我們借著Layouts的東風來看看我們怎么修改一下Yii2的默認導航欄:添加一個新的導航。
在上一節我就提到過viewslayoutsmain.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
Happy Hacking
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/21049.html
摘要:但是這還沒有完,因為我們還需要對我們的做一些些小改動,主要是在的改動在這里,我們添加下面這兩行來保障我們在插入數據的時候,和不為空。 原文來自:https://jellybool.com/post/programming-with-yii2-working-with-the-data... 上一篇文章我們理了一下Yii2的MVC,Forms和Layouts,這篇文章就直接按照...
摘要:開始使用郵箱配置好了之后,我們就可以開始使用了,首先我們來修改一下我們的導航欄,因為我們想實現的就是我們常常看到的在導航欄的右側的注冊和登錄按鈕。 原文來自: https://jellybool.com/post/programming-with-yii2-integrating-user-regi... 本來打算昨晚寫的這篇教程,但是忙著約會去了,所以現在補上吧。 上一篇...
摘要:利用渲染后臺模板后臺的模板我們采用利用插播一曲是一個完全響應管理模板。基于框架,易定制模板。適合多種屏幕分辨率,從小型移動設備到大型臺式機。內置了多個頁面,包括儀表盤郵箱日歷鎖屏登錄及注冊錯誤錯誤等頁面。 作者:白狼 出處:http://www.manks.top/yii2_fra... 本文版權歸作者,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保...
摘要:出于實戰基礎加之自語言的書籍出版以來,幾乎所有的編程書籍都講述了一個的例子作為開始。操作,其實就是一個是動作的意思,也可以描述為我們前面說的響應地址。 作者:白狼 出處:http://www.manks.top/document/yii_first_application.html 本文版權歸作者,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究...
摘要:高性能始終是的首要目標之一。版是上代的老版本,現在處于維護狀態。版是一個完全重寫的版本,采用了最新的技術和協議,包括依賴包管理器代碼規范命名空間特質等等。所以,我們學習版本。啟用本鏡像服務系統全局配置即將配置信息添加到的全局配置文件中。 工作中需要用到YII框架,于是乎,系統的學習下這套框架,詳細教程請看考該站完整系列:YII2教程 一、YII簡介 1、什么是YII Yii 是一個高性...
閱讀 2692·2023-04-25 19:13
閱讀 4010·2021-09-22 15:34
閱讀 3053·2019-08-30 14:23
閱讀 1462·2019-08-29 17:17
閱讀 1603·2019-08-29 16:05
閱讀 1537·2019-08-29 13:26
閱讀 1218·2019-08-29 13:19
閱讀 553·2019-08-29 13:16