【JSP入门】只知道HTML却不知道JSP?_abcccccccccccccccode的博客-程序员信息网

技术标签: java  javaweb  jsp  servlet  【Java Web】整理总结  前端  

前言

今天我们继续来总结学习JSP相关知识,上一篇我们学习了Servlet的基础入门,如果你还对Servlet那么建议你先去看一下上篇博客再回来。

传送门:【Servlet入门】一篇文章让你从没听过到了熟于心

在之前我们已经学习了HTML,CSS,JS,XML,Servlet了,那么JSP又是什么呢?为什么要学这个JSP呢?

JSP概述

JSP(全称Java Server Pages)是由 Sun Microsystems 公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求,而动态生成 HTML、XML 或其他格式文档的Web网页的技术标准。

JSP特征

(1)JSP文件后缀名为 *.jsp
(2)JSP 技术是以 Java 语言作为脚本语言的,JSP 网页为整个服务器端的 Java 库单元提供了一个接口来服务于HTTP的应用程序。
(3) JSP是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。
(4)JSP是一种Java servlet,主要用于实现Java web应用程序的用户界面部分。网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP。
(5)JSP可以通过网页表单获取用户输入数据、访问数据库及其他数据源,然后动态地创建网页。
(6)JSP标签有多种功能,比如访问数据库、记录用户选择信息、访问JavaBeans组件等,还可以在不同的网页中传递控制信息和共享信息。

JSP运行要求:

可以正常运行的Tomcat
所有的JSP页面扩展名必须是.JSP
JSP页面应该放在Web应用程序目录下

JSP的动态生成

其实JSP最重要的一个特点就是可以动态的生成网页,接下来我们使用HTML与JSP生成同样的页面来比较一下吧。

接下来我们完成这样的一个页面:
在这里插入图片描述
正常做出来之后应该是这样的:
在这里插入图片描述
首先我们使用HTML来完成,很简单我们一行一行打出来即可,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table>
		<tr>
			<th>year</th>
			<th>salary</th>
		</tr>
		<tr>
			<td>0</td>
			<td>1500</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1650</td>
		</tr>
		<tr>
			<td>2</td>
			<td>1800</td>
		</tr>
		<tr>
			<td>3</td>
			<td>1950</td>
		</tr>
		<tr>
			<td>4</td>
			<td>2100</td>
		</tr>
		<tr>
			<td>5</td>
			<td>2250</td>
		</tr>
		<tr>
			<td>6</td>
			<td>2550</td>
		</tr>
		<tr>
			<td>7</td>
			<td>2850</td>
		</tr>
		<tr>
			<td>8</td>
			<td>3150</td>
		</tr>
		<tr>
			<td>9</td>
			<td>3450</td>
		</tr>
		<tr>
			<td>10</td>
			<td>3750</td>
		</tr>
		<tr>
			<td>11</td>
			<td>4125</td>
		</tr>
	</table>
</body>
</html>

效果如下:
在这里插入图片描述
效果是没问题的,只不过代码有些繁琐,而且答案都是我们自己算出来写上面的。而且我们只写出来了11年时候的工资,如果是50那么还得继续算和写下去,十分麻烦。

那么JSP是可以动态的生成的,我们使用JSP怎么完成呢?

其实很简单,我们按照案例中给出来规律来写即可自动生成,如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table>
		<tr>
			<th>year</th>
			<th>salary</th>
		</tr>
		<%
			for(int i=0;i<=50;i++){
				out.println("<tr>");
				out.println("<td>" + i + "</td>");
				int sal=0;
				if(i<=5){
					sal = 1500 + i*150;
				}else if(i>5&&i<=10){
					sal=1500 + 5*150 + 300*(i-5);
				}else if(i>10){
					sal = 1500+5*150+5*300+375*(i-10);
				}
				out.println("<td>" + sal + "</td>");
				out.println("</tr>");
			}
		
		%>
	</table>
</body>
</html>

我们直接生成了50年的,代码是不是看起来很简便啊,那我们看看输出的页面怎么样:
在这里插入图片描述
都是相同的效果。

通过比较大家应该就可以理解它们的差距了吧。

JSP的执行过程

我们刚才写的JSP中既有HTML语言,又有Java语言,最后又是Servlet执行了。那么JSP的执行过程到底是怎么样的一个过程呢?

当第一次访问jsp页面时,会向一个servlet容器(tomcat等)发出请求,servlet容器先要把jsp页面转化为servlet代码(.java),再编译成.class 文件再进行调用。当再次访问jsp页面时跳过翻译和编译的过程直接调用。

执行过程:

(1)客户端发出请求
(2)web容器将jsp转化为servlet代码(.java)
(3)web容器将转化为servlet代码编译(.class)
(4)web容器加载编译后的代码并执行
(5)将执行结果响应给客户端

图示:
在这里插入图片描述
示例:
在这里插入图片描述

JSP的基本语法

JSP语法特别简单,按照功能可分为:

(1)JSP代码块
(2)JSP声明构造块
(3)JSP输出指令
(4)JSP处理指令

