EDUCBA-Tomcat-构建与部署笔记-全-

EDUCBA Tomcat 构建与部署笔记（全）

001：项目简介 🚀

在本教程中，我们将学习一个基于Apache Tomcat的项目。我们将创建一个公司网站。

概述

本节课我们将学习Apache Tomcat是什么，以及如何利用它来构建和部署一个Java Web应用。我们将从一个简单的案例研究开始，逐步完成一个公司网站的开发。

什么是Apache Tomcat？

Apache Tomcat是一个用于执行Java应用程序的Web服务器。它专门用于运行基于Java的程序，如Servlet、JSP等。

Apache Tomcat与Apache HTTP服务器不同。Apache HTTP服务器主要用于静态Web应用，而Apache Tomcat则专注于服务基于Java的网站或Web应用程序。

项目难度与先决技能

本项目的难度级别为中级。要开始这个项目，你需要具备以下技能：

以下是开始本项目所需的技能集：

  • 具备Java基础知识。
  • 了解Servlet和JSP。
  • 了解HTML和CSS。
  • 了解Apache Tomcat，例如如何配置Tomcat、如何创建服务器等。

你将学到什么？

通过这个项目，你将学习以下内容：

以下是本项目涵盖的主要场景：

  • 使用Tomcat服务器。
  • 使用Apache Tomcat服务器。
  • 使用Java创建Web应用程序。
  • 使用CSS进行设计。
  • 配置Apache Tomcat服务器。

目标学员

本课程适合以下人群：

以下是本项目的目标学员：

  • 任何希望成为全栈开发者的参与者。全栈开发涉及Web应用程序，并且会用到Apache Tomcat服务器。
  • 希望成为Java开发者的人。由于Apache Tomcat运行基于Java的应用程序，因此Java开发者有必要学习使用Apache Tomcat。
  • 任何希望创建一个能在Apache Tomcat上运行的项目的学生。

项目内容

在本项目中，我们将学习以下基本内容：

以下是本项目的基本学习内容：

  • 在Java中创建Web应用程序。
  • 在Apache Tomcat中执行应用程序。
  • Apache Tomcat的配置。

案例研究

为了详细理解项目，我们从一个简单的案例研究开始。

一个线索生成公司希望创建其公司网站。网站应包含以下页面：主页、关于我们、服务列表和联系我们页面。

基于这个案例研究，我们将创建一个使用Java（JSP和Servlet）的应用程序，并在Apache Tomcat服务器上执行。

以下是本案例研究将涵盖的场景：

  • 创建Web应用程序：我们将学习如何使用JSP和Servlet创建Web应用程序。
  • 使用CSS进行设计：我们将使用CSS来设计整个概念。
  • 在Apache Tomcat中进行配置。

现在，让我们开始这个项目并进行编码。

第一步：创建项目与配置服务器

在这一步中，我们将创建一个新项目，添加所有必需的JAR文件，并为我们的项目创建一个Apache Tomcat服务器。

我们将使用Eclipse IDE。启动Eclipse后，首先需要添加一个服务器视图。

在“窗口”菜单中，选择“显示视图”，然后找到“服务器”选项卡。如果找不到，可以在搜索框中输入“服务器”。

找到服务器选项卡后，会显示“没有可用的服务器。单击此链接创建新服务器”。点击该链接。

现在，你会看到不同类型的服务器。我们选择“Apache”下的“Tomcat服务器”。

此时，我们需要下载并安装Apache Tomcat。如果你还没有Tomcat服务器，需要先安装它。

打开浏览器，搜索“下载 Apache Tomcat”。你可以从Apache Tomcat官网获取不同版本（如8.5、9.0等）的安装文件。

例如，你可以选择适用于Windows的32位/64位ZIP文件。下载后，将其解压到指定目录（例如E:\demo）。

回到Eclipse的服务器创建向导，点击“浏览”按钮，选择你解压的Tomcat目录（例如E:\demo\apache-tomcat-8.5.xx）。然后点击“下一步”和“完成”。

