【IDEA】如何在Tomcat上创建部署第一个Web项目？

Love The Way You Lie 2023-09-24 21:59 56阅读 0赞

![在这里插入图片描述][e80eb8533cfb4c0cb4fbadfb43bd32bc.png]

看了网上很多教程，发现或多或都缺失了一些关键步骤信息，对于新手小白很不友好，那么今天就教大家如何在Tomcat服务器（本地）上部署我们的第一个Web项目：

共分为三个部分：

**1. IDEA创建Web项目；**

**2. 在IDEA上配置Tomcat服务器；**

**3. 写一个JSP文件，运行；**

> 如果还没有下载 Tomcat 的，可以跳过服务器部分，  
> 也可以移步至[Tomcat的安装以及部分问题解决方案][Tomcat]下载使用

# 1. IDEA创建Web项目 #

*  可以从主页面创建

![在这里插入图片描述][f6c3fbe6013b4502b15edb85c7aed889.png]

*  也可以从某个项目中创建新项目

![在这里插入图片描述][1504988fb6f149ea80a2634796445f59.png]

*  然后编写名称，点击创建

![在这里插入图片描述][4fe97605beb44ad9957a67d87b53889b.png]

*  进去以后 **右键项目名称**，选择 **添加框架支持**

![在这里插入图片描述][7f6c8fd7e43147f49c6dc9553252cb20.png]

*  选择 **Web应用程序** ，然后确定

![在这里插入图片描述][bdcaba1a31f3446dad062b17baf52f66.png]

*  然后就会新增如下图所示的文件目录

![在这里插入图片描述][e827462e9bb04debab34ca309b710f6d.png]

*  最后是修改项目结构，点击文件后选择项目结构

![在这里插入图片描述][955a939df70d42c490bcc1e579454427.png]  
可设置编译输出路径  
![在这里插入图片描述][12ac2f6865d74084aac1c58fd23f54f5.png]  
接下来点击依赖，添加（点击加号），选择JAR或目录  
![在这里插入图片描述][5e73940a26dc428484d3a2f712f26b72.png]

选择Tomcat解压后的 lib 目录（里面有Jar包，如果缺失这一步，会导致在JSP文件里无法写Java代码，会报错）

![在这里插入图片描述][b517ad46384546e1a5a8e07f789e8950.png]

点击确定后，在打上勾，确定，这样我们的IDEA网页项目就创建好了  
![在这里插入图片描述][b113387b4d4a4ec4896dcc6ea156be6e.png]

接下来是Tomcat服务器（本地）的配置，因为我们的目的是要部署在Tomcat服务器上：

# 2. IDEA上配置Tomcat服务器 #

*  在IDEA顶头的导航栏里面找到当前文件，然后选择编辑配置

![在这里插入图片描述][9f3a7f641d0144b180612290dd55954f.png]

*  添加Tomcat本地服务器

![在这里插入图片描述][679e0e087e33462d9f027db99d84ac5b.png]

*  配置服务器：  
    ![在这里插入图片描述][3823b7fe39f247f69c2e1c2d0fa37ba6.png]
 *  选择部署，然后添加  
    ![在这里插入图片描述][f744a8036b6945948b7387b9ce7b1f80.png]
 *  出现如下图所示之后，点击确定，这样我们的Tomcat就部署好了，当然这里还没有启动服务器，别急，下面就会说到  
    ![在这里插入图片描述][ca93fc38860546718159356e4ced5edb.png]

# 3. 运行JSP文件，展示页面 #

*  可以随意创建一个 .jsp 文件，然后随意写  
    这里我就用内嵌 Java 代码来说明，想了解更多可以去自学JSP

![在这里插入图片描述][263e395ce3874d13a21c282b71576eb5.png]

*  然后启动我们的Tomcat

![在这里插入图片描述][ec99bddec947435ba3266dcadd68dfb0.png]  
![在这里插入图片描述][67f7198b9e3e41969f750a2df96b6ffa.png]

