ThinkPhp下把前端文件独立出来

前端独立之前的目录

thinkphp默认的View模板文件都是在/Application各个模块下的，css、js之类的资源文件是放在/Public目录下，大致是这个样子的：

ThinkphpSample
├─Application 项目逻辑目录
│ ├─Common 公共模块
│ │ ├─...
│ ├─Home Home模块
│ │ ├─Controller Home控制器目录
│ │ ├─...
│ │ ├─View Home模块下的视图目录
│ │ │ ├─Index
│ │ │ │ ├─index.html
│ │ │ │ ├─...
│ ├─Admin Admin模块
│ │ ├─Controller Admin控制器目录
│ │ ├─...
│ │ ├─View Admin模块下的视图目录
│ │ │ ├─Index
│ │ │ │ ├─index.html
│ │ │ │ ├─...
│ │ │ ├─Article
│ │ │ │ ├─index.html
│ │ │ │ ├─add.html
│ │ │ │ ├─edit.html
│ │ │ │ ├─...
│ ├─...
├─Public 资源文件目录
│ ├─Weixin 微信前端静态资源目录
│ │ ├─js home下调用的js文件目录
│ │ ├─css home下调用的css文件目录
│ │ ├─images home下调用的图片文件目录
│ ├─Admin 管理后台静态资源目录
│ │ ├─js home下调用的js文件目录
│ │ ├─css home下调用的css文件目录
│ │ ├─images home下调用的图片文件目录
│ ├─...
├─ThinkPHP 框架系统目录


但在实际开发中,这样把前端文件分散到各个模块下是有很多弊端的：

• 使用gulp这类前端工具很不便利；
  如果想要在src目录下全是原始代码，在dest目录下全是压缩后的html、js、css等，这是难以实现的。

前端独立之后的目录

把所有的模板文件和js、css等独立出来放在根目录下的/tpl中的；
如下：

ThinkphpSample
├─Application 项目逻辑目录
│ ├─Common 公共模块
│ │ ├─Common 公共函数目录
│ │ │ ├─functioin.php 公共函数php文件
│ │ ├─Conf 公共配置文件目录
│ │ │ ├─config.php tp的配置 用于覆盖框架默认配置项
│ │ │ ├─db.php 数据库配置 用户名 密码等
│ │ │ ├─webconfig.php 项目的配置；网站名；是否开启网站等
│ │ ├─Controller 公共控制器目录
│ │ │ ├─BaseController.class.php 应用最基础的控制器
│ │ │ ├─HomeBaseController.class.php Home基础控制器继承BaseController
│ │ │ ├─AdminBaseController.class.php Admin基础控制器继承BaseController
│ │ │ ├─UserBaseController.class.php User基础控制器继承BaseController
│ │ │ ├─...
│ │ ├─Model 公共模型目录
│ │ │ ├─BaseModel.class.php 应用最基础的Model
│ │ │ ├─ArticleModel.class.php 文章model 继承BaseModel
│ │ │ ├─UserModel.class.php 用户model 继承BaseModel
│ │ │ ├─...
│ ├─Home Home模块
│ │ ├─Controller Home控制器目录 继承HomeBaseController
│ │ │ ├─ArticleController.class.php 文章控制器目录
│ │ │ ├─IndexController.class.php 首页控制器
│ │ │ ├─ ...
│ ├─Admin Admin模块
│ │ ├─Controller Admin控制器目录 继承AdminBaseController
│ │ │ ├─IndexController.class.php 后台管理首页控制器
│ │ │ ├─ ...
│ ├─User User模块
│ │ ├─Controller User控制器目录 继承UserBaseController
│ │ │ ├─IndexController.class.php 用户个人中心首页控制器
│ │ │ ├─ ...
├─Public 资源文件目录
│ ├─static 静态资源目录
│ │ ├─js jquery等第三方js存放的目录
│ │ ├─css animate.css等第三方css目录
│ │ ├─ ...
│ ├─weixin 静态资源目录
│ │ ├─js jquery等第三方js存放的目录
│ │ ├─css animate.css等第三方css目录
│ │ ├─ ...
├─tpl 视图文件生产目录
│ ├─Public 公共目录
│ │ ├─js 公共js目录
│ │ │ ├─base.js 全站都引用的js文件
│ │ │ ├─ ...
│ │ ├─css 公共css目录
│ │ │ ├─base.css 全站都引用的css文件
│ │ │ ├─ ...
│ │ ├─images 公共图片目录
│ │ ├─...
│ ├─Home 前台Home视图目录
│ │ ├─Index 首页文件目录
│ │ │ ├─index.html 首页
│ │ │ ├─ ...
│ ├─Admin 同Home
│ ├─User 同Home
├─tpl_src 视图文件源目录
│ ├─Public 公共目录
│ │ ├─js 公共js目录
│ │ │ ├─base.js 全站都引用的js文件
│ │ │ ├─ ...
│ │ ├─css 公共css目录
│ │ │ ├─base.css 全站都引用的css文件
│ │ │ ├─ ...
│ │ ├─images 公共图片目录
│ │ ├─...
│ ├─Home 前台Home视图目录
│ │ ├─Index 首页文件目录
│ │ │ ├─index.html 首页
│ │ │ ├─ ...
│ ├─Admin 同Home
│ ├─User 同Home
├─Runtime 缓存目录
├─ThinkPHP 框架系统目录


如何做到？

1. 在根目录的入口文件index.php文件中定义TMPL_PATH
   新增define(&＃8220;TMPL_PATH&＃8221;,&＃8221;./tpl/&＃8221;);

// 应用入口文件
// 检测PHP环境
if(version_compare(PHP_VERSION,'5.3.0','<')) die('require PHP > 5.3.0 !');
// 开启调试模式 建议开发阶段开启 部署阶段注释或者设为false
define('APP_DEBUG',True);
// 定义应用目录
define('APP_PATH','./Application/');
// 定义模板文件默认目录
define("TMPL_PATH","./tpl/");
// 引入ThinkPHP入口文件
require './ThinkPHP/ThinkPHP.php';


1. 在/Application/Common/Conf/config.php文件中定义静态资源目录

return array(
'TMPL_PARSE_STRING'=>array(
'__PUBLIC__'=>__ROOT__.trim(TMPL_PATH,'.').'/Public/Static'
)
);