JSP、HTML和Tomcat

news2025/7/26 20:03:25

9x9上三角乘法表

 乘法表的实现

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <title>9×9 上三角乘法表</title>
  <style>
    body {
      font-family: monospace;
      padding: 20px;
    }
    .row {
      white-space: nowrap;
    }
    .cell {
      display: inline-block;
      width: 80px;
    }
  </style>
</head>
<body>
<h2>9×9 上三角乘法表</h2>
<%
  for (int i = 1; i <= 9; i++) {
%>
<div class="row">
  <% for (int j = 1; j < i; j++) { %>
  <span class="cell">&nbsp;</span>
  <% }
    for (int j = i; j <= 9; j++) { %>
  <span class="cell"><%= i %>×<%= j %>=<%= i * j %></span>
  <% } %>
</div>
<%
  }
%>
</body>
</html>

分清楚哪些是可以自定义名字的,哪些是规定的语法

<div class="lalala-row">
    <% for (int j = 1; j < i; j++) { %>
        <span class="lalala-cell">&nbsp;</span>
    <% }
       for (int j = i; j <= 9; j++) { %>
        <span class="lalala-cell"><%= i %>×<%= j %>=<%= i * j %></span>
    <% } %>
</div>

这里进行循环lalala是自己定义的名字

但head里的style里的设置也因此要修改符合了

<style>
    body {
        font-family: monospace;
        padding: 20px;
    }
    .lalala-row {
        white-space: nowrap;
    }
    .lalala-cell {
        display: inline-block;
        width: 80px;
    }
</style>

body { font-family: monospace; padding: 20px; }

属性含义
font-family: monospace;设置字体为等宽字体,确保每个字符宽度一样(比如数字、乘号、等号对齐)
padding: 20px;给页面四周加内边距,让内容不贴边,视觉更舒服

.row { white-space: nowrap; }

这个是用在:

<div class="row"> ... </div>

属性含义
white-space: nowrap;告诉浏览器:不要自动换行,所有乘法项都显示在一行内

🚫 否则每个 <span> 到边界时会自动换行,排版会乱

.cell { display: inline-block; width: 80px; }

这是每个乘法项的样式:

属性含义
display: inline-block;<span> 像文字一样横向排列,但也能设置宽度(不像普通的 inline 元素那样不能设置宽度)
width: 80px;给每个乘法项 固定宽度,这样不论 1×1=1 还是 9×9=81,都在统一宽度块内显示,整齐对齐

&nbsp; 是 HTML 中的不换行空格字符

  • 全称是:non-breaking space
  • 表示一个真正可见的空格不会被浏览器忽略

<body>
<h2>9×9 上三角乘法表</h2>
<%
  for (int i = 1; i <= 9; i++) {
%>
<div class="row">
  <% for (int j = 1; j < i; j++) { %>
  <spanforthecellWith class="cell">&nbsp;</spanforthecellWith>
  <% }
    for (int j = i; j <= 9; j++) { %>
  <spanWwwhateverIcanName class="cell"><%= i %>×<%= j %>=<%= i * j %></spanWwwhateverIcanName>
  <% } %>
</div>
<%
  }
%>
</body>

class前可以任意命名(但一般不要这样做,还是不太允许的)

  • 浏览器看到 spanWwwhateverIcanName,虽然它不是标准 HTML 标签,但因为它是内联标签(inline element),不会影响整体布局
  • 它仍然像 <span> 一样显示,所以不会影响页面的结构

