JavaRush /Java 博客 /Random-ZH /在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。一步步来,有图
Стас Пасинков
第 26 级
Киев

在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。一步步来,有图

已在 Random-ZH 群组中发布
理解本文所需的知识水平:您已经或多或少地了解了 Java Core,并且想了解 JavaEE 技术和 Web 编程。如果您当前正在研究 Java Collections 任务,那么它是最有意义的,它涵盖了与本文接近的主题。 在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 1我目前正在使用 IntelliJ IDEA 企业版(这是 IDE 的付费高级版本,通常用于专业开发 -编者注)。与免费的社区版相比,处理 Web 项目要容易得多。因此,在企业版中,只需单击一下鼠标,即可组装项目,将其倒入 servlet 容器中,启动服务器,甚至在浏览器中打开包含正在运行的项目的页面。在这个想法的免费版本中,大部分工作都必须独立完成,可以说是“手工”。我使用 Apache Maven 来构建项目并管理其生命周期。在此,我仅使用了其功能的一小部分(包/依赖项管理)。我选择 Apache Tomcat 版本 9.0.0.M4 作为 servlet 容器/应用程序服务器。我知道已经有更新的版本,但这是我安装的版本。

让我们开始吧

首先,让我们打开 IntelliJ IDEA 并创建一个空的 Maven 项目。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 2
在左侧我们选择 Maven,检查项目的 JDK 是否显示在顶部。如果不存在,请从列表中选择您需要的,或单击“新建...”并直接从您的计算机中选择。在窗口中间,我有一个加载原型列表的动画。我们不需要它们,因此无需等待下载,即可单击窗口底部的“下一步”。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 3
在此窗口中,您需要指定GroupId 和 ArtifactId。GroupId是指制作该项目的公司的唯一标识符。通常的做法是使用公司的域名,但顺序相反。不是镜像意义上的,但例如,如果一家公司的域名是 maven.apache.org,那么它的 GroupId 将是org.apache.maven。也就是首先我们写一级域名,用点分隔,再写二级域名的名称,以此类推。这是普遍接受的方法。如果您自己“削减”一个项目,而不是作为公司的一部分,请在此处写下您的个人域名(也以相反的顺序!)。如果你有的话,当然可以:)。如果没有,请不要沮丧。事实上,你可以在这里写任何东西
对于域名为 vasya.pupkin.org 的公司,GroupId 将为 org.pupkin.vasya。为了区分具有相同名称但由不同公司发布的项目,需要这种名称方法。
在此示例中,我将使用虚构的域名fatfaggy.info.javarush.ru。因此,我在GroupId字段中输入ru.javarush.info.fatfaggyArtefactId只是我们项目的名称。您可以使用字母和一些符号(例如连字符)来分隔单词。我们的“工件”的名称将与我们在这里所写的完全一样。在此示例中,我编写了my-super-project。我们暂时不触及版本字段,保持原样。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 4
嗯,创建新项目时的标准IDEA窗口。按照传统,我们将其称为“我的超级项目”
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 5
项目已创建!
pom.xml 文件立即在我们面前打开。这是一个包含 Maven 设置的文件。如果我们想“告诉”Maven 做什么、如何做或者从哪里获取某些东西,我们就在这个 pom.xml 文件中描述所有这些。它位于项目的根目录。
我们看到它现在包含了我们在创建 Maven 项目时输入的数据:groupIdartifactIdversion(我们没有触及后者)。

我们的项目结构

这个Maven项目有一定的结构。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 6
正如我们所看到的,其根源在于:
  • .idea目录,包含当前项目的 idea 设置;
  • 我们在其中创建源代码的src目录;
  • my-super-project.iml文件,IDEA 创建的项目文件;
  • pom.xml文件,与我上面谈到的相同 Maven 项目文件,我们现在已经打开了。如果我在某处提到 pom.xml 或“pom”,我指的是这个特定的文件。
src文件夹又包含两个子文件夹:
  • main - 我们的代码;
  • test - 用于测试我们的代码。
main和test都有一个java文件夹。假设它们是同一个文件夹,只有main中的一个用于源代码,test中的一个用于测试代码。我们暂时不需要资源文件夹,我们不会使用它。但还是让他躺着吧。

变成一个web项目