*  就得到我们的JSP页面了：  
    ![在这里插入图片描述][1f32e819e88d4749a29955a4bad4bb99.png]
 *  如果要修改JSP文件，别忘了修改之后重新更新一下服务器：

![在这里插入图片描述][3dc3abdd00f64ce8a48bb0711008b0c4.png]  
**更新资源** 或者 **重启** 都可以

[e80eb8533cfb4c0cb4fbadfb43bd32bc.png]: https://img-blog.csdnimg.cn/e80eb8533cfb4c0cb4fbadfb43bd32bc.png
[Tomcat]: https://blog.csdn.net/Lov1_BYS/article/details/129342094
[f6c3fbe6013b4502b15edb85c7aed889.png]: https://img-blog.csdnimg.cn/f6c3fbe6013b4502b15edb85c7aed889.png
[1504988fb6f149ea80a2634796445f59.png]: https://img-blog.csdnimg.cn/1504988fb6f149ea80a2634796445f59.png
[4fe97605beb44ad9957a67d87b53889b.png]: https://img-blog.csdnimg.cn/4fe97605beb44ad9957a67d87b53889b.png
[7f6c8fd7e43147f49c6dc9553252cb20.png]: https://img-blog.csdnimg.cn/7f6c8fd7e43147f49c6dc9553252cb20.png
[bdcaba1a31f3446dad062b17baf52f66.png]: https://img-blog.csdnimg.cn/bdcaba1a31f3446dad062b17baf52f66.png
[e827462e9bb04debab34ca309b710f6d.png]: https://img-blog.csdnimg.cn/e827462e9bb04debab34ca309b710f6d.png
[955a939df70d42c490bcc1e579454427.png]: https://img-blog.csdnimg.cn/955a939df70d42c490bcc1e579454427.png
[12ac2f6865d74084aac1c58fd23f54f5.png]: https://img-blog.csdnimg.cn/12ac2f6865d74084aac1c58fd23f54f5.png
[5e73940a26dc428484d3a2f712f26b72.png]: https://img-blog.csdnimg.cn/5e73940a26dc428484d3a2f712f26b72.png
[b517ad46384546e1a5a8e07f789e8950.png]: https://img-blog.csdnimg.cn/b517ad46384546e1a5a8e07f789e8950.png
[b113387b4d4a4ec4896dcc6ea156be6e.png]: https://img-blog.csdnimg.cn/b113387b4d4a4ec4896dcc6ea156be6e.png
[9f3a7f641d0144b180612290dd55954f.png]: https://img-blog.csdnimg.cn/9f3a7f641d0144b180612290dd55954f.png
[679e0e087e33462d9f027db99d84ac5b.png]: https://img-blog.csdnimg.cn/679e0e087e33462d9f027db99d84ac5b.png
[3823b7fe39f247f69c2e1c2d0fa37ba6.png]: https://img-blog.csdnimg.cn/3823b7fe39f247f69c2e1c2d0fa37ba6.png
[f744a8036b6945948b7387b9ce7b1f80.png]: https://img-blog.csdnimg.cn/f744a8036b6945948b7387b9ce7b1f80.png
[ca93fc38860546718159356e4ced5edb.png]: https://img-blog.csdnimg.cn/ca93fc38860546718159356e4ced5edb.png
[263e395ce3874d13a21c282b71576eb5.png]: https://img-blog.csdnimg.cn/263e395ce3874d13a21c282b71576eb5.png
[ec99bddec947435ba3266dcadd68dfb0.png]: https://img-blog.csdnimg.cn/ec99bddec947435ba3266dcadd68dfb0.png
[67f7198b9e3e41969f750a2df96b6ffa.png]: https://img-blog.csdnimg.cn/67f7198b9e3e41969f750a2df96b6ffa.png
[1f32e819e88d4749a29955a4bad4bb99.png]: https://img-blog.csdnimg.cn/1f32e819e88d4749a29955a4bad4bb99.png
[3dc3abdd00f64ce8a48bb0711008b0c4.png]: https://img-blog.csdnimg.cn/3dc3abdd00f64ce8a48bb0711008b0c4.png