[置顶] 基于页面碎片化思想在大型门户网站cms系统设计中的应用
文章地址: http://blog.csdn.net/5iasp/article/details/10047773
作者： javaboy2012
Email：[email protected]
qq: 1046011462
基于碎片组合生成静态页面在cms系统设计中的应用
一. 基本设计原理
主要依靠应用服务器的SSI机制来支持。
需要应用服务器支持SSI，不过现在的服务器基本上都支持:resin Tomcat Apache,Nginx都支持
二. 简单例子说明原理
假设有一个页面需求，index.html页面有如下组成：
包括 5个部分组成：头部 尾部 ，中间部分，左边部分，右边部分。分别有不通的div块表示，
这几个区域内的内容是动态维护，可以编辑维护或从数据库动态读取。
html代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>测试页面</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <div id="head">头部的内容</div> <div id="foot">尾部的内容</div> <div id="middle">中间的内容</div> <div id="left">左边的内容</div> <div id="right">右边的内容</div> </BODY> </HTML>
其中每一个区块我们称为一个碎片，那么如上页面将有5个碎片组成，5个碎片的内容组合为整个页面的内容。
我们通过ssi机制，把页面修改为index.shtml，每一个碎片使用include命令标记来代替。
5个碎片通过如下替换
<!--#include virtual="head.inc" -->
<!--#include virtual="foot.inc" -->
<!--#include virtual="middle.inc" -->
<!--#include virtual="left.inc" -->
<!--#include virtual="right.inc" -->
其中每个区域的碎片文件里包含具体相应区域的内容
head.inc： 包含内容： 头部的内容
foot.inc 包含内容： 尾部的内容
middle.inc 包含内容： 中间的内容
left.inc 包含内容： 左边的内容
right.inc 包含内容： 右边的内容
改为如下：文件名后缀改为shtml
index.shtml 如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>测试页面</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <div id="head"><!--#include virtual="head.inc" --></div> <div id="foot"><!--#include virtual="foot.inc" --></div> <div id="middle"><!--#include virtual="middle.inc" --></div> <div id="left"><!--#include virtual="left.inc" --></div> <div id="right"><!--#include virtual="right.inc" --></div> </BODY> </HTML>
到现在为止把index.shtml发布到支持ssi机制的应用服务器上，执行 index.shtml和 index.html都返回相同的内容。
现在，我们要维护这个页面，需要维护下面类型页面
1. 页面文件 index.shtml
2. 碎片文件 若干个碎片文件。
下面对文件的特点和功能做一下分析：
1. 页面文件：
主要是定义页面有哪些碎片组成，决定了页面的布局和碎片组成。如果碎片的改变包括碎片的增加，修改，位置改变， 需要更新这个文件。
2. 碎片文件：
碎片文件是构成页面文件内容的区域的内容的载体，如果碎片内容发生改变，而在页面中的位置没改变，则只需要更新该碎片文件内容。
由于上面的文件特点，针对页面和碎片通过程序动态生成即可实现整个页面内容的维护。
cms系统中对页面文件信息和碎片信息的动态程序管理可以实现对整个页面的动态维护和更新。
三. 设计思路简单实现：
技术语言上，作者主要采用java语言，使用jsp脚本语言来实现
主要包括技术： 对文件的读写，SSI机制，jsp自定义标签，定时任务处理等。
页面文件：本身为jsp文件，必须符合jsp语法规则，通过jsp自定义标签库来实现。自定义标签库来实现shtml文件的动态生成。
如下：假设页面为 page1.jsp 我们通过该jsp动态生成shtml文件已经对碎片的一些操作。
如下：
http://127.0.0.1:8080/easycms/page/page1.jsp?optType=xxx
参数： optType: 操作类型
主要包括如下：
1： 保存碎片：主要把标签库的碎片信息保存到数据库
2. 页面生成：生成最终shtml页面的内容。
具体内容如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/tags/my-cms" prefix="cms" %>
<%
int opttype=0; //操作类型
String optType = request.getParameter("optType");
if ( optType!=null )
{
opttype = Integer.parseInt(optType);
}
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>测试页面</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="head"><cms:myfrag name="head" desc="head desc" optType="<%=opttype%>" datasource_url="http://127.0.0.1:8080/easycms/data/head.jsp"></cms:myfrag></div>
<div id="foot"><cms:myfrag name="foot" desc="foot desc" optType="<%=opttype%>" datasource_url="http://127.0.0.1:8080/easycms/data/foot.jsp"></cms:myfrag></div>
<div id="middle"><cms:myfrag name="middle" desc="middle desc" optType="<%=opttype%>" datasource_url="http://127.0.0.1:8080/easycms/data/middle.jsp"></cms:myfrag></div>
<div id="left"><cms:myfrag name="left" desc="left desc" optType="<%=opttype%>" datasource_url="http://127.0.0.1:8080/easycms/data/left.jsp"></cms:myfrag></div>
<div id="right"><cms:myfrag name="right" desc="right desc" optType="<%=opttype%>" datasource_url="http://127.0.0.1:8080/easycms/data/right.jsp"></cms:myfrag></div>
<cms:myfoot optType="<%=opttype%>"/>
</BODY>
</HTML>
通过：
执行： http://127.0.0.1:8080/easycms/page/page1.jsp?optType=1 则碎片即可持久化数据库
其中 <cms:myfoot optType="<%=opttype%>"/> 这个标签主要作用是收集上边的碎片标签的内容列表，统一做持久化处理。
执行： http://127.0.0.1:8080/easycms/page/page1.jsp?optType=2 则返回shtml文件的内容;
如返回：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>测试页面</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="head"><!--#include virtual="head.inc" --></div>
<div id="foot"><!--#include virtual="foot.inc" --></div>
<div id="middle"><!--#include virtual="middle.inc" --></div>
<div id="left"><!--#include virtual="left.inc" --></div>
<div id="right"><!--#include virtual="right.inc" --></div>
</BODY>
</HTML>
解释一句：
<cms:myfrag name="head" desc="head desc" optType="<%=opttype%>" datasource_url="http://127.0.0.1:8080/easycms/data/head.jsp"></cms:myfrag>
执行后输出包含指令
<!--#include virtual="head.inc" -->
关于数据库设计简单说明：
先看一下数据库结构：
1. 页面信息表： 保存页面的信息
-- Table "t_page" DDL
CREATE TABLE `t_page` (
`page_id` int(11) NOT NULL AUTO_INCREMENT,
`page_name` varchar(100) DEFAULT NULL,
`page_desc` varchar(100) DEFAULT NULL,
`page_status` int(11) DEFAULT NULL,
PRIMARY KEY (`page_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2. 页面碎片信息表： 保存页面下碎片信息
-- Table "t_page_frag" DDL
CREATE TABLE `t_page_frag` (
`frag_id` int(11) NOT NULL AUTO_INCREMENT,
`frag_name` varchar(100) DEFAULT NULL,
`frag_desc` varchar(500) DEFAULT NULL,
`frag_status` int(11) DEFAULT NULL,
`frag_data_source_url` varchar(500) DEFAULT NULL,
`frag_type` int(11) DEFAULT NULL,
`frag_page_id` int(11) DEFAULT NULL,
PRIMARY KEY (`frag_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
其中：frag_data_source_url字段 是为碎片提供数据的接口url，接口输出的内容极为碎片的内容。
页面信息和碎片信息保存到数据库中，可以使用定时任务程序，扫描数据库页面和碎片信息，动态定时生成页面和碎片，实现页面的动态维护。