在上一节中,我主要讲到了如何获取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文件自身为基准,与其他文件没有关系。

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

阅读原文

ThinkPHP框架学习(二)的更多相关文章

  1. Struts2框架学习(二) Action

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

  2. ThinkPHP框架学习(一)

    这几天呢,断断续续地在看孙叔华老师的ThinkPHP教程,期间还做了一些其他事情,出去办了点事,总结总结下一学期规划等等,不知不觉间又过去了大半个星期.现在呢,看完了一天的教程,在这里,还是希望稍微总 ...

  3. 【ThinkPHP框架学习 】(1) --- thinkphp 3.2.3 验证码验证使用教程分享

    框架版本:ThinkPHP框架     thinkphp 3.2.3 生成验证码 下面是最简单的方式生成验证码: $Verify = new \Think\Verify(); $Verify-> ...

  4. Android 学习笔记之AndBase框架学习(二) 使用封装好的进度框,Toast框,弹出框,确认框...

    PS:渐渐明白,在实验室呆三年都不如在企业呆一年... 学习内容: 1.使用AbActivity内部封装的方法实现进度框,Toast框,弹出框,确认框...   AndBase中AbActivity封 ...

  5. ThinkPHP框架学习摘要

    框架在linux与win下区别 1.文件权限设置: 2.大小写不规范: 学习框架的基本思路 : 1.如何收入并配置框架: 2.Controller的命名规范与书写规范: 3.Model的命名规范与书写 ...

  6. WebGL------osg框架学习二

    今天我们继续来学习osg.js框架.上一篇我们介绍了DrawActor对象绘制操作类和Drawable可绘制对象类,我们大致知道了osg对Drawable可绘制对象的绘制流程管理.今天我们要继续介绍S ...

  7. Hibernate框架学习(二)——api详解

    一.Configuration对象 功能:配置加载类,用于加载主配置,orm元数据加载. //1.创建,调用空参构造(还没有读配置文件) Configuration conf=new Configur ...

  8. python flask框架学习(二)——第一个flask程序

    第一个flask程序 学习自:知了课堂Python Flask框架——全栈开发 1.用pycharm新建一个flask项目 2.运行程序 from flask import Flask # 创建一个F ...

  9. Castle ActiveRecord框架学习(二):快速搭建简单博客网站

    一.数据库 1.数据表 Category:类别标签表(字段Type=1为类别,Type=2为标签) Category_Post:类别标签与文章中间表 Post:文章表 Comment:评论表 2.数据 ...

随机推荐

  1. 并发编程(Concurrent programming)

    并发编程(Concurrent programming) 1.并发编程概述 2.委托(delegate) 3.事件(event) 4.线程(thread) 5.线程池(threadPool) 6.任务 ...

  2. H5——video百花齐放(浏览器自带的播放器)

    前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...

  3. stl源码剖析 详细学习笔记 配接器

    //---------------------------15/04/03---------------------------- /* 配接器概述: 1:adapter是一种设计模式:将一个clas ...

  4. linux AB web 性能测试工具

    ab(选项)(参数) 选项 -A:指定连接服务器的基本的认证凭据: -c:指定一次向服务器发出请求数: -C:添加cookie: -g:将测试结果输出为“gnuolot”文件: -h:显示帮助信息: ...

  5. unity音量设置(同时设置到多个物体上)——引伸语言设置

    在游戏中游戏设置是一个很重要的功能,但是比如语言设置和音量设置分散在很多个物体的组件上,如果每个对应的物体都放到一个链表里,会导致程序雍总难堪,使用事件调用是最好的方式 音量存储类 SoundMana ...

  6. 【转载】kafka 基础知识

    1.       kafka介绍 1.1.       主要功能 根据官网的介绍,ApacheKafka®是一个分布式流媒体平台,它主要有3种功能: 1:It lets you publish and ...

  7. 《口算大作战 2》DLC:算法真奇妙

    211614331 王诚荣 211614354 陈斌 --第一次结对作业 DLC DLC:三年级混合运算模块现已更新!现在您可以愉快的使用三年级题库啦.同时您必须拥有本体才能使用此DLC 单击此处查看 ...

  8. Varnish 4.0 实战

    简介 Varnish 是一款高性能且开源的反向代理服务器和 HTTP 加速器,其采用全新的软件体系机构,和现在的硬件体系紧密配合,与传统的 squid 相比,varnish 具有性能更高.速度更快.管 ...

  9. springboot+dubbo+zookeeper微服务实践demo

    微服务化越来越火,实际上是应互联网时代而生的,微服务化带来的不仅是性能上的提升,更带来了研发组织的更加便利,协作更加轻松,团队效能更高. 当然不能为了技术而技术,我们需要切合实际的对业务进行划分,降低 ...

  10. 浅谈JavaSript中的this

    JavaScript的this对初学者来说一直是一个很头疼的问题,因为它的指向刚刚接触的时候往往觉得有点莫名奇妙,这篇博客用实例来概括一下,this代表什么以及如何改变函数的this. 在<Ja ...