发表于: 2017-10-29 23:00:22

1 799


今天完成的事情

1.完善页面中使用el表达式时,取到的对象数量不够会导致页面500的问题

在home页面,需要显示4个优秀学员的信息,如果从数据库取到的优秀学员对象不足4个,会出现以下情况:

想了一下,大概有两种思路,一是对集合进行判断,如果不足四个对象,先显示所取得的对象的信息,再对剩下的部分设置显示信息,如“暂无”等。

另一种思路是对集合进行处理,直接添加进几个属性全都为空的对象,使得到达页面的集合中的对象数量至少为4个,这样在页面显示时,不足的部分会显示为空白。可能有两种实现方式,一是在数据库中创建一个存储过程,对查询数据进行判断,当数据行数不足4行时,进行添加空行的操作,直到有4条数据为止,然后调用存储过程来获得结果集。还有一种是在控制器中,先对获得的集合的对象数量进行判断,当小于4个时,添加进几个空对象,使得总数至少为4个。

我采用了在控制器中进行操作的方式

简单粗暴的方法是直接添加了4个空对象,使得总数至少为4个:

@RequestMapping("home")
public String introductionView(Model model){
//        model.addAttribute("item","introduction");
       List<StudentWeb> studentWebs=studentWebService.list();
       //添加属性为空的对象到集合中,防止页面崩
       for(int i=0;i<4;i++){
           StudentWeb stu =new StudentWeb();
           studentWebs.add(stu);
       }
       model.addAttribute("s",studentWebs);
       return "homeBody";
   }

也可以用循环来实现,这样不会产生多余的数据:

int size=studentWebs.size();
while(size<4){
StudentWeb stu =new StudentWeb();
   studentWebs.add(stu);
   size=studentWebs.size();
}

只取两条数据时的执行结果:

页面能正常显示。


2.完善了一点tiles框架实现的页面

针对任务中的页面,可以分为头部,中部,尾部,在home,two,three三个页面中,头部和尾部都是相同的

头部:

尾部:

所以可以抽取这两部分的代码,创建两个jsp文件,header.jsp和footer.jsp,作为组件

头部代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles-extras" prefix="tilesx" %>
<title>技能树首页</title>
<html>
<body>
<header>
   <div class="top">
       <p>客服电话:010-594-78634</p>
       <div class="top-right">
           <div class="wexin"></div>
           <div class="qq"></div>
           <div class="sina"></div>
       </div>
   </div>
   <div class="header-center">
       <div class="center-right">
           <a href="home">首页</a>
           <a href="three">职业</a>
           <a href="two">推荐</a>
           <a href="#">关于</a>
       </div>
   </div>
</header>
</body>
</html>

尾部代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles-extras" prefix="tilesx" %>
<html>
<footer>
   <div class="footer-top">
       <div class="footer-top-left">
           <div class="footer-top-left-1">
               <h4>技能树——改变你我</h4>
               <div>
                   <a href="#">关于我们</a>
                   |
<a href="#">联系我们</a>
                   |
<a href="#">友情链接</a>
               </div>
           </div>
           <div class="footer-top-left-2">
               <h4>旗下网站</h4>
               <div>
                   <a href="#">草船云孵化器</a>
                   <a href="#">最强IT特训营</a>
               </div>
               <div>
                   <a href="#">葡萄藤轻游戏</a>
                   <a href="#">桌游精灵</a>
               </div>
           </div>
       </div>
       <div class="footer-top-right">微信公众平台</div>
   </div>
</footer>
<div class="footer-end">Copyright@2015技能树www.jnshu.com ALL Rights
Reserved丨京ICP13005880</div>
</body>
</html>

然后针对每个页面不同的部分,分别抽取其代码,创建中部文件,分别为homeBody.jsp,twoBody.jsp,threeBody.jsp,代码太长,不贴了

再创建一个模板jsp:template.jsp,主要代码:

<div>
   <tiles:insertAttribute name="header"/>
   <tiles:insertAttribute name="body"/>
   <tiles:insertAttribute name="footer"/>
</div>

创建tiles的配置文件tiles.xml,通过它来对网页的布局进行管理。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
   <!--<主布局>-->
   <definition name="template" template="/template.jsp"/>
   <!--<项目>-->
   <definition name="*" extends="template">
       <put-attribute name="title" value=""/>
       <put-attribute name="header" value="/header.jsp"/>
       <put-attribute name="body" value="/{1}.jsp"/>
       <put-attribute name="footer" value="/footer.jsp"/>
   </definition>
</tiles-definitions>

其中的template.jsp就是主布局模板,决定了整个页面显示的内容和位置,header.jsp,footer.jsp,{1}.jsp是引用页面,决定了页面显示的具体内容,这里的header,body,footer,分别对应于template中的header,footer,body。 *  表示它可以匹配所有从控制器传过来的视图名,然后通过  {1}  可以将匹配到的视图名取出 形成相应的jsp文件名,这样模板才能完成整个页面的加载。

还需要为tiles配置视图解析器,再springMVC的配置文件中添加:

<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.tiles3.TilesViewResolver" p:order="1"/>
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
        <property name="definitions">
             <list>
                <value>classpath:tiles.xml</value>
             </list>
        </property>

</bean>

第一个为tiles的视图解析器,这里设置了它的优先级为1,数字越小,视图解析器的优先级越高,这样从控制器返回的视图名将会先经过tiles的视图解析器,如果在tiles.xml中没有匹配到相应的jsp文件的话,再经过配置的其他视图解析器来进行匹配。第二个为tiles的配置文件的加载路径。

最后,是编写控制器:

 @RequestMapping("home")
public String introductionView(Model model){
       List<StudentWeb> studentWebs=studentWebService.list();
        model.addAttribute("s",studentWebs);
       return "homeBody";
   }

对于路径/home,控制器会返回一个视图名homeBody,因为再springMVC.xml中配置的tiles的视图解析器的优先级较高,所以homeBody会先通过tiles的视图解析器在tiles.xml中进行匹配,在tiles.xml中,通配符 * 会匹配所有字符,然后通过  {1}  可以将  * 匹配到的字符提取出来,形成相应的jsp文件,既 homeBody.jsp ,如果有这个文件的话,template.jsp就会引用这些jsp ,形成最终的视图,如果没有的话,视图名将会通过其他的视图解析器去进行匹配。

效果:

 

明天的计划

用Tag标签来处理时间的转换


遇到的问题


收获

了解了tiles的配置


返回列表 返回列表
评论

    分享到