【JSP入门】只知道HTML却不知道JSP？

news2024/11/18 22:26:37

前言

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

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

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

目录

  • 前言
  • JSP概述
    • JSP特征
  • JSP的动态生成
  • JSP的执行过程
  • JSP的基本语法
    • JSP代码块
    • JSP声明构造块
    • JSP输出指令
    • 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一起联用的，我们下篇博客就一起来看看它们到底是怎么要一起联合使用的吧！

持续更新中…

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409389.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

html静态登录、注册页面

html静态登录、注册页面

登录 代码如下 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <style> body { background: url(https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.j…
阅读更多...
windows7安装node14版本及以上

windows7安装node14版本及以上

前言&#xff1a; gitee上拉了一个项目&#xff0c;npm install一直报错。一直没有解决&#xff0c;就去gitee上看前端启动教程。作者说要运行在node14或者16上。我就去官网下载node14的msi。这个是不支持windows7的。我就百度&#xff0c;他们说要下载压缩包。 我之前走了好…
阅读更多...
sourcemap文件泄露漏洞

sourcemap文件泄露漏洞

最近进行渗透测试时&#xff0c;时常遇到xray扫出sourcemap文件&#xff0c;每次扫到都要百度&#xff0c;因此做个笔记。 漏洞原理 在日常测试时&#xff0c;经常会遇到以js.map为后缀的文件 这是jQuery中的一个新功能&#xff0c;支持Source Map 非常多Webpack打包的站点都…
阅读更多...
Vue3: vue3 props接多个不同类型的参数，默认false

Vue3: vue3 props接多个不同类型的参数，默认false

哪天的问题来着...嘶...(挠头)... 之所以会卡在这里&#xff0c;是因为在我的经验及认知里&#xff0c;封装组件中props的使用&#xff0c;接参时从来都是一个参数对应一个值&#xff0c;尤其是在ts中&#xff0c;还更为严格地设定了参数类型&#xff0c;所以我的业务需求不知道…
阅读更多...
保姆级教程！如何在安卓手机上安装使用油猴脚本

保姆级教程！如何在安卓手机上安装使用油猴脚本

浏览器插件成千上万&#xff0c;但是大家都有一个共识&#xff0c;那就是油猴无插件能敌&#xff0c;原因就在于它一个插件就可以实现众多插件的功能。 首先需要明确一点的是&#xff0c;油猴插件本身是没有任何功能的&#xff0c;它需要依靠脚本来实现功能。至于脚本&#xf…
阅读更多...
红队web打点信息收集

红队web打点信息收集

目录 红蓝对抗 ICP备案查询—查询主域 主站域名一键查询 敏感信息收集 googlehack语法 目标邮箱号收集 子域名收集 被动信息收集 证书透明 fofa_viewer 在线子域名查询 第三方DNS服务 google语法 主动信息收集 oneforall Sylas—从burp历史记录中提取子域 Lay…
阅读更多...
【node.js从入门到精通】使用express创建web服务器，路由，进行中间件的创建链接路由及其他中间件

【node.js从入门到精通】使用express创建web服务器，路由，进行中间件的创建链接路由及其他中间件

目录 前言 初识express 使用express创建基本的web服务器 初识express路由 路由匹配概念 路由模块化 中间件 中间件和路由的区别 定义中间件函数 中间件作用 局部生效中间价 中间件分类 1.应用级别中间件 2.路由级别的中间件 3.错误级别中间件 4.内置中间件 5.自定义…
阅读更多...
带你深入理解js事件循环机制

带你深入理解js事件循环机制

同步任务和异步任务&#xff08;微任务和宏任务&#xff09; JavaScript是一门单线程语言 分为同步任务和异步任务 同步任务是指在主线程上排队执行的任务&#xff0c;只有前一个任务执行完毕&#xff0c;才能继续执行下一个任务。 异步任务指的是&#xff0c;不进入主线程…
阅读更多...
Pro1：图片的隐藏和显示

Pro1：图片的隐藏和显示

什么是JavaScript&#xff1f;实现目标实现代码实现效果实现方法&#x1f49b;作者主页&#xff1a;静Yu &#x1f9e1;简介&#xff1a;CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家&#xff0c;前端知识交流社区创建者 &#x1f49b;社区地址&#xff1a;前端知识交…
阅读更多...
axios 中如何取消请求_从不会使用到精通原理_番茄出品

axios 中如何取消请求_从不会使用到精通原理_番茄出品

start 最近频繁遇到一个问题&#xff0c;axios 是如何取消请求的&#xff1f;这篇文章将从新手小白的视角出发&#xff0c;从 axios 取消逻辑的基础使用&#xff0c;到原理分析&#xff0c;带你彻底了解并掌握 axios 中取消请求的“秘密”。编写时间&#xff1a;2023/02/24-23…
阅读更多...
520到了，教你做个JavaWeb表白墙小项目

520到了，教你做个JavaWeb表白墙小项目

目录 1.配置 Maven 项目 1.1 创建 Maven 项目 1.2 引入相关依赖 1.3 项目总结构 2. 约定前后端交互接口 3.服务端代码 3.1 创建Message类 3.2 创建工具类 3.3 添加信息类&#xff08;AddMessage&#xff09; 3.4 查询信息类&#xff08;MessageList&#xff09; 4. …
阅读更多...
vue3中的配置代理

vue3中的配置代理

如图&#xff0c;配置代理就是在客户端与服务器中充当中介的角色 目录 关于配置代理&#xff0c;首先我们的要知道为什么要配置代理&#xff0c;配置代理做了什么事情 一、跨域是什么 二、如何解决 三、配置代理案例 1. 下面是我自己在后端尝试解决跨域的例子 2.然后在vue中…
阅读更多...
【Vue项目实战】Vue3中动态修改样式和级联样式优先顺序详解

【Vue项目实战】Vue3中动态修改样式和级联样式优先顺序详解

Vue实战笔记目录前言一、ref修改样式1、通过 Vue 的 ref 组件获取 DOM 元素节点注&#xff1a;这边比较一下&#xff0c;和 DOM操作 document.getElementById(id) 这个方法有什么区别2、通过 ref 修改 DOM 元素节点样式二、通过v-bind对Html元素的样式(style)进行动态绑定三、v…
阅读更多...
端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

效果 源码 源码太多&#xff0c;放github上了点击 遇到的问题 连接mongodb数据库多个集合&#xff08;model文件&#xff09; mongodb与mysql数据库连接不同&#xff0c;sql在定义查询语句时可以连接不同的表mongodb需要在开始定义好连接要用到的表 module.exports {dbPr…
阅读更多...
echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

基本使用方法 echarts-wordcloud是基于echarts的一个词云库&#xff0c;是我常用的一个组件&#xff0c;业务上用的多一点&#xff0c;但是这个库在echarts的官网文档里面没有说明&#xff0c;git上的说明也很少&#xff0c;有些配置需要自己摸索&#xff0c;下面都是我的血泪…
阅读更多...
css动画效果

css动画效果

动画1&#xff08;沿着椭圆转动&#xff09; 其实是个2D转动&#xff0c;只不过咱们设置椭圆&#xff0c;然后加上scale缩放&#xff08;近大远小&#xff09;&#xff0c;看上去就是3D效果 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head…
阅读更多...
使用Node.js手撸一个建静态Web服务器，内部CV指南

使用Node.js手撸一个建静态Web服务器，内部CV指南

文章里有全部代码&#xff0c;也可以积分下载操作步骤如上图文章结束 话说这个键盘真漂亮~~ 文章目录使用Node.js手撸一个建静态Web服务器一、动静态服务器的概念1.1 静态Web服务器概念1.2 静态Web服务器的优点1.3 快速搭建的途径二、 手撸指南2.1 框架搭建2.2 CtrlC/V2.3 启动…
阅读更多...
Vue使用ElementUI对table的指定列进行合算

Vue使用ElementUI对table的指定列进行合算

前言 最近有一个想法&#xff0c;就是记录自己花销的时候&#xff0c;table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。 然后我就顺着elementui的table组件寻找相关的demo&#xff0c;还真发现了一个这样的demo。 对于这个demo&#xff0c;官方…
阅读更多...
css实现轮播图

css实现轮播图

轮播图&#xff1a;就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示图片 轮播图的实现代码&#xff1a; 1&#xff09;创建一个容器来进行轮播图的展示 这里的容器就是最外部的盒子 注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致&#xff0c…
阅读更多...
npm i 安装不上依赖怎么办

npm i 安装不上依赖怎么办

起因 在github上下载的项目需要使用npm i来安装依赖。但是安装过程需要很久&#xff0c;然后安装完了又发现安装过程报错了。导致项目跑不起来。原因是某些依赖没有成功的安装上去 解决办法&#xff08;依次试&#xff0c;每次试新的命令最好把上次安装node_modules删掉&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023