接下来就分别介绍一下他们是干什么的吧

JSP代码块

JSP代码块用于在JSP中嵌入Java代码,其语法格式为:

<% Java代码 %>

示例:

<% System.out.println("hello,baibai!"); %>

JSP声明构造块

JSP声明构造块用于声明变量或方法,其语法格式为:

<%! 声明语句 %>

示例:

<%!public int add(int a,int b){
    
	return a+b;
}%>

JSP输出指令

JSP输出指令用于在JSP页面中显示Java代码执行结果,其语法格式为:

<%=Java代码%>

示例:

<%="<b>" + name +"</b>"%>

JSP处理指令

JSP处理指令用于提供JSP执行过程中的辅助信息,其语法格式为:

<%@ JSP指令 %>

示例:

<%@ page import = "java.until.*" %>

JSP常用处理指令

1.定义当前JSP页面全局设置

<%@ page %>

2.将其他JSP页面与当前JSP页面合并

<%@ include %>

3.引入JSP标签库

<%@ taglib %>

JSP中注释的区别

1.JSP注释,被注释语句不做任何处理

<%--注释--%>

2.用于注释<%%>Java代码,被注释代码不执行

//注释/*注释*/

3.HTML注释,被注释的语句不会被浏览器解释

<!--html-->

语法练习

找质数

题目:
在这里插入图片描述
代码:

<%@page import="java.util.*,java.text.*" contentType="text/html; charset=UTF-8" %>
<%!
	boolean isPrime(int num){
    
		boolean flag = true;
		for(int j=2;j<num;j++){
    
			if(num%j==0){
    
				flag=false;
				break;
			}
		}
		return flag;
	}

%>

<%
	List<Integer> primes = new ArrayList();
	for(int i=2;i<1000;i++){
    
		if(isPrime(i)){
    
			//out.println("<h1> " + i + "</h1>");
			primes.add(i);
		}
	}
%>

<%
	for(int p:primes){
    
		//out.println("<h1>" + p +"是质数</h1>");
%>
	<h1 style="color:red;"><%=p %>是质数</h1>
<%
	}
%>

输出:
在这里插入图片描述

JSP页面复用

在javaweb开发过程中,要写许多个jsp页面,而这些页面又有许多的相似之处,比如页头、页脚和导航栏等等这些相同又重复的部分如果每个jsp页面都写的话会造成代码的冗余且不易管理维护,这时可以通过页面复用的方式来提高效率。

那么我们又该怎么样来实现页面的复用呢?

将每个页面中相同且重复的代码封装在一个JSP页面中,再通过以下方式引用即可:

<%@ include file=xxx.jsp">

示例:

比如一个某新闻页面为:
在这里插入图片描述

每一次我们只改变的是新闻的内容,即上图中红框内的东西,那么页头页脚都是复用的,我们就可以把它们分别封装为JSP页面,在使用的时候调用即可。我们实现一下:

对于页头:

<%@page contentType="text/html; charset=utf-8"%>
要闻|推荐|财经|娱乐

对于页脚:

<%@page contentType="text/html; charset=utf-8"%>
<hr/>
Copyright 1999-3274

对于每一个要输出的新闻页面:

<%@page contentType="text/html; charset=utf-8" %>
<%@include file="include/header.jsp" %>
<%
	out.println("<h1>新闻标题</h1>");
	out.println("<h1>正文</h1>");
%>
<%@include file="include/footer.jsp" %>

在这里插入图片描述

输出为:
在这里插入图片描述
成功了,页面复用我们在很多场景都能遇到,还是比较重要的,也比较简单。

结语

本篇JSP入门的内容到此为止了,但是JSP的内容不止于此,JSP是与Servlet一起联用的,我们下篇博客就一起来看看它们到底是怎么要一起联合使用的吧!

持续更新中…

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/apple_51673523/article/details/122889395

智能推荐

基于 React hooks + Typescript + Cesium 实现日照分析并封装对应 SunShineAnalysis 类_jiegiser#的博客-程序员信息网_cesium 日照分析

