手记

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程
继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Maven多模块+SSM框架（五、Bootstrop3+Sitemesh3网页布局和修饰的框架）

song先生 2017-09-07 16:07:26 浏览 993246
song先生
关注TA
已关注
手记 41
粉丝 218
获赞 1546

前言

第四篇写完后发现显示到前台真的好难看，如果说实战的话当然这个东西做好后一定让用户鄙视。（没法看~~）

So！加上Twitter推出的前端开发的开源工具包Bootstrop还是不错的选择。

Sitemesh 3听到这个词，不知道什么东西，能干嘛？简单来说: Sitemesh 是一个网页布局和修饰的框架,知道 ASP.NET 的同学应该了解母版这个东西，比较类似啦！还不了解？别急，等东西做出来就知道了。

Bootstrop添加

图片描述
相关的css，js，图标，字体等都在assets中，用的时候直接copy过去就行，记得相关文件路径要引用正确。（都在github上，文章结尾有地址）

sitemesh3配置

【1】首先在pom.xml中添加相关依赖
图片描述

        <dependency>
            <groupId>org.sitemesh</groupId>
            <artifactId>sitemesh</artifactId>
            <version>3.0.0</version>
        </dependency>

【2】在WEB-INF下添加配置文件
图片描述

<?xml version="1.0" encoding="UTF-8"?>
<sitemesh>
    <!-- 指明满足“/*”的页面，将被“/WEB-INF/views/decorators/*”所装饰 -->
    <!--studentDecorator.jsp就是装饰页，下文会写到-->
    <mapping path="/student/*" decorator="/WEB-INF/decorators/studentDecorator.jsp" />

    <!-- 指明满足“/exclude.jsp*”的页面，将被排除，不被装饰 -->
    <!--<mapping path="/exclude.jsp*" exclue="true" />-->
</sitemesh>

【3】在web.xml配置过滤器
图片描述

  <filter>
    <filter-name>sitemesh</filter-name>
    <filter-class>org.sitemesh.config.ConfigurableSiteMeshFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>sitemesh</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

【4】设置“母版页”或者说是装饰页

下面是找的模板，引自Sitemesh 3 配置和使用(最新)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>
        <sitemesh:write property='title'/>
    </title>
    <sitemesh:write property='head'/>
</head>
<body>

我是装饰器 : title的内容在这里 ~ <sitemesh:write property='title'/><br/>

我是装饰器 : body的内容在这里 ~ <sitemesh:write property='body'/><br/>

我是装饰器 : myTag的内容在这里 ~ <sitemesh:write property='myTag'/><br/>

</body>
</html>

已经写好的Bootstrop母版页建议把代码下载下来看

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title><sitemesh:write property='title' /></title>
    <!-- start: META -->
    <meta charset="utf-8" />
    <!--[if IE]-->
    <meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" />
    <!-- [endif]-->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="" name="description" />
    <meta content="" name="author" />
    <base href="<%=basePath%>">
    <!-- end: META -->
    <!-- start: MAIN CSS -->
    <link rel="stylesheet"
          href="assets/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="assets/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/fonts/style.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/main-responsive.css">
    <link rel="stylesheet" href="assets/plugins/iCheck/skins/all.css">
    <link rel="stylesheet"
          href="assets/plugins/bootstrap-paginator/css/bootstrap-responsive.min.css">
    <link rel="stylesheet"
          href="assets/plugins/bootstrap-colorpalette/css/bootstrap-colorpalette.css">
    <link rel="stylesheet"
          href="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.css">
    <link rel="stylesheet" href="assets/css/theme_light.css" type="text/css"
          id="skin_color">
    <link rel="stylesheet" href="assets/css/print.css" type="text/css"
          media="print" />
    <!--  [if IE 7]-->
    <link rel="stylesheet"
          href="assets/plugins/font-awesome/css/font-awesome-ie7.min.css">
    <!-- [endif]-->
    <!-- end: MAIN CSS -->
    <!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
    <link rel="stylesheet"
          href="assets/plugins/fullcalendar/fullcalendar/fullcalendar.css">
    <!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
    <link rel="shortcut icon" href="favicon.ico" />

    <!-- start: MAIN JAVASCRIPTS -->
    <!--  [if lt IE 9]>-->
    <script src="assets/plugins/respond.min.js"></script>
    <script src="assets/plugins/excanvas.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery-1.7.2.min.js"></script>
    <!--  [endif]-->
    <!--[if gte IE 9]><!-->

    <script type="text/javascript" src="assets/js/jquery-1.7.2.min.js"></script>
    <!--<![endif]-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>-->
    <script src="assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script
            src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
    <script src="assets/plugins/blockUI/jquery.blockUI.js"></script>
    <script src="assets/plugins/iCheck/jquery.icheck.min.js"></script>
    <script src="assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js"></script>
    <script src="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js"></script>
    <script src="assets/plugins/less/less-1.5.0.min.js"></script>
    <script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
    <script
            src="assets/plugins/bootstrap-colorpalette/js/bootstrap-colorpalette.js"></script>
    <script src="assets/js/main.js"></script>
    <!-- end: MAIN JAVASCRIPTS -->
    <!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
    <script src="assets/plugins/flot/jquery.flot.js"></script>
    <script src="assets/plugins/flot/jquery.flot.pie.js"></script>
    <script src="assets/plugins/flot/jquery.flot.resize.min.js"></script>
    <script src="assets/plugins/jquery.sparkline/jquery.sparkline.js"></script>
    <script
            src="assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
    <script
            src="assets/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
    <script src="assets/plugins/fullcalendar/fullcalendar/fullcalendar.js"></script>
    <script src="assets/js/index.js"></script>
    <!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
    <script>
        jQuery(document).ready(function() {
            Main.init();
        });
    </script>
    <sitemesh:write property='head' />
</head>
<body>
<!-- start: HEADER -->
<div class="navbar navbar-inverse navbar-fixed-top">
    <!-- start: TOP NAVIGATION CONTAINER -->
    <div class="container">
        <div class="navbar-header">
            <!-- start: RESPONSIVE MENU TOGGLER -->
            <button data-target=".navbar-collapse" data-toggle="collapse"
                    class="navbar-toggle" type="button">
                <span class="clip-list-2"></span>
            </button>
            <!-- end: RESPONSIVE MENU TOGGLER -->
            <!-- start: LOGO -->
            <a class="navbar-brand"
               href="./${sessionScope.pathCode}/homePage.do"> Maven多模块学习 </a>
            <!-- end: LOGO -->
        </div>
        <div class="navbar-tools">
            <!-- start: TOP NAVIGATION MENU -->
            <ul class="nav navbar-right">
                <!-- start: USER DROPDOWN -->
                <li class="dropdown current-user"><a data-toggle="dropdown"
                                                     data-hover="dropdown" class="dropdown-toggle"
                                                     data-close-others="true" href="#"><i class="clip-user-3 "></i>
                    <span class="username">管理员</span> <i class="clip-chevron-down"></i>
                </a>
                    <ul class="dropdown-menu">
                        <li><a href="./logout.do"> <i class="clip-calendar"></i>
                             退出
                        </a></li>
                    </ul></li>
                <!-- end: USER DROPDOWN -->
            </ul>
            <!-- end: TOP NAVIGATION MENU -->
        </div>
    </div>
    <!-- end: TOP NAVIGATION CONTAINER -->
</div>
<!-- end: HEADER -->
<!-- start: MAIN CONTAINER -->
<div class="main-container">
    <div class="navbar-content">
        <!-- start: SIDEBAR -->
        <div class="main-navigation navbar-collapse collapse">
            <!-- start: MAIN MENU TOGGLER BUTTON -->
            <div class="navigation-toggler">
                <i class="clip-chevron-left"></i> <i class="clip-chevron-right"></i>
            </div>
            <!-- end: MAIN MENU TOGGLER BUTTON -->
            <!-- start: MAIN NAVIGATION MENU -->
            <ul class="main-navigation-menu">

                <li id="home" class="active open"><a
                        href="./student/home.do"><i
                        class="clip-home-3"></i> <span class="title">首页</span><span
                        class="selected"></span> </a></li>

                <li id="studentInfo" ><a
                        href="./student/studentInfo.do"> <i
                        class="glyphicon glyphicon-list-alt"></i> <span class="title">学生信息</span> <span
                        class="selected"></span>
                </a></li>
            </ul>
            <!-- end: MAIN NAVIGATION MENU -->
        </div>
        <!-- end: SIDEBAR -->
    </div>
    <!-- start: PAGE -->
    <div class="main-content">
        <div class="container">
            <sitemesh:write property='body' />
        </div>
    </div>
    <!-- end: PAGE -->
</div>
<!-- end: MAIN CONTAINER -->
<!-- start: FOOTER -->
<div class="footer clearfix">
    <div class="footer-inner">2017 © Maven多模块学习.</div>
    <div class="footer-items">
        <span class="go-top"><i class="clip-chevron-up"></i> </span>
    </div>
</div>
<!-- end: FOOTER -->
<div id="event-management" class="modal fade" tabindex="-1"
     data-width="760" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×</button>
                <h4 class="modal-title">Event Management</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal"
                        class="btn btn-light-grey">Close</button>
                <button type="button"
                        class="btn btn-danger remove-event no-display">
                    <i class='fa fa-trash-o'></i> Delete Event
                </button>
                <button type='submit' class='btn btn-success save-event'>
                    <i class='fa fa-check'></i> Save
                </button>
            </div>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body"id="modal-body">
                在这里添加一些文本
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button id="bt1" type="button" class="btn btn-primary">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="text/javascript">
    var level1menuId = '${menuSelected1}';
    var level2menuId = '${menuSelected1}';
    $(".open").each(function() {
        $(this).removeClass('active open');
    });

    $('#' + level1menuId).click();
    $('#' + level1menuId).addClass('active open');
</script>

</body>
</html>

【5】被装饰页(写一个测试页面)
图片描述
home.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h1>测试使用sitemesh3是否成功</h1>
<h1>点击左侧<a href="/student/studentInfo.do">学生信息</a>可以查看通过vue.js获取到的学生信息</h1>
</body>
</html>

【6】修改Controller，Api与页面跳转分开

StudentController.java
图片描述

package com.songci.mytest_one.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Created by SongLiuxin on 2017/9/7.
 */
