【JavaWeb 学习 | 第16篇】JPS介绍和基本语法

🌈 个人主页: Hygge_Code
🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络
💫 个人格言: "既然选择了远方，便不顾风雨兼程"

文章目录

JSP入门
- 一、Web开发基础：C/S与B/S结构对比🤔
- - [1. C/S结构（Client/Server，客户端/服务器）](#1. C/S结构（Client/Server，客户端/服务器）)
  - [2. B/S结构（Browser/Server，浏览器/服务器）](#2. B/S结构（Browser/Server，浏览器/服务器）)
- 二、Web服务器选型：为什么首选Tomcat？🧐
- 三、Tomcat服务器：安装、配置与部署🥝
- - [1. 安装与核心目录解析](#1. 安装与核心目录解析)
  - - （1）安装步骤
    - （2）核心目录说明
  - [2. 关键配置](#2. 关键配置)
  - [3. 第一个Web应用部署（手动部署）](#3. 第一个Web应用部署（手动部署）)
- 四、IDEA创建Web工程：JSP开发环境搭建🐦‍🔥
- - [1. 新建Web项目步骤（图文指引）](#1. 新建Web项目步骤（图文指引）)
  - [2. 项目结构解析（核心目录）](#2. 项目结构解析（核心目录）)
- 五、JSP基础语法🥝
- - [1. JSP核心概念](#1. JSP核心概念)
  - [2. 核心语法与示例](#2. 核心语法与示例)
- 六、常见问题排查⚠️

JSP入门

一、Web开发基础：C/S与B/S结构对比🤔

在学习JSP前，需先理解两种主流程序结构的差异，明确Web开发的技术定位：

1. C/S结构（Client/Server，客户端/服务器）

核心特征：需在用户设备安装独立客户端程序，客户端与服务器直接交互。
优势：
- 交互性强，响应速度快（大量逻辑可在客户端处理，减少服务器开销）；
- 安全控制能力强，支持多层次权限校验；
- 操作界面个性化程度高，可满足定制化需求。
劣势：
- 分布性弱，客户端需单独安装部署；
- 兼容性差，不同设备/系统需适配不同版本客户端。

2. B/S结构（Browser/Server，浏览器/服务器）

核心特征：仅需维护服务器，用户通过浏览器即可访问（无需安装客户端），是当前Web开发的主流结构。
优势：
- 分布性强：有网络+浏览器即可随时随地访问，不受设备限制；
- 维护便捷：仅需修改服务器端网页，所有用户同步更新；
- 开发成本低：共享性强，无需适配多端客户端。
劣势：
- 个性化不足，难以满足高度定制化需求；
- 跨浏览器兼容性一般，需额外处理适配问题；
- 速度与安全性需投入更多设计成本（如加密、防注入）。

二、Web服务器选型：为什么首选Tomcat？🧐

Web服务器是"接收浏览器请求、返回网页资源"的核心组件，常见产品包括IIS（微软）、WebLogic（Oracle）、WebSphere（IBM）等，但Tomcat是JSP开发的首选，原因如下：

优势维度	具体说明
免费开源	属于Apache软件基金会核心项目，无需付费即可商用，降低开发成本
轻量级架构	体积小、资源占用少，适合中小型系统及并发量不高的场景（如开发调试、小型应用）
规范兼容性	完美支持JSP和Servlet规范，是官方推荐的JSP调试环境
社区支持	文档丰富、问题解决方案多，新手学习门槛低

Tomcat由Apache、Sun及社区开发者联合维护，稳定性与可靠性经过长期验证，是Java Web入门的"标配"服务器。

三、Tomcat服务器：安装、配置与部署🥝

1. 安装与核心目录解析

（1）安装步骤

下载地址：Apache Tomcat官网（选择9.0.x版本，如apache-tomcat-9.0.48）；
安装方式：直接解压压缩包（无需安装向导，解压路径建议无中文/空格，如E:\tomcat\apache-tomcat-9.0.48）。

（2）核心目录说明

2. 关键配置

（1）端口号配置（解决端口占用问题）

Tomcat默认端口为8080，若被其他程序（如迅雷、其他服务器）占用，需修改：

进入/conf目录，用记事本打开server.xml；

找到以下配置，修改port属性值（如改为9000）：

xml 复制代码

<Connector port="8080"  <!-- 此处可改为未占用的端口，如9000 -->
           protocol="HTTP/1.1"
           connectionTimeout="20000"  <!-- 连接超时时间（毫秒） -->
           redirectPort="8443" />    <!-- HTTPS重定向端口 -->

保存文件，重启Tomcat生效。

（2）虚拟路径配置（项目不放在webapps目录）

默认情况下，项目需放在/webapps目录才能访问，若想将项目放在其他磁盘（如F:/actual），可配置虚拟路径：

准备资源：在F:/actual目录下创建test.html（简单页面用于测试）；

配置虚拟路径：打开server.xml，在<Host>标签内添加：

xml 复制代码

<Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true">
    <!-- 新增虚拟路径配置：path=虚拟访问路径，docBase=实际文件路径 -->
    <Context path="/virtual" docBase="F:/actual"/>
    <!-- 原有日志配置（保留） -->
    <Valve className="org.apache.catalina.valves.AccessLogValve" ... />
</Host>

访问测试：启动Tomcat后，浏览器输入http://localhost:9000/virtual/test.html。

（3）欢迎页配置（默认首页）

用户访问项目根目录（如http://localhost:9000/firstApp）时，Tomcat会自动查找"欢迎页"，配置方式：

进入/conf目录，打开web.xml；

找到<welcome-file-list>标签，配置欢迎页优先级：

xml 复制代码

<welcome-file-list>
    <welcome-file>index.html</welcome-file>  <!-- 优先查找HTML -->
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>   <!-- 其次查找JSP -->
</welcome-file-list>

Tomcat会按顺序查找，找到第一个存在的文件即展示。

3. 第一个Web应用部署（手动部署）

在/webapps目录下创建项目文件夹firstApp；

编写first.html（放在firstApp目录下）：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的第一个Web应用</title>
</head>
<body>
    <h1 style="text-align: center;">This Is My First Web App!</h1>
</body>
</html>

启动Tomcat：双击/bin/startup.bat（启动后不要关闭命令行窗口）；
访问测试：浏览器输入http://localhost:8080/firstApp/first.html（若改了端口，需替换为新端口如9000）。

四、IDEA创建Web工程：JSP开发环境搭建🐦‍🔥

1. 新建Web项目步骤（图文指引）

打开IDEA → 点击New Project → 左侧选择Web Application (4.0) → 勾选Create web.xml（关键，生成配置文件）
配置JDK：选择Project SDK为JDK 1.8
配置Tomcat：点击New → 选择Tomcat Server → 选择Local → 指定Tomcat Home为解压目录（如E:\tomcat\apache-tomcat-9.0.48）
命名项目：Project name填jsp01，Project location选择存放路径（如F:\study\jsp01） → 点击Finish

2. 项目结构解析（核心目录）

目录/文件	功能描述
`/src`	编写Java代码（如Servlet、工具类、实体类）
`/web`	Web资源根目录（存放JSP、HTML、CSS、JS等可直接访问的资源）
`/web/WEB-INF`	受保护目录（浏览器无法直接访问）：存放`web.xml`（配置文件）、`lib`（项目依赖JAR）
`/web/index.jsp`	默认JSP首页（自动生成，可直接修改）

五、JSP基础语法🥝

1. JSP核心概念

JSP本质是"简化版Servlet"，允许在HTML中嵌入Java代码。其运行流程为：

第一次访问JSP时，Tomcat将JSP翻译为Java文件（Servlet）
再将Java文件编译为class文件
执行class文件，生成HTML响应
后续访问若JSP未修改，直接复用编译后的class文件

2. 核心语法与示例

（1）page指令（全局配置）

用于设置JSP页面的全局属性（如编码、导入类），语法：

jsp 复制代码

<%@ page 属性名="属性值" [属性名="属性值"...] %>

常用属性：

属性名	功能描述	默认值
`language`	指定脚本语言（仅支持Java）	`java`
`import`	导入Java类（多个类用逗号分隔）	无（需手动导入）
`contentType`	设置页面编码与MIME类型	`text/html;charset=UTF-8`

示例：导入日期处理类并设置编码

jsp 复制代码

<%@ page import="java.text.SimpleDateFormat,java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

（2）JSP小脚本（3种常用形式）

脚本类型	语法格式	功能描述
代码块	`<% Java代码; %>`	嵌入Java逻辑（如变量定义、循环、判断）
方法定义	`<%! 方法定义 %>`	定义可复用的Java方法（全局有效）
变量/表达式输出	`<%= 变量名/表达式 %>`	将结果直接输出到HTML页面（无需分号）

（3）完整示例：显示当前日期

jsp 复制代码

<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSP日期示例</title>
    <style>h1 { color: #2c3e50; text-align: center; }</style>
</head>
<body>
    <h1>你好，今天的日期是：</h1>
    
    <%-- 1. 代码块：定义变量和逻辑 --%>
    <%
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日");
        String currentDate = sdf.format(new Date()); // 获取当前日期
    %>
    
    <%-- 2. 方法定义：复用日期格式化逻辑 --%>
    <%!
        public String formatDate(Date date) {
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            return sdf.format(date);
        }
    %>
    
    <%-- 3. 输出变量/表达式结果 --%>
    <p style="text-align: center; font-size: 18px;">
        格式1：<%= currentDate %><br>
        格式2：<%= formatDate(new Date()) %>
    </p>
</body>
</html>

六、常见问题排查⚠️

错误类型	可能原因	解决办法
端口占用（启动失败）	8080/8005端口被其他程序占用	1. 改Tomcat端口（见第三章2.1）；2. 关闭占用进程（cmd命令：`netstat -ano
404错误（找不到资源）	1. 访问路径错误；2. 项目未部署到webapps	1. 检查路径：`http://localhost:端口/项目名/资源名`；2. 确认项目文件夹在webapps下
500错误（ClassNotFound）	1. JSP放错目录（如放在WEB-INF下）；2. 未编译	1. 将JSP移到web根目录；2. 重启Tomcat（触发重新编译）；3. IDEA部署选择"war exploded"模式
中文乱码	1. page指令编码未设置；2. 文件本身编码错误	1. 加`contentType="text/html;charset=UTF-8"`；2. IDEA设置文件编码为UTF-8（File→Settings→Editor→File Encodings）

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！