您的位置：首页 > Web前端 > JavaScript

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

2017-12-08 18:10 771 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航