目录

徒手搭建SSM开发环境一Servlet篇上使用IDEA开发工具搭建Web项目

【徒手搭建SSM开发环境一】Servlet篇(上)——使用IDEA开发工具搭建Web项目

使用IDEA开发工具搭建WEB项目

1. 使用开发工具IDEA 创建一个新项目

https://i-blog.csdnimg.cn/blog_migrate/58ace4a0a9cb4c7ad8823169134b423c.png

2,构建工具选择Maven,JDK版本选择1.8,并点击next

https://i-blog.csdnimg.cn/blog_migrate/c313fcc035c79ad9ded82125a238ce68.png

3,修改项目名称为ssm-demo,并将GroupID修改为org.demo,其他选项默认,并点击finish完成项目创建

https://i-blog.csdnimg.cn/blog_migrate/71b6e3fae0fba7f9dbcc4c3cb31742e5.png

4,在src/main/文件夹下创建webapp文件夹,用于存放web应用相关资源

https://i-blog.csdnimg.cn/blog_migrate/1913b8c53764abf8bd54263242a436e7.png

https://i-blog.csdnimg.cn/blog_migrate/c451a2646bedca5f36ef1267d7a047eb.png

5,在上一步创建的webapp文件夹创建inde.jsp文件,index.jsp为WEB项目首页

https://i-blog.csdnimg.cn/blog_migrate/425cca20454a862e19ed1ce431fe342e.png

https://i-blog.csdnimg.cn/blog_migrate/04aea864eb42fe3b1f5710e87452af1e.png

WEB 项目启动后,WEB容器(说明:WEB服务器,此处以tomcat为例,本中提及到的WEB容器和servlet容器,如无特殊说明,都是指tomcat)默认使用index.jsp作为项目的首页,这是在WEB容器的配置文件中进行配置的

https://i-blog.csdnimg.cn/blog_migrate/b0e3a3c08cc5f13a6ce0c1536f91c1e6.png

https://i-blog.csdnimg.cn/blog_migrate/7f244d9b0239ad67e79a2a7b7e1e63fc.png

由配置文件可知,此处的主页也可以是index.html,或者index.htm,此处就以index.jsp为例

6,向index.jsp中添加首页HTML代码内容

https://i-blog.csdnimg.cn/blog_migrate/94f1c96b3cdb8ac2b1229eb652467718.png

<html>
<head>
    <title>Title</title>
</head>
<body>
<h1>Hello SSM!</h1>
</body>
</html>

7,第4步创建的webapp文件夹下创建WEB-INF文件夹,用于存放WEB项目配置文件,并在此文件夹下创建WEB项目配置文件web.xml

https://i-blog.csdnimg.cn/blog_migrate/c7bdb3cfb9f36da0ef8e4dae171a460b.png

8,向web.xml文件中添加基本的项目配置信息

https://i-blog.csdnimg.cn/blog_migrate/21a6190dad817ceff5ba69e653a815b5.png

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app40.xsd"
         version="4.0">

    <display-name>SSM yyds in my heart</display-name>

</web-app>

此处为固定写法,直接复制粘贴即可,display-name标签的内容可以进行修改,此标签配置的只是WEB容器管理界面中显示的项目名称,在 《【徒手搭建SSM开发环境二】Servlet篇(下)——搭建Servlet应用》5.12 部分可以看到该内容, 此处可以先不用关注。此文件中除display-name标签外的文件头以及根标签的内容,可以直接在WEB容器的配置文件中找到,直接复制过来即可

https://i-blog.csdnimg.cn/blog_migrate/684514e8f4064ae6b4be0bd46233236a.png

https://i-blog.csdnimg.cn/blog_migrate/7d5cb76832779a47a40ac446c174ee1f.png

9,对项目的编译方式进行相关的配置

9.1 点击开发工具IDEA左上角的 File,在弹出的选项中选择Project Structure

https://i-blog.csdnimg.cn/blog_migrate/c128bdaef18317ea5dea303acc3968ae.png

9.2 在弹出的窗口中,选择Project标签,然后将Project JDK 设置为 1.8 并且将Project language level 设置为对应的 8-Lambdas,type annotations etc. 此处为对项目的JAVA集成开发环境的版本进行配置

https://i-blog.csdnimg.cn/blog_migrate/03898901170d195ac86af0d133119158.png

9.3 继续在Project Structure 窗口中,选择Modules标签,查看是否已有相应的module配置,一般情况下,此配置会自动生成, 如果出现由于开发工具IDEA版本原因造成的没有自动导入的情况,则点击 + 号,选择 Import Module,并在弹出的文件夹选择框中选择自己的项目即可 此处为对项目需要进行编译的模块进行配置

https://i-blog.csdnimg.cn/blog_migrate/f766e3e7f6b36ebca210e5325e2a12a1.png

如果没有上图所示的配置,则按照下边图所示步骤进行操作

https://i-blog.csdnimg.cn/blog_migrate/ca9fdd5e898f1a203253e62f1b77a3fb.png

