Idea 社区版创建 Web 项目
一、说明
Idea Community 社区版不兼容 Tomcat ,因此,不能像 Ultimate 那样可以直接使用插件创建 Web 项目。因此,如果不了解社区版的巧妙方式,可能会比较麻烦。
这里就以 Idea 的 Community 2019.3.4 作为集成开发环境,介绍如何创建一个 Web 项目。
二、步骤
1、创建 Maven 项目
首先,打开 Idea,选择创建新项目。

在弹出的 New Project 窗口中,选择 Maven。
然后,选择相应版本的 Project SDK,这里选择 Java 11。接着,勾选 Create from archetype,在窗口中间的包中,选择 maven-archetype-webapp,点击 Next 下一步。

在下一个页面,给“项目命名”和“设置项目文件位置”,这个因需求而异。这里就以 web-project 作为项目名称,项目文件位置存在 C 盘上。

接下来的新页面,除了设置好 Maven home directory 路径,其他默认就行,然后点击 finish 即可。

随后,Idea 会自动生成项目文件,弹出的新的窗口,右下角有一个 Maven projects need to be imported ,这里选择 import Changes ,以便更新包。

我们可以仔细看下文件目录,会发现,项目已经是传统 Web 项目的风格,main 下有 webapp 目录,然后在 webapp 下又有 index.jsp 和 WEB-INF,最后就是 WEB-INF 下有 web.xml 文件。这些就是一个 Web 项目最基本的文件结构。

2、使用 Smart Tomcat 插件
以上步骤已经把 JDK 和 Maven 配置好了,项目文件也创建好了,自然,我们就需要配置 Tomcat 容器,以便可以启动项目。
由于社区版去掉了支持 Tomcat 的功能部分,因此,我们可以使用 Smart Tomcat 插件来代替。
首先,需要添加 Smart Tomcat 插件,点击 File,选择 Settings。

弹出的窗口,选择 Plugins,而后在搜索栏中输入 Smart Tomcat。

如果搜索不出来,我们可以接着选择下面的 Search in Marketplace 选项。

搜索出来后,选择 install 安装,而后重新启动 Idea 即可。

3、配置 Smart Tomcat 模板
选好了 Smart Tomcat 插件,接下来就需要配置模板。
点击 Idea 右上角的 Add Configuration。

弹出的窗口,在 Templates 下选择 Smart Tomcat。由于没有可选的 Tomcat server 服务器,因此需要配置,故而点击 Configure。

弹出窗口,选择 Tomcat Server,而后,选择符号“+”。接着,弹出窗口 Select Tomcat Server,选择本地 Tomcat 路径即可。

接下来,可以修改 Name,这里选择默认。而后,点击 Apply 和 OK 即可。

接下来,就回到之前的窗口,设置 Smart Tomcat 信息。其中,主要配置 Tomcat server、Deployment directory、Context path。
Tomcat server,选择之前配置的本地 Tomcat 即可;
Deployment directory,选择项目的部署目录,也就是 webapp 目录;
Context path,访问路径填写除了服务器域名和端口以外的内容,这里选择默认的访问路径“/”。
其他的内容,默认就可以了,而后点击 Apply。

虽然点击了 Apply,但是,事情还没有结束,因此不能马上点击 OK。这里是配置了通用的 Smart Tomcat 模板,这样做可以方便其他的项目使用这个通用的配置。
为了针对本项目的启动,还需要再添加一个具体的针对本项目运行的配置。在 Run/Debug Configuration 窗口,选择符号“+”。接着,选择 Smart Tomcat。

新弹出的窗口,由于该配置已经借鉴引用了之前的通用配置,故而不需要大的调整了,这里修改一下 Name 名称就可以。当然,如果有变得的话,也可以调整一下配置的其他属性信息。最后,点击 Apply 和 OK 即可。

到了这里,就完成了整体的基本配置工作了。
4、启动 Tomcat
最后,我们启动一下 Tomcat,看下能够把程序跑起来。点击 Idea 右上角的绿色三角,该三角表示运行。

然后,就会在 Idea 窗口下半部分,Console 打印出日志出来,显示项目启动的情况。

我们可以通过浏览器输入链接:http://localhost:8080,访问站点。

到这里,就算是整个 Web 项目创建成功了。剩下的,就是根据实际需要,不填调整项目的内容了。
评论