现在，我们已经创建了Apache Tomcat服务器。双击服务器可以进行配置，例如修改服务器名称、主机名（通常是localhost）、端口号（默认8080，可以改为80）、超时设置等。

如果你不想单独配置服务器，还有另一种选择：创建一个Maven项目。Maven项目内置了Apache Tomcat支持。但为了理解本项目，我们将使用我们刚刚配置的Tomcat服务器。

接下来，创建一个新项目。选择“文件” -> “新建” -> “动态Web项目”。

将项目命名为“XYZ_Lead_Generation”。这是我们的线索生成公司名称。

选择目标运行时为我们刚配置的Apache Tomcat服务器，动态Web模块版本保持默认，然后点击“下一步”。确保勾选“生成web.xml部署描述符”，然后点击“完成”。

现在，我们已经为项目创建了Apache Tomcat服务器和一个动态Web项目。

在这个项目中，我们还需要添加两个必要的JAR文件：Servlet API和JSP API的JAR文件，因为我们将使用JSP和Servlet。

右键单击项目，选择“构建路径” -> “配置构建路径”。在“库”选项卡下，点击“添加外部JAR...”。

导航到你的Tomcat安装目录下的lib文件夹（例如E:\demo\apache-tomcat-8.5.xx\lib），选择servlet-api.jar和jsp-api.jar（可能名称略有不同），点击“应用并关闭”。

现在，我们已经添加了所需的JAR文件。

回到服务器视图，可以双击服务器进行更多配置。例如，我将端口号改为80。保存配置。

右键单击服务器，选择“启动”。你会看到Tomcat已启动并同步。

要运行页面，可以右键单击项目中的index.html或index.jsp文件，选择“运行方式” -> “在服务器上运行”。Eclipse会打开一个内部浏览器显示页面。你也可以在“窗口” -> “Web浏览器”设置中更改为使用外部浏览器（如Google Chrome）。

第二步：创建简单主页

在这一步中，我们将创建一个简单的主页。我们将使用不同的HTML标签。

首先，在WebContent文件夹下，我们有一个index.html（或index.jsp）文件。我们将在其中编写代码。

我们将使用<header>、<div>和<footer>标签来构建页面结构。

<!DOCTYPE html>
<html>
<head>
    <title>XYZ Lead Generation</title>
</head>
<body>
    <header>
        <h1 id="main">XYZ Company</h1>
        <h2 id="sub">Lead Generation Company</h2>
    </header>
    <div id="body">
        <!-- 主要内容将放在这里 -->
    </div>
    <footer>
        © XYZ Company
    </footer>
</body>
</html>

这是一个基本的HTML结构。接下来，我们希望添加CSS来美化它。

第三步：添加CSS样式

为了添加CSS，我们在WebContent文件夹上右键，选择“新建” -> “其他”，在过滤器中输入“CSS”，创建一个新的CSS文件，命名为style.css。

然后，在HTML文件的<head>部分链接这个CSS文件。

<head>
    <title>XYZ Lead Generation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

现在，在style.css文件中，我们为各个部分添加样式。

首先设置header的样式：

header {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 20%;
    width: 100%;
    background-color: red;
}

保存并刷新浏览器页面，可以看到页头变成了红色。使用服务器的一个好处是，修改代码后只需刷新页面即可看到变化，无需重新运行。

接下来设置body部分的样式：

#body {
    position: absolute;
    top: 20%;
    left: 0%;
    height: 70%;
    width: 100%;
    background-color: gray;
    color: white; /* 设置文字颜色为白色 */
}

然后设置footer的样式：

footer {
    position: absolute;
    top: 90%; /* 20% + 70% */
    left: 0%;
    height: 5%;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
}

现在调整header中标题的对齐方式。我们之前为<h1>和<h2>设置了ID。

#main {
    position: absolute;
    top: 10%;
    left: 5%;
}
#sub {
    position: absolute;
    top: 15%;
    left: 20%;
}

