第一个JavaWeb项目

开始之前的一点小准备

1、集成Eclipse与Tomcat

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

(1)在Eclipse中单击“窗口->首选项”菜单项,打开Eclipse中的“首选项”窗口,如下图所示。选择窗口->首选项
(2)在打开的首选项中,依次选择左边栏的 服务器->运行时环境,单击右侧的“添加”按钮添加Tomcat服务器,弹出“新建服务器运行时”窗口。
第一个JavaWeb项目_第1张图片
(3)在弹出的窗口中,选择自己下载的Tomcat版本,我下载的是7.0,所以此处选择“Apache—>Apache Tomcat v7.0”,然后点击下一步。
第一个JavaWeb项目_第2张图片
(4)在新弹出的窗口中选择“浏览”,找到Tomcat的安装根目录,单击完成,至此配置完成。
第一个JavaWeb项目_第3张图片

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

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

2、1 为Eclipse指定web浏览器

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

第一个JavaWeb项目_第4张图片

2.2 指定JSP页面的编码格式

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

第一个JavaWeb项目_第5张图片

**

创建第一个JavaWeb项目

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

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

(1)启动Eclipse,并选择一个工作空间,进入Eclipse的开发界面。
(2)依次打开Eclipse菜单中的“文件->新建->动态web项目”。
(3)在弹出的窗口中,输入项目名称,单击下一步,再单击下一步,勾选”Generate web.xml deployment descriptor”,单击完成,项目创建成功,此时项目资源管理器中会出现刚才创建的项目。
第一个JavaWeb项目_第6张图片

第一个JavaWeb项目_第7张图片

第一个JavaWeb项目_第8张图片

(4)在项目资源管理器中选中刚才创建的项目节点下的WebContent节点,并单击鼠标右键,选择新建JSP文件。
(5)在弹出的窗口中输入jsp文件的名称,例如输入index.jsp,单击完成,此时Eclipse会打打开新建的JSP文件。
第一个JavaWeb项目_第9张图片

第一个JavaWeb项目_第10张图片

(6)在打开的jsp文件中输入想要在浏览器里面显示的内容。
第一个JavaWeb项目_第11张图片
(7)在创建的项目上单击右键,在运行方式上选择在服务器上运行,
按照之前的配置,此时会调用自己设置的浏览器打开这个项目。
第一个JavaWeb项目_第12张图片

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

源码如下:



<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 longh1>center>
<br />
<div align="center">
<img src="images/142732p0gzgh6dp6znigi0.jpg.thumb.jpg" />
div>
body>
html>

运行后效果如下:
第一个JavaWeb项目_第13张图片

你可能感兴趣的:(JavaWeb)