ThinkPHP框架学习(二)

在上一节中,我主要讲到了如何获取ThinkPHP框架,以及虚拟目录虚拟主机的配置。准备工作完成之后,就可以利用ThinkPHP去部署项目了。

先在工作目录(D:/zend/workspace)下新建一个market文件夹,用来部署项目,在market文件下再新建一个index.php,作为项目的入口文件。因为我们需要调用ThinkPHP框架,打开自己下载好的ThinkPHP框架文件,将其中的ThinkPHP文件夹(其他的Application、Public等均不需要)复制一份到D:/zend/workspace目录下(与market文件夹同级,因为ThinkPHP框架可以支持多个项目调用,不仅限于这一个项目),利用zend studio打开index.php,去引入框架的核心程序。

ThinkPHP框架学习(二)

这里用到了相对路径知识, ../表示上一级目录,后面会介绍到

之后,在浏览器中输入,出现如下效果,则说明框架引入成功。

ThinkPHP框架学习(二)


当框架引入成功之后,market文件夹会自动生成3个文件夹,如下图:

ThinkPHP框架学习(二)


其中Home文件夹下的内容如下:

ThinkPHP框架学习(二)


接下来即利用Home文件夹去部署雍达商城前端页面。雍达商城前端页面主要包括如下几个部分:

ThinkPHP框架学习(二)


选取其中的几个页面为例,根据其功能的不同,在Home文件夹中创建控制器和对应的视图文件,引入相应的文件,最后效果如下图:

ThinkPHP框架学习(二)


具体实现流程不再细致讲解,对于其中的一些注意事项进行分析。

相对路径和绝对路径

引入模板文件后,原先html文件css文件之间的相对路径关系会发生改变,需要考虑如何去进行调整,使css样式正确显示(包括图片也是一样的道理),这时就需要考虑相对路径绝对路径问题了。

绝对路径就是文件的真正存在的路径,是指从硬盘的根目录开始,进行一级级目录指向文件。
相对路径就是以当前文件为基准进行一级级目录指向被引用的资源文件。

../表示当前文件所在的目录的上一级目录

./表示当前文件所在的目录(所以可以省略不写)

/表示当前站点的根目录(域名映射的硬盘目录)(我们一会儿会用到)

就拿这个项目为例,当我把前台模板文件都移植到market文件后,需要对html、css、img之间的相对路径关系进行调整,以其中的inex.html为例,原始样式如下:

ThinkPHP框架学习(二)


而移植到market文件后,变成了如下效果:

ThinkPHP框架学习(二)


可以看出,html文件正常显示,但是css样式和图片没有正常显示,其中的相对路径关系从目录结构中可以看出

ThinkPHP框架学习(二)

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/...  

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzdzpd.html