浏览器不认识 div__lalala 这个标签,所以它会:

  • 直接忽略 div__lalala,导致其内部的元素可能失去结构化
  • 或者以未知的块级元素解析,导致 CSS(如 white-space: nowrap失效
  • 浏览器对内联元素的解析更宽松(即使是未知标签,也不会影响排版)。
  • 浏览器对块级元素的解析更严格,未知块级标签会影响 CSS 结构,导致排版错误。

标签包含

<%@page contentType="text/html;charset=gb2312"%>
<html>
<head>
  <title>include demo</title>
</head>
<body>
  <%@include file="incl.jsp"%>
  <%@include file="incl.txt"%> 
  <%@include file="incl.inc"%>   
</body>
</html>

<%@page contentType="text/html;charset=gb2312"%>

  • 设置页面的内容类型为 HTML

  • 设置字符编码为 GB2312(早期用于中文页面的编码)

  • 这会影响 HTTP 响应头和 HTML <meta charset> 默认值

<%@include file="incl.jsp"%>
<%@include file="incl.txt"%> 
<%@include file="incl.inc"%>   

用的是 JSP 的“静态包含指令”(directive include)

含义:在 JSP 被编译成 Java 代码之前,直接把指定文件的内容“粘贴”到这行位置上。

JSP 是一个“预处理器”

  • incl.jsp → 一个包含 <h1>欢迎访问</h1> 的 HTML

  • incl.txt → 一个纯文本,比如 这是文本部分

  • incl.inc → 一个 HTML 片段,比如 <footer>版权所有</footer>

只要你把这三个文件放在和 includeDemo01.jsp 同一目录下,就可以了

只要它们是合法的文本片段(HTML 或 JSP 语法中可插入的内容),就能被静态包含进去。

  • 不一定非是 JSP 文件

  • 只要在语法上能“插得进去”,都没问题

<%-- 使用此语句处理显示中的乱码 --%>
<%@page contentType="text/html;charset=gb2312"%>
<html>
<head>
	<title>include demo</title>
</head>
<body>
<%--
 <jsp:include page="incl.jsp">
	<jsp:param name="ref1" value="ZTE"/>
	<jsp:param name="ref2" value="tom"/>
 </jsp:include>  
--%>


<jsp:include page="incl.txt">
	<jsp:param name="ref1" value="ZTE"/>
	<jsp:param name="ref2" value="ls"/>
</jsp:include>


 <%--<jsp:include page="incl.inc"/> --%>
</body>
</html>
  • 告诉 JSP 引擎输出 HTML 页面时使用 GB2312 编码(中文)

  • 防止中文乱码问题

  • 这对输出的参数(如“ZTE”、“tom”)中含中文时尤其关键

<html>
<head>
  <title>include demo</title>
</head>
<body>

标准 HTML 页面结构,主体都在 <body>

<%--
 <jsp:include page="incl.jsp">
	<jsp:param name="ref1" value="ZTE"/>
	<jsp:param name="ref2" value="tom"/>
 </jsp:include>  
--%>

它是标签式动态包含,特点如下:

特性含义
<jsp:include ... />运行时包含(和 @include 不同)
<jsp:param />向被包含的 JSP 页面传递参数(类似 URL 参数)
被包含页面incl.jsp:可以使用 request.getParameter("ref1") 获取值

如果取消注释,运行时会:

  • 加载 incl.jsp

  • 向其中传递两个参数:ref1=ZTEref2=tom

<jsp:include page="incl.txt">
	<jsp:param name="ref1" value="ZTE"/>
	<jsp:param name="ref2" value="ls"/>
</jsp:include>

包含的是 .txt 文件,Tomcat 默认不会把 .txt 当作 JSP 来解析,而是:

把它当成纯文本文件 → 直接输出内容,不处理其中的 JSP 语法(<%= ... %>)

这就是你看到它原样打印出来的原因。

正常获取参数的两种前提方式:

✅ 方式 1:通过 HTML 表单提交(推荐)

你需要一个表单页面(比如 demo01.html),向 demo02.jsp 发起 POST 请求并带上 uname 参数:

<!-- demo01.html -->
<form action="demo02.jsp" method="post">
  <label>请输入姓名:</label>
  <input type="text" name="uname">
  <input type="submit" value="提交">
</form>

需要新建一个 HTML 文件,比如命名为 demo01.html,内容如下: 

放在和 demo02.jsp 同一个 Web 应用项目目录下(比如你的 webapp/WebContent/src/main/webapp/ 中)

方式 2:通过 GET 参数访问

你也可以直接在地址栏里输入 URL,带上 uname 参数:

http://localhost:8080/你的项目/demo02.jsp?uname=张三

所谓“静态编码 vs 动态编码”指的就是:

编码处理方式指的是 后端 JSP 页面中对中文参数的“读取方式”,与 HTML 是否是静态页面无直接关系

类别实现方式特点
静态编码(手动转码)获取参数后再用 getBytes() + new String(...) 手动转换繁琐但对控制力高,适用于不支持动态设置编码的环境
动态编码(统一设置)request.setCharacterEncoding("编码") 预先设定推荐方式,简洁稳定

理解并对比:

客户端跳转sendRedirect
服务端跳转forward<jsp:forward>

各自的执行顺序、显示效果、地址栏变化、数据是否能传递

<%@page contentType="text/html;charset=gb2312"%>
<h1>欢迎光临:responseDemo03.jsp</h1>
<!-- http://127.0.0.1:8080/test/base/05/responseDemo03.jsp?upass=123 -->
<%
	 System.out.println("** 跳转之前...") ;
%>
<%
	// 进行跳转
   response.sendRedirect("responseDemo04.jsp?uname=ZTE");

  //response.setHeader("refresh","0;URL=responseDemo04.jsp?uname=ZTE") ;
%>
	    
 <%--<jsp:forward page="responseDemo04.jsp"/>--%>
	   
	 
<%          //request.getRequestDispatcher("responseDemo04.jsp").forward(request, response);
 
 System.out.println("** 跳转之后...");
 
%>
 

<%@page contentType="text/html;charset=gb2312"%>

  • 设置当前页面的内容类型为 HTML,字符编码是 gb2312(简体中文)

  • 作用:防止中文乱码

<h1>欢迎光临:responseDemo03.jsp</h1>

  • 页面显示的静态内容,表示这是 03.jsp 页面

  • 只有在没有跳转成功时才可能看到这个内容(实际上会被跳走)

<% ... %>JSP 的脚本标记(scriptlet),它的作用是:

✳️ 把其中的 Java 代码嵌入到 HTML 页面中,并由服务器(Tomcat)在运行时翻译成 Java Servlet 来执行

JSP(Java Server Pages)是 服务器端动态网页技术,它的本质是:

✳️ 一种“模板语言”,页面中可以写 HTML + Java 代码

它不是浏览器能直接识别的,而是被 Tomcat 服务器在第一次访问时

JSP → 翻译成 Java Servlet → 编译为 class → 运行 → 返回 HTML

假设你访问一个 JSP 页面:

http://localhost:8080/demo/responseDemo03.jsp

Tomcat 后台执行的完整流程如下

  1. 解析 JSP 文件

    • Tomcat 找到 .jsp 文件

    • 把页面中的 HTML 保留,把 <% %> 中的 Java 代码提取出来

  2. 翻译成 Java Servlet 文件

    • 每个 JSP 都会被转成一个 Servlet 类(比如叫 responseDemo03_jsp.java

  3. 编译成 .class 字节码

    • Servlet 类被编译成 .class 文件,交给 JVM 执行

  4. 运行 Servlet,输出 HTML

    • Servlet 执行时,把 HTML 输出给浏览器

    • <% System.out.println(...) %> 会打印到服务器控制台(Tomcat 终端)

    • <%= ... %> 的内容会输出到浏览器页面

你访问的 responseDemo03.jsp 页面能正常运行

里面的跳转目标 responseDemo04.jsp 根本不存在或路径不对

跳转后地址栏变成了 responseDemo04.jsp?uname=ZTE,并成功显示了页面内容

客户端跳转(Client-side Redirect)成功

测试服务端跳转(Server-side Forward)

客户端跳转的时机非常早,JSP 在遇到这句代码时:

response.sendRedirect("responseDemo04.jsp?uname=ZTE");
会立刻:

终止后续 JSP 执行(包括页面还没输出的 HTML)

把响应状态设置成 302(重定向)

让浏览器主动发起新请求访问目标地址

如果你想要先显示一部分页面再跳转,那就不是 sendRedirect 的用途,而需要用 JavaScript 来实现:

<h1>欢迎光临</h1>
<script>
    setTimeout(() => {
        window.location.href = "responseDemo04.jsp?uname=ZTE";
    }, 2000); // 2秒后跳转
</script>
 

response.setHeader("refresh",...) 也是客户端跳转 ,类似 sendRedirect,通过 HTTP 响应头控制刷新跳转

<%--<jsp:forward page="responseDemo04.jsp"/>--%>

它是另一种服务端跳转写法,和 request.getRequestDispatcher(...).forward(...) 是等价的,写法更简洁

http://localhost:8080/Web_exploded/responseDemo03.jsp

Cookie 的创建与客户端行为机制

<!--http://127.0.0.1:8080/test/base/05/cookieDemo01.jsp?name=tom&password=123-->
<%
	String uname=request.getParameter("name");
	String upass=request.getParameter("password");
	Cookie c1 =null;
	Cookie c2 =null;
	if("tom".equals(uname)&&"123".equals(upass))
	{
		c1 = new Cookie("name",uname) ;
		c2 = new Cookie("password",upass) ;

		// 保存时间为60秒
		//c1.setMaxAge(60) ;
		//c2.setMaxAge(60) ;
	}

	// 通过response对象将Cookie设置到客户端
	response.addCookie(c1) ;
	response.addCookie(c2) ;
%>

<!-- 访问示例:http://127.0.0.1:8080/test/base/05/cookieDemo01.jsp?name=tom&password=123 -->
你需要用浏览器访问这个地址,带上参数 name=tom&password=123

默认浏览器关闭时 Cookie 消失;设置了 setMaxAge() 后可以保留固定时间

系统 Cookie:浏览器自动携带,例如 JSESSIONID(Session ID)

用户 Cookie:程序员手动通过 new Cookie(...) 创建的,比如你这里的 name 和 password

使用 Session 实现用户身份验证

<%@page contentType="text/html;charset=gb2312"%>
<form action="login.jsp" method="post">
	用户名:<input type="text" name="uname"><br>
	密码:<input type="text" name="upass"><br>
	<input type="submit" value="登陆">
</form>

<%
	// 判断是否有请求内容
	// 在自提交的页面中,必须对程序第一次运行做出处理
        if(request.getParameter("uname")!=null&&request.getParameter("upass")!=null)
	      {
		// 第一次的时候,并不能取得请求的参数
		 String name = request.getParameter("uname") ;
		String password = request.getParameter("upass") ;
		  System.out.println("name:"+name) ;
		  System.out.println("password:"+password) ;
		 if(name.equals("admin")&&password.equals("admin"))
		 {
			// 表示登陆成功
			// 通过flag属性判断用户是否已经登陆
			session.setAttribute("flag","ok") ;
			// 跳转到sucess.jsp
			//response.sendRedirect("sucess.jsp") ;
			%>
		<jsp:forward page="sucess.jsp"/>
		<%
		}
		else
		{
			 
	      response.sendRedirect("error.jsp");
	 
		  }
	   } 
%>

<form action="login.jsp" method="post">
这句话的意思是:

当你在输入框里填完用户名和密码

然后点击“登录”按钮

浏览器会自动把你填写的内容通过 HTTP 的 POST 方法发回给 login.jsp 页面本身

这个提交过程是 浏览器自己完成的,你无需手动在地址栏输入任何参数

response.setHeader("refresh", "2;URL=login.jsp");
其中的数字 2 表示:

✅ 在页面显示当前内容 2 秒后,自动跳转到 login.jsp 页面。

Refresh: 秒数;URL=跳转地址
所以这句的意思就是:

当前页面停留 2 秒

然后自动跳转回 login.jsp

你在浏览器看到的是:“登录失败”显示 2 秒 → 页面自动返回登录界面

在 JSP 或 Web 开发中,URL=login.jsp 这样的写法是相对路径

它并不一定非要写完整的 http://localhost:8080/xxx/login.jsp

session.setAttribute("flag", "ok");
它的作用是:
在服务器端为当前访问用户的 Session 中,保存一条数据:键是 "flag",值是 "ok"。

这就像是贴了一个标签,告诉服务器:“这个用户已经登录了”。

<jsp:forward page="sucess.jsp"/>
确实,这句是页面跳转语句,但跳转本身并不判断用户是否登录,它只是跳页面。

而:

session.setAttribute() 是用来标记身份的,跳转之后别的页面可以判断是否有这个标记。

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

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

相关文章

(1)pytest简介和环境准备

1. pytest简介 pytest是python的一种单元测试框架&#xff0c;与python自带的unittest测试框架类似&#xff0c;但是比unittest框架使用起来更简洁&#xff0c;效率更高。根据pytest的官方网站介绍&#xff0c;它具有如下特点&#xff1a; 非常容易上手&#xff0c;入门简单&a…

构建高性能风控指标系统

一、引言 在金融风控领域&#xff0c;指标是风险识别的核心依据。风控平台核心系统之一--规则引擎的运行依赖规则、变量和指标&#xff0c;一个高性能的指标系统非常重要&#xff0c;本文将深入探讨风控平台指标系统的全链路技术实现&#xff0c;涵盖从指标配置到查询优化的完…

晨控CK-UR12与西门子PLC配置Modbus TCP通讯连接操作手册

晨控CK-UR12与西门子PLC配置Modbus TCP通讯连接操作手册 晨控CK-UR12系列作为晨控智能工业级别RFID读写器,支持大部分工业协议如RS232、RS485、以太网。支持工业协议Modbus RTU、Modbus TCP、Profinet、EtherNet/lP、EtherCat以及自由协议TCP/IP等。 本期主题&#xff1a;围绕…

实验一:PyTorch基本操作实验

import torch # PyTorch中初始化矩阵常见有以下几种方法 # 1. 直接使用固定值初始化 # M torch.tensor([[1.0, 2.0, 3.0]]) # 1x3矩阵 # 2. 随机初始化 # M torch.rand(1, 3) # 1x3矩阵&#xff0c;元素在0-1之间均匀分布 # M torch.randn(1, 3) # 1x3矩阵&#xff0c;元…

可视化大屏通用模板Axure原型设计案例

本文将介绍一款基于Axure设计的可视化大屏通用模板&#xff0c;适用于城市、网络安全、园区、交通、社区、工业、医疗、能源等多个领域。 模板概述 这款Axure可视化大屏通用模板集成了多种数据展示模块和组件&#xff0c;旨在为用户提供一个灵活、可定制的数据展示平台。无论…

历年山东大学计算机保研上机真题

历年山东大学计算机保研上机真题 2025山东大学计算机保研上机真题 2024山东大学计算机保研上机真题 2023山东大学计算机保研上机真题 在线测评链接&#xff1a;https://pgcode.cn/school 从1到100找质数 题目描述 从 1 1 1 到 100 100 100 中找出所有的质数。 输入格式 …

Java处理动态的属性:字段不固定、需要动态扩展的 JSON 数据结构

文章目录 引言I `JSONObject` 接收和返回JSONObject 接收和返回数据存储II 签名测试接口dto的定义签名计算III JsonAnySetter 和JsonAnyGetter 注解@JsonAnySetter 的用法@JsonAnyGetter 的用法综合示例引言 应用场景: 签名测试接口、表单配置项、参数列表、插件信息等。技术实…

MAC电脑怎么通过触摸屏打开右键

在Mac电脑上&#xff0c;通过触摸屏打开右键菜单的方法如下&#xff1a; 法1:双指轻点&#xff1a;在触控板上同时用两根手指轻点&#xff0c;即可触发右键菜单。这是Mac上常用的右键操作方法。 法2:自定义触控板角落&#xff1a;可以设置触控板的右下角或左下角作为右键区域…

用 Whisper 打破沉默:AI 语音技术如何重塑无障碍沟通方式?

网罗开发 &#xff08;小红书、快手、视频号同名&#xff09; 大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等…

【东枫科技】KrakenSDR 天线阵列设置

标准测向需要五根相同的全向天线。您可以折衷使用更少的天线&#xff0c;但为了获得最佳性能&#xff0c;我们建议使用全部五根天线。这些天线通常是磁铁安装的鞭状天线&#xff0c;或偶极子天线。我们建议始终使用均匀圆形阵列 (UCA) 天线&#xff0c;因为它可以确定来自各个方…

云计算数据治理

知识星球&#xff1a;数据书局。打算通过知识星球将这些年积累的知识、经验分享出来&#xff0c;让各位在数据治理、数据分析的路上少走弯路&#xff0c;另外星球也方便动态更新最近的资料&#xff0c;提供各位一起讨论数据的小圈子 1.摘要 云计算可以推动创新和各行业应用的…

【Android】如何抓取 Android 设备的 UDP/TCP 数据包?

目录 前言理解抓包tcpdump 实时抓包Wireshark 解包抓包后的一些思考 前言 在真正接触 UDP/TCP 抓包之前&#xff0c;我一直以为这是一项高深莫测的技术。可当我们真正了解之后才发现&#xff0c;其实并没有那么复杂——不过如此。 所谓的大佬&#xff0c;往往只是掌握了你尚未…

Scratch节日 | 六一儿童节射击游戏

六一儿童节快乐&#xff01;这款超有趣的 六一儿童节射击游戏&#xff0c;让你变身小猫弓箭手&#xff0c;守护节日的快乐时光&#xff01; &#x1f3ae; 游戏玩法 上下方向键&#xff1a;控制小猫的位置&#xff0c;自由移动&#xff0c;瞄准目标&#xff01; 空格键&#…

GPU层次结构(Nvidia和Apple M芯片,从硬件到pytorch)

这里写目录标题 0、驱动pytorch环境安装验证1.window环境2.Mac Apple M芯片环境 1、Nvidia显卡驱动、CUDA、cuDNN关系汇总1**1. Nvidia显卡驱动&#xff08;Graphics Driver&#xff09;****2. CUDA&#xff08;Compute Unified Device Architecture&#xff09;****3. cuDNN&a…

一次借助ChatGPT抵御恶意攻击的经历,为个人服务器添加自动防御系统Fail2ban

title: 一次借助ChatGPT抵御恶意攻击的经历&#xff0c;为个人服务器添加自动防御系统Fail2ban tags: 个人成长 categories:杂谈 我有一台个人服务器&#xff0c;托管着自己的WordPress网站&#xff0c;也放了RustDesk这种私有化的远程桌面工具&#xff0c;最近我发现RustDesk…

(九)深度学习---自然语言处理基础

分类问题回归问题聚类问题各种复杂问题决策树√线性回归√K-means√神经网络√逻辑回归√岭回归密度聚类深度学习√集成学习√Lasso回归谱聚类条件随机场贝叶斯层次聚类隐马尔可夫模型支持向量机高斯混合聚类LDA主题模型 一.文本数据的表示方法 二.神经网络文本情感分析案例 三…

【Java Web】速通Tomcat

参考笔记:JavaWeb 速通Tomcat_tomcat部署java项目-CSDN博客 目录 一、Tomcat服务 1. 下载和安装 2. 启动Tomcat服务 3. 启动Tomcat服务的注意事项 4. 关闭Tomcat服务 二、Tomcat的目录结构 1. bin 🌟 2. conf 🌟 3. lib 4. logs 5. temp 6. webapps 7. work 三、Web项目…

Docker快速部署数据同步工具DataX-Web

笔者最近有需求需要进行数据同步&#xff0c;目前确认DataX-Web适合快速搭建使用&#xff0c;满足基本需求。以此记录搭建Datax-Web过程和解决的坑。 一、启动MySQL容器 &#xff08;1&#xff09;首先&#xff0c;我们运行一个支撑DataX-Web运行的MySQL容器。 docker run --…

从零开始的云计算生活——第十四天,困难重重,安全管理。

一故事背景 在前面的基本无操作内容后&#xff0c;来到了大头内容&#xff0c;安全管理&#xff01;其中的防火墙相关的内容更是重中之重&#xff0c;要好好掌握&#xff0c;熟练运用。 二SELinux安全上下文 1SELinux 简介 a. SELinux&#xff08;Security-Enhanced Linux&…

【设计模式-4.6】行为型——状态模式

说明&#xff1a;本文介绍行为型设计模式之一的状态模式 定义 状态模式&#xff08;State Pattern&#xff09;也叫作状态机模式&#xff08;State Machine Pattern&#xff09;&#xff0c;允许对象在内部状态发生改变时改变它的行为&#xff0c;对象看起来好像修改了它的类…