JSP-02动态网页技术基础

文章目录

JSP-02动态网页技术基础
- @[toc]
一、学习目标
二、为什么需要动态网页
三、B/S架构
四、B/S架构工作原理
五、统一资源定位符URL
- 5.1URL基本概念
- 5.2URL主要组成
- 5.3HTTP协议
- 5.4HTTP状态码
- - 5.4.1、1开头的状态码(信息类)
  - 5.4.2、2开头的状态码(成功类)
  - 5.4.3、3开头的状态码(重定向)
  - 5.4.4、4开头的状态码(客户端错误)
  - 5.4.5、5开头的状态码(服务器错误)
六、动态网页初体验
七、Web服务器
八、Tomcat
- 8.1Tomcat简介
- 8.2Tomcat下载
- 8.3Tomcat配置环境变量
- 8.4Tomcat端口修改
九、Tomcat 服务器部署Web应用
- 9.1Web应用目录结构
- 9.2使用maven插件打包部署web
十、JSP
- 10.1JSP简介
- 10.2JSP页面元素
- - 10.2.1JSP指令和小脚本
  - 10.2.2JSP表达式
  - 10.2.3JSP声明
  - 10.2.4JSP注释
- 10.3JSP 工作原理
十一、运行Web应用常见错误
- 11.1常见错误：未启动Tomcat
- 11.2常见错误：未部署Web应用
- 11.3常见错误：URL输入错误
- 11.4常见错误：目录不能被引用
总结

一、学习目标

了解B/S架构
了解动态网页
掌握安装、配置和运行Tomcat服务器的步骤
会手动创建、部署和运行Web应用程序
掌握JSP页面的基本元素
会使用IntelliJ IDEA创建、部署、运行Web项目
掌握Web项目的调试和排错方法

二、为什么需要动态网页

为什么需要动态网页？

静态网站局限性：

无法实现搜索、购买、登录等交互功能。
无法对静态页面的内容进行实时更新。

什么是动态网页

动态网页： 网页文件里包含了程序代码，通过后台数据库与WEB服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。

通俗的讲： 动态就是里面的内容可以在不影响页面的情况下更改，以不变应万变。静态就是整个版面像一幅画一样如果要修改就要全部修改好再重新上传。

如图所示：根据不同的输入(或操作)，返回不同的网页

如何实现动态网页

问题：

在上图中，百度如何根据我们输入的关键字实现业务数据的动态显示？

分析：

我们通过浏览器打开了百度，百度我们可以看做是一个使用浏览器可以访问的应用程序，我们搜索到的数据信息，都是由百度这个应用程序动态的从云服务器种数据库服务器中查询到，经过一系列处理后反馈给我们客户端浏览器的页面，所以要掌握这一切，我们首先需要了解B/S技术。

三、B/S架构

B/S架构：浏览器/服务器

B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器，如Chrome、Safari、Microsoft Edge、Netscape Navigator或Internet Explorer，服务器安装SQL Server、Oracle、MYSQL等数据库。浏览器通过Web Server 同数据库进行数据交互。

程序完全部署在服务器上
使用浏览器访问服务器
无需单独安装客户端软件

学习过WinForm或WPF的小伙伴在这里你肯定有个疑惑，为什么之前学习了C/S还需要学习B/S？

接下来我们通过对比来了解C/S与B/S各自的优缺点吧：

	B/S	C/S
软件安装	浏览器	需要专门的客户端应用
升级维护	客户端零维护	客户端需要单独维护和升级
平台相关	与操作系统平台的关系最小化	对客户端操作系统一般有限制
性能安全	在响应速度和安全性上需要花费更多设计成本	能充分发挥客户端处理能力，响应速度快

通过上面表格的对比，你就可以看出B/S的优越性了，接下来我们开始探索B/S架构的工作运行原理吧~

四、B/S架构工作原理

B/S架构采用请求/响应模式进行交互

B/S架构采取浏览器请求，服务器响应的工作模式。

用户可以通过浏览器去访问Internet上由Web服务器产生的文本、数据、图片、动画、视频点播和声音等信息；

而每一个Web服务器又可以通过各种方式与数据库服务器连接，大量的数据实际存放在数据库服务器中；

从Web服务器上下载程序到本地来执行，在下载过程中若遇到与数据库有关的指令，由Web服务器交给数据库服务器来解释执行，并返回给Web服务器，Web服务器又返回给用户。在这种结构中，将许许多多的网连接到一块，形成一个巨大的网，即全球网。而各个企业可以在此结构的基础上建立自己的Internet。

在 B/S 模式中，用户是通过浏览器针对许多分布于网络上的服务器进行请求访问的，浏览器的请求通过服务器进行处理，并将处理结果以及相应的信息返回给浏览器，其他的数据加工、请求全部都是由Web Server完成的。通过该框架结构以及植入于操作系统内部的浏览器，该结构已经成为了当今软件应用的主流结构模式。

