BCSP-玄子Java开发之Java Web编程CH01_初识动态网页

1.1 B/S架构

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

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

为什么要使用B/S架构

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

B/S架构工作原理

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SNkgh7aE-1687705182909)(./assets/image-20230601113226595.png)]

URL

Uniform Resource Locator：统一资源定位符，用于完整地描述互联网资源的地址

URL组成

http://localhost:8080/news/index.html

http：协议部分
localhost:8080：主机IP地址：端口号
news/index.html：项目资源地址

HTTP协议

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

请求方式：

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

POST

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

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

HTTP状态码

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

常见状态码

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

动态网页

动态网页是根据不同的输入或操作，返回不同的网页内容

动态网页的优势

交互性：网页会根据用户的要求动态改变和显示内容
自动更新：无须改变页面代码，便会自动生成新的页面内容
随机性：不同的时间、不同的人访问同一网址时会产生不同的页面效果

创建动态网页

实现动态网页需要使用服务器脚本语言

ASP（Active Server Pages）
PHP（Hypertext Preprocessor）
JSP（Java Server Pages）JSP代码

JSP代码

JSP脚本语言开发的动态网页，需要在Web服务器中运行

<%@ 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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uHQuA0EV-1687705182911)(./assets/image-20230601113853160.png)]

Web服务器

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

常见的Web服务器

Tomcat
Nginx
Apache
IIS
WebLogic

Tomcat

Tomcat 9 安装配置教程

下载链接

官网 https://tomcat.apache.org/

下载步骤

进入 Tomcat 官网，点击左侧导航栏，选择需要的版本下载。这里按照课程要求选择tomcat 9的版本

Mirrors：选择安装的镜像源，如果下载失败可尝试切换镜像

下方选择安装类型，现在的 Windows 电脑基本都是 64 位的，直接点击下载即可

解压安装

下载完成后我们会得到一个压缩包，将压缩包解压到你想要安装的位置即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cLZm0qFR-1687705182911)(./assets/image-20230504161502571.png)]

这里我将文件解压到C:\Program Files\apache-tomcat-9.0.74目录

配置环境变量

右击此电脑--->属性--->高级系统设置

点击下方环境变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkHaX5Vj-1687705182912)(./assets/image-20230504162810487.png)]

在系统环境变量中新建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eXRuDQoi-1687705182912)(./assets/image-20230504163346762.png)]

分别设置变量名与变量值

变量名：CATALINA_HOME

变量值：Tomcat 解压后的路径

例如我的：C:\Program Files\apache-tomcat-9.0.74

下滑找到系统变量Path

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cKWvHicD-1687705182912)(./assets/image-20230504163923181.png)]

添加环境变量%CATALINA_HOME%\bin

即为 Tomcat 安装路径下的 bin 目录

最后点击确定退出配置界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lJiT80NE-1687705182913)(./assets/image-20230504164042103.png)]

校验 Tomcat

键盘按下win + R键输入cmd打开命令提示符界面

再次输入startup.bat启动 Tomcat 服务

出现 Tomcat 启动窗口即表示安装成功，乱码问题不用管

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yrwAxzio-1687705182913)(./assets/image-20230504165043153.png)]

打开浏览器输入http://localhost:8080/ 到此 Tomcat 安装配置完毕

命令提示符界面一定不能关，关了就等于关闭 Tomcat 服务肯定打不开这个页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1XRWCq8Y-1687705182913)(./assets/image-20230504165312958.png)]

拓展

Tomcat 内置了许多案例，包含源码，可帮助学习

在网址栏后面加上examples即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQ4nLCHs-1687705182913)(./assets/image-20230504165542793.png)]

Tomcat目录结构

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

修改Tomcat服务器端口

Tomcat默认端口8080
修改conf目录下的server.xml文件
找到<Connector>节点，修改port属性值

<Connector port="8081" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />

http://localhost:8081/…

使用Tomcat 服务器部署Web应用

Web应用目录结构，不同资源文件按规则存储于不同目录下

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

创建、运行Web应用

创建Web应用，按目录规则创建Web应用，命名为MyFirstWeb
编写代码，在MyFirstWeb目录创建index.html文件
部署Web应用代码，将创建好的Web应用拷贝到Tomcat服务器的webapps目录中
启动Tomcat服务器
访问Web应用程序：http://localhost:8080/MyFirstWeb/index.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MyFirstWeb</title>
</head>
<body>
    <h1>我的第一个Web应用！</h1>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IoR1q3hN-1687705182914)(./assets/image-20230623214536488.png)]

设置默认欢迎页面

通过配置文件，设置Web应用的欢迎页修改应用程序，WEB-INF目录下的web.xml文件

