专栏首页Android机器圈Servlet与Jsp的结合使用实现信息管理系统一

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 条评论
登录 后参与评论

相关文章

  • Android数据绑定技术二,企业级开发

    PS:上一篇文章写了Databinding的简单使用,写了一个绑定textview的示例,和绑定的一些用法,估计有的人会说,之前的写的好好的,为什么要数据绑定这...

    cMusketeer
  • 排序算法

    上面结果可以说明,虽然也是比较了和冒泡一样多的次数,但是交换缺少了很多。所以时间为N²/2

    cMusketeer
  • Android数据绑定技术一,企业级开发

    PS:数据绑定,顾名思义是数据与一些控件或者用户账号等绑定,这样用的好处是便于管理。代码清晰,量少。 首先要了解什么是数据绑定? 为什么要用数据绑定? 怎么用数...

    cMusketeer
  • springboot 单元测试

    请先阅读SpringBoot 使用MockMvc进行Controller的测试,这篇文章已经讲的很清楚了。概括而言,做法如下:

    平凡的学生族
  • 深入理解JSP(一)

    在Java Web的开发过程中,可能有过这样的疑问,Tomcat是一个Servlet运行环境(容器),所有经过Tomcat的请求都是由一个Servlet来处理的...

    算法与编程之美
  • 组件中 watch props 根据 v-if 动态判断并挂载 DOM 的问题

    问题复现:父组件中通过名为 source 的 prop 向子组件 Chart 传入数据

    JS菌
  • C++ 错误C2374 错误C2084 错误C2568 头文件 重定义 多次初始化 已有主体

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    acoolgiser
  • 小程序又曝新入口!打开微信聊天页面就能看到

    知晓程序(微信号 zxcx0101)发现,之前我们提前爆料的「群小程序」功能,现在以「聊天小程序」的身份,出现在了 iOS 版微信中。

    知晓君
  • 利用 Jquery + css 自制无限极下拉分类

    网上相关例子基本都是 ztree,然后个人去看了看官网,看了半天没找到合适又简单的,ztree,由于界面不适合项目里面的,要是修改他的样式我还可能出现更多的错误...

    世玉
  • 我的第四个网页制作:列表标签

    1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 ...

    Angel_Kitty

扫码关注云+社区

领取腾讯云代金券