PS
1：先介紹一下什么是Servlet？
Servlet（Server Applet）是Java Servlet的簡稱，稱為小服務程序或服務連接器，用Java編寫的服務器端程序，主要功能在於交互式地瀏覽和修改數據，生成動態Web內容。
狹義的Servlet是指Java語言實現的一個接口，廣義的Servlet是指任何實現了這個Servlet接口的類，一般情況下，人們將Servlet理解為后者。Servlet運行於支持Java的應用服務器中。從原理上講，Servlet可以響應任何類型的請求，但絕大多數情況下Servlet只用來擴展基於HTTP協議的Web服務器。
2：什么是JSP？
JSP全名為Java Server Pages，中文名叫java服務器頁面，其根本是一個簡化的Servlet設計，它[1] 是由Sun Microsystems公司倡導、許多公司參與一起建立的一種動態網頁技術標准。JSP技術有點類似ASP技術，它是在傳統的網頁HTML（標准通用標記語言的子集）文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP標記(tag)，從而形成JSP文件，后綴名為(*.jsp)。 用JSP開發的Web應用是跨平台的，既能在Linux下運行，也能在其他操作系統上運行。Java Servlet是JSP的技術基礎，而且大型的Web應用程序的開發需要Java Servlet和JSP配合才能完成。JSP具備了Java技術的簡單易用，完全的面向對象，具有平台無關性且安全可靠，主要面向因特網的所有特點。
這些東西在隨處都可以查到，要想做成一個比較好的web項目，他們的結合是必不可少的，本項目是servlet結合jsp所做的界面如下，用到的知識點是
-
● Servlet、jsp基本使用（重定向、轉發、互相傳值等）
-
jQuery的使用
-
Ajax的回調
-
layer彈出層
-
MySql數據庫（增刪查改）
-
Html使用（標簽、iframe等）
-
Bootstrap
1：首先用IDEA新建一個工程，MyTest
要實現左邊這一欄（全部、文檔、輪番圖），右邊是一個網頁被單獨加載進來了，左邊是一個ul，下面放一個輪番圖，，右邊是用iframe加載。最上面是div，用來顯示名稱。
- 先創建主文件index.jsphomepage.jsp是左邊的全部（點擊全部在右邊顯示）
- wendang.jsp(點擊文檔顯示在右邊)
- head.jsp用來顯示最上面的信息。
- 從上往下開始搭建 把菜單抽取出來，
加載jQuery、bootstrap、css等
1.1：加載js文件和css文件，這里用的是聯網的，需要網絡才可以。
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
1.2：
- 創建views/head.jsp。路徑為web目錄下的views/head.jsp
- 創建homepage.jsp、wendang.jsp，直接在web目錄下即可。
- 創建imgs，放圖片
如圖所示：layui等文件夾后期創建。
1.3：代碼部分
輪番代碼，用的是bootstrap
<!--首頁內容-->
<div id="myCarousel" class="carousel slide" style="width:250px;height:200px;bottom: 0;position: absolute">
<!-- 輪播（Carousel）指標 -->
<ol class="carousel-indicators" style="data-ride:'carousel'">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 輪播（Carousel）項目 -->
<div class="carousel-inner" >
<div class="item active">
<img src="imgs/img11.png" alt="First slide" style="width: 100%;height: 100%">
</div>
<div class="item">
<img src="imgs/img12.png" alt="Second slide" style="width: 100%;height: 100%">
</div>
<div class="item">
<img src="imgs/img10.png" alt="Third slide" style="width: 100%;height: 100%">
</div>
</div>
<!-- 輪播（Carousel）導航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›
</a>
</div>
--------
這里抽取框架是直接用iframe，寫一個table，分兩列
<table width="100%" height="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" height="100%" valign="top">
<ul id="daohangul" class="nav nav-pills nav-stacked">
<li class="active"><a href="homepage.jsp" target="mainFrame">全部</a></li>
<li ><a href="wendang.jsp" target="mainFrame">文檔</a></li>
</ul>
<%--輪番代碼寫這--%>
</td>
<%--iframe--%>
<td width="80%" valign="top"><iframe src="homepage.jsp" name="mainFrame" frameborder="0" marginheight="0" marginwidth="0" height="700" width="100%"></iframe></td>
</tr>
</table>
加載head.jsp
<jsp:include page="views/head.jsp"></jsp:include>背景顏色可隨便改<body style="background: #dce2f4">
1.4：點擊左側菜單改變背景顏色
<script>
$('#daohangul').click(function () {
});
$("#daohangul li").click(function() {
$(this).siblings('li').removeClass('active'); // 刪除其他兄弟元素的樣式
$(this).addClass('active'); // 添加當前元素的樣式
});
</script>
1.5此時簡單的抽取框架就搭建好了