五、统一资源定位符URL

5.1URL基本概念

在我们生活中常见网站比比皆是例如百度、京东、淘宝、CSDN等等，在访问这些网站时我们都会在浏览器地址栏输入对应的网址（域名）才能进行访问，这些所谓的网址到底是什么呢？

其实所谓的网址就是 统一资源定位符

URL： Uniform Resource Locator的缩写，代表 “统一资源定位符”，即我们常说的网址，URL是唯一能识别Internet上具体的计算机、目录或文件夹位置的命名约定。主要用于完整地描述互联网资源的地址。

https://www.baidu.com/ ==>www.baidu.com ==>域名（映射解析） ==>IP地（202.108.22.103）

5.2URL主要组成

URL主要由三部分组成：

协议部分
主机IP地址：端口号（当端口号为80时可以省略）
项目资源地址

5.3HTTP协议

超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使开发和部署非常地直截了当。

基于TCP协议之上的请求-响应协议

请求方式

GET

/test/index.jsp?name1=value1&name2=value2

POST

POST /test/index.jsp HTTP/1.1
Host: yun.com
name1=value1&name2=value2

GET与POST区别

对比项	GET	POST
对数据长度的限制	传送数据量较小	传送数据量无限制
数据可见性	传输数据在URL可见	传输数据在URL不可见
安全性	安全性低	安全性高

Get：适用于查询

Post：适用于增删改

5.4HTTP状态码

浏览器向服务器发出请求后，服务器会返回响应信息，此时服务器使用请求状态码和请求消息表示响应状态。

常见状态码

状态码	消息	描述
200	OK	请求成功
302	Found	所请求的页面已经转移至新的url
400	Bad Request	服务器未能理解请求，
404	Not Found	服务器无法找到被请求的页面
500	Internet Server Error	服务器错误

5.4.1、1开头的状态码(信息类)

100，接受的请求正在处理，信息类状态码

5.4.2、2开头的状态码(成功类)

2xx(成功)表示成功处理了请求的状态码
200(成功)服务器已成功处理了请求。

5.4.3、3开头的状态码(重定向)

3xx(重定向)表示要完成请求，需要进一步操作。通常这些状态代码用来重定向。
301，永久性重定向，表示资源已被分配了新的 URL
302，临时性重定向，表示资源临时被分配了新的 URL
303，表示资源存在另一个URL，用GET方法获取资源
304，(未修改)自从上次请求后，请求网页未修改过。服务器返回此响应时，不会返回网页内容

5.4.4、4开头的状态码(客户端错误)

4xx(请求错误)这些状态码表示请求可能出错，妨碍了服务器的处理
400(错误请求)服务器不理解请求的语法
401表示发送的请求需要有通过HTTP认证的认证信息
403(禁止)服务器拒绝请求
404(未找到)服务器找不到请求网页

5.4.5、5开头的状态码(服务器错误)

5xx(服务器错误)这些状态码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求的错误
500，(服务器内部错误)服务器遇到错误，无法完成请求
503，表示服务器处于停机维护或超负载，无法处理请求

六、动态网页初体验

开发中常见的实现动态网页需要使用服务器脚本语言

ASP（Active Server Pages）

PHP（Hypertext Preprocessor）

JSP（Java Server Pages）

1.创建一个maven web项目

省略创建项目的步骤，在上一篇博文《maven配置中》已介绍，这里不做赘述。

2.pom.xml添加jsp-api依赖

 <!-- https://mvnrepository.com/artifact/javax.servlet/jsp-api --><dependency><groupId>javax.servlet</groupId><artifactId>jsp-api</artifactId><version>2.0</version><scope>provided</scope></dependency>

3.JSP代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>Welcome</title></head><body><%String sayHi = "Hello! JSP!";out.print(sayHi);%></body>
</html>

4.运行效果

运行web配置小技巧

七、Web服务器

服务器基本概念：

一种服务程序，也称为Web容器
用于运行特定应用程序
可以操作HTTP请求，包括接受请求及进行响应

常见的Web服务器

Tomcat
Nginx
Apache
IIS（.NET）
WebLogic

八、Tomcat

8.1Tomcat简介

Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。由于有了Sun 的参与和支持，最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为比较流行的Web 应用服务器。

Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试 JSP 程序的首选。对于一个初学者来说，可以这样认为，当在一台机器上配置好Apache 服务器，可利用它响应HTML（标准通用标记语言下的一个应用）页面的访问请求。实际上Tomcat是Apache 服务器的扩展，但运行时它是独立运行的，所以当你运行tomcat 时，它实际上作为一个与Apache 独立的进程单独运行的。

