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

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

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

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


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


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


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


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


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

相对路径和绝对路径

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

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

  • ../表示当前文件所在的目录的上一级目录
  • ./表示当前文件所在的目录(所以可以省略不写)
  • /表示当前站点的根目录(域名映射的硬盘目录)(我们一会儿会用到)

就拿这个项目为例,当我把前台模板文件都移植到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文件自身为基准,与其他文件没有关系。

注:以上内容仅是我看过视频教程后个人的一些理解,可能会有不当之处,望理解:)...

阅读原文

转载于:https://www.cnblogs.com/Ai-heng/p/7337233.html

ThinkPHP框架学习(二)相关推荐

  1. PyTorch框架学习二十——模型微调(Finetune)

    PyTorch框架学习二十--模型微调(Finetune) 一.Transfer Learning:迁移学习 二.Model Finetune:模型的迁移学习 三.看个例子:用ResNet18预训练模 ...

  2. PyTorch框架学习二——基本数据结构(张量)

    PyTorch框架学习二--基本数据结构(张量) 一.什么是张量? 二.Tensor与Variable(PyTorch中) 1.Variable 2.Tensor 三.Tensor的创建 1.直接创建 ...

  3. Struts2框架学习(二) Action

    Struts2框架学习(二) Action Struts2框架中的Action类是一个单独的javabean对象.不像Struts1中还要去继承HttpServlet,耦合度减小了. 1,流程 拦截器 ...

  4. 《SpringBoot框架学习二之HTTP协议》

    <SpringBoot框架学习二之HTTP协议> 文章目录 <SpringBoot框架学习二之HTTP协议> 一.HTTP介绍 (1)概述 (2)HTTP版本协议 1.HTTP ...

  5. ThinkPHP 框架学习

    学习内容全部参考开发手册  建议收藏网页 https://www.kancloud.cn/manual/thinkphp/1696 一.几个概念 应用:基于同一个入口文件访问的项目称之为一个应用 模块 ...

  6. thinkphp框架学习笔记(1)

    利用假期简单学习一下tp框架. 入口文件 tp5中自带入口文件,位于public/index.php中,文件内容包括 <?php// [ 应用入口文件 ]// 定义应用目录 define('AP ...

  7. Netty 框架学习(二):DelimiterBasedFrameDecoder和FixedLengthFrameDecoder

    文章目录 一.DelimiterBasedFrameDecoder 服务端 1.EchoServer 2.EchoServerChannelHandler 3.EchoServerHandler 客户 ...

  8. Netty 框架学习(二):Netty粘包和拆包

    文章目录 一.什么是粘包和拆包 二.粘包和拆包示例代码 1.TimeServerHandler 2.TimeClientHandler 三.使用Netty解决粘包和拆包 1.TimeServerHan ...

  9. react 访问后端_React框架学习(二)——前后端分离,整合,部署

    前后端分离 前端与后端分离开发,主要为了解耦与提升效率.基于react框架的特殊性,出现了一个本地后台,来支持前端开发,并且页面通过该本地后端访问,数据则通过访问后端提供获取数据的API来获取. 整合 ...

最新文章

  1. 二叉树的层序遍历 II
  2. 开源 java CMS - FreeCMS2.4 菜单管理
  3. 推荐:两款实用的Jupyter插件~
  4. dual graph
  5. 你想过自己注定是个普通人吗?
  6. mysql存储过程split_mysql存储过程实现split示例
  7. 初窥wordcloud之老司机带你定制词云图片
  8. 江天数据220kV变电站开建 实现更高电能质量和电力可靠性
  9. 911 S5代理设置
  10. 是香蕉还是芭蕉,芭蕉和香蕉的区别
  11. Javaweb的初级(Servlet接口)
  12. English Pod 听力学习之路 C41 - C68
  13. JS封装数组API push,pop,shift,unshift,sort, reverse
  14. OpenStack裸金属使用总结
  15. Java练习——输入n个数,存入数组,进行排序输出
  16. Problem C: 算法4-6:KMP字符串模式匹配算法实现
  17. 『Java』文件与IO流
  18. Java--使用反编译工具,打开jar包,查看源码
  19. 09-微信小程序商城 分类和产品 左右布局框架(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
  20. 计算混响时间的意义_混响时间的计算——

热门文章

  1. Windows系统编程之进程间通信
  2. HCNA(012-211) 试题解析
  3. docker and ssh issues
  4. Spring事务管理器分类
  5. nohup不输出日志信息的方法,及linux重定向学习
  6. 【PAT】1009. Product of Polynomials (25)
  7. 关于fckEditor的功能配置-PHP版
  8. “乘客迟到5分钟,滴滴司机无责取消订单”是一个好策略吗?
  9. 独家发布 | 产品经理生存现状
  10. 【干货】2014年值得仔细研究的十大神级文案