社区版IDEA 搭建Javaweb项目完整版--保姆级教程

朱雀 2024-03-27 10:30 63阅读 0赞

**目录**

关于Tomcat的工作

第一步：官网下载Tomcat

第二步：在idea中安装Tomcat插件

搭建web项目

方法一

方法二

新建项目，如下图

然后补全Javaweb的文件结构

配置Tomcat

1.设置中配置Tomcat

2.为项目添加Tomcat

3.添加Tomcat依赖的jar包

检测是否成功

--------------------

## 关于Tomcat的工作 ##

### 第一步：官网下载Tomcat ###

首先浏览器搜索[http://www.apache.org][http_www.apache.org]进入官网

然后一直下滑直到找到Tomcat

![aee78428404044cf87ca3d335f5f5ccc.png][]

找到后点击Tomcat10

![b05472e44dca4132abd316cbf63198ca.png][]

点击下图zip下载Tomcat （可能会比较慢，也可以通过其他渠道下载）

![d84cfbed745846b8b7ff2493c28c62be.png][]

### 第二步：在idea中安装Tomcat插件 ###

**1）任何项目都没有建时**

*  下图是中文版的，顺序不影响
 *  在插件中搜索smart 找到Smart Tomcat 下载插件

![dca01bc9839c49da9e91f2425202837f.png][]

**2）已经建了部分项目**

*  找到Settings

![37db8c539ed74f50a4cef58ac997554e.png][]

*  点击Plugins然后搜索smart 找到Smart Tomcat 下载插件

![7707d8b5881346c6acf8d9e1d6296e2e.png][]

以后我们如果有需要用到的插件（如汉化包插件……），也是通过以上两种方法其一下载。

## 搭建web项目 ##

### 方法一 ###

1.  先创建普通Java项目
2.  再构建web项目的目录结构（使其成为下图所示，右键添加）

![2c9300158e304d61b1bb249e67325af5.png][]

![9e9b982298494ce1b3c26f0f24cecf16.png][]

### 方法二 ###

#### 新建项目，如下图 ####

File--New--Project

NewProject中选**Java**和**Maven**

![3b58920fae2f4fc8a0824c58f056cea4.png][]

![18aa3c800d8f492bba339bad28515053.png][]

#### ![65f832d002ea487c9298a80278c70337.png][] ####

#### 然后补全Javaweb的文件结构 ####

*  注意大小写和名称以及位置
 *  main目录下新建webapp文件夹
 *  webapp目录下新建WEB-INF文件夹和index.html
 *  WEB-INF目录下新建web.xml
 *  test目录下新建resources

![78d47d5f31a147d481de6088180a8ddd.png][]

*  对于web.mxl中内容的编写

<?xml version="1.0" encoding="UTF-8"?>
    <web-app id="WebApp_ID" version="4.0"
             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-app_4_0.xsd">
        <display-name>xss</display-name>
        <welcome-file-list>
            <welcome-file>index.html</welcome-file>
        </welcome-file-list>
    </web-app>

## 配置Tomcat ##

### 1.设置中配置Tomcat ###

1）File--Settings

![940bab41e58f48f482658f4393bc2206.png][]

2）点击**+** 然后添加自己之前下载到本地的Tomcat

3）点击“应用”（Apply），之后点击“确定”（OK）。

### ![a74495fc811a422792c5785971596b08.png][] ###

### 2.为项目添加Tomcat ###

1）Run--Edit Configurations

![82705915984645709b456ca911299197.png][]

2）点击**+**

3）点击Smart Tomcat

![52c41db4e6504e449bde483883d8ace6.png][]

4）细节讲述

1.  Name可以修改成自己喜欢的（也可以不动）
2.  Deployment Directory: 项目部署的用到的文件夹
3.  Context Path: / 表示访问项目时直接访问本机（localhost）
4.  Server Port: Tomcat的端口号，不会改变

![308e11f6433c47aa989fa8129113a697.png][]

5）点击“应用”（Apply），之后点击“确定”（OK）。

### 3.添加Tomcat依赖的jar包 ###

1）File--Project Structure

![bf68128404d744888d733ff50e8d7aeb.png][]

2）按顺序依次点击

![2c6f852cc5984cedb2f445c96fcfb6b1.png][]

3）点击“应用”（Apply），之后点击“确定”（OK）。

4）找到jsp-api.jar和servlet-api.jar(Javaweb使用这两个就够了，当然也可以将整个lib全部放入，具体方法在此不做讲述）

![0b4d06d5cd0742818a1a59872be59601.png][]

5）点击OK

## 检测是否成功 ##

1）点击运行

![be55b99cd6c44fa3bb4c930d81d2247a.png][]

2）点击链接

![9b4fdbdc3a0f4895b3f18fe5b0732054.png][]

**浏览器出现index.html则说成功社区版idea搭建Javaweb成功**

![7faa000e62e642ffbb062f85aeef504e.png][]

[http_www.apache.org]: http://www.apache.org
[aee78428404044cf87ca3d335f5f5ccc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8f022c45dec044058665560fe59144b3.png
[b05472e44dca4132abd316cbf63198ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/601112616aea468a9498f59cd2054a5a.png
[d84cfbed745846b8b7ff2493c28c62be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/670c6f5da9a942edb1b368cb20ca6b01.png
[dca01bc9839c49da9e91f2425202837f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1b523ec23625482cbe56441b78df24de.png
[37db8c539ed74f50a4cef58ac997554e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/360e4194fe12469fb4ad389318e3d1fe.png
[7707d8b5881346c6acf8d9e1d6296e2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/026e4896bb3e47e5a35704400cc1baad.png
[2c9300158e304d61b1bb249e67325af5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/d60162ca34b2485cab2a9f0ab2800d62.png
[9e9b982298494ce1b3c26f0f24cecf16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/94b4ffdf71ae4b649ff6ed59e285c4ee.png
[3b58920fae2f4fc8a0824c58f056cea4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/17ad3ead3a004fd2bff91f0308e13b5c.png
[18aa3c800d8f492bba339bad28515053.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e21110433fa84459b2cd391a50a0ef1e.png
[65f832d002ea487c9298a80278c70337.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c20e583851db47be9dd018ba2dddac14.png
[78d47d5f31a147d481de6088180a8ddd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ab1ce421fd464a4bb49d38b4344fb7b4.png
[940bab41e58f48f482658f4393bc2206.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/75910c337fff469fb5871b9f2d1479bf.png
[a74495fc811a422792c5785971596b08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/80ff0197ffb146448919af49cdfe415d.png
[82705915984645709b456ca911299197.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/433984d09e5346e38fe57eba03999dee.png
[52c41db4e6504e449bde483883d8ace6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2d73467bdd9e4630a45ad357c8f99871.png
[308e11f6433c47aa989fa8129113a697.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/765a99db549f42a68281a16e7010dad8.png
[bf68128404d744888d733ff50e8d7aeb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2849f939883a48c486aac98540da23dd.png
[2c6f852cc5984cedb2f445c96fcfb6b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/68003c7ea16b4298a2da64c74b74a24d.png
[0b4d06d5cd0742818a1a59872be59601.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/cf8d9232d13a47afb43df50f472abe8e.png
[be55b99cd6c44fa3bb4c930d81d2247a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/4dae4745f1b949acb69418bb1370f6c5.png
[9b4fdbdc3a0f4895b3f18fe5b0732054.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/58873857ce774ca8bab924da6417e3e0.png
[7faa000e62e642ffbb062f85aeef504e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/12d8f3664a044584b5785dec0b4baedf.png