[简易信息系统开发01] 模块化展示数据
需求：
1.信息聚合展示；
2.快速建站；
3.网站布局可以定制；
?
以上需求虽然就简单几个字，但是对于我这个web新手还是有些头晕~
晚上花了些时间构思了一个简单的“山寨版”模型。
?
实现的功能：
1.后台控制页面布局和样式问题；
2.信息模块化展示；（方式1：jsp：include）
?
实现思路：
?
1.项目文件结构
?
![[简易信息系统开发01] 模块化显示数据](http://img.reader8.net/uploadfile/jiaocheng/20140140/2753/2014012719530620955.png)
?
主要注意WebRoot中的文件结构：
css里面存放多套样式文件；
image和css配套使用；
web-inf中page中存放多套布局文件（jsp布局，没采用freemarker等模版引擎，不熟！）；在page中有个module专门存放模块的文件（简单理解首页上的那些“豆腐块”）；
?
2.模块化展示数据
像每个子页面的公共部分（例如：导航、版权等）可以采用jsp:include的方式公用，因此这块可以作为模块放到module中作为一个组件，在需要的地方引入。
但是这种方式也可以展示后台传过来了数据信息（信息一般存储在list中），例如：
<%@ page language="java" contentType="text/html; charset=utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!-- 首页里面的信息展示“豆腐块” --><div id="index_list_top" ></div><div id="index_list_mid" ><c:forEach var="info" items='${param.info}'>${ info } <br></c:forEach></div><div id="index_list_bottom" ></div>?这个模块文件遍历了传入的list，并做出了简单的布局展示。这里采用了jstl、el表达式。
在引入这个模块的页面只要如下操作即可：
<!-- 使用jsp:include 包含页面内容 --> <jsp:include page="/WEB-INF/page/style01/module/index_list.jsp"> <jsp:param value='${requestScope.news}' name="info"/> </jsp:include>?其中${requestScope.news}是利用el从request中取出相应的数据。因此只要这里“注入”的数据就可以复用模版的布局。
同样可以利用c标签import这个模块，代码如下：
<!-- 使用c:import 包含页面内容 --> <c:import url="/WEB-INF/page/style01/module/index_list.jsp"> <c:param name="info" value='${requestScope.notices}' ></c:param> </c:import>?3.后台控制布局和样式
其实后台取出了数据，要改变他们给用户的呈现，主要就是选择对应的布局文件（在该项目中存在于web-inf/page/中），和对应的样式文件(在该项目中存在与webRoot的css和image文件夹中)。
注意这里目录的特点：
css:WebRoot\css\style01
iamge:WebRoot\image\style01
jsp:WebRoot\WEB-INF\page\style01
如果我们对应开发了style02，并且里面给出不同的布局和样式文件，那么后台动态制定到不同的目录就带到了这个目的。
?
例如：在action中定义一个属性（style），用来指定呈现的布局和样式。（这个属性在正式项目中应该从配置文件中读取而来）
那么在action配置中可以动态配置result，用来“导向”指定的布局文件：
<action name="index" type="text/css" href="css/${requestScope.style}/index.css">
?
?
效果：（简单用颜色模块展示）
?
第一种样式：
![[简易信息系统开发01] 模块化显示数据](http://img.reader8.net/uploadfile/jiaocheng/20140140/2753/2014012719530620956.png)
?
通过修改action中的style属性，既可以得到第二种样式：
?
![[简易信息系统开发01] 模块化显示数据](http://img.reader8.net/uploadfile/jiaocheng/20140140/2753/2014012719530620957.png)
?
?
如果想开发新的样式怎么办？
1.只需要开发对应的jsp模版、css样式文件即可；
?
--------------------------------------------
需要持续改进的地方：
1.模块的配置（即模块的数量、位置可配置）。
2.模块的展示使用自定义标签来实现，可能更加方便。
?
?
欢迎大家提出意见~给出指导！
?
?
1 楼 tsoukw 2011-03-17 我在js端完成，简单，清晰，适应性高 2 楼 huangfoxAgain 2011-03-17 tsoukw 写道我在js端完成，简单，清晰，适应性高