Java Web动态网站开发：第2版（微课版）最新章节_张桓著

任务1.5 拓展实训任务

本任务主要对IDEA中创建Java Web动态网站项目和运行项目进行讲解。

拓展实训任务

1.5.1 拓展实训任务简介

下面将通过一个拓展实训任务来讲解如何在IDEA中创建一个Java Web动态网站项目，以及如何运行这个项目。

我们先来了解一下这个项目。一个Java Web的动态网站项目中包括两个页面：一个是站点的首页（index.jsp），如图1-29所示；另一个是单击首页中的链接后跳转的页面（first.jsp），如图1-30所示。

图1-29　index页面的运行效果

图1-30　first页面的运行效果

1.5.2 拓展实训任务实现

本项目使用IDEA实现Java Web动态网站项目的创建，具体步骤如下。

1. 创建项目

（1）启动IDEA后，在IDEA主工作界面中，依次选择“File”→“New”→“Project”菜单项。单击“Project”菜单项之后，出现“新建项目”对话框。选择对话框左侧列表框内的“Java模块”。在对话框右侧区域选项中勾选“Web Application”选项，然后单击“下一个”按钮，如图1-31所示。

图1-31　选择项目的类型

（2）选择所创建项目的类型之后，在后续界面中为项目命名（此处将项目命名为MyTestSite），并指定项目存储的路径，然后单击“完成”按钮，如图1-32所示。

图1-32　指定项目的名称和保存位置

（3）创建项目之后，在IDEA的项目管理面板中，将显示出项目的整体结构。一般情况下，把Java程序中的包和类等内容放在src（源文件）目录下，把网站的静态与动态网页以及相关网站资源放在web目录下。项目创建后会默认提供一个初始的网站首页，其初始结构如图1-33所示。

图1-33　项目的初始结构

2. 在已有项目中新建JSP页面

（1）根据之前介绍的项目需求，创建另一个JSP页面first.jsp。选择项目结构中的“web”文件夹，单击鼠标右键，在弹出的快捷菜单中，选择“JSP/JSPX”命令，如图1-34所示。

图1-34　创建新的JSP页面

（2）在弹出的“Create JSP/JSPX page”对话框中，填写页面名称first.jsp，如图1-35所示。

图1-35　填写JSP页面的名称

3. 在JSP页面中添加代码

（1）根据之前介绍的项目需求，在首页index.jsp中添加代码，实现首页的功能，具体代码如下。

<%@page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试站点首页</title>
</head>
<body>
     第一个测试页面！<br><br>
<a href="first.jsp">链接另一个测试页面</a>
</body>
</html>

添加代码后的index页面的代码视图，如图1-36所示。

图1-36　index页面的代码视图

（2）根据之前介绍的项目需求，在另一个页面first.jsp中添加代码，实现另一个页面的功能，具体代码如下。

<%@page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>另一个测试页面</title>
</head>
<body>
     第二个测试页面！
</body>
</html>

添加代码后的first页面的代码视图，如图1-37所示。

图1-37　first页面的代码视图

4. 运行项目

（1）在IDEA主工作界面的右上角单击下拉列表框，选择“编辑配置”列表项，如图1-38所示。

图1-38　“编辑配置”列表项

（2）在弹出的“运行/调试配置”对话框左侧列表框内选择“Tomcat Server”下的“Local”。选择“Local”后，对话框的右侧会出现配置界面。单击“Deployment”标记。在该标记页中，单击“+”按钮，在弹出的菜单中选择“Artifact”命令，如图1-39所示，将项目部署到Tomcat服务器上，如图1-40所示。

图1-39　Deployment标记页

图1-40　部署项目

（3）在项目结构中，选择“index.jsp”，单击鼠标右键，在弹出的快捷菜单中，选择“运行‘index.jsp’”命令，如图1-41所示。

图1-41　“index.jsp”的快捷菜单

（4）单击该命令后，将启动Tomcat服务，并在系统默认浏览器中显示站点的首页（见图1-29）。单击首页中的链接，可以打开另一个页面（first.jsp）（见图1-30）。