发表于: 2020-01-01 19:55:28

2 1148


啥也不说就是干!!!

今天完成的事情:

1、Tiles 框架

在 web 项目开发中很多页面片段需要也应该复用它,比如页面中的 header、body、footer 等,所以就需要想办法复用它们。当然可以使用 jsp 的 include 标签去组合这些页面。

但是这样的话需要每个页面单独自己组合,造成了大量的重复性工作,因此引入 tiles 这种页面布局框架,来提高开发效率

添加 Tiles 的 pom 依赖

<dependency>
 <groupId>org.apache.tiles</groupId>
 <artifactId>tiles-extras</artifactId>
 <version>3.0.7</version>
</dependency>
<dependency>
 <groupId>org.apache.tiles</groupId>
 <artifactId>tiles-servlet</artifactId>
 <version>3.0.7</version>
</dependency>
<dependency>
 <groupId>org.apache.tiles</groupId>
 <artifactId>tiles-jsp</artifactId>
 <version>3.0.7</version>
</dependency>

配置 Tiles 视图解析器

在 SpringMVC 配置文件中添加  Tiles 视图解析配置,确保优先匹配 Tiles 配置来进行视图解析

<!-- 引入Tiles配置文件 -->
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer" >
   <property name="definitions">
       <list>
           <value>/WEB-INF/tiles.xml</value>
       </list>
   </property>
</bean>

<!-- 配置 Tiles 视图解析器 -->
<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
   <property name="viewClass">
       <value>org.springframework.web.servlet.view.tiles3.TilesView</value>
   </property>
</bean>

配置 Tiles.xml

在 WEB-INF/ 目录下创建 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_base" template="/WEB-INF/views/layouts/template.jsp"></definition>

   <!-- 不继承直接引用也行 -->
   <definition name="*/*" extends="template_base">
       <put-attribute name="header" value="/WEB-INF/views/layouts/_top.jsp" />
       <!--这里{1}/{2}是通配符的意思,{1}代表definition name="*/*"中的第一个*,{2}代表第二个*-->
       <put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp" />
       <put-attribute name="footer" value="/WEB-INF/views/layouts/_footer.jsp" />
   </definition>

   <definition name="list" extends="template_base">
       <put-attribute name="header" value="/WEB-INF/views/layouts/_top.jsp" />
       <!--这里{1}/{2}是通配符的意思,{1}代表definition name="*/*"中的第一个*,{2}代表第二个*-->
       <!--<put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp" />-->
       <put-attribute name="body" value="/WEB-INF/views/list.jsp" />
       <put-attribute name="footer" value="/WEB-INF/views/layouts/_footer.jsp" />
   </definition>
</tiles-definitions>

分别创建 template.jsp 

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<% String path = request.getContextPath();
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
   request.setAttribute("basePath", basePath);
%>
<html>
<head>
   <title>Title</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,  maximum-scale=1">
   <link rel="stylesheet" type="text/css"
         href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
   <div class="panel panel-default text-center">
       <div class="panel-body">
           <tiles:insertAttribute name="header" />
</div>
   </div>
   <div class="panel panel-default text-center">
       <tiles:insertAttribute name="body" />
</div>
   <tiles:insertAttribute name="footer" />
</div>
</body>
</html>

 _top.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
   <div class="container">
       <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
           </button>
           <a class="navbar-brand" href="#">学生信息</a>
       </div>
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul class="nav navbar-nav">
               <%--<li class="active"><a href="dbs">列表</a></li>--%>
               <li><a href="list">列表</a>
                   <%--<li><a href="" >注销</a></li>--%>
           </ul>
       </div>
   </div>
</nav>

_footer.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8" %>
<div class="panel panel-default text-center">
   <div class="panel-heading">
       Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Controller 与 body 页面

当 Controller 返回 viewName (views/list) 会和 tiles.xml 的 name 匹配格式,找到对应的页面模板,并确定body 页面 

Controller 中的方法如下:

@RequestMapping("student")
@Controller
public class StudentController {

@Resource
   private StudentService studentService;
   @RequestMapping("/list")
public String list(@RequestParam(required = false,defaultValue = "1") Integer pageNum,@RequestParam(required = false,defaultValue = "10") Integer pageSize,HashMap<String,Object> map){
PageInfo<Student> ps = studentService.getStudentList(pageNum,pageSize);
       map.put("stuInfos",ps.getList());
       return "list";
   }
}

对应的 body 页面也就是 views/list.jsp 展示具体的内容,这里是 查询出来的 学生信息列表

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
</head>
<body>
<div class="panel-heading" align="right">
   <a href="${pageContext.request.contextPath}/student"><h5>新增学生信息</h5></a>
</div>
<div class="panel-body">
   <table class="table table-striped table-bordered table-hover">
       <thead>
       <tr>
           <th width="10%" > ID</th>
           <th width="15%" > 姓名</th>
           <th width="15%" > QQ</th>
           <th width="15%" > 职业</th>
           <th width="10%" > 学号</th>
           <th width="30%" > 口号</th>
           <th width="20%" > 编辑</th>
           <th width="20%" > 删除</th>
       </tr>
       </thead>
       <c:if test="${empty requestScope.stuInfos}">
<tr>
               <td colspan="4" align="center">暂无数据</td>
           </tr>
       </c:if>
<c:if test="${!empty requestScope.stuInfos}">
<c:forEach var="stu" items="${requestScope.stuInfos}">
<tr>
                   <td >${stu.id}</td>
                   <td >${stu.name}</td>
                   <td >${stu.qq}</td>
                   <td >${stu.profession}</td>
                   <td >${stu.onlineNum}</td>
                   <td >${stu.slogan}</td>
                   <td >
                       <form action="${pageContext.request.contextPath}/student/${stu.id}" method="get">
                           <input type="Submit" value="Edit"/>
                       </form>
                   </td>
                   <td >
                       <form action="${pageContext.request.contextPath}/student/${stu.id}" method="post">
                           <input type="hidden" value="DELETE" name="_method"/>
                           <input type="Submit" value="Delete"/>
                       </form>
                   </td>
               </tr>
           </c:forEach>
</c:if>
</table>
</div>
</body>
</html>

很简单,取出 Controller 传递过来的 stuInfos 进行遍历输出至页面中

启动 Tomcat 浏览器中发请求 :http://localhost:8080/student/list

可以 list.jsp 页面 分别为 header , body,footer

明天计划的事情:

1、将 Task9 中的页面用 Tiles 框架套入,并将静态数据替换成动态数据(从 DB 中获取)

2、写一个 Tag 标签,处理时间格式

遇到的问题:

暂无

收获

学习了 Tiles 套页面的流程



返回列表 返回列表
评论

    分享到