從零搭建項(xiàng)目開發(fā)框架-13設(shè)計(jì)公共JSP

在講公共jsp之前，先說一下Bootstrap和Ace

BootStrap在過去的幾年非常火啊，火的原因就是響應(yīng)式框架，一次開發(fā)，適應(yīng)PC端、移動(dòng)端。雖然口號(hào)是一次開發(fā)，但是實(shí)際生產(chǎn)中還是分別對(duì)應(yīng)PC和移動(dòng)做開發(fā)的，只是基礎(chǔ)框架一樣，都是BootStrap。

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。 它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA的MSNBC（微軟全國(guó)廣播公司）的Breaking News都使用了該項(xiàng)目。 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來。

來源于百度百科

我個(gè)人感覺BootStrap好處就是提供了一系列好看的組件，比如下拉框、tab框、彈出框等等，樣式相對(duì)比以前的html+js做的，要絢麗很多，而且基于BootStrap又衍生出一系列的組件，比如JqueryUI、upload、switch等等，組成了一個(gè)BootStrap大家族，這才使BootStrap真正好用起來。為了提供更全面的組件整合，出現(xiàn)了很多UI框架，比如一會(huì)用到的ACE、Metronic、FlatUI、SBAdmin等等，都是基于BootStrap做的封裝，做了很多小例子可以直接用。

ACE官網(wǎng)

這套東西還是不錯(cuò)的，它是對(duì)BootStrap的輕度封裝，同時(shí)引用了一系列的組件，用起來比較方便，而且是藍(lán)色系，符合國(guó)人多數(shù)的審美觀。

頁面的公共jsp包括以下幾個(gè)部分：
1、公共引用css
2、公共引用js
3、header
4、menu
5、footer
下面依次講一下各個(gè)公共引用

以404頁面做為例子進(jìn)行js、css等相關(guān)引入，這個(gè)比較簡(jiǎn)單，引入過程中做了一些刪減。


示例頁面.png

1、ACE相關(guān)js和css引入

ACE相關(guān).png

ACE相關(guān)的很多，不可能全都導(dǎo)入進(jìn)來，只能是按需加入。
這里面首先加入了ACE基礎(chǔ)的，路徑在/assets/ace1.4/下面，包括avatarts、css、fonts、images、js這幾個(gè)文件夾，第二是引用ACE相關(guān)組件，路徑是/assets/ace1.4/components/下面，包含的幾個(gè)組件如下：
1、bootbox：彈出框，封裝了bootstrap原生的彈出框，簡(jiǎn)單一些
2、boostrap：bootstrap原生的一些組件
3、font-awesome：圖標(biāo)庫
4、jquery-ui：jqueryUI相關(guān)的一些組件，比如tabs
5、jquery-validation：表單校驗(yàn)
6、jquery：如果非IE瀏覽器可以引用這個(gè)jquery，jquery開發(fā)了一個(gè)不兼容ie的版本
7、juery.1x：如果是IE瀏覽器，還得引用1x版本

這里面額外加了一個(gè)datetimepicker，日期選擇框。

當(dāng)然后面還會(huì)引入更多的，比如datatable、比如echarts等等，用到的時(shí)候再加進(jìn)來。

2、styles.jspf

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/bootstrap.css" />
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/components/font-awesome/css/font-awesome.css" />
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/ace-fonts.css" />
<!-- ace styles -->
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/ace-skins.css" />
<link rel="stylesheet" type="text/css" href="${staticServer }/assets/datetimepicker2.1.9/jquery.datetimepicker.css"/>

可能有些人會(huì)奇怪，為啥后綴不是.jsp，而是.jspf呢，其實(shí)后綴是什么無所謂，jspf就是和其他jsp區(qū)分一下，是用于公共引入的

3、scripts.jspf

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--[if !IE]> -->
<script src="${staticServer}/assets/ace1.4/components/jquery/dist/jquery.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="${staticServer}/assets/ace1.4/components/jquery.1x/dist/jquery.js"></script>
<![endif]-->

<script src="${staticServer}/assets/ace1.4/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="${staticServer}/assets/ace1.4/components/jquery-ui/jquery-ui.js"></script>

<!-- ace scripts -->
<script src="${staticServer}/assets/ace1.4/js/ace-elements.js"></script>
<script src="${staticServer}/assets/ace1.4/js/ace.js"></script>

<script src="${staticServer}/assets/common/js/common.js"></script>
<!-- plugins -->

