
1.4 创建Web项目示例
1.4.1 在Eclipse中创建Web项目
在Eclipse中创建一个名为firstProject的Web项目的过程如下。
(1)启动Eclipse,在菜单栏中选择File→New→Dynamic Web Project。
(2)打开New Dynamic Web Project窗口,在Project name文本框中输入项目的名称“firstProject”,其他采用默认配置,并依次单击“Next”按钮,打开如图1-19所示的界面,在此界面中,Context root用于指定Web项目的根目录,此处我们设置为chap1,Content directory用于指定存放Web资源的目录,我们采用默认的设置,单击“Finish”按钮。

图1-19 Configure web module settings界面
此时,在Eclipse左侧的项目资源管理器中将显示我们刚刚创建的Web项目firstProject,可以依次展开各节点,显示其目录结构。
1.4.2 在IDEA中创建Web项目
以IDEA2021.3.2版本为例,在IDEA中创建一个名为secondProject的Web项目的过程如下。
(1)打开IDEA,单击菜单File→New→Project,打开“New Project”窗口,在窗口左侧选择“Java”,右侧选择项目SDK版本(Project SDK),再依次单击“Next”按钮,如图1-20、图1-21所示。

图1-20 New Project窗口1

图1-21 New Project窗口2
(2)在打开的窗口中,输入项目名称“secondProject”,并设置好项目存放路径,单击“Finish”按钮,如图1-22所示。

图1-22 设置项目名称及位置
(3)项目建立后,在打开的主界面中,选中左侧的项目名称“secondProject”,单击右键,在打开的菜单中选择“Add Framework Support...”,如图1-23所示。

图1-23 选择“Add Framework Support...”
在之后的界面中选中“Web Application(4.0)”,如图1-24所示,单击“OK”按钮。
(4)完成上述操作后,在项目中会生成Web文件夹,即Web项目结构,如图1-25所示。
(5)选择菜单File→Project Structure,打开Project Structure窗口,在该窗口左侧选择Modules,右侧选择Dependencies选项卡,如图1-26所示。

图1-24 选中“Web Application(4.0)”

图1-25 Web项目结构

图1-26 Dependencies选项卡
(6)单击界面中的“+”,并选择“2 Library...”,如图1-27所示。

图1-27 选择“2 Library...”
(7)打开Choose Libraries窗口,在此窗口中选择Application Server Libraries下配置好的Tomcat服务器版本,如图1-28所示,单击“Add Selected”按钮,再次返回到如图1-26所示的窗口。

图1-28 选择配置好的Tomcat服务器版本
选中窗口中将要添加的Tomcat选项,如图1-29所示,依次单击“Apply”按钮及“OK”按钮。至此,一个完整的Web项目创建完成。

图1-29 选中窗口中将要添加的Tomcat选项