关于页面动态布局实现方案（三）

1.关于保存定制页面的说明

通过前面（一）和（二）已经介绍了定制页面的基本概念与ER模型

相信后台记录下来用户选择的布局、模块是非常简单的，比如使用jQuery脚本监听用户每次的操作，把用户添加的布局、模块插入到后台表里面即可，记录下关键的序号，以及每种布局和模块对应的html模板文件即可

 

2.关于加载用户定制的页面

前面提到了，每种布局、模块都对应一个html文件，但html文件不太适合输出动态页面

所以此处使用FreeMarker的ftl文件代替html文件：因为FreeMarker的理念就是

模板+数据=输出

前面提到的html文件其实就模板，使用ftl文件代替，更加合适输出动态页面

而后台保存的布局、模块信息，就是数据，所以[模板]+[数据]能输出整个页面

 

下面介绍几种结合FreeMarker加载用户定制页面的方案

（1）使用FreeMarker的 <#include /> 标签

我们知道 include 标签的强大之处在于，可以“动态的引入模板文件（注意不是“引入动态的模板文件”）

何为动态的引入文件呢，就是我们保存用户的布局和模板时，后台会这样记录一些信息

 

比如用户在一个页面添加了4个布局：1个通栏，2个左分栏，1个右分栏

页面ID	布局ID	布局开始模板	布局结束模板	布局序号
100001	100001	left_begin.ftl	left_right.ftl	1
100001	100002	full_begin.ftl	full_right.ftl	2
100001	100003	left_begin.ftl	left_right.ftl	3
100001	100004	right_begin.ftl	right_right.ftl	4

 

 

比如在左分栏布局中添加了2个模块：1个公告资讯，1个轮播广告

布局ID	模块ID	模块对应的模板	模块序号
100001	100001	info.ftl	1
100001	100002	adv.ftl	2

 

那么根据页面ID，可以查询到布局列表 layoutList，以及每个布局包含的模块列表 moduleList，我们都放入到List中

使用FreeMarker的include动态引入这些模板即可，比如在page对应的ftl模板页面可以这么写：

<#list layoutList as layout>

   <#include layout.布局开始模板 />

<#/list>

 

这样就动态引入的所有布局，然后在每种布局对应的ftl模板页面可以这么写

FreeMarker的强大之处在于：在通过include引入的子页面，仍然可以使用父页面的变量，比如此处的  layout

<#-- 此处的layout是引用父页面的变量 -->
<#list layout.moduleList as module>

   <#include module.模块对应的模板 />

</#list>

<#-- 不要忘了把模板的结束标签加进来 -->
<#include layout.布局结束模板 />

 通过这种方式，就能把用户定制的页面加载出来，处理起来很方便，不需要开发人员做过多的判断！

但是：这种情况下，仅仅是把布局、模块“长什么样子”加载出来了，每个模块对应的业务内容还没出来呢！！！

比如 公告资讯模块，用户添加了两个，而这两个模块对应的ftl模板文件肯定是同“一个”！

既然是“一个”模板文件，自然只适合输出一个模块的内容，那“同一种模块”，添加多个的情况下，就不好输出了！！！

 

针对这种情况，如果不想把数据和模板绑定到一起，那就在页面加载完之后，使用 ajax 的方式，去请求每个模块对应的业务内容

当然你也可以实现FreeMarker的TemplateModel接口，针对每种模块，定制一个方法，只要传入模块ID：根据模块ID去查询对应的业务内容即可