第四步：添加主要内容与导航栏

现在，我们在<div id="body">中添加一些内容，比如一张图片和一段文字。我们将使用两个并排的<div>来布局。

修改index.html的body部分：

<div id="body">
    <div id="part1">
        <br/><br/>
        <img src="your-image.jpg" height="400" width="500"/>
    </div>
    <div id="part2">
        <br/><br/><br/>
        <p>这里是关于线索生成公司的一些介绍文本。可以在这里描述公司的服务、理念等。</p>
    </div>
</div>

在style.css中为这两个部分添加样式，使它们各占一半宽度：

#part1 {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 50%;
}
#part2 {
    position: absolute;
    top: 0%;
    left: 50%;
    height: 100%;
    width: 50%;
}

最后，在header中添加一个导航栏。在<header>标签内的标题后面添加：

<nav>
    Home | About | Services | Contact
</nav>

为导航栏添加CSS样式，将其定位到右上角：

nav {
    position: absolute;
    top: 35%;
    left: 70%;
    color: white;
}

现在，一个简单的带有导航栏、内容区和页脚的公司主页就创建完成了。你可以进一步调整图片大小、文字间距和颜色来完善它。

总结

本节课我们一起学习了Apache Tomcat的基本概念，它是一个用于运行Java Web应用的服务器。我们从一个案例研究出发，逐步完成了在Eclipse中创建动态Web项目、配置Tomcat服务器、添加必要JAR文件的过程。然后，我们创建了一个简单的主页，使用HTML构建结构，并用CSS进行样式设计，最终实现了一个包含页头、导航栏、内容区和页脚的公司网站雏形。在接下来的课程中，我们将学习如何为导航栏添加功能链接，并创建“关于我们”、“服务”和“联系我们”等页面。

002：创建“关于我们”与“服务列表”页面 🏗️

在本节课中，我们将学习如何为网站创建两个核心页面：“关于我们”页面和“服务列表”页面。我们将使用JSP文件，并应用CSS样式来美化页面布局。

创建“关于我们”页面 📄

上一节我们创建了网站首页。本节中，我们将创建一个“关于我们”页面。

首先，在Web Content目录上右键，选择创建一个新的JSP文件，命名为 about.jsp。

我们将复制首页的基本结构，包括页眉、主体和页脚，并移除其中不必要的部分（如part1和part2）。接着，为页面链接外部样式表。

以下是链接样式表的代码：

<link rel="stylesheet" type="text/css" href="mystyle.css">

运行页面后，我们发现内容区域需要进一步设计。因此，我们在主体部分创建一个 div 容器，并为其设置ID content。

在 content 容器内，我们添加一个居中的标题和一个水平分隔线 <hr>。

以下是添加标题和分隔线的示例：

<div id="content">
    <h1 align="center">关于XYZ公司</h1>
    <hr>
</div>

接下来，我们添加几个段落来填充页面内容。为了改善段落的外观，我们尝试通过CSS为其添加边距。

我们尝试在外部样式表中为 #content 添加样式，但发现样式未生效。因此，我们改为在页面内部使用 <style> 标签直接为段落添加样式。

以下是内部CSS样式的示例：

<style>
    p {
        margin-left: 10%;
        margin-right: 10%;
        font-size: 18px;
    }
</style>

应用样式后，段落有了合适的边距和字体大小，页面布局变得更加美观。

创建“服务列表”页面 📋

上一节我们完成了“关于我们”页面。本节中，我们来创建“服务列表”页面。

同样，我们右键点击Web Content目录，创建一个新的JSP文件，命名为 service.jsp。我们复制相同的页眉和页脚结构，并链接外部样式表。

在页面主体中，我们计划展示五项服务。为此，我们创建五个 div 容器，每个代表一项服务，并分别设置ID（如 ser1, ser2 等）。

在每个服务 div 中，我们添加一个服务标题（如“潜在客户开发服务”）。

