1. Drupal如何实现前后端彻底分离?

记得从刚刚接触drupal的时候,在项目公司通过一些小项目的开发实践,得出了这样一个结论:drupal适合一个人做... 记得当时圈子里也有不少人认为是这样的一个情况,这导致drupal的团队协作效率也被人诟病,一般前后端协作分工都不是特别清楚。

究其原因,是内容生成和布局的方式是基于区块和区域来完成的。内容部分几乎都是靠区块产生的,有的甚至是views产生的,布局部分要么是靠系统默认提供的区块区域管理,要么是用高级一点的context模块,有的甚至用到了panels模块。不少项目的开发流程是:先有内容和布局,再来修改样式。也就是说,即使前端先切好图,给到后端后也不能直接用,要改的还是不少,为了避免反复沟通浪费时间和成本,一般还会直接自个把html和样式都改了。

根据过去几年我与前端协作开发的实践经验来看,其实是可以实现前后端完全分离的,完全分离意思就是后端不会去碰一点前端代码,这说起来很理想化,所以是有前提条件的:

  1. 前端要搭建本地的网站开发环境,是的,不再是切完图就扔给后端完事了,而是要进入drupal的主题目录里,直接修改后端指定的模版文件,维护里面的样式和js文件。怎么调试?跟后端一样打开本地的测试站访问就行了,这样一旦html,样式和js做好了,就根本不需要后端修改了。后端去模版里套数据即可,有的onepage页面的模版甚至不需要后端去动,只是提供ajax回调的接口即可。注意一点:js部分要由前端负责。
  2. 不要使用区块来生成内容,是的,把block模块禁用。既然没有区块了,那就也不需要使用区域来做布局了。所以你的主题里不需要定义任何的区域。
  3. 不要使用views来做前台页面的内容,views适合用在提供后端管理页面。
  4. 不要使用form api来做前台的表单,是的,完全交给前端吧。
  5. 主题完全定制,从零开始,不使用第三方主题,如:zen。从模版到样式,都自己根据需要来组织。

根据上面的描述,我给大家举两个页面的例子吧。 第一个是项目列表页面,http://www.qingfan.com/project_list 工作流程是这样的:

  1. 后端用hook_menu定义一个menu,地址是project_list,然后用hook_theme定义一个主题是:project_list,该主题指定模版文件是:project-list.tpl.php。接下来在menu的页面回调函数里,我们就直接return theme('project_list'); 即可。接着我们把这个模版文件放在当前主题的模版目录里,提交。
  2. 前端去修改这个模版文件,在本地的站点环境里调试好样式,提交。
  3. 后端套模版数据,这里数据的读取我是直接放在了模版文件里,没有采用模版预处理函数提供变量。

顺利的情况下,前端就不用再管了。 关于此页面开发的代码详情请见:下一节

第二个是登录注册页面,http://www.qingfan.com/qingfan_login 工作流程是这样的:

  1. 后端用hook_menu定义一个menu,地址是qingfan_login。接下来在menu的页面回调函数里,我们就直接return ''; 即可。接着我们在主题下放一个模版文件:page--qingfan-login.tpl.php,这个原理是drupal提供了对每个menu定义页面级模版的规则,就是page--menu地址.tpl.php这样。这里为什么没有用hook_theme去定义一个主题再指定模版呢?因为设计上没有footer,所以我想再页面级模版里直接去掉footer,而不是依靠样式去隐藏。如果header和footer都有,也就是与全站风格布局是一致的话,是适合加一个主题模版的。
  2. 前端去修改这个模版文件,在本地的站点环境里调试好样式和js(这里面所有功能的转换是无刷新的),提交。
  3. 因为这个页面是相当于onepage的效果,在操作成功前,页面不会发生跳转刷新,使用了ajax调用接口的方式处理。所以后端在前端去修改模版的同时就可以开始同时提供所需接口了,这里我们提供了这样几个menu回调作为接口:账号密码登录,验证码登录,验证码注册,修改密码,发送验证码。所有接口的返回格式是统一的,如验证码注册接口可能返回:array('code' => 1, 'msg' => '手机号已被占用');

然后没了,这个页面,后端没有动过这个模版,是不是感觉很爽? 关于此页面开发的代码详情请见:第三节

还有一些细节没提到,主要是要对前端做一个基础的培训,比如:

  1. 告诉他drupal默认分页的html结构是怎样的,直接拿去用加样式即可。
  2. 告诉他在模版里怎么输出简单的内容变量或访问地址:
    <?php print url('page_terms'); ?>

     

  3. 告诉他在模版里怎么加载css和js文件:drupal_add_css, drupal_add_js ......

截止目前我们团队维护现在的产品已经有近两年了,特别是有了全职前端来接手后(记得要把js也交给他负责),更是完全彻底的分离了,后端可以把精力完全放在后端的架构上了,省了不少事。希望这个经验能帮助到大家更好的进行团队协作开发!

本书共8小节。


评论 (0)