@Controller
@RequestMapping("/student/")
public class StudentController {
    @RequestMapping("home")
    public String home (Model model){
        model.addAttribute("menuSelected1", "home");
        return "student/home";}

}

StudentApiController.java (应该是和原来一样，没什么大的变化)
图片描述
【7】运行结果显示
图片描述

推荐文章

Bootstrop3官方文档

Sitemesh 3 配置和使用(最新)

未完待续~~~

GitHub地址:https://github.com/iamsongci/mytest_one

下一篇:Maven多模块+SSM框架（六、 Vue.js渐进式框架配合Ajax的简单使用 ）

打开App，阅读手记
相关标签
Java
Bootstrap
WebApp
4人推荐
发表评论
随时随地看视频慕课网APP

热门评论

图片是挂了  还是没有贴图片   所有的图片都是一个漫画 

查看全部评论

相关课程

算法与数据结构（C++版） 面试/评级的算法复习技能包

¥166 初级 11186

从0开始 独立完成企业级Java电商网站服务端开发

¥348 初级 9476

剑指Java面试-Offer直通车 百度资深面试官授课

¥299 中级 8422

Java入门第一季（IDEA工具）升级版

免费 入门 1165201

Java入门第二季 升级版

免费 入门 530569

相关阅读

Android Studio Tips and Tricks
javaee开发之jsp学习复习笔记（上）
MyEclipse10傻瓜式创建Maven工程（从下载maven到helloWorld，貌似最完整）
Maven多模块项目搭建+SSM框架整合（一、多模块搭建）
Java WEB 配置UEditor