[thinkPHP5项目实战_06]引入前台页面
来源:互联网 发布:waf 源码 编辑:程序博客网 时间:2024/05/01 03:34
一个网站的前端分一般分为前台和后台两个部分,下面说明一下如何在tp5中引入前台页面。
tp5中访问的是模块下的控制器,通过控制器获取视图下的页面(模板布局),输出替换引导页面加载静态文件(css,js,image)
1.前台资源布置
project 应用部署目录├─application 应用目录(可设置)│ ├─common 公共模块目录(可更改)│ ├─index 模块目录(可更改)│ │ ├─config.php 模块配置文件│ │ ├─common.php 模块函数文件│ │ ├─controller 控制器目录│ │ ├─model 模型目录│ │ ├─view 视图目录│ │ └─ ... 更多类库目录│ ├─command.php 命令行工具配置文件│ ├─common.php 应用公共(函数)文件│ ├─config.php 应用(公共)配置文件│ ├─database.php 数据库配置文件│ ├─tags.php 应用行为扩展定义文件│ └─route.php 路由配置文件├─extend 扩展类库目录(可定义)├─public WEB 部署目录(对外访问目录)│ ├─static 静态资源存放目录(css,js,image)│ ├─index.php 应用入口文件│ ├─router.php 快速测试文件│ └─.htaccess 用于 apache 的重写├─runtime 应用的运行时目录(可写,可设置)├─vendor 第三方类库目录(Composer)├─thinkphp 框架系统目录│ ├─lang 语言包目录│ ├─library 框架核心类库目录│ │ ├─think Think 类库包目录│ │ └─traits 系统 Traits 目录│ ├─tpl 系统模板目录│ ├─.htaccess 用于 apache 的重写│ ├─.travis.yml CI 定义文件│ ├─base.php 基础定义文件│ ├─composer.json composer 定义文件│ ├─console.php 控制台入口文件│ ├─convention.php 惯例配置文件│ ├─helper.php 助手函数文件(可选)│ ├─LICENSE.txt 授权说明文件│ ├─phpunit.xml 单元测试配置文件│ ├─README.md README 文件│ └─start.php 框架引导文件├─build.php 自动生成定义文件(参考)├─composer.json composer 定义文件├─LICENSE.txt 授权说明文件├─README.md README 文件├─think 命令行入口文件
1.1模板视图的首页存放位置
根据tp5的目录介绍,前端文件的视图位于application的模块下面的view文件夹下。
application文件夹下默认已经有了一个index模块,可以拿来直接使用。
渲染模板最常用的是使用\think\View类的fetch方法:
fetch('[模板文件]'[,'模板变量(数组)'])
当fetch中不带任何参数的时候,默认访问规则为:
当前模块/默认视图目录/当前控制器(小写)/当前操作(小写).html假如当前控制器为Index下面的index类的话,fetch获取的就是view中的Index下面的index.html文件其中html后缀会自动加上;
因此,在该index文件夹下新建一个view文件夹,然后新建一个Index控制器文件夹,将前台的首页index.html拷贝过来:
1.2前台静态资源存放位置
根据tp5的目录介绍,前端的静态资源(css,js,image)存放于puclic/static文件夹下,
因此,在static文件夹中新建一个index文件夹,将index.html引入的文件拷贝过去。
2.模板渲染和输出替换
前台文件布置完成后,http://localhost/tp5/public/index.php/index/index访问的还是tp5的默认页面,因此需要将该页面替换成index.html页面。
打开视图所在的模块index下的controller下的index.php文件,该文件即为http://localhost/tp5/public/index.php/index/index访问的位置,
模板渲染使用到了fetch()方法,需要在index.php中引入并在Index类进行继承:
<?phpnamespace app\index\controller;use think\Controller;class Index extends Controller{ public function index() { return $this->fetch(); }}保存后打开浏览器输入http://localhost/tp5/public/index.php/index/index
得到了index.html的页面,其中页面加载的静态文件均未找到位置,因此需要重新定位
打开application下的config.php文件,在分页配置下面添加:
//输出替换 'view_replace_str' => [ '__PUBLIC__'=>'/tp5/public', //将__PUBLIC__指向tp5下面的public '__ROOT__' => '/', ]将__PUBLIC__指向根目录下的public文件夹,再打开index.html文件,将在引入的文件前面添加前缀__PUBLIC__/static/index,
例如原来index.html和css文件夹同一个目录下,在index.html引入css方式为:
<link rel="stylesheet" type="text/css" href="css/demo.css">则现在的引入方式该为:
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/index/css/demo.css">保存后再次打开浏览器访问tp5默认目录,完整的前台视图:
- [thinkPHP5项目实战_06]引入前台页面
- [thinkPHP5项目实战_24]前台页面导航栏目调用
- [thinkPHP5项目实战_07]引入后台管理页面
- [thinkPHP5项目实战_27]前台文章内容展示
- thinkphp5实战系列(二)前台模板的引入
- [thinkPHP5项目实战_25]前台文章列表展示
- [thinkPHP5项目实战_26]前台文章关键词搜索
- [thinkPHP5项目实战_04]命名空间的引入
- [thinkPHP5项目实战_01]thinkPHP5的引入及域名重新定向
- thinkphp5 引入前台、后台模板方法
- [thinkPHP5项目实战_28]前台文章"相关文章"的功能完善
- [thinkPHP5项目实战_29]前台首页和文章搜索功能完善
- ThinkPHP5 前台模板引入与分离 开发环境debug
- YII2 前台页面引入&&头尾分离
- [thinkPHP5项目实战_11]栏目修改
- [thinkPHP5项目实战_14]场景验证
- [thinkPHP5项目实战_16]文章列表展示
- [thinkPHP5项目实战_17]文章编辑
- javascript中this的使用详解
- 使用LLVM分析函数CFG
- Xcode 4开发第一个iPhone程序 图文实例(下)
- AsyncTask源码解读
- 排序入门--快排
- [thinkPHP5项目实战_06]引入前台页面
- Kotlin Reference (十三) Data Class and Sealed Classes
- ubuntu中 ipv4指令优化以及Invalid argument错误解析
- C语言学习:运算符和表达式
- M
- UITableView的cell的分割线的问题
- Boost.Regex库在linux上的编译安装,使用
- 搞python,把原本php环境所需的libjpeg搞坏了
- 学习一观察者模式(observer)