[郑州|结业弟子]JAVA-周自辉|2020年01月01日的日报-技能树.IT修真院

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

2 1150

啥也不说就是干！！！

今天完成的事情：

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>