最近遇到很多同学(非度厂)当在本地开发完的 fisp(指代fis-plus,以下同) 项目不知道如何跟后端连在一起工作;这可能是整个站在前端的角度上去考虑问题,而不清楚后端是如何去渲染一个页面导致的。当然也有可能是对 Smarty 本身了解的匮乏,前面我写过一篇关于 Smarty 的文章:fis-plus上线篇之搞定smarty环境,可能这篇更偏向于对 fisp 编译工具的一些产出设置。那么这篇将揭露假设我用了个 PHP 的什么什么框架该如何去渲染 fisp 的项目呢?
讲述重点
- Smarty 的应用?
- 后端如何去渲染 fisp 的项目?
Smarty 的应用?
为了讲述能清晰一些,我们一并说一下 Smarty 在我们的网站开发中是个什么角色,Smarty 所谓后端模板语言,模板一般都是 View 层的承载介质(如MVC中),就很清晰知道是 View 层的东西;
PHP 本身就是一门优秀的模板语言,那么为了更简易的开发,Smarty 在其基础上实现了类似继承填坑的机制来提升模板语言的灵活性,方便搞页面拆分,而且做了不少容错处理;所以在不需要了解整个 PHP 语言特性的情况下选择 Smarty 作为模板来让前端开发人员去使用是一种不错的选择。
fisp 就选用了 Smarty 作为模板语言。
-
假设我不用 Smarty PHP网站开发是如何?
不管是什么后端框架,一般都是 MVC 的,都会提供如下三个目录;
. ├── controller ├── model └── view
- controller 是一些入口文件,控制器,来协调 model 和 view 去完成一次页面的请求
- model 一些访问数据库或者是篡数据的逻辑
- view 这下面一般放的是模板
假设我访问的 url 是
http://my-host/index/show
,一般都会路由到show
函数的执行上<?php //controller/index.php class Index extends Controller { public function show() { // 获取 $data 的逻辑,一般是调用 model 下某逻辑 $this->assign('data', $data); // <1> $this->display('show.php'); // <2> } }
如以上代码,我们不去关心数据是如何来的,反正这个一般都是由后端工程师搞定,我们只需要关注 <1> 、 <2> 两个步骤。
assign
一般意思就是给模板塞数据,display
一般就是去渲染这个模板,在上面逻辑里面渲染的是view/index/show.php
这个模板。show.php
是一个普通的 php 模板,我们可以假定它的内容如下<html> <head> <title><?=$data['title']?></title> </head> <body> <p><?=$data['message']?></p> </body> </html>
只是显示
$data
塞过来的数据。通过上面的逻辑,一个完整的 php 模板的渲染过程已经说完了。
-
用 Smarty 改造上面这个流程,该是怎么样的?
跟上面一样,后端目录依然是如下这个形式
. ├── controller ├── model └── view
可能为了放置 Smarty 的类库,需要添加一个新目录叫
lib
,下载 Smarty 放到lib/smarty
目录下;. ├── controller ├── lib ├── model └── view
这时候依然访问 url
http://my-host/index/show
, controller 需要引入 smarty 去做渲染;<?php //controller/index.php require(dirname(dirname(__FILE__)) . '/lib/smarty/Smarty.class.php'); //引入 smarty class Index extends Controller { private $_smarty = null; //假象 init 方法 public function init() { $this->_smarty = new Smarty(); // 模板目录设置,非 `/` 或者 `.` 开头的文件到这个目录下查找 $this->_smarty->setTemplateDir(dirname(__DIR__) . '/view/template'); // 设置插件目录,一般 fisp 会提供很多 smarty 的插件 $this->_smarty->setPluginsDir(array( dirname(__DIR__) . '/view/plugin' )); // config_dir 设置 $this->_smarty->setConfigDir(dirname(__DIR__) . '/view/config'); } public function show() { // 获取 $data 的逻辑,一般是调用 model 下某逻辑 $this->_smarty->assign('data', $data); // <1> $this->_smarty->display('index/show.tpl'); // <2> } }
同样的方式,给模板塞数据
$this->_smarty->assign
以及去渲染模板$this->_smarty->display
。那么这时候模板就应该是 smarty 的模板了;index/show.tpl
<html> <head> <title><%$data.title%></title> </head> <body> <p><%$data.message%></p> </body> </html>
有了这个对照,是否清晰了一些,Smarty 就是干渲染模板这个事情的,其实就是 View 模板这块的事情。
后端如何去渲染 fisp 的项目?
如上面的对照,其实整个对 Smarty 在项目中的引入,不限于什么什么框架,虽然有些框架也会提供一些自己的模板语言,但是你要用 fisp 那么就应该忽视它们,直接换用 Smarty。
信息的朋友可能会发现,有个塞模板数据的过程,这个过程就是前后端的分界点,对于一个 fisp 的项目,编译完成后,只需要后端实例化 Smarty 并且去渲染特定模板即可。而这些数据就调用 Smarty 的 assign
方法塞数据即可。
说到这块,我们畅想一下整个用 fisp 开发时的流程是怎么样的?
- 据对对于某一个功能需要的数据都定下来,写数据结构文档(为了方便维护)
- 后端过去查数据库调用服务来获取并给这些数据
- 并行的前端开始开发页面,并且用 fisp 提供的本地服务套件,模拟这些数据,开发页面
- 联调的时候,把前端开发的模板、静态资源、Smarty 插件、Smarty config文件等上传到测试机器初始化 Smarty 时设置的那些目录下面
- 后端写清楚某个逻辑需要渲染(
display
)哪个模板,并且把准备好的数据塞给模板 - 然后这个事情就搞定了
这样真正实现了前后端并行开发。