Servlet与Jsp的结合使用实现信息管理系统一

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java后端技术

WIN7 64位系统下,右下角的声音和电源图标不见的解决办法

  近日,电脑突然出现任务栏右下角的声音和电源图标消失不见的问题,重启仍旧没有修复,后来找到了解决办法

851
来自专栏阮一峰的网络日志

Git 使用规范流程

团队开发中,遵循一个合理、清晰的Git使用流程,是非常重要的。 否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护。 下面是Thoug...

2995
来自专栏沈唁志

WordPress最新版完全禁用JSON REST API输出站点信息

WordPress 从 4.4 版本开始新增的 JSON REST API 功能,通过这个 REST API 可以很轻松的获取网站的数据,可应用于其他网站、手机...

1403
来自专栏开源项目

码云正式支持 Pages 功能

Pages 功能一直以来呼声都非常之高,现在终于不负各位 OSCers 众望,码云 Pages 功能闪亮登场! 码云 Pages 是一个免费的静态网页托管服务...

43812
来自专栏技术/开源

开源API测试工具 Hitchhiker v0.8 - 自动化测试结果统计

Hitchhiker 是一款开源的支持多人协作的 Restful Api 测试工具,支持自动化测试, 数据对比,压力测试,支持脚本定制请求,可以轻松部署到本地,...

2755
来自专栏软件开发 -- 分享 互助 成长

Android深度探索(卷1)HAL与驱动开发 虚拟环境的安装

   最近在看《Android深度探索(卷1)HAL与驱动开发》安装随书带的虚拟环境浪费了很多时间,说是虚拟环境的安装倒不如说是虚拟环境的导入,其实没什么技术含...

781
来自专栏Java工程师日常干货

【SpringBoot专题】快速体验前言What is SpringBoot?Start SpringBoot!运行demo结束语

在Spring 4推出来之前,我们的编码是存在一些问题,比如:大量的xml配置存在项目中,配置相当繁琐;整合第三方框架非常麻烦;开发效率和部署效率不高等问题。正...

783

扩展CakePHP的CacheHelper以使用缓存引擎

CakePHP是一个MVC设计模式下的PHP框架,它使得您的生活更加简单并且让您的开发工作更上一层楼。尽管它被认为是一个相对缓慢的框架,(因为)它带有的大量缓存...

2339
来自专栏小狼的世界

在Mac下刻录光盘

在Mac下如何刻录光盘呢,在Spotlight中搜索了dvd、cd什么的,出来的程序基本上都不能刻录光盘,一时摸不着头脑。查了资料之后,才发现Mac的光盘刻录在...

832
来自专栏Android自学

Clover 3.0.365 Beta | Windows资源管理器实现多标签

1333

扫码关注云+社区

领取腾讯云代金券