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所做的界面如下，用到的知识点是

  1. ● Servlet、jsp基本使用（重定向、转发、互相传值等）

  2. jQuery的使用

  3. Ajax的回调

  4. layer弹出层

  5. MySql数据库（增删查改）

  6. Html使用（标签、iframe等）

  7. 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此时简单的抽取框架就搭建好了




 


 


 
												


											
Servlet与Jsp的结合使用实现信息管理系统一的更多相关文章
	

    
								
  1. Servlet，jsp，JSP技术 ,JSP编程
		
     一.Servlet 思考 1 浏览器可以直接打开JAVA/class文件吗? 不可以 2浏览器可以打开HTML.JS 文件吗? 可以 3 JAVA程序可以生成HTML文件吗?可以的,用IO流. 4  ...
    
		
    2. 
						
  2. Servlet与JSP版本历史以及Tomcat支持的版本
		
    查询这个的关键字:Java EE的版本历史. JavaServer Pages (JSP) Java Servlet 参考: https://en.wikipedia.org/wiki/Java_EE ...
    
		
    3. 
						
  3. JBoss和Tomcat版本、及Servlet、JSP规范版本对应一览 【转】
		
    原文地址:http://blog.csdn.net/hills/article/details/40896357 JBoss和Tomcat版本.及Servlet.JSP规范版本对应一览 JBossAS ...
    
		
    4. 
						
  4. 你也可以当面霸-Servlet与JSP的原理及特点
		
    既然是面试系列,就是面试官和应聘者之间的对话.本文是采用一问一答的形式呈现给读者的,这样能有一个明确的考察点,不像理论知识那么枯燥. 01.什么是Servlet技术 Servlet是和平台无关的服务器 ...
    
		
    5. 
						
  5. Servlet、JSP选择题(2)
		
    Java EE软件工程师认证考试 试题库-选择题 一.    选择题(包括单选和双选) 1.B 编写一个Filter,需要(  ) A. 继承Filter 类 B. 实现Filter 接口 C. 继承 ...
    
		
    6. 
						
  6. Servlet的生命周期，并说出Servlet和CGI的区别，Servlet与JSP的区别
		
    一.Servlet 生命周期 1.加载 2.实例化 3.初始化 4.处理请求 5.销毁 二.Servlet与cgi的区别: Servlet处于服务器进程中,它通过多线程方式运行其service方法,一 ...
    
		
    7. 
						
  7. 如何查看Servlet、JSP的版本（Tomcat V7.0.70）
		
    1. 简要说明:Tomcat6.0 所支持的是Servlet2.5,Tomcat 7.0 所支持的Servlet3.0,Servlet2.5 和Servlet3.0的差异较大,对于Servlet3.0 ...
    
		
    8. 
						
  8. myEclipse6.5与数据库（SQL Server2008）连接遇到的问题（自己总结的干货）<用SSH框架的时候，用servlet+javabean+jsp的时候>
		
    昨天因为学习SSH框架的搭建,时隔一年又重新遇到了myEclipse连接数据库的问题.废话不多说,上干货 (以下全部按照我遇到的问题的顺序,也就是没有顺序,就是任性) 请注意:这是在myEclipse ...
    
		
    9. 
						
  9. Servlet与JSP的关系
		
    Servlet与JSP的异同点: 相似点: 都可以生成动态网页 不同点: JSP擅长网页制作,生成页面直观,但不易追踪与排错 Servlet是纯Java,擅长处理流程与业务逻辑,缺点是页面不直观
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 日志的艺术（The art of logging）
			
    程序员学习每一门语言都是从打印“hello world”开始的,日志也是新手程序员学习.调试程序的一大利器.当项目上线之后,也会有各种各样的日志,比如记录用户的行为.服务器的状态.异常情况等等.打印日 ...
    
			
    2. 
						
  2. selenium 定位input输入框下的选择项
			
    今天的问题与下图中的类似 这是一个input型输入框,当我点击或输入值时,输入框下方会显示选择项帮助快速输入,代码如下: <input class="v-input some" ...
    
			
    3. 
						
  3. 电子笔记本的思考（1）（ver0.3）
			
    章节:电子笔记本的思考(1)   陶哲轩在<解题·成长·快乐——陶哲轩教你学数学>中着重强调,用纸笔来“缓存”思维对于数学解题的重要性: 用选定的符号表达你所知道的信息,并画一个示意图.把 ...
    
			
    4. 
						
  4. Nova控制节点集群
			
    #Nova控制节点集群 openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##Nova控制节点集群 # control ...
    
			
    5. 
						
  5. uva 471 - Magic Numbers
			
    题意:给出一个数n,问有多少组数满足是s1/ s2 =n,要求组成s1和s2的数字没有重复的. 分析:枚举,然后二进制判断各位数字是否相同. #include<iostream> #inc ...
    
			
    6. 
						
  6. SubTool 电影字幕下载程序
			
    项目地址 https://github.com/backtracker/SubTool 程序说明 作为一个高清电影爱好者,找字幕的痛苦懂的人自然会懂.我在网上找了很久,并没有找到好用的字幕下载程序,于 ...
    
			
    7. 
						
  7. 用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果
			
    echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...
    
			
    8. 
						
  8. 网页设计——3.html运行原理，基本标签
			
    一.运行原理 (1)本地运行 自己写的html网页用电脑上浏览器打开,就是实现了本地运行. 可以把浏览器当成一个软件,可以打开html文件. (2)远程访问 远程访问就是你用自己电脑在网上浏览一些网站 ...
    
			
    9. 
						
  9. 【Codeforces 788C】The Great Mixing
			
    http://codeforces.com/contest/788/problem/C 显然如果有两杯一样的酒,把它们当作同一杯就好了.所以k<=1e6毫无意义. 若选的x杯酒的浓度分别为a,b ...
    
			
    10. 
						
  10. 大数据：Hadoop入门
			
    大数据:Hadoop入门 一:什么是大数据 什么是大数据: (1.)大数据是指在一定时间内无法用常规软件对其内容进行抓取,管理和处理的数据集合,简而言之就是数据量非常大,大到无法用常规工具进行处理,如 ...
    
			
    11.