SiteMesh配置下載使用(簡單介紹)

時間 2019-11-18

標籤 sitemesh 配置下載使用簡單介紹简体版

原文原文鏈接

簡單介紹

SiteMesh 是一個網頁佈局和修飾的框架，利用它能夠將網頁的內容和頁面結構分離，以達到頁面結構共享的目的。php

Sitemesh是由一個基於Web頁面佈局、裝飾以及與現存Web應用整合的框架。它能幫助咱們在由大量頁面構成的項目中建立一致的頁面佈局和外觀，如一致的導航條，一致的banner，一致的版權，等等。它不單單能處理動態的內容，如jsp，php，asp等產生的內容，它也能處理靜態的內容，如htm的內容，使得它的內容也符合你的頁面結構的要求。甚至於它能將HTML文件象include那樣將該文件做爲一個面板的形式嵌入到別的文件中去。全部的這些，都是GOF的Decorator模式的最生動的實現。儘管它是由java語言來實現的，但它能與其餘Web應用很好地集成。css

官網下載:http://wiki.sitemesh.org/wiki/display/sitemesh3/Home

idea配置使用

第一步:建立一個sitemesh項目,建立完成以後，導入sitemesh包（圖中Problems有個1出錯，點擊）

進行Add添加

第二步:

如今進行配置web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--定義過濾器-->
    <filter>
        <filter-name>sitemesh</filter-name>
        <filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
    </filter>
    <!--定義過濾器攔截URL地址-->
    <filter-mapping>
        <!--過濾器的名稱-->
        <filter-name>sitemesh</filter-name>
        <!--過濾器負責攔截的URL-->
        <!-- /* 會把全部的請求攔截下來 -->
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

第三步:

在WEB-INF下建立一個名字爲decorators.xml文件，裏面進行配置

<?xml version="1.0" encoding="UTF-8" ?>
<decorators defaultdir="/lay/">
    <!--定義不過濾的頁面-->
    <!--<excludes>
            不過濾路徑
        <pattern>/jsp/*</pattern>
    </excludes>-->
    <!-- 定義須要修飾的頁面 -->
    <decorator name="book" page="lay_style.jsp">
        <!-- 定義須要修飾的文件夾-->
        <pattern>/jsp/*</pattern>
    </decorator>
</decorators>

第四步:

建立一個jsp文件進行作樣式修飾（注意:必須引入<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>）

<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<%--
  Created by IntelliJ IDEA.
  User: 邦槓
  Date: 2018/8/22
  Time: 12:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%-- 在樣式裏面定義標題--%>
    <title><sitemesh:title></sitemesh:title></title>
</head>
<body>
<h1>這裏是sitemesh頁面</h1>
<sitemesh:body></sitemesh:body>
</body>
</html>

再須要修飾的文件(最後放在一個文件夾進行所有修飾)

運行結果

簡單案列:

<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<%--
  Created by IntelliJ IDEA.
  User: 邦槓
  Date: 2018/8/20
  Time: 21:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title><sitemesh:title/></title>
    <!--css-->
<%@include file="lay_css.jsp"%>
</head>
<body>
<!--頂部-->
<%@include file="lay_top.jsp"%>
<!--主體-->
<div class="container-fluid">
    <div class="row">
        <!--左邊菜單欄-->
        <%@include file="lay_left.jsp"%>
        <!--右邊主體-->
        <%@include file="lay_body.jsp"%>
    </div>
</div>
<!--js-->
<%@include file="lay_js.jsp"%>
</body>
</html>

View Code

<%@ page import="com.wbg.bookstrop.util.DBUtil" %>
<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: 邦槓
  Date: 2018/8/19
  Time: 13:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<h3 class="page-header">書籍信息</h3>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin: 0px;">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="請輸入書名" id="bname" name="bname">
            <button class="btn btn-outline-success my-2 my-sm-0" type="button" onclick="selename()">搜索</button>

        </form>
    </div>
</nav>

<table class="table table-sm table-bordered ">
    <thead>
    <tr class="table-info">
        <th scope="col">書名</th>
        <th scope="col">做者</th>
        <th scope="col">價錢</th>
        <th scope="col">出版社</th>
        <th scope="col">類型</th>
        <th scope="col">操做</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<form class="form-horizontal" role="form" action="/book/BooksWebs?action=upda" method="post">
    <div class="modal fade" id="cx" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">修改信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="bid" class="col-sm-1 control-label">編號</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bid" name="bid" readonly="readonly"placeholder="請輸入書編號">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-1 control-label">書名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name"name="bname"   placeholder="請輸入書名稱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="bauthor" class="col-sm-1 control-label">做者</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bauthor"name="bauthor" placeholder="請輸入書做者">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="bprice" class="col-sm-1 control-label">價格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bprice"name="bprice" placeholder="請輸入書價格">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="bpress" class="col-sm-1 control-label">出版社</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bpress"name="bpress" placeholder="請輸入出版社">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="bType" class="col-sm-1 control-label">書籍類型</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="bType"name="bType" >
                                <option value="1">融協力</option>
                                <option value="2">哲學</option>
                                <option value="3">勵志</option>
                                <option value="4">戰爭</option>
                            </select>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button"  class="btn btn-primary" onclick="up()">確認修改</button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    function seleAll() {
        $.ajax({
            type:"get"
            ,url:"/book/BooksWebajax?action=seleAll"
            ,dataType:"json"
            ,success:function (data) {
                $("tr:gt(0)").remove();
                var tbody=$("tbody");
                $.each(data.data,function (index,obj) {
                    if(index%2==0)
                        var tr=$("<tr class=\"table-primary\"/>");
                    else
                        var tr=$("<tr class=\"table-success\"/>");
                    $("<td/>").html(obj.bname).appendTo(tr);
                    $("<td/>").html(obj.bauthor).appendTo(tr);
                    $("<td/>").html(obj.bprice).appendTo(tr);
                    $("<td/>").html(obj.bpress).appendTo(tr);
                    $("<td/>").html(obj.bType).appendTo(tr);
  var input1=$("<button type=\"button\"  class=\"btn btn-outline-primary\" data-toggle=\"modal\" data-id="+obj.bid+" data-target=\"#cx\"/>").html("修改");
                    var input2=$("<button type=\"button\" class=\"btn btn-outline-primary\" onclick=\"dele("+obj.bid+")\"/>").html("刪除");
                    $("<td/>").append(input1).append(input2).appendTo(tr);
                    tbody.append(tr);
                })
            }
        })
    }
    function up() {
            $.ajax({
                type:"post"
                ,url:"/book/BooksWebajax?action=upda"
                ,data:{
                    bid:$("#bid").val(),
                    bname:$("#name").val(),
                    bauthor:$("#bauthor").val(),
                    bprice:$("#bprice").val(),
                    bpress:$("#bpress").val(),
                    bType:$("#bType").val(),
                }
                ,dataType:"json"
                ,success:function (data) {
                    alert(data.msg);
                    if(data.msg=="修改爲功"){
                        seleAll();
                        window.location.href="bookajax.jsp";
                    }

                }})


    }
    function dele(id) {

        if(confirm("是否刪除?")){
            $.ajax({
                type:"get"
                ,url:"/book/BooksWebajax?action=delete"
                ,data:{bid:id}
                ,dataType:"json"
                ,success:function (data) {
                    if(data.msg=="刪除成功"){
                        seleAll();
                    }
                    alert(data.msg);
                }})
        }

    }
    function upda() {
        $("#cx").on("show.bs.modal",function(e){
      $.ajax({
                type:"get",
                url:"/book/BooksWebajax?action=seleid"
                ,data:{bid:event.target.dataset['id']}
                ,success:function (data) {
                    $("#bid").val(data.data.bid);
                    $("#name").val(data.data.bname);
                    $("#bauthor").val(data.data.bauthor);
                    $("#bprice").val(data.data.bprice);
                    $("#bpress").val(data.data.bpress);
                    $("#bType").val(data.data.bType);
                }
            })
    })
    }
    function selename(){
        $.ajax({
            type:"post"
            ,url:"/book/BooksWebajax?action=selename"
            ,data:{bname:$("#bname").val()}
            ,dataType:"json"
            ,success:function (data) {
                if(data.msg=="查詢成功"){
                    $("tr:gt(0)").remove();
                    var tbody=$("tbody");
                    $.each(data.data,function (index,obj) {
                        var tr=$("<tr class=\"table-success\"/>");
                        $("<td/>").html(obj.bname).appendTo(tr);
                        $("<td/>").html(obj.bauthor).appendTo(tr);
                        $("<td/>").html(obj.bprice).appendTo(tr);
                        $("<td/>").html(obj.bpress).appendTo(tr);
                        $("<td/>").html(obj.bType).appendTo(tr);
                        var input1=$("<button type=\"button\"  class=\"btn btn-outline-primary\" onclick=\"upda("+obj.bid+")\"/>").html("修改");
                        var input2=$("<button type=\"button\" class=\"btn btn-outline-primary\" onclick=\"dele("+obj.bid+")\"/>").html("刪除");
                        var input3=$("<button type=\"button\" class=\"btn btn-outline-primary\" onclick=\"sele("+obj.bid+")\"/>").html("詳細");
                        $("<td/>").append(input1).append(input2).append(input3).appendTo(tr);
                        tbody.append(tr);
                    })
                }
                else
                    alert("無數據");

            }})
    }
  window.onload=function (ev) {
      seleAll();
      upda();
  }
</script>