8.2Tomcat下载

Tomcat下载：

官网地址：

https://tomcat.apache.org/

tomcat9.0.64下载地址：

https://dlcdn.apache.org/tomcat/tomcat-9/v9.0.64/bin/apache-tomcat-9.0.64-windows-x64.zip

点击上方链接，下载Tomcat然后解压到本地磁盘文件夹内即可。

如图所示我的Tomcat存储目录：D:\DevelopmentTool\Environment\Tomcat\apache-tomcat-9.0.64

Tomcat目录结构介绍

目录	说明
/bin	存放各种平台下用于启动和停止Tomcat的脚本文件
/conf	存放Tomcat服务器的各种配置文件
/lib	存放Tomcat服务器所需的各种JAR文件
/logs	存放Tomcat的日志文件
/temp	Tomcat运行时用于存放临时文件
/webapps	当发布Web应用时，默认情况下会将Web应用的文件存放于此目录中
/work	Tomcat把由JSP生成的Servlet放于此目录下

8.3Tomcat配置环境变量

环境变量配置： 我的电脑->右键属性->高级系统设置->环境变量 ->系统变量

1.打开系统环境变量窗口，新建一个环境变量 TOMCAT_HOME

变量名： TOMCAT_HOME

变量值： D:\DevelopmentTool\Environment\Tomcat\apache-tomcat-9.0.64

2.继续新建环境变量 CATALINA_BASE

变量名： CATALINA_BASE

变量值： %TOMCAT_HOME%

3.继续新建环境变量 TOMCAT_HOME

变量名： CATALINA_HOME

变量值： %TOMCAT_HOME%

4.继续新建环境变量 ClassPath

变量名： ClassPath

变量值： %CATALINA_HOME%\lib\servlet-api.jar;

5.在Path变量中添加 %CATALINA_HOME%\bin;%CATALINA_HOME%\lib

6.打开cmd 输入startup 按回车键，结果发现乱码。

7.接下来在浏览器中输入 localhost:8080 访问：

8.解决服务启动出现乱码问题

如图所示，修改D:\DevelopmentTool\Environment\Tomcat\apache-tomcat-9.0.64\conf目录下 logging.properties配置文件将默认编码UTF-8改成GBK就可以解决了。

—

8.4Tomcat端口修改

Tomcat默认端口为：8080

<!--修改前代码-->
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />

找到D:\DevelopmentTool\Environment\Tomcat\apache-tomcat-9.0.64\conf目录，修改conf目录下的server.xml文件,找到<Connector>节点，修改port属性值，Ctrl+s保存后重启服务器

<!--修改后代码-->
<Connector port="8088" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />

cmd中输入startup 重新启动tomcat服务器：

打开浏览器输入localhost:8088，可以正常访问，但是原先8080端口已经无法访问了。

九、Tomcat 服务器部署Web应用

9.1Web应用目录结构

目录	说明
/	Web应用的根目录，该目录下所有文件在客户端都可以访问(JSP、HTML等)
/WEB-INF	存放应用使用的各种资源，该目录及其子目录对客户端都是不可以直接访问的
/WEB-INF/classes	存放Web项目的所有的class文件
/WEB-INF/lib	存放Web应用使用的JAR文件

9.2使用maven插件打包部署web

在IDEA中使用Meaven构建web应用，使用maven打包插件可以对项目进行打包,只需要双击下图中所示的package即可。

双击package后打包后信息，可以再idea查看打包后的 war包位置以及总耗时。

根据war位置我们可以找到项目编译后的目录文件夹target中education-jsp.war

接下来，将war包复制到apache-tomcat-9.0.64\webapp目录下,以下是我本地服务器的目录位置：

D:\DevelopmentTool\Environment\Tomcat\apache-tomcat-9.0.64\webapps

然后在cmd中输入startup 启动tomcat服务器 ,此时webapps中会生成一个education-jsp文件夹

Microsoft Windows [版本 10.0.19044.1706]
(c) Microsoft Corporation。保留所有权利。C:\WINDOWS\system32>startup
Using CATALINA_BASE:   "D:\DevelopmentTool\Environment\Tomcat\apache-tomcat-9.0.64"
Using CATALINA_HOME:   "D:\DevelopmentTool\Environment\Tomcat\apache-tomcat-9.0.64"
Using CATALINA_TMPDIR: "D:\DevelopmentTool\Environment\Tomcat\apache-tomcat-9.0.64\temp"
Using JRE_HOME:        "C:\Program Files\Java\jre1.8.0_131"
Using CLASSPATH:       "D:\DevelopmentTool\Environment\Tomcat\apache-tomcat-9.0.64\bin\bootstrap.jar;D:\DevelopmentTool\Environment\Tomcat\apache-tomcat-9.0.64\bin\tomcat-juli.jar"
Using CATALINA_OPTS:   ""