现在是我们将 Maven 项目转换为 Web 项目的时候了。为此,请右键单击此树中的项目名称,然后选择添加框架支持...
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 7
将打开一个窗口,我们可以在其中为项目的各种不同框架添加支持。但我们只需要一个:Web 应用程序。我们选择他。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 8
我们检查Web Application 旁边是否有一个复选标记,并且在窗口的主要部分中注意到我们希望立即为我们创建一个web.xml文件(如果不存在,我建议选中该框) 。之后,我们将看到我们的项目结构已补充了web文件夹。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 9
这是我们网络项目的根目录/。也就是说,如果我们在浏览器中输入 localhost 地址(当然,当我们启动它时),那么它将准确地在这里访问到 Web 项目的根目录。如果我们输入localhost/addUser ,那么web文件夹将查找名为addUser的资源。
主要是要明白,当我们上传到Tomcat时,web文件夹是我们项目的根目录。现在我们有了一定的文件夹结构,但是在我们将上传的完成的项目中,它会略有不同,web文件夹将是根目录。
web中,有一个名为WEB-INF的必需文件夹,其中包含我们在上一步中要求创建的web.xml文件。让我们打开它。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 10
正如你所看到的,它还没有什么有趣的东西,只有“帽子”。顺便说一句,如果我们没有要求创建它,我们可能不得不手动创建它,即手动输入整个“标题”,或者在极端情况下,在互联网上寻找现成的版本。web.xml是做什么用的?用于测绘。这里我们将告诉 Tomcat 哪个 URL 请求发送到哪个 servlet。但这都是以后的事了,现在我们将其留空。web文件夹中还有一个名为index.jsp的文件。让我们打开它。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 11
可以说,这是默认情况下将执行的文件。也就是说,当我们启动该项目时,这正是我们将看到的。本质上,jsp是一个普通的html文件,不同之处在于你可以在其中执行java代码。

关于静态和动态内容的一些知识

静态内容是不随时间变化的内容。我们在 html 文件中编写的所有内容都将原样显示。如果我们写的是hello world,那么我们一打开页面就会显示这个铭文,5分钟后、明天、一周后、一年后都会显示这个铭文。她不会改变。但是如果我们想在页面上显示当前日期怎么办?如果我们简单地写“2017 年 10 月 27 日”,那么明天、一周后和一年后我们都会看到相同的日期。但我希望这个日期仍然具有相关性。这就是直接在页面内执行某些代码的能力对我们有所帮助的地方。我们可以获取一个日期对象,将其转换为我们需要的形式并显示在页面上。然后每天,每当我们打开页面时,日期总是相关的。如果我们只需要静态内容,那么常规的 Web 服务器和 html 文件就足够了。我们不需要任何 Java、Maven 或 Tomcat。但如果我们想使用动态内容,这一切就会派上用场。但现在让我们回到我们的index.jsp。让我们指示一些我们自己的内容而不是标准标头,例如“我的超级网络应用程序!”,并在正文中编写,例如“我还活着!” 我们几乎准备好启动我们的项目了!但不幸的是,启动该程序的通常绿色三角形并未激活。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 12
让我们单击左侧的按钮(在屏幕上用红色箭头指示)并选择编辑配置... 将打开一个窗口,要求我们单击绿色加号以添加某种配置。单击它,它位于窗口的左上角。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 13
选择Tomcat Server项和Local 子项。 将打开一个包含许多不同参数的窗口,但我们对几乎所有参数和默认参数都很满意。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 14
我们可以以某种方式很好地命名我们的配置,而不是标准的未命名(在最顶部)。还需要检查idea是否在我们的系统中成功找到了Tomcat(您之前已经下载并安装了它,对吧?)。如果您找不到它(这不太可能),请单击向下箭头并选择我们安装它的位置,或者如果您有多个版本,则选择其他版本。我有一个并且已经安装了,所以一切都如屏幕截图所示。在窗口的最底部,我们看到有一条警告,表明没有任何工件要部署到服务器。在这个铭文的右侧有一个按钮可以纠正这个缺陷。我们点击它,看到这个想法本身找到了一切,自己创造了一切,它缺少什么,并自行进行了所有设置。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 15
我们看到我们从Server选项卡转移到了Deployment选项卡,在Deploy at the serverstarting部分我们已经有了需要部署的工件,并且下面表明该工件将在部署之前构建。 申请一下,好的。 我们首先看到,在窗口底部出现了一个部分,其中包含我们的本地 Tomcat 服务器,我们的工件将放置在其中。您可以通过单击窗口右侧的相应按钮来折叠此部分。
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 16
我们还看到用于启动的绿色三角形已经处于活动状态。对于那些想要检查所有内容的人,您可以单击带有项目设置的按钮(在启动按钮的右侧,标有红色箭头),转到工件部分确保工件确实已创建。直到我们按下“修复”按钮之前它才出现,但现在一切正常。而且这个配置非常适合我们。简而言之,my-super-project:warmy-super-project:warexploded之间的区别在于my-super-project:war只会创建一个war文件(这只是一个存档),并且选项爆炸根本就是一场“拆包”战争。这个选项对我个人来说更方便,因为它允许我快速将小的更改部署到服务器。事实上,该工件就是我们的项目,只是已经编译好了,并且其中的文件夹结构已更改,以便可以直接上传到 Tomcat。它看起来像这样:
在 IntelliJ Idea Enterprise 中创建一个简单的 Web 项目。 一步一步,带图片 - 17
好了,现在一切准备就绪,可以启动我们的项目了。 我们按下令人垂涎的绿色启动按钮并享受结果!:)
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 18
评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION