从零开始学习 JavaWeb - 04 建立JavaWeb

时间 2020-09-10

标签开始学习 javaweb 建立栏目 Java 繁體版

原文原文链接

简述:

在前面的文章中，咱们已经下载并安装 IDEA、Tomcat 和 Maven了。如今来经过IDEA 建立带有 Maven 的 JavaWeb。css

建立 JavaWeb:

1.建立简单的JavaWeb模板:

1.打开IDEA，选择下面的选项建立目录.
html

2.出现下面的页面，选择 maven -> 勾选 Create from archetype -> 选择 org.apache.maven.archetypes:maven-archetype-webapp -> Next. 注意图下第二步上面咱们能够选择 JDK 版本。蓝色框的也是一个 webapp, 框出来是为了提醒别选错 webapp.
java

3.选择项目存放的目录位置，下面红色框柱的 GroupId、ArtifactId、Version 这几个，我后面补全，若是本身想知道的，能够先去查别的文档。由于是学习Demo，我直接用默认的。
web

4.选择Maven 的版本后，选择右下角的 FINSH 完成按键，而后下面的配置，我也是后面补全。
apache

5.完成后出现下面的是由于要安装依赖/插件，这个时候，咱们能够看到目录结构中是没有 src 文件夹的。安装可能比较久，不能心急。
浏览器

6.依赖/插件安装后后，会出现 src 这个文件夹
若是没有，能够按下面进行
🅐按住下面图片第一右键文件夹，选中 Reload from Disk, 刷新一下。

🅑

src的目录结构
tomcat

2.webapp的建立：

由于这里我不想将 webapp 放在 main 里面，我这里会把 webapp 删除掉，而后在 src 的同级目录下建立先的 webapp. 若是不想看这里的话，能够跳到看下一步。
1.打开 Project Structure, Project Structure 在菜单 Flie 选项下面，咱们能够用快捷键 ⌘ + ; 打开。服务器

2.打开 Project Structure后，咱们选择 Modules -> + 号后，选择 Web.
(Ps: 第一图中，咱们能够看到项目文件下面有个Web, 那是咱们删除原来在 main下面的webapp的目录时候，没有在这里删除，咱们能够点击这个目录后，经过 - 号键删除)

app

3.点击Web后，生成目录下面正确的webapp, 由于咱们要放在 src 的同级目录下先作①选择修改

➊.我的建议直接修改路径，不要选择后面的 ... 去选择文件夹，我这里是将 web 修改成了 webapp, introductionJavaWebDemo 是的项目目录，由于我但愿 webapp 跟 src 目录是同级的，因此直接修改成 webapp 就好了。后面的 WEB-INF/web.xml 不要动。

➋.修改完之后，选择2修改，出现下面的弹框，而后这里是 resource directory path, 设置跟➊里面的路径同样就好了，只是少了 /WEB-INF/web.xml 这一段。而后选择 ok.

若是出现下面的状况，选择 YES 就好了
webapp

建立完成后的目录结构

3.建立 index.jsp：

1.右键webapp -> New -> JSP/JSPX

2.输入 index 后回车

3.生成的index.jsp

4.建立资源文件夹和编写简单 html 展现：

1.建立 assets 文件夹，目录结构以下，assets 这个文件夹主要用来存放静态资源，如 image、css、js等。

2.修改 index.jsp 为下面内容。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>introductionJavaWebDemo</title>
    <link rel="shortcut icon" type="image/ico" href="/assets/favicon.ico" mce_href="/assets/favicon.ico" />
</head>
<body>
    <div>
        This is a JavaWeb Demo
    </div>
</body>
</html>

5.建立 Artifacts:

1.打开 Project Structure，而后选择 Artifacts, 咱们能够看到红框中已经有了 artifacts 了。经过 - 号先删除它们。

2.建立 artifacts流程, + -> Web Application: Exploded -> From Modules...

3.选择对应的 modules,而后肯定，再肯定就能够了。

6.经过 Tomcat 启动 Web 服务器，展现 index.jsp：

1.打开 Run 的 configurations 进行设置, 能够点击下图框柱的地方，或者菜单栏 -> Run -> Edit Configuartions...

2.打开后，经过 + -> Tomcat Server -> Local 建立 IDEA 和 Tomcat Server 的关联。

3.标记①那个是名字，能够先无论，咱们点击②里面 CONFIGURE... 按钮打开

4.咱们能够看到这里已经有一个 Tomcat 9.0.20 这个是我以前下载的另外一个版本，配置过的其余学习案例的，这里咱们要选择咱们以前下载的 Tomcat 9.0.37 版本。+ 号键新增

5.点击 Tomcat Home 后面的小图标打开选择目录。

6.找到咱们下载的 tomcat 9.0.37 版本的存放位置，选中文件夹后，点击 open 肯定。

7.下面的 Tomcat base directory 会自动填写。若是没有，Tomcat base directory后面的小图标重复一次 5和6的操做。没问题确认。

8.咱们能够看到下图咱们新增的 Tomcat 9.0.37版本，选中直接按确认。

9.完成上一步后，咱们能够看到 Application server 里面变成了Tomcat 9.0.37 版本，若是咱们以前在IDEA配置过，其实直接省略第3到第8步，直接点击中间的会出现以前新建过的 Tomcat 版本选择。

10.完成了Tomcat的基本配置，咱们如今来进行部署。
(Ps: IDEA这个工具，它会帮咱们把关联的 Tomcat 进行部署起来，全部省了咱们不少功夫和设置配置的时间。若是想具体了解原始的部署流程，请本身查询文章)

11. + 号键咱们选择 Artifact...。这个Artifact 就是咱们上面建立的 Artifacts。

12.由于我但愿打开Tomcat服务器的时候，映射到的是 http://localhost:8080/ 这个路径而不是 8080/ 后面加一大串的路径，全部把 Application context 改为了 /。修改完后确认。

13.回到项目，咱们能够看到 ①的地方变了，而后咱们按②的小按钮启动 Tomcat.

14.启动后，自动打开默认浏览器，这里显示的就是 index.jsp 的内容，下面表明运行成功。