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="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=" 100%;height: 100%">
</div>
<div class="item">
<img src="imgs/img12.png" alt="Second slide" style=" 100%;height: 100%">
</div>
<div class="item">
<img src="imgs/img10.png" alt="Third slide" style=" 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此时简单的抽取框架就搭建好了