为了将这些服务水平排列，我们使用CSS的绝对定位（position: absolute）并设置不同的 left 值。

以下是服务容器的CSS定位示例：

#ser1 { position: absolute; top: 10%; left: 0%; width: 20%; }
#ser2 { position: absolute; top: 10%; left: 20%; width: 20%; }
/* ... 以此类推 */

运行后，我们得到了水平排列的服务标题。为了美化，我们在每个标题下添加了宽度为90%且居中的水平线 <hr>。

接着，我们为每项服务添加图片和描述文字。我们使用 <img> 标签插入图片，并设置合适的高度和宽度。

以下是添加图片的代码示例：

<center>
    <img src="lead.jpg" height="200" width="150">
</center>

在图片下方，我们添加一个段落 <p> 来描述服务。为了使段落文字在容器内更美观，我们为其创建一个CSS类 .txt，并设置左右边距。

以下是段落样式的示例：

.txt {
    margin-left: 5%;
    margin-right: 5%;
}

最后，我们在所有服务上方添加一个居中的总标题“我们的服务列表”，并调整了各服务容器的顶部距离，使布局更加协调。

本节课中我们一起学习了如何创建“关于我们”和“服务列表”两个功能页面。我们掌握了使用JSP文件结构、应用CSS进行定位和样式美化，以及插入图片和文本内容的方法，为构建完整的网站打下了基础。

003：创建联系页面 📇

在本节课中，我们将学习如何创建一个联系页面。这个页面将包含一个简单的表单，允许用户输入姓名、邮箱和留言信息，并最终将这些信息通过邮件发送出去。

上一节我们完成了服务页面的创建，本节中我们来看看如何构建联系页面。

首先，我们需要创建一个新的GSP文件。在项目中右键点击，选择新建一个GSP文件，并将其命名为 contact.gsp。

接下来，我们将复制之前服务页面的头部结构到联系页面，并移除其中的主要内容区域。

为了保持页面样式一致，我们需要在头部添加CSS样式表的链接。代码如下：

<link rel="stylesheet" type="text/css" href="mystyle.css">

现在，我们开始构建联系页面的主体内容。页面将被分为左右两个部分。

以下是页面布局的规划：

  • 左侧区域将放置一张图片。
  • 右侧区域将放置一个联系表单。

为了实现左右分栏布局，我们将使用两个 <div> 元素，并为其应用CSS样式。

首先，创建第一个 <div>，其ID为 content1。在这个 <div> 中，我们将添加一张图片。

<div id="content1">
    <img src="contact.jpg" alt="Contact Image">
</div>

为了控制图片的显示，我们可以设置其高度和宽度，并将其居中对齐。

接着，创建第二个 <div>，其ID为 content2。这个区域将用来放置表单。

为了使这两个 <div> 各占屏幕宽度的一半，我们使用内联CSS样式进行定位。

<style>
    #content1 {
        position: absolute;
        top: 0%;
        left: 0%;
        height: 100%;
        width: 50%;
    }
    #content2 {
        position: absolute;
        top: 0%;
        left: 50%;
        height: 100%;
        width: 50%;
    }
</style>

现在，我们在 content2 这个 <div> 中创建表单。为了使表单元素对齐整齐，我们将表单放在一个HTML表格 <table> 中。

表单将包含以下字段：

  • 全名（文本输入框）
  • 邮箱地址（邮箱输入框）
  • 留言（文本域）
  • 提交按钮

以下是表单的基本HTML结构：

<form method="post" action="">
    <table>
        <tr>
            <td>Full Name</td>
            <td><input type="text" name="fname"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="email" name="mail"></td>
        </tr>
        <tr>
            <td>Your Message</td>
            <td><textarea name="msg" rows="5" cols="28"></textarea></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="Contact Us"></td>
        </tr>
    </table>
</form>

我们可以通过CSS进一步调整表单的边距、字体大小和输入框尺寸，使其看起来更美观。