https://i-blog.csdnimg.cn/blog_migrate/f2b486ddfc83348d39df519b321a4d11.png

9.4 继续在Project Structure 窗口中,选择Facets标签 ,对项目的WEB相关的内容进行配置 点击 + 号,在弹出的选项中,将滚动条向下滑动,找到web选项,并点击

https://i-blog.csdnimg.cn/blog_migrate/bba01006c20dce3c9c8d436f4a90f835.png

在弹出的Choose Module 窗口中,选择自己的项目,然后点击OK

https://i-blog.csdnimg.cn/blog_migrate/ee791934a6745dbe62bb82e72458dd73.png

点击OK后,会跳转到Modules标签界面,并在Modules标签界面中生成WEB项目的 部署描述文件 (web.xml)和 WEB项目的资源文件夹(webapp) 的路径的默认配置,对这些默认配置进行修改,如下:

(1)在Deployment Descriptors 列表中选中 Path 列与自己项目对应的一行 ,点击 铅笔 图标进行编辑

https://i-blog.csdnimg.cn/blog_migrate/46e42cc093d4906fb53d6bbc4b5e12dd.png

(2)在弹出的窗口中点击 … 按钮

https://i-blog.csdnimg.cn/blog_migrate/e606040bfeb78c8ae31af69e8c0ab0be.png

(3)在弹出的文件选择窗口中选择我们在第7步中创建的web.xml文件,然后点击OK

https://i-blog.csdnimg.cn/blog_migrate/97f475dea8511374b99e9e8f346f211d.png

(4) 再次点击 OK 完成 WEB项目部署描述文件 的配置

https://i-blog.csdnimg.cn/blog_migrate/dfd4283f964497c455584067ff9dec70.png

(5)在Web Resource Directories 列表中选择Web Resource Directory 列与自己项目对应的一行 ,点击 铅笔 图标进行编辑

https://i-blog.csdnimg.cn/blog_migrate/c7a2d7ec50daed6b8d68c0e26f39f23b.png

(6) 在弹出的窗口中,点击文件夹选择按钮

https://i-blog.csdnimg.cn/blog_migrate/81868f192ac8b7f1b58242a45a04b91a.png

(7)选择在第2步中创建的webapp文件夹,并点击OK

https://i-blog.csdnimg.cn/blog_migrate/bb51f362b81cc90bb43b5d3b41cfa164.png

(8)再次点击OK,完成WEB项目资源文件夹的配置

https://i-blog.csdnimg.cn/blog_migrate/9d84c4b8c6cad72b5b90dfbc0f8852ee.png

9.5 上述9.4中相关的配置完成后,在当前Modules选项界面的下方有一个黄色叹号警告,显示 Web Facet resources are not included in an artifact, 此处可以直接点击 叹号后边的 Create Artifact 按钮创建项目制品配置(编译文件目录结构,打包文件属性),也可以选择Artifact标签,新建项目制品配置 (编译文件目录结构,打包文件属性)

(1)直接点击Create Artifact 创建项目制品配置(编译文件目录结构,打包文件属性)

https://i-blog.csdnimg.cn/blog_migrate/c59635393c7c0944d484268b0e44f69b.png

https://i-blog.csdnimg.cn/blog_migrate/787571c85138f45a17c1422ed4751eff.png

此处需要修改一下Output directory,习惯上会将编译文件和最终的打包文件放在项目根路径下的target目录下,所以将Output directory路径中的out修改为target

https://i-blog.csdnimg.cn/blog_migrate/e72df103aa643ad9446bcbdd1f34c4a9.png

(2)从Artifact选项,新建项目制品配置(编译文件目录结构,打包文件属性)

点击Project Structure 窗口中的Artifact标签,点击 + 号,在弹出的窗口中选择 Web Application: Exploded ,再在弹出的备选项中选择From Modles

https://i-blog.csdnimg.cn/blog_migrate/466c73bd2637e1723ec80f8abf7bd110.png

在弹出的Select Modules 窗口中选择自己的项目,并点击OK

https://i-blog.csdnimg.cn/blog_migrate/b765b7136e8193563a3bf72263322618.png

此处同样是将Output directory路径中的out修改为target

https://i-blog.csdnimg.cn/blog_migrate/aa7d1cb905ffa8919e999d22dc5a1c7d.png

9.6 完成上述9.2- 9.5中的所有配置后,点击Project Structure窗户右下角的Apply按钮,应用上述所有配置, 此处建议每完成一个选项的配置就点击一次Apply,以免造成配置未生效,在后续步骤中引发其他问题

https://i-blog.csdnimg.cn/blog_migrate/553d4bcafbcf73f5b1134cc4d116f303.png

10,在开发工具IDEA中配置WEB容器

10.1 在开发工具IDEA工具栏点击add Configurations

https://i-blog.csdnimg.cn/blog_migrate/b9d7f935d6e486087b257cf02f6bd800.png

