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. Tarjan算法：求解图的割点与桥（割边）
			
    简介: 割边和割点的定义仅限于无向图中.我们可以通过定义以蛮力方式求解出无向图的所有割点和割边,但这样的求解方式效率低.Tarjan提出了一种快速求解的方式,通过一次DFS就求解出图中所有的割点和割边 ...
    
			
    2. 
						
  2. [C#]使用Label标签控件模拟窗体标题的移动
			
    本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 开发工具:VS2017 语言:C# DotNet版本:.Net FrameWork 4.0及以 ...
    
			
    3. 
						
  3. ML笔记：Where does the error come from?
			
    error来自哪? 来自于偏差Bias和方差Variance. 就如打靶时瞄准一个点f平均,打出的点f星分布在该点周围. 该点与实际靶心f帽的距离就是偏差Bias, 打出的点与该点的分布距离就是方差V ...
    
			
    4. 
						
  4. hdu 2586 How far away ？倍增LCA
			
    hdu 2586 How far away ?倍增LCA 题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2586 思路: 针对询问次数多的时候,采取倍增 ...
    
			
    5. 
						
  5. tp的秘密
			
    入口文件index.php define('APP_DEBUG',True); 改为false* memory_get_usage 获取本套系统目前内存* tp框架中ThinkPHP\Library\ ...
    
			
    6. 
						
  6. 深入理解java虚拟机_第三章（上）----->垃圾收集器与内存分配策略
			
    1.  前言 这一版块内容比较多,分为两篇文章来做笔记.本文讲述上半部分垃圾收集部分;下一篇文章写内存分配部分. 概述 对象已死吗? 引用技术算法 可达性分析算法 再谈引用 两次标记 回收方法区 2. ...
    
			
    7. 
						
  7. QT的radioButton组的使用
			
    在使用Qt的radioButton控件时,会产生一个疑问,如何让你选择的那个radio得到一个数据,进行判断,网上的一些资料有些不全,容易出错. 所以你得做件事,给每个radioButton进行赋初值 ...
    
			
    8. 
						
  8. 图片布局css
			
    对于平时项目开发中,经常要展示图片.什么水平居中显示,垂直居中显示,水平或垂直居中显示...我们的发际线就是这样往后退的. 接下来要讲的就是对于各种图片布局的css实现(这里针对的是img标签的不会使 ...
    
			
    9. 
						
  9. django.db.utils.OperationalError: 1050解决方案
			
    manage.py migrate时进行同步数据库时出现问题;django.db.utils.OperationalError: (1050, "Table '表名' already exi ...
    
			
    10. 
						
  10. Create-React-App创建antd-mobile开发环境(学习中的记录)
			
    (参考别人结合自己的整理得出,若有错误请大神指出) Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能. 详 ...
    
			
    11.