http://www.hcoder.net/tutorials/info_8.html
http://blog.csdn.net/ruby97/article/details/7574851
這一周一直忙於做實驗室的網站,基本功能算是完成了。比較有收獲的是大概了解了ThinkPHP框架。寫一些東西留作紀念吧。如果對於同樣是Web方面新手的你有一絲絲幫助,那就更好了挖。
以前用PHP做過一個很蹩腳的網站,為什么這么說呢,因為寫的全是死代碼。做完以后覺得實在是累,前端要div+css,js 后端要php,mysql,這么多東西要弄,十分頭疼。所以,在接到做網站的任務后,我第一時間想到一定要使用開發框架去做,絕不能跟以前一樣那么累了。
我選擇的是PHP的ThinkPHP框架。說實話,真的蠻不錯的。瞬間覺得Web開發還是蠻有效率的。
超級鏈接:ThinkPHP中文網
按照套路,首先貼一下實驗環境:
- 1. WAMP(集成的那種,最Easy的幾乎不需要配置)
- 2. ZendStudio7.2(中文網址http://www.zendstudio.net/,里面提供下載,在線注冊機以及使用教程)
- 3. ThinkPHP框架+百度UEditor編輯器插件
- 4. Win7-64bit操作系統
- 5. 瀏覽器(火狐,IE,Chrome),外加火狐FireBug插件用於調試以及偷樣式
-------------------------------------------------------------華麗分割-------------------------------------------------------------
第一步:找網頁模板(不會美工,PS,見諒。。)
前端頁面我找的是一個大學的實驗室,這里就不貼了,很普通的那種。后台直接下載的模板,感覺蠻漂亮的,運行后如下圖:
第二步:初識百度UEditor插件
由於我要做的是實驗室的網站。實驗室網站主要內容在如下幾個方面:
- 介紹實驗室的成員
- 實驗室的項目,成果等
- 實驗室的新聞以及學術交流信息
可見,信息主要偏重於后台的新聞,文章信息的發布,而前台幾乎不存在編輯。所以重點要在后台實現一個方便的文章發布體系。
我選用了百度出品的UEditor所見即所得編輯器。主要是JS實現的,整合到后台后如下所示,功能真的很多哇:
關於UEditor的如何整合到網站中,請參考UEditor的官網,里面有詳細教程。
第三步:初識ThinkPHP框架
下面開始介紹ThinkPHP框架,首先為了加強感性認識,先看一看ThinkPHP工程的目錄結構:
文件夾:
- admin是后台工程文件夾
- home是前台工程
- public里面用於存放CSS文件,JS文件以及網頁里面的圖片
- ThinkPHP框架
- ueditor是百度編輯器
下面三個PHP文件:
- admin.php是后台工程的入口文件,
- index.php是前台工程的入口文件。
- config.inc.php,由於這個小項目的幾乎所有數據都放在數據庫里,而前后台都要連接數據庫,所以所有的數據庫配置代碼放在了它里面。
而剩下的buildpath ,.settings , .project 是Zend IDE生成的,不管它們。
------------------------------------------------------華麗分割-------------------------------------------------------------
由於我這里面實際是兩個工程(home和admin),只要理解其中一個即可,故下面只介紹后台,即admin部分。
接着往下看,看一下admin.php文件,這是需要了解的第一個文件,即后台的入口文件。
幾個宏定義分別指明了:
- 1. ThinkPHP框架的路徑
- 2. 后台應用程序目錄
- 3. 后台應用程序名稱
- 4. 開啟調試模式
- 5. 包含ThinkPHP框架下的ThinkPHP.php文件(重要!)
下面新建一個小工程來演示一下開發過程:
比如整個工程的大目錄是xxx,然后把ThinkPHP框架拷貝進來,並添加admin.php文件(如上圖中的代碼)
此時在瀏覽器里面輸入:http://localhost/xxx/admin.php會自動生成admin目錄,如下圖
打開admin目錄,內容如下:
其中主要關注四個文件夾:
1. Conf 存放工程配置文件(比如定義一些常量什么的)
2. Lib (最重要!存放MVC模式中的模型類和控制器類)
3. Tpl(存放模板文件,按道理前面我們下載的模板應該放在這里)
4. Runtime(存放運行時文件,比如緩存啊,數據庫表緩存什么的)
最后貼出瀏覽器上的運行結果。。對不起貼的有點晚。
如果能看到上面的畫面,說明ThinkPHP可以正常運行啦。下面我們繼續完善吧。
------------------------------------------------------------華麗分割-----------------------------------------------------
第四步:初識MVC模式
到這里,不得不提一下在ThinkPHP中的MVC的概念。MVC很有名,叫做模型-視圖-控制器模式。
在ThinkPHP里面:
模型(Model)可以認為就是一張數據庫表。那我做的工程來說:
對於一篇文章(新聞),它的屬性包括ID號,標題,作者,創建時間,最后修改時間以及文章內容。這就是一篇文章的模型。然后就按照這個思路建立對應的數據庫表:
視圖(View)可以認為就是用戶看到的東西,即模板,或者說皮膚。
比如前面貼出的后台模板,那個在ThinkPHP概念中就是視圖。
控制器(Action)可以認為是視圖與模型之前的橋梁。因為網站上顯示的內容基本全部來自眾多模型們(數據庫表們),而控制器負責的就是決定在哪些情況下顯示哪些模型里面的哪些數據。還是拿我的例子說,我后台工程的首頁對應的控制器是Index控制器。(Index控制器為所有工程的默認控制器)。但是你想,一個網站的首頁一般是有很多按鈕啊,超鏈接啊什么的,可以跳到其他地方去的東西。貼張圖:
這是我的后台首頁。可以看到左邊有導航欄,右下邊列出了數據庫當前的文章信息,可以看到一共有三篇文章。比如我現在可能想做:
1. 把文章”1111測試文章發布系統”刪除
2. 把文章”詹姆斯高捧第3座MVP獎杯”改成”詹姆斯高捧第4座MVP獎杯”
3. 新添加一篇別的文章
這就對應了Index控制器的不同功能了,也就是Index控制器類IndexAction的不同方法(比如取名edit()方法,delete()方法,add()方法)。當然之所以會看到頁面顯示,是因為默認情況下執行Index控制器的Index()方法,在該方法中調用display()方法顯示模板(視圖)。不信可以看默認的文件,里面的Index控制器的Index方法實現的就是HelloThinkPHP的歡迎頁面。
比如:
IndexAction目錄為:
/xxx/admin/Lib/Action/IndexAction.class.php
內容為:
可以看到,默認情況下在index方法中調用了$this->display()
(注意看IndexAction 繼承Action類,display方法是Action類的方法);
調用display()方法后,ThinkPHP會在對應工程的Tpl文件夾下的Index文件下下找index.html文件。其中前一個Index文件夾對應的是Index控制器,index.html對應的是index()方法。
所以,一個控制器類對應一個模板文件夾。具體對應多少個模板跟控制器類有多少個方法以及有多少個方法需要display有關。
故,此時對應的模板文件路徑為:
/xxx/admin/Tpl/Index/index.html
細心的朋友可能要問了,你這里只說了視圖(模板)和控制器啊,模型呢?你是怎么知道數據庫里的那三篇文章的信息的呢?其實不然,我在index方法里面還做了一些事情,下圖是精簡版index方法:
可以看到,第一步,我就實例化了一個模型。模型名字是Article,前面說到模型就是數據庫表,此時查看一下有哪些數據庫表:
第一個表名字是think_article,可以看到還差一個前綴think_,其實這個是在配置文件中指定的,還記得前文所述的config.inc.php嗎? 其配置代碼如下所示:
<?php
return array(
'DB_TYPE' =>'mysql',
'DB_HOST' =>'localhost',
'DB_NAME' =>數據庫名字,
'DB_USER' =>用戶名,
'DB_PWD' =>密碼,
'DB_PORT' =>'3306',
'DB_PREFIX' =>'think_',
);
?>
第二條語句就是查詢數據庫。ThinkPHP提供了很多種查詢數據庫的方法,我使用的是連貫操作法。
執行完第二條語句后$new_list變量就存儲了所有文章的信息,那么怎么把它顯示到界面上去呢?
看第三句話,它把該變量分配給了一個叫做’new_list’的變量 (好像同名了哇。。不過沒關系,關鍵是assign方法),然后我們在模板文件里面進行替換就OK啦。默認情況下,在HTML里面寫 {$new_list}就OK啦。當然,這里面的new_list是一個復合的變量,不是單純的數字或者字符串。。不過ThinkPHP提供了很多循環的方法給我們使用,很是方便。
最后一條語句就是顯示對應的視圖文件了。我們就能把數據庫中的文章信息按照視圖(模板)里面定義的規則顯示在瀏覽器中了。
---------------------------------------------------------------華麗分割-----------------------------------------------------------
源碼下載
最后給出示例工程xxx的源碼。有需要的朋友可以下載,可以很快的了解ThinkPHP的大概原理。
源碼功能:
- 1.后台管理員登陸
- 2.添加文章,編輯文章,刪除文章
- 3.前台顯示文章
使用方法:
- 1.解壓到網站根目錄下,默認是www文件夾下的xxx文件夾:
- 2.在MySQL中新建一個數據庫,比如rubydb,整理成utf8-genaral-ci
3.導入數據庫表文件夾下的兩個數據庫表 think_article 和think_user,導入后入下圖:
4.配置Config.inc.php文件
"FONT-SIZE: 16px"><?php
- return array(
- 'DB_TYPE' => 'mysql',
- 'DB_HOST' => 'localhost',
- 'DB_NAME' => '自己建一個數據庫',//需要新建一個數據庫!名字叫
- 'DB_USER' => '你的數據庫用戶名', //數據庫用戶名
- 'DB_PWD' => '你的數據庫密碼',//數據庫登錄密碼
- 'DB_PORT' => '3306',
- 'DB_PREFIX' <SPAN style="WHITE-SPACE: pre"> </SPAN>=> 'think_',//數據庫表名前綴
- );
- ?></SPAN>
<?php
return array(
'DB_TYPE' => 'mysql',
'DB_HOST' => 'localhost',
'DB_NAME' => '自己建一個數據庫',//需要新建一個數據庫!名字叫
'DB_USER' => '你的數據庫用戶名', //數據庫用戶名
'DB_PWD' => '你的數據庫密碼',//數據庫登錄密碼
'DB_PORT' => '3306',
'DB_PREFIX' => 'think_',//數據庫表名前綴 ); ?>
可見,上面的DB_NAME,DB_USER,DB_PWD需要修改
分別是
'DB_NAME'=>'rubydb' ,
'DB_USER' =>'你的mysql登錄賬號' ,
'DB_PWD' =>'你的mysql登錄密碼'
- 5.運行 http://localhost/xxx/admin.php,彈出后台登錄頁面:
輸入數據庫think_user里面的用戶信息: ruby97,密碼ruby97 ,再輸入驗證碼即可登錄。
選擇寫新聞按鈕,自己添加一篇文章。然后到http://localhost/xxx下面看結果吧!