文章目录效果截图功能介绍实现思路实现步骤封装 SunShineAnalysis 类使用其他设置效果截图先上截图:功能介绍基于 React hooks + Typescript + Cesium 实现结合 echart 进行图表展示(两种方式)并封装对应组件主要用于项目中一些坐标点的信息展示等。图层管理(√)dom 点扩散(√)轨迹回放(√)测量(√)坐标拾取(√)加载模型数据,拾取三维模型(√)geoserver 结合实现属性查询(√)geoserver 结合实现空间查询(√

用VS2015 Debug MySQL5.7源码_80152的博客-程序员信息网

一、软件准备: Cmake : https://cmake.org/download/ActivePerl: 百度ActivePerl 安装即可boost库: https://sourceforge.net/projects/boost/files/boost-binaries/1.59.0/ 下载exe文件安装到指定目录MySQL 源码: https://dev.mysql.com/do

Echarts 自定义颜色_Mr-K的博客-程序员信息网_echarts自定义颜色

series: [ { name:'邮件营销', type:'line', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210], itemStyle:{ normal:{ ...

关于响应式编程_Mislead的博客-程序员信息网

近来响应式编程成为一种流行的模式,涌现出很多支持各种编程语言的库和框架和相关的博文文章。像Facebook,SoundCloud,Microsoft,Netflix等大公司也开始支持和使用这种模式。所以我们这些程序员需要弄清楚关于响应式编程的一些问题。为什么人们会对于响应式编程如此狂热?什么事响应式编程?使用它会对于我们的项目有哪些帮助?我们应该去学习和使用它吗?同时,Java作为一门支持多线程、高

URDF语法+练习案例(与Rviz的集成使用)+URDF工具_嘻·嘻的博客-程序员信息网

目录URDF语法练习案例URDF工具URDF语法1.URDF是 Unified Robot Description Format 的首字母缩写,直译为统一(标准化)机器人描述格式,可以以一种 XML 的方式描述机器人的部分结构,比如底盘、摄像头、激光雷达、机械臂以及不同关节的自由度.....,该文件可以被 C++ 内置的解释器转换成可视化的机器人模型,是 ROS 中实现机器人仿真的重要组件。2.URDF 文件是一个标准的 XML 文件,在 ROS 中预定义了一系列的标签用于描述机器人

C#详解值类型和引用类型区别_HawkJony的博客-程序员信息网_值类型和引用类型区别

首先,什么是值类型,什么是引用类型?在C#中值类型的变量直接存储数据,而引用类型的变量持有的是数据的引用,数据存储在数据堆中。值类型(value type):byte,short,int,long,float,double,decimal,char,bool 和 struct 统称为值类型。值类型变量声明后,不管是否已经赋值,编译器为其分配内存。        引用类型

随便推点

Java vs. Kotlin:应该使用Kotlin进行Android开发吗?_曹纪乾的博客-程序员信息网

当您考虑Android开发时,有可能立即出现一种编程语言:Java。尽管大多数Android应用程序都是用Java编写的,但在Android开发方面,Java并不是您唯一的选择。您可以使用任何可以在Java虚拟机(JVM)上编译和运行的语言编写Android应用程序,而最终用户也不会更明智。而一个真正引起Android社区关注的JVM兼容编程语言是Kotlin,它是JetBra

Python3.7安装PyQt5的方法_weixin_34144848的博客-程序员信息网

一、系统环境 操作系统:Win7 64位 Python Version:3.7二、安装参考 方法1:pip install PyQt5 方法2:下载whl安装包安装 a.下载网址:https://pypi.python.org/pypi/PyQt5 b.点选Downlo...

Sqlplus插入数据出现中文乱码的解决方案_u010475284的博客-程序员信息网

在Sqlplus中直接插入数据或执行sql脚本文件,有时会出现中文乱码的问题,出现这种情况一般是因为Oracle客户端和服务端的字符集不一致导致的,也就是NLS_LANG环境变量和Oracle服务器端的字符集不同。出现这种情况,可以通过修改服务端的字符集或修改NLS_LANG环境变量的值来解决,修改服务端的配置比较复杂,我一般通过设置环境变量的方法。1、首先查看Oracle服务端的字符集

Ros学习笔记(六)——各部分代码实现_风声向寂的博客-程序员信息网_ros代码

Ros学习笔记(六):——Publisher代码实现​    基于之前几篇博客的基础,我们这次来讲解如何实现各类型的代码,这里用C++和python演示。文章目录Ros学习笔记(六):——Publisher代码实现1.publisher的编程实现(C++部分)(python部分):2.Subscriber实现(c++部分):(Python实现):3.话题消息的定义与使用4.客户端Client的编程实现(C++实现);(python实现):1.publisher的编程实现(C++部分)​    首

虚拟摄像头之九: IMX8Q 的 camera.imx8.hal 框架详解_老理说的好的博客-程序员信息网_android 虚拟摄像头

android 系统的 camera hal 框架不同厂家设计思路、不尽相同;本篇梳理 NXP android8 的 camera hal 设计框架。笔者再次特别说明:在《虚拟摄像头之三: 重构android8.1 的 v4l2_camera_HAL 支持虚拟摄像头》文章中声称、虚拟摄像头 HAL 方案计划采用Android8 中的 v4l2_camera_HAL 来重构实现;现在更改为 NXP 的 CameraHAL 框架来实现,因此采用此篇梳理学习笔记内容。

visual stdio 2019 安装opencv及报错处理_CV-杨帆的博客-程序员信息网

VS2019配置opencv详细图文教程和测试代码这里面有一些是错的,不适合vs2019第一个错误:由于找不到opencv_world440d.dll,无法继续执行代码。解决方案第二个错误OpenCV中出现“Microsoft C++ 异常: cv::Exception,位于内存位置 0x0000005C8ECFFA80 处。”的异常:解决方案(不是主文,在评论里)使用vs2019 新手按照 網路安裝流程 通常會寫到 屬性-&gt;連結器-&gt;相依性 opencv_world410d.li

推荐文章

热门文章

相关标签