[简易信息系统开发01] 模块化显示数据

[简易信息系统开发01] 模块化展示数据

需求：

1.信息聚合展示；

2.快速建站；

3.网站布局可以定制；

 

以上需求虽然就简单几个字，但是对于我这个web新手还是有些头晕~

晚上花了些时间构思了一个简单的“山寨版”模型。

 

实现的功能：

1.后台控制页面布局和样式问题；

2.信息模块化展示；（方式1：jsp：include）

 

实现思路：

 

1.项目文件结构

 

 

主要注意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" class="com.manta.index.action.IndexAction">

<result>/WEB-INF/page/${style}/index.jsp</result>

 </action>

 

那么在页面上通过其也可以指定样式文件：

<link rel="stylesheet" type="text/css" href="css/${requestScope.style}/index.css">

 

 

效果：（简单用颜色模块展示）

 

第一种样式：

 

通过修改action中的style属性，既可以得到第二种样式：

 

 

 

如果想开发新的样式怎么办？

1.只需要开发对应的jsp模版、css样式文件即可；

 

--------------------------------------------

需要持续改进的地方：

1.模块的配置（即模块的数量、位置可配置）。

2.模块的展示使用自定义标签来实现，可能更加方便。

 

 

欢迎大家提出意见~给出指导！