现在，联系页面的前端部分已经完成。接下来，我们需要将网站的所有页面链接起来，实现导航功能。

我们将之前创建好的导航菜单代码复制到联系页面、首页、关于页面和服务页面的相同位置。这样，每个页面顶部都会有一个统一的导航栏，包含“首页”、“关于”、“服务”和“联系”的链接。

导航菜单的链接代码如下：

<nav>
    <a href="index.gsp">Home</a>
    <a href="about.gsp">About</a>
    <a href="services.gsp">Services</a>
    <a href="contact.gsp">Contact</a>
</nav>

同时，我们为这些链接添加一些基础CSS样式，例如设置颜色和激活状态。

完成链接后，网站的所有页面（首页、关于、服务、联系）都可以通过顶部的导航栏相互访问了。

页面链接完成后，下一步是实现表单的后台功能。当用户点击“提交”按钮时，我们需要将表单数据发送到服务器，并通过邮件API将信息发送出去。

首先，我们需要修改表单的 action 属性，使其指向一个处理邮件发送的Servlet。我们创建一个名为 EmailSend 的Servlet类。

在 EmailSend Servlet中，我们将主要处理 doPost 方法（因为表单方法为post）。在该方法中，我们需要执行以下步骤：

  1. 获取表单提交的数据（姓名、邮箱、留言）。
  2. 配置JavaMail API所需的属性（如邮件服务器主机、端口、认证方式）。
  3. 创建邮件会话（Session），并进行身份验证。
  4. 构建邮件消息（Message），设置发件人、收件人、主题和正文。
  5. 使用Transport类发送邮件。

为了使用JavaMail API，我们需要在项目中导入两个必要的JAR文件：activation.jar 和 mail.jar。

以下是Servlet中处理邮件发送的核心代码逻辑概述：

// 1. 获取请求参数
String name = request.getParameter("fname");
String email = request.getParameter("mail");
String message = request.getParameter("msg");

// 2. 设置邮件属性
Properties props = new Properties();
props.put("mail.smtp.host", "smtp.gmail.com");
props.put("mail.smtp.socketFactory.port", "465");
props.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
props.put("mail.smtp.auth", "true");
props.put("mail.smtp.port", "465");

// 3. 创建会话并进行认证
Session session = Session.getDefaultInstance(props,
    new javax.mail.Authenticator() {
        protected PasswordAuthentication getPasswordAuthentication() {
            return new PasswordAuthentication("your-email@gmail.com", "your-password");
        }
    });

// 4. 构建并发送邮件
try {
    MimeMessage msg = new MimeMessage(session);
    msg.addRecipient(Message.RecipientType.TO, new InternetAddress("receiver@example.com"));
    msg.setSubject("New Contact Form Submission");
    msg.setText("Name: " + name + "\nEmail: " + email + "\nMessage: " + message);
    Transport.send(msg);
    System.out.println("Message sent successfully.");
} catch (MessagingException e) {
    throw new RuntimeException(e);
}

最后，在邮件发送成功后，我们可以使用 response.sendRedirect() 将用户重定向到一个成功页面。

本节课中我们一起学习了如何创建一个完整的联系页面。我们从创建GSP文件开始，设计了左右分栏的页面布局，并在右侧集成了一个功能完整的联系表单。随后，我们为网站添加了统一的导航链接。最后，我们深入后端，创建了一个Servlet来处理表单提交，并利用JavaMail API实现了邮件发送功能，从而完成了从用户界面到后台数据处理的全流程。

通过本节的学习，你已经掌握了在Tomcat网站项目中构建交互式页面的基本方法。

004：发送电子邮件 第3部分 📧

在本节中，我们将完成电子邮件发送功能的集成与测试。我们将把从联系表单获取的数据，通过之前创建的邮件发送方法，实际发送到指定邮箱。

上一节我们介绍了如何从JSP页面获取用户输入的数据。本节中，我们来看看如何调用邮件发送方法，并处理可能出现的错误。