<welcome-file-list>
        <welcome-file>home.html</welcome-file>
        <!--可以设置多个欢迎页面-->
</welcome-file-list>

访问项目根目录，自动进入默认页面：http://localhost:8080/MyFirstWeb

当运行Web应用时，Tomcat会首先加载项目中的web.xml文件

JSP

JSP (Java Server Pages)

一种用于开发动态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>
        </head>
<html>

JSP页面元素

静态内容：HTML代码等静态内容
JSP指令：（Directives）声明页面属性、用于控制页面处理
JSP声明;（Declarations）声明Java变量、定义Java方法
JSP脚本；（Scriptlets）Java代码片段
JSP表达式;（Expressions）用于展示服务器端的响应结果
JSP注释

JSP指令和小脚本

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= ISO-8859-1

JSP小脚本

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

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

<%Java代码%>

<%
    for(String blog : blogs){
        out.print(++i + " : ");
        out.print(blog);
%>
<br />
<%
    }
%>

JSP表达式

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

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

<%
    for(String blog : blogs){
%>
        <%=++i %>:
        <%= blog %> <br />
<%
    }
%>

JSP声明

声明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))%>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dyRQrNwi-1687705182914)(./assets/image-20230623221654890.png)]

JSP注释

HTML注释方法

<!-- HTML注释-->

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

JSP注释标记

<%-- JSP注释--%>

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

JSP脚本中使用注释

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

同Java注释

JSP 工作原理

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

翻译阶段
编译阶段
执行阶段

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4k4rFMB8-1687705182914)(./assets/image-20230623222212211.png)]

第一次请求之后，Web容器可以重用已经编译好的字节码文件

如果对JSP文件进行了修改，Web容器会重新对JSP文件进行翻译和编译

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CD4YsXUk-1687705182914)(./assets/image-20230623222530751.png)]

IDEA 创建 Web 项目

创建项目

IDEA 2023 创建Jakarta EE项目

模板：选择使用 Web 应用程序

应用程序服务器：选择安装的 Tomcat

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FYbBb4Nq-1687705182915)(./assets/image-20230508151829171.png)]

第一次创建项目可能识别不到 Tomcat 需要手动添加 Tomcat 服务器

设置 Tomcat 主目录为 Tomcat 的安装路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RV9ycPNe-1687705182915)(./assets/image-20230508154653311.png)]

然后下一步，创建

我们课程中使用的 java 版本为 1.8 需要在左上角选择 Java EE 8

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FFHja3OZ-1687705182915)(./assets/image-20230508154836330.png)]

然后点击 IDEA 右上角配置 Tomcat

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fhxApdKY-1687705182915)(./assets/image-20230508155257957.png)]

部署Web应用

点击上面的部署，把下面的路径都删掉只留下一个/，或者项目名称

这个就是 Tomcat 的虚拟映射地址

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YspWV2sS-1687705182916)(./assets/image-20230508161208112.png)]

然后直接运行项目，显示连接成功即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A1HR3XK9-1687705182916)(./assets/image-20230508161324931.png)]

Web项目的目录结构

src目录

存放Java源代码

web目录

WEB-INF目录
- web.xml
自动生成首页：index.jsp

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBGdI1eo-1687705182916)(./assets/image-20230623222752706.png)]

把JSP、HTML文件组织成文件夹，分类放入web目录中可以方便Web项目的维护和管理

修改 Maven 参数

IDEA 中内置了 Maven 就导致，每次新建项目 IDEA 都会使用自带的 Maven 我们需要修改为我们本地的 Maven

点击文件新建项目设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hvYARq8D-1687705182916)(./assets/image-20230508161525979.png)]

设置 Maven 参数，勾选相关设置

Maven 主路径（H): Maven 安装根目录

用户设置文件（S)：Maven conf目录里的settings.xml配置文件

本地仓库（R）：Maven 目录下新建的mavne-repo文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LK3qOK4A-1687705182916)(./assets/image-20230508161711179.png)]

运行Web应用常见错误

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

常见错误：未启动Tomcat

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9e3H4tdL-1687705182917)(./assets/image-20230623223343839.png)]

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

常见错误：未部署Web应用

错误现象：404错误

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eDrONLMA-1687705182917)(./assets/image-20230623223829844.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y07Jdl1I-1687705182917)(./assets/image-20230623223832721.png)]

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

常见错误：URL输入错误

错误现象：404

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXv8Y0EC-1687705182917)(./assets/image-20230623223930253.png)]

错误排错方法：

检查URL协议、IP地址、端口号是否拼写正确

检查上下文路径是否拼写正确

检查文件名称是否拼写正确

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

错误现象：404

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y7803K8P-1687705182917)(./assets/image-20230623223954188.png)]

错误排错方法：

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