Android程序员学PHP开发(36)-ThinkPHP5.0(8)前台引入模板分离-phpStudy+Sublime

上一篇博文，我们联系了一下 站点域名管理 和 自动生成，在这个基础上，我们来联系一下 童攀老师的博客搭建。

我在群里下载了一个压缩包，我们就以这个压缩包为基础，进行练习：

thinkphp5第一季【你我网】前后台模板：http://download.csdn.net/detail/iwanghang/9773861

关于thinkphp的MVC结构，这里不做介绍，如果不知道什么MVC请务必先去了解一下，再继续往下看：

1、controller 控制器：

/application/index/controller/Index.php

<?php
/**
 * 主页控制器
 */
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
    public function index()
    {
        return $this->fetch();
    }
}

/application/index/controller/Article.php

<?php
/**
 * 文章页面控制器
 */
namespace app\index\controller;
use think\Controller;
class Article extends Controller
{
    public function index()
    {
        return $this->fetch('article');
    }
}

<?php
/**
 * 留言板控制器
 */
namespace app\index\controller;
use think\Controller;
class Guest extends Controller
{
    public function index()
    {
        return $this->fetch('guestbook');
    }
}

<?php
/**
 * 列表页控制器
 */
namespace app\index\controller;
use think\Controller;
class Lst extends Controller
{
    public function index()
    {
        return $this->fetch('list');
    }
}

<?php
/**
 * 搜索页控制器
 */
namespace app\index\controller;
use think\Controller;
class Search extends Controller
{
    public function index()
    {
        return $this->fetch('search');
    }
}

2、view 视图

这里就不上代码了，就是上面资源里面的文件，这里给出来一下路径，让大家看一下。

/application/index/view/Index/index.html

/application/index/view/Article/article.html

/application/index/view/Guest/guestbook.html

/application/index/view/Lst/list.html

/application/index/view/Search/search.html

还有2个文件，后面分离 网站头部和尾部 需要用到

/application/index/view/Public/header.html

/application/index/view/Public/footer.html

3、拷贝样式和资源（下面这2个文件夹都在压缩包里）

/public/static/index/images

/public/static/index/style

4、输出替换：http://www.kancloud.cn/manual/thinkphp5/118120

    // 如果需要全局替换的话，可以直接在配置文件中添加：
'view_replace_str'  =>  [
    '__PUBLIC__'=>'/public/',
    '__ROOT__' => '/',
]

5、把view里面的html的路径替换为全局路径

例子：

<link rel="stylesheet" rev="stylesheet" href="__PUBLIC__/static/index/style/style.css" type="text/css" media="screen" />

<img src="__PUBLIC__/static/index/images/2016021074509417.jpg" title="你我网" alt="你我网"/>

6、进行头部和尾部的分离

从view中提取，并修改下面2个文件：

/application/index/view/Public/header.html

		<div id="divTop">
			<h1 id="BlogTitle"><a href="http://www.iwanghang.com/"><img src="__PUBLIC__/static/index/images/LOGO.gif" alt="你我网" onMouseover="shake(this,'onmouseout')" /></a></h1>
			<!-- <h3 id="BlogSubTitle">www.iwanghang.com</h3> -->
		</div>
		<div id="divNavBar">
<ul>
<li><a href="http://www.iwanghang.com/">首页</a></li><li><a href="http://www.iwanghang.com/catalog.asp?cate=2" title="感悟生活点滴">大生活</a></li><li><a href="http://www.iwanghang.com/catalog.asp?cate=3" title="光与影的艺术">光影斑斓</a></li><li><a href="http://www.iwanghang.com/catalog.asp?cate=4" title="一切有为法，如梦幻泡影，如露亦如电，应作如是观。">如是观</a></li><li><a href="http://www.iwanghang.com/t/" target="_blank" title="还是以前的圈圈微博！">圈圈说</a></li><li><a href="http://www.iwanghang.com/guestbook.html" title="沟通从这里开始">留言本</a></li>
</ul>
		</div>

		<div id="divTop">
			<h1 id="BlogTitle"><a href="http://www.iwanghang.com/"><img src="__PUBLIC__/static/index/images/LOGO.gif" alt="你我网" onMouseover="shake(this,'onmouseout')" /></a></h1>
			<!-- <h3 id="BlogSubTitle">www.iwanghang.com</h3> -->
		</div>
		<div id="divNavBar">
<ul>
<li><a href="http://www.iwanghang.com/">首页</a></li><li><a href="http://www.iwanghang.com/catalog.asp?cate=2" title="感悟生活点滴">大生活</a></li><li><a href="http://www.iwanghang.com/catalog.asp?cate=3" title="光与影的艺术">光影斑斓</a></li><li><a href="http://www.iwanghang.com/catalog.asp?cate=4" title="一切有为法，如梦幻泡影，如露亦如电，应作如是观。">如是观</a></li><li><a href="http://www.iwanghang.com/t/" target="_blank" title="还是以前的圈圈微博！">圈圈说</a></li><li><a href="http://www.iwanghang.com/guestbook.html" title="沟通从这里开始">留言本</a></li>
</ul>
		</div>

7、分离头部和尾部

如图：

头部：

尾部：

8、遗留问题：

我们想要的效果，访问下面的连接打开留言页：

暂时只有访问下面的连接，才可以访问留言页，我们后续会来解决这个问题：

http://www.iwanghang.com/index/guest

欢迎移动开发爱好者交流
沈阳或周边城市公司有意开发Android，请与我联系
联系方式

微信：iwanghang
QQ：413711276
邮箱：iwanghang@qq.com