启动服务器后，前面我们复制到webapps文件夹下生成了一个名为education-jsp的目录文件夹

最后打开浏览器测试访问，结果运行正常，到这里我们的本地项目部署就完成了，在以后的学习过程中，我们还可以将项目部署在不同的云服务器上，实现所有人都可以根据url进行访问。

十、JSP

10.1JSP简介

JSP (Java Server Pages)

JSP页面主要包含静态内容、指令、小脚本、表达式、声明、注释等内容

一种用于开发动态Web页面的服务器端技术
在HTML中嵌入Java脚本代码（Html + Java片段）
由Web服务器编译和运行
将生成的页面信息返回客户端

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><head><body><!--欢迎语 （这是HTML注释）--><h1>Hello! JSP !</h1><%--显示当前日期 （这是JSP注释）--%><%! String currTime; %><%//使用预定格式将日期转换为字符串SimpleDateFormat formater = new SimpleDateFormat("yyyy年MM月dd日");currTime = formater.format(new Date());%><%= currTime %></body>
</html>

10.2JSP页面元素

1.静态内容

HTML代码等静态内容

2.JSP指令（Directives）

   声明页面属性、用于控制页面处理

3.JSP声明（Declarations）

   声明Java变量、定义Java方法

4.JSP脚本（Scriptlets）

Java代码片段

5.JSP表达式（Expressions）

   用于展示服务器端的响应结果<%=%>

6.JSP注释

10.2.1JSP指令和小脚本

JSP指令（Directives），用于声明页面属性、用于控制页面处理

<%@ 指令名称 属性1="属性值" 属性2="属性值2,属性值3" %>

常用指令：page、include、taglib

Page指令用于设置页面属性

<%@ page 属性1="属性值" 属性2="属性值1,属性值2" %>

常用属性

属性	描述	默认值
language	指定JSP页面使用的脚本语言	java
import	引用脚本语言中使用到的类文件	无
contentType	指定MIME类型和JSP页面响应时所采用的字符编码方式	`text/html;charset= UTF-8`

JSP小脚本

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

JSP页面中的Java代码片段，以<%开头，以%>结束

<%Java代码%>

10.2.2JSP表达式

表达式： 用于展示服务器端的响应结果

<%=Java变量或表达式%>

使用表达式代替out对象进行输出

<%for(String blog : blogs){
%><%= blog.getTitle() %> <br />
<%}
%>

10.2.3JSP声明

声明Java变量、定义Java方法

<%! Declaration;[ Declaration;] …… %>

使用JSP声明定义方法，计算不同直径圆的面积

<%!double area(double r){    //计算圆形面积 return Math.PI*r*r;}
%>
<%double r1 = 5;  double r2 = 10;DecimalFormat df = new DecimalFormat( "0.00 ");
%>
半径为：<%= r1%>的圆面积为<%= df.format(area(r1))%>  <br />
半径为：<%= r2%>的圆面积为<%= df.format(area(r2))%>

10.2.4JSP注释

JSP注释的作用：合理、详细的注释有利于代码后期的维护和阅读

HTML注释方法

<!-- HTML注释-->

浏览器查看源码时可以看到注释内容，不安全，加重网络传输负担

JSP注释标记

<%-- JSP注释--%>

浏览器查看源码时无法看到注释内容，安全性较高

JSP脚本中使用注释

<%  //单行注释  %>
<%  /*多行注释*/  %>

同Java注释

10.3JSP 工作原理

Web容器处理JSP文件请求需要经过3个阶段

1. 翻译阶段
2. 编译阶段
3. 执行阶段

客户端发送第一次请求之后，Web容器可以重用已经编译好的字节码文件,但是如果对JSP文件进行了修改，Web容器会重新对JSP文件进行翻译和编译。

十一、运行Web应用常见错误

未启动Tomcat
未正确部署Web应用
URL输入错误
目录不能被引用

11.1常见错误：未启动Tomcat

错误现象： 无法访问此网站

排错方法： 访问localhost:8080路径，检查Tomcat服务能否正确运行。

11.2常见错误：未部署Web应用

错误现象： 404错误

排错方法： 检查Web应用是否正确部署

11.3常见错误：URL输入错误

错误现象： 404错误

排错方法：

检查URL协议、IP地址、端口号是否拼写正确
检查上下文路径是否拼写正确
检查文件名称是否拼写正确

11.4常见错误：目录不能被引用

错误现象： 404错误

排错方法：

由于WEB-INF文件夹下的内容无法对外发布，所以 /WEB-INF/下的文件是不允许被引用的
查看被引用文件是否在/WEB-INF/下，将其移出

总结

思维导图