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所做的界面如下,用到的知识点是
- ● 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此时简单的抽取框架就搭建好了
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- OpenGL ES for Android 绘制三角形
- Centos7 安装 Tomcat8 的正确姿势 并设置开机自启 实践笔记
- ASP.NET Core 使用 Google 验证码(reCAPTCHA v3)代替传统验证码
- Centos7 安装 Tomcat8 伪集群 的正确姿势 并设置开机自启 实践笔记
- 问题合集,持续更新
- ASP.NET Core Swagger接入使用IdentityServer4 的 WebApi
- 基于IdentityServer4的OIDC实现单点登录(SSO)原理简析
- OpenGL ES 变量、结构体、语句、函数、精度
- OpenGL ES for Android 绘制矩形和正方形
- OpenGL ES for Android 绘制立方体
- 服务化最佳实践
- OpenGL ES for Android 深度测试
- OpenGL ES for Android 绘制旋转的地球
- [Hei.Captcha] Asp.Net Core 跨平台图形验证码实现
- Asp.Net Core 3.1 获取不到Post、Put请求的内容 System.NotSupportedException Specified method is not supported