這一週一直忙於做實驗室的網站,基本功能算是完成了。比較有收穫的是大概瞭解了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文件
- <span style="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>
可見,上面的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下面看結果吧!
原文地址:http://blog.csdn.net/ruby97/article/details/7574851/