ThinkPHP框架學習(二)

在上一節中,我主要講到了如何獲取ThinkPHP框架,以及虛擬目錄虛擬主機的配置。準備工做完成以後,就能夠利用ThinkPHP去部署項目了。php

先在工做目錄(D:/zend/workspace)下新建一個market文件夾,用來部署項目,在market文件下再新建一個index.php,做爲項目的入口文件。由於咱們須要調用ThinkPHP框架,打開本身下載好的ThinkPHP框架文件,將其中的ThinkPHP文件夾(其餘的Application、Public等均不須要)複製一份到D:/zend/workspace目錄下(與market文件夾同級,由於ThinkPHP框架能夠支持多個項目調用,不只限於這一個項目),利用zend studio打開index.php,去引入框架的核心程序。css

這裏用到了相對路徑知識, ../表示上一級目錄,後面會介紹到html

以後,在瀏覽器中輸入www.myweb.com/market,出現以下效果,則說明框架引入成功。前端


當框架引入成功以後,market文件夾會自動生成3個文件夾,以下圖:web


其中Home文件夾下的內容以下:瀏覽器


接下來即利用Home文件夾去部署雍達商城前端頁面。雍達商城前端頁面主要包括以下幾個部分:框架


選取其中的幾個頁面爲例,根據其功能的不一樣,在Home文件夾中建立控制器和對應的視圖文件,引入相應的文件,最後效果以下圖:網站


具體實現流程再也不細緻講解,對於其中的一些注意事項進行分析。spa

相對路徑和絕對路徑

引入模板文件後,原先html文件css文件之間的相對路徑關係會發生改變,須要考慮如何去進行調整,使css樣式正確顯示(包括圖片也是同樣的道理),這時就須要考慮相對路徑絕對路徑問題了。code

絕對路徑就是文件的真正存在的路徑,是指從硬盤的根目錄開始,進行一級級目錄指向文件。
相對路徑就是以當前文件爲基準進行一級級目錄指向被引用的資源文件。

  • ../表示當前文件所在的目錄的上一級目錄
  • ./表示當前文件所在的目錄(因此能夠省略不寫)
  • /表示當前站點的根目錄(域名映射的硬盤目錄)(咱們一下子會用到)

就拿這個項目爲例,當我把前臺模板文件都移植到market文件後,須要對html、css、img之間的相對路徑關係進行調整,以其中的inex.html爲例,原始樣式以下:


而移植到market文件後,變成了以下效果:


能夠看出,html文件正常顯示,可是css樣式和圖片沒有正常顯示,其中的相對路徑關係從目錄結構中能夠看出

index.html文件所在的絕對路徑爲:D:/zend/workspace/market/Home/View/Index/index.html
style.css文件所在的絕對路徑爲:D:/zend/workspace/market/Public/Home/css/style.css
如何才能在index.html文件中正確引用style.css文件?

  • 若利用相對路徑,以index.html爲基準,正確的引用方式爲:../../../Public/Home/css/style.css
符號 含義 當前路徑地址
../ 上一級目錄 D:/zend/workspace/market/Home/View/...
../../ 上上級目錄 D:/zend/workspace/market/Home/...
../../../ 上上上級目錄 D:/zend/workspace/market/...

根據index.htmlstyle.css的絕對路徑地址以及表格分析,咱們能夠看出當跳了三級目錄(../../../)時,能夠正確地去引用style.css

../../../Public/Home/css/style.css <=> D:/zend/workspace/market/Public/Home/css/style.css

  • 若利用絕對路徑,正確的引用方式爲D:/zend/workspace/market/Public/Home/css/style.css

一樣地,css樣式調整好以後,還須要調整html文件img之間的引用關係。
index.html文件所在的絕對路徑爲:D:/zend/workspace/market/Home/View/Index/index.html
不少圖片都存儲在images文件夾下,而images文件所在的絕對路徑爲:D:/zend/workspace/market/Public/Home/images

  • 若利用相對路徑,以index.html爲基準,正確的引用方式爲:../../../Public/Home/images/XXX.jpg
  • 若利用絕對路徑,正確的引用方式爲D:/zend/workspace/market/Public/Home/images/XXX.jpg

路由解析

ThinkPHP框架的URL地址能夠有如下四種形式:

  1. 基本get形式: http://網站/index.php?m=分組&c=控制器&a=操做方法
  2. pathinfo路徑形式: http://網址/index.php/分組/控制器/操做方法
  3. rewrite重寫形式(僞靜態技術): 省略index.php入口文件:http://網站/分組/控制器/操做方法
  4. 兼容形式: http://網址/index.php?s=/分組/控制器/操做方法

前面咱們講到了通常狀況下是如何進行絕對路徑相對路徑的調整,而結合TP框架進行設置時,咱們還須要遵循必定的規則,根據路由形式選擇的不一樣,可能會形成必定的影響。

  • 當咱們採用pathinfo路徑形式去訪問頁面時,若是咱們但願利用相對路徑的形式去引用css或者圖片,上面講到的路徑形式是沒有問題的,由於這時它是以index.html爲基準去引用style.css

  • 當採用基本get形式去訪問頁面時,若是咱們但願採用相對路徑的形式去引用css或者圖片,這時它並非以index.html爲基準,而是以項目的入口文件index.php爲基準,因此若是還按照上面講到的路徑形式去設置的話,就會出現問題。

index.php絕對路徑爲D:/zend/workspace/market/index.php
正確的引用路徑爲:./Public/Home/css/style.css(./表示當前目錄,能夠省去),而不是上面講到的../../../Public/Home/css/style.css


爲了不這類問題的出現,咱們能夠採用絕對路徑,但不採用上面講到的方式。
咱們在前面說起到/ 表示當前站點的根目錄(域名映射的硬盤目錄),即咱們以前設置的虛擬目錄位置D:/zend/workspace/就等價於該地址,因此利用這種方式,正確的引用路徑爲:/market/Public/Home/css/style.css.
對於圖片的引用也是同樣的道理,這裏再也不贅述。這樣一來,index.html對於css樣式img的引用就完成了,其餘頁面的引用均相似,進行一番調整即可以正確引入css和圖片。

某些css樣式裏也有圖片,在引入圖片時,可使用相對路徑,它是以css文件自身爲基準,與其餘文件沒有關係。

注:以上內容僅是我看過視頻教程後我的的一些理解,可能會有不當之處,望理解:)...

閱讀原文

相關文章
相關標籤/搜索