javaEE - 22（ 5000 字 Tomcat 和 HTTP 协议入门 - 3）

ice___Cpu

已于 2024-07-23 22:46:24 修改

阅读量1.4k

点赞数 18

分类专栏： javaEE 文章标签： java-ee tomcat http

于 2024-02-05 11:48:49 首次发布

本文链接：https://blog.csdn.net/weixin_73232539/article/details/136036933

版权

javaEE 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了Tomcat的基本概念，包括其作为HTTP服务器的作用，目录结构详解，以及如何启动服务器、部署静态和动态页面，从本地到云服务器的部署流程。重点讲解了部署HTML、CSS、JavaScript和图片的实践步骤。

摘要由CSDN通过智能技术生成

一：Tomcat

1.1 Tomcat 是什么

谈到 “汤姆猫”, 大家可能更多想到的是大名鼎鼎的这个:
在这里插入图片描述
事实上, Java 世界中的 “汤姆猫” 完全不是一回事, 但是同样大名鼎鼎.

一句话：Tomcat 是一个 HTTP 服务器.

前面我们已经学习了 HTTP 协议, 知道了 HTTP 协议就是 HTTP 客户端和 HTTP 服务器之间的交互数据的格式，同时也通过 ajax 和 Java Socket 分别构造了 HTTP 客户端.

HTTP 服务器也同样可以通过 Java Socket 来实现. 而 Tomcat 就是基于 Java 实现的一个开源免费,也是被广泛使用的 HTTP 服务器.

1.2 启动服务器

在 bin 目录中, 双击 startup.bat 即可启动 Tomcat 服务器，看到形如以下内容的日志, 说明启动成功.
在这里插入图片描述

注意： Tomcat 默认按照 UTF-8 的编码方式处理中文. 而 windows 的 cmd 默认是 GBK 编码，所以在 Windows 上通过 cmd 方式启动 Tomcat 会出现乱码. 但是不影响 Tomcat 的使用，如果使用 Linux 或者 IDEA 中的终端来启动 Tomcat, 则没有乱码问题.

接着在浏览器中输入 127.0.0.1:8080 即可看到 Tomcat 的默认欢迎页面.
在这里插入图片描述

如果看不到欢迎页面, 检查 URL 的 IP 地址以及端口号是否正确, 同时也要检查 Tomcat 是否启动成功，如果启动失败最常见的启动失败原因是端口号被占用.

Tomcat 启动的时候默认会绑定 8080 和 8005 端口，如果有其他进程已经绑定了这两个端口中的任意一个, 都会导致 Tomcat 不能启动.

在命令行中使用 netstat -ano | findstr 8080 确定看 8080 是否被其他进程绑定, 把对方进程干掉,再重新启动 Tomcat 一般就可以解决问题.

在这里插入图片描述
形如这样的结果说明 8080 端口已经被占用. 占用的进程是 13348 这个进程，然后就可以在任务管理器中找到这个进程, 并干掉这个进程.

1.3 部署静态页面

静态页面也就是内容始终固定的页面. 即使用户不同，时间不同，输入的参数不同 , 页面内容也不会发生变化.，对应的, 动态页面指的就是用户不同，时间不同，输入的参数不同, 页面内容会发生变化.

举个例子：

Tomcat 的主页就是一个静态页面.
在这里插入图片描述
而 B 站的主页则是一个动态页面.

在这里插入图片描述

1.4 部署单个 HTML

我们可以把自己写好的 HTML 部署到 Tomcat 中.

首先创建 hello.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>hello</title>
</head>
<body>
	<div>hello</div>
</body>
</html>

接着把 hello.html 拷贝到 Tomcat 的 webapps/ROOT 目录中.
在这里插入图片描述
然后在浏览器中通过 URL http://127.0.0.1:8080/hello.html 来访问

1.5 部署带有 CSS / JavaScript / 图片的 HTML

实际开发时我们的 HTML 不仅仅是单一文件, 还需要依赖一些其他的资源: CSS, JavaScript, 图片等.这些资源也要一起部署过去.

创建 hello2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>静态页面</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<img src="doge.jpg" alt="">
	<script src="app.js"></script>
</body>
</html>

创建 style.css

img {
	width: 500px;
	height: 500px;
}

创建 app.js

console.log("hello");

准备一个 doge.jpg
把以上四个文件都拷贝到 Tomcat 的 webapps/ROOT 中.
在浏览器中通过 http://127.0.0.1:8080/hello2.html 来访问页面

此时通过 Fiddler 抓包, 可以发现此时浏览器和服务器之间有 4 个 HTTP 请求/响应的交互.

在浏览器地址栏里输入 http://127.0.0.1:8080/hello2.html 会触发一次 GET 请求. 这个请求会拿到 hello2.html 的内容.
浏览器解析 hello2.html, 其中的 link 标签, img 标签, script 标签都会分别触发一次 GET 请求. 请求的路径分别为 /style.css , /doge.jpg , /app.js

1.6 部署 HTML 到单独的目录中

实际开发中我们的 HTML 可能不止一个, 依赖的 CSS / JavaScript 文件也可能比较多. 这个时候就不适合全都拷贝到 webapps/ROOT 目录中了，因为这就会显的比较乱

我们可以创建一个单独的目录, 和 ROOT 并列, 来存放我们要部署的内容.

在 webapps 中创建目录 HelloApp, 和 ROOT 目录并列.
把刚才创建的 hello2.html, style.css, doge.jpg, app.js 拷贝到 HelloApp 目录中.

在这里插入图片描述
为了结构更清楚, 我们在 HelloApp 中又创建了一些子目录, css , img , js 来分别放 css , 图片,JavaScript 文件.

调整 hello2.html 的代码, 把引用 css, js, 图片的路径进行微调

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>静态页面</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<img src="img/doge.jpg" alt="">
	<script src="js/app.js"></script>
</body>
</html>