ThinkPHP框架学习(二)

时间:2021-12-19 11:38:51

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

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

ThinkPHP框架学习(二)

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

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

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

根据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

ThinkPHP框架学习(二)
ThinkPHP框架学习(二)

为了避免这类问题的出现,我们可以采用绝对路径,但不采用上面讲到的方式。
我们在前面提及到/ 表示当前站点的根目录(域名映射的硬盘目录),即我们之前设置的虚拟目录位置D:/zend/workspace/就等价于该地址,所以利用这种方式,正确的引用路径为:/market/Public/Home/css/style.css.
对于图片的引用也是一样的道理,这里不再赘述。这样一来,index.html对于css样式img的引用就完成了,其他页面的引用均类似,进行一番调整便可以正确引入css和图片。

某些css样式里也有图片,在引入图片时,可以使用相对路径,它是以css文件自身为基准,与其他文件没有关系。

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

阅读原文

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

  1. Struts2框架学习&lpar;二&rpar; Action

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

  2. ThinkPHP框架学习(一)

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

  3. 【ThinkPHP框架学习 】&lpar;1&rpar; --- thinkphp 3&period;2&period;3 验证码验证使用教程分享

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

  4. Android 学习笔记之AndBase框架学习&lpar;二&rpar; 使用封装好的进度框,Toast框,弹出框,确认框&period;&period;&period;

    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框架学习&lpar;二&rpar;——api详解

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

  8. python flask框架学习&lpar;二&rpar;——第一个flask程序

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

  9. Castle ActiveRecord框架学习&lpar;二&rpar;:快速搭建简单博客网站

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

随机推荐

  1. &lbrack;翻译&rsqb; java NIO Buffer

    原文地址:http://tutorials.jenkov.com/java-nio/buffers.html JAVA NIO 是在和channel交互的时候使用的.正如你所知道的,数据是从chann ...

  2. 如何写一个c&plus;&plus;插件化系统

    1.为什么需要插件化系统 “编程就是构建一个一个自己的小积木, 然后用自己的小积木搭建大系统”. 但是程序还是会比积木要复杂, 我们的系统必须要保证小积木能搭建出大的系统(必须能被组合),有必须能使各 ...

  3. linux之history

    1.使用HISTTIMEFORMAT在历史中显示TIMESTAMP 通常情况下,当你在命令行中键入history时,终端中将显示你刚输入的命令及其编号.如果出于审查命令的目的,和命令一起显示时间戳将会 ...

  4. Android开发环境搭建(windows OS)之补充

    这几天搭建了个安卓开发环境,也想玩玩安卓开发.在查询CSDN,CNBLOG,视频网站之后终于把开发环境搭建起来了,发现所有的指导都比较离散,比如有些只说安装方法,有些只说下载方法.本文来个集大成,算是 ...

  5. 注册dll

    unit Unit1; interface uses  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...

  6. Realm Configuration HOW-TO--官方

    来源:https://secure.gettinglegaldone.com/docs/realm-howto.html Quick Start This document describes how ...

  7. Web Api Route 注册要放在 Mvc Route 注册前

    今天想研究一下Web Api,写了一个测试Api,打开网站后浏览一下,可是却提示找不到方法,刚开始以为哪里配置错了,可找了半天也没见. 因为我是在一个现有Mvc站点做的Demo,所以打算新建一个Mvc ...

  8. 爬虫-request以及beautisoup模块笔记

    requests模块 pip3 install requests res = requests.get('') res.text res.cookies.get_dict() res.content ...

  9. Docker数据卷Volume实现文件共享、数据迁移备份(三)--技术流ken

    前言 前面已经写了两篇关于docker的博文了,在工作中有关docker的基本操作已经基本讲解完了.相信现在大家已经能够熟练配置docker以及使用docker来创建镜像以及容器了.本篇博客将会讲解如 ...

  10. Elasticsearch5&period;x批量插入数据(Java)

    先上官方示例代码:官方示例 Java代码: // 批量插入数据 public void InsertBatch() { try { // 设置集群名称 Settings settings = Sett ...