开始之前的一点小准备

1、集成Eclipse与Tomcat

在开发过程中,如果通过手动方式来部署、运行web项目,其开发过程会很繁琐,而且效率低下。为了提高开发效率,需要将Tomcat服务器配置到Eclipse中,为web项目指定一个web应用服务器。这样就可以在Eclipse中操作Tomcat,并自动部署和运行web项目。将Tomcat配置到Eclipse中的步骤如下:

(1)在Eclipse中单击“窗口->首选项”菜单项,打开Eclipse中的“首选项”窗口,如下图所示。

选择窗口->首选项


(2)在打开的首选项中,依次选择左边栏的 服务器->运行时环境,单击右侧的“添加”按钮添加Tomcat服务器,弹出“新建服务器运行时”窗口。

java 详细设计文档示例_java 详细设计文档示例_02


(3)在弹出的窗口中,选择自己下载的Tomcat版本,我下载的是7.0,所以此处选择“Apache—>Apache Tomcat v7.0”,然后点击下一步。

java 详细设计文档示例_html_03


(4)在新弹出的窗口中选择“浏览”,找到Tomcat的安装根目录,单击完成,至此配置完成。

java 详细设计文档示例_java web_04

2、完善web项目开发所需配置

在集成Eclipse与Tomcat后,已经可以进行web项目开发。但还有两个小细节应该注意,分别是为Eclipse指定web浏览器和指定Eclipse中JSP页面的编码格式。

2、1 为Eclipse指定web浏览器
默认情况下,Eclipse使用它自带的内部浏览器,但在开发过程中,使用这一浏览器有些不方便,所以通常要为它指定一个浏览器。
(1)打开Eclipse菜单中“窗口->首选项”,一次打开“常规->web浏览器”。
(2)在右边选择“使用外部web浏览器”,然后勾选自己想用的浏览器,最后点击确定。

java 详细设计文档示例_web项目_05

2.2 指定JSP页面的编码格式
默认情况下,Eclipse中创建的JSP页面是“ISO-8859—1”编码格式,此编码不支持中文字符集,在JSP页面中编写中文回出现乱码现象,所以需要为其指定一个支持中文的字符集。
(1)打开Eclipse菜单中“窗口—>首选项”,依次打开“web—>JSP文件”。
(2)在编码的下拉裂变里面选择“ISO 10646/Unicode(UTF-8)”,最后单击确定完成设置。

java 详细设计文档示例_web项目_06

**

创建第一个JavaWeb项目

**
通过Eclipse新建项目并将其发布到Tomcat中运行。

1、 创建第一个web项目的步骤

(1)启动Eclipse,并选择一个工作空间,进入Eclipse的开发界面。

(2)依次打开Eclipse菜单中的“文件->新建->动态web项目”。

(3)在弹出的窗口中,输入项目名称,单击下一步,再单击下一步,勾选”Generate web.xml deployment descriptor”,单击完成,项目创建成功,此时项目资源管理器中会出现刚才创建的项目。

java 详细设计文档示例_java 详细设计文档示例_07


java 详细设计文档示例_首选项_08


java 详细设计文档示例_java 详细设计文档示例_09

(4)在项目资源管理器中选中刚才创建的项目节点下的WebContent节点,并单击鼠标右键,选择新建JSP文件。

(5)在弹出的窗口中输入jsp文件的名称,例如输入index.jsp,单击完成,此时Eclipse会打打开新建的JSP文件。

java 详细设计文档示例_web项目_10


java 详细设计文档示例_web项目_11

(6)在打开的jsp文件中输入想要在浏览器里面显示的内容。

java 详细设计文档示例_java web_12


(7)在创建的项目上单击右键,在运行方式上选择在服务器上运行,

按照之前的配置,此时会调用自己设置的浏览器打开这个项目。

java 详细设计文档示例_web项目_13

到此就完成了第一个简单的JavaWeb项目,向浏览器输出简单的字符。座位练习们还可以试着将一张图片输出到jsp页面中。

源码如下:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello,world!</title>
</head>
<body>
<center><h1>Hello,world!I'm long</h1></center>
<br />
<div align="center">
<img src="images/142732p0gzgh6dp6znigi0.jpg.thumb.jpg" />
</div>
</body>
</html>

运行后效果如下:

java 详细设计文档示例_web项目_14