10.2 在弹出的窗口中点击 + 号,在弹出选项窗口中,向下滑动,找到Tomcat server 下的 Local并点击

https://i-blog.csdnimg.cn/blog_migrate/725baa8ed54c60b25d2bd24685ffb005.png

10.3 在生成的Tomcat配置界面中,选择 server 标签页

https://i-blog.csdnimg.cn/blog_migrate/ea216e14c1ce527473a3a3ae2dd4f573.png

10.4 在Application server中选择合适版本的WEB容器,在WEB容器选择完后, 会后自动带出Name中的内容,可进行修改,此处演示直接使用默认名称。

https://i-blog.csdnimg.cn/blog_migrate/01e3a8b50c64581cf2f0e49daac33810.png

需要注意,如果是首次配置Tomcat或者是新下载的Tomcat,Application server中无对应选项,此时需要点击configure… 按钮进行配置,操作步骤如下:

在上图所示WEB容器配置界面Server标签页Application server选择框后边,点击 configure… 按钮 在弹出的Application servers窗口中,点击 + 号,并在弹出的Tomcat Server 窗口中, 点击Tomcat Home输入框 后边的文件夹选择按钮

https://i-blog.csdnimg.cn/blog_migrate/5944c64cf97f584daff04c3d87a0e975.png

在弹出的文件夹选择窗口中选择tomcat文件夹,然后点击OK按钮

https://i-blog.csdnimg.cn/blog_migrate/cb27b2cca946245d9189d21792037e35.png

选择完Tomcat Home后,Tomcat base directory输入框中的内容会自动带出,直接点击OK 按钮即可

https://i-blog.csdnimg.cn/blog_migrate/caef099a1f8660150695ab4a71bdd537.png

最后,再次在Application servers的配置界面点击OK,此时,就可在上述Application server选项中找到对应的Tomcat了

https://i-blog.csdnimg.cn/blog_migrate/bbf091c61aca619012d22181a58f40d0.png

10.5 Application server配置完成后,在Open Browser 下 确保After launch 前的复选框处于选中状态, 并在后边的浏览器选择下拉列表中选择合适的浏览器,一般我们习惯选择Chrome浏览器, 此处设置是为了让容器在启动后能够自动使用选择的浏览器访问项目首页

https://i-blog.csdnimg.cn/blog_migrate/c6b8d3e44c0f9abd95d0c433335114d0.png

10.6 Tomcat配置界面中,选择 Deployment标签页

https://i-blog.csdnimg.cn/blog_migrate/e4e83ab11ba9339b723a0669f1afcf67.png

10.7 在Deployment标签页中点击右侧的 + 号,并选择Artifact

https://i-blog.csdnimg.cn/blog_migrate/a76eb8ad30ae0686265faf39b53022ce.png

10.8 在10.7中选择Artifact后会生成一个项目的部署的配置信息,将Application context 中的项目访问根路径进行修改, 此处不修改也是可以的,只不过默认生成的Application context比较长,且可读性较低,不便于测试,因为需要对其进行一下修改

https://i-blog.csdnimg.cn/blog_migrate/7500ecf6f40dbd0ec3dfece008079c81.png

修改完后,点击Apply 按钮应用以上设置

https://i-blog.csdnimg.cn/blog_migrate/719cd65214463562d0ed844e8043f7ec.png

10.9 回到server标签页,将On ‘Update’ action 和 On frame deactivation 都设置为 Update classes and resources, 此处设置是为了在项目中的代码发生改动时,能够及时将最新代码热更新到Tomcat容器中。设置完后,点击Apply按钮

https://i-blog.csdnimg.cn/blog_migrate/d2ff29389a1bae24fc74a3030a55af23.png

10.10 点击OK按钮完成TOmcat容器的相关配置

https://i-blog.csdnimg.cn/blog_migrate/c3afc7a8a8bd66a6e0317dfbae67dc7d.png

11 启动WEB容器,运行WEB项目进行调试

点击开发工具IDEA工具栏的Debug 按钮以debug模式启动项目(开发环境一般习惯于使用Debug模式启动项目,便于调试)

https://i-blog.csdnimg.cn/blog_migrate/0612e9c459788d8463895cb11e84b733.png

项目启动完成后,浏览器会自动打开窗口访问项目首页,即访问地址:http://localhost:8080/ssmdemo/,(ssmdemo为上述步骤中配置的Application context)

https://i-blog.csdnimg.cn/blog_migrate/0486c4c0631be8c5d8ff14e9a39cb04a.png

浏览器中,如果项目能够正常访问,并能够正确展示index.jsp中的内容,则WEB项目创建成功, 此时对index.jsp中的内容进行修改后,在不重启WEB容器的情况下,刷新浏览器页面后能够展示出来,表明热更新配置成功

https://i-blog.csdnimg.cn/blog_migrate/fd38795b4179e41c9aba09f87baf65fe.png

https://i-blog.csdnimg.cn/blog_migrate/cbe80d836c142cae949de6003b876320.png

至此WEB项目的搭建完成