运行与测试联系页面

首先，运行服务器并打开联系页面（contact.jsp）。

在表单中输入测试数据。例如，姓名为“Tracy”，邮箱为“abc@gmail.com”，消息为“hello”。

点击“Contact us”按钮后，页面跳转到一个空白页（emailSender页面）。在Eclipse控制台中，可以看到成功获取了表单数据：“Tracy”、“abc@gmail.com”和“hello”。这证明数据获取功能工作正常。

调用邮件发送方法

获取数据后，需要将其发送给用户。我们将使用之前创建的 EmailSender 类的 send 方法。

以下是调用该方法的步骤，需要传入必要的参数：

  1. 发件人邮箱：例如 jasonT.smith2801@gmail.com。
  2. 发件人邮箱密码：该邮箱的登录密码。
  3. 收件人邮箱：例如 tracy@gmail.com。
  4. 邮件主题：例如设为“A lead”。
  5. 邮件正文：将获取的表单数据（姓名、邮箱、消息）拼接成一个字符串。

在Servlet的doGet方法中，添加以下代码来调用发送方法并重定向页面：

// 拼接邮件内容数据
String data = name + " " + mailId + " " + message;

![](https://github.com/OpenDocCN/cs-notes-pt1-zh/raw/master/docs/educba-bd-dpl-tomcat/img/40a468e886f22e987cf0fecc0c6580f7_5.png)

// 调用发送邮件方法
EmailSender.send("jasonT.smith2801@gmail.com", "yourPassword", "tracy@gmail.com", "A lead", data);

![](https://github.com/OpenDocCN/cs-notes-pt1-zh/raw/master/docs/educba-bd-dpl-tomcat/img/40a468e886f22e987cf0fecc0c6580f7_7.png)

// 邮件发送成功后，重定向回首页
response.sendRedirect("index.jsp");

执行代码与错误调试

保存代码并重新运行服务器，再次在联系表单中填写数据并提交。

此时，服务器返回了“500内部服务器错误”。

查看错误日志，发现是代码中缺少了一个括号导致的语法错误（位于EmailSender类第22行附近）。

修复这个语法错误（补上缺失的括号），并确保相关文件已保存。

功能验证

修复错误后，重启服务器并再次测试。

在表单中填写数据（如Tracy, abc@gmail.com, hello）并提交。

页面成功跳转回首页（index.jsp）。同时，在Eclipse控制台中没有再出现异常信息，这表明邮件已经成功发送到指定的收件人邮箱（tracy@gmail.com）。

项目回顾与总结

至此，我们完成了一个使用JavaMail API发送电子邮件的完整功能。

让我们回顾一下整个项目的流程：

  1. 创建并配置了Tomcat服务器。
  2. 创建了首页（index.html/index.jsp）。
  3. 创建样式表（style.css）来美化页面。
  4. 创建了“关于我们”、“服务”和“联系我们”页面。
  5. 在“联系我们”页面（contact.jsp）的表单中，设置action指向处理邮件的Servlet（EmailSender）。
  6. 创建了EmailSender Servlet。在其doGet方法中：
    • 获取表单提交的姓名、邮箱和消息。
    • 调用send方法，传入发件人凭证、收件人地址、主题（“A lead”）以及拼接好的表单数据作为邮件正文。
    • 发送成功后，将用户重定向回首页。
  7. send方法内部配置了邮件会话属性（如SMTP主机、端口、SSL工厂、认证等），创建并发送了邮件。

最终，这个为“XYZ公司”创建的简易网站具备了潜在客户信息收集功能：用户填写联系表单后，信息会通过电子邮件自动发送给指定负责人。

本节课中我们一起学习了如何将前端表单与后端邮件发送服务集成，实现了数据的完整传递，并掌握了基本的错误排查方法。

posted @ 2026-03-29 09:13  绝不原创的飞龙  阅读(3)  评论(0)    收藏  举报