<script src="${staticServer}/assets/ace1.4/components/bootbox/bootbox.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript"> ace.vars['base'] = '/'; </script>
<!-- page specific plugin scripts -->
<script src="${staticServer }/assets/datetimepicker2.1.9/jquery.datetimepicker.js" type="text/javascript"></script>
<script src="${staticServer }/assets/ace1.4/components/jquery-validation/dist/jquery.validate.js" type="text/javascript"></script>
<script src="${staticServer }/assets/ace1.4/components/jquery-ui/jquery-ui.js"></script>

這里面只是引用了最基本的js

4、header.jspf

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="navbar" class="navbar navbar-default ace-save-state  navbar-fixed-top">
    <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
        </button>
        <div class="navbar-header pull-left">
            <!-- #section:basics/navbar.layout.brand -->
            <a href="${dynamicServer }/index.htm" class="navbar-brand"> <small><i class="fa fa-leaf"></i> ${webTitle} </small>
            </a>
        </div>

        <!-- #section:basics/navbar.dropdown -->
        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="purple dropdown-modal">

                </li>
                <!-- #section:basics/navbar.user_menu -->
                <li class="light-blue dropdown-modal"><a data-toggle="dropdown" href="#" class="dropdown-toggle"> <img class="nav-user-photo"
                        src="${staticServer }/assets/ace1.4/images/avatars/user.jpg" alt="Jason's Photo" /> <span class="user-info"> <small>
                                系統(tǒng)管理員,</small> 張三
                    </span> <i class="ace-icon fa fa-caret-down"></i>
                </a>
                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li><a href="${dynamicServer }/toUpdatePass.htm"> <i class="ace-icon fa fa-cog"></i> 修改密碼
                        </a></li>
                        <li class="divider"></li>
                        <li><a href="${dynamicServer }/logout.htm"> <i class="ace-icon fa fa-power-off"></i> 退出
                        </a></li>
                    </ul></li>
            </ul>
        </div>
    </div>
</div>

這里面

5、menu.jspf

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- #section:basics/sidebar -->
<div id="sidebar" class="sidebar                  responsive                    ace-save-state">
    <script type="text/javascript">
        try {
            ace.settings.loadState('sidebar')
        } catch (e) {
        }
    </script>

    <div class="sidebar-shortcuts" id="sidebar-shortcuts">
        <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
            <button class="btn btn-success">
                <i class="ace-icon fa fa-signal"></i>
            </button>

            <button class="btn btn-info">
                <i class="ace-icon fa fa-pencil"></i>
            </button>

            <!-- #section:basics/sidebar.layout.shortcuts -->
            <button class="btn btn-warning">
                <i class="ace-icon fa fa-users"></i>
            </button>

            <button class="btn btn-danger">
                <i class="ace-icon fa fa-cogs"></i>
            </button>

            <!-- /section:basics/sidebar.layout.shortcuts -->
        </div>

        <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
            <span class="btn btn-success"></span>

            <span class="btn btn-info"></span>

            <span class="btn btn-warning"></span>

            <span class="btn btn-danger"></span>
        </div>
    </div><!-- /.sidebar-shortcuts -->

    <ul class="nav nav-list">
        <li class="">
            <a href="index.html">
                <i class="menu-icon fa fa-tachometer"></i>
                <span class="menu-text"> Dashboard </span>
            </a>

            <b class="arrow"></b>
        </li>

        <li class="">
            <a href="#" class="dropdown-toggle">
                <i class="menu-icon fa fa-desktop"></i>
                <span class="menu-text">
                                系統(tǒng)管理
                            </span>

                <b class="arrow fa fa-angle-down"></b>
            </a>

            <b class="arrow"></b>

            <ul class="submenu">


                <li class="">
                    <a href="typography.html">
                        <i class="menu-icon fa fa-caret-right"></i>
                        資源管理
                    </a>

                    <b class="arrow"></b>
                </li>

                <li class="">
                    <a href="elements.html">
                        <i class="menu-icon fa fa-caret-right"></i>
                        角色管理
                    </a>

                    <b class="arrow"></b>
                </li>

                <li class="">
                    <a href="buttons.html">
                        <i class="menu-icon fa fa-caret-right"></i>
                        用戶管理
                    </a>

                    <b class="arrow"></b>
                </li>
            </ul>
        </li>
    </ul><!-- /.nav-list -->

    <!-- #section:basics/sidebar.layout.minimize -->
    <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
        <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state"
           data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
    </div>

    <!-- /section:basics/sidebar.layout.minimize -->
</div>

這一塊的代碼非常多，把菜單做了一下刪減，只保留系統(tǒng)管理、資源管理、角色管理、用戶管理幾個(gè)。

6、footer.jspf

這個(gè)先不設(shè)計(jì)了，內(nèi)容頁面只寫內(nèi)容，不留下方的版權(quán)信息了。

源碼下載

本階段詳細(xì)源碼

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容