在IntelliJIDEA中使用Gradle创建Web项目的步骤

1. 打开 IntelliJ IDEA

启动 IntelliJ IDEA。

2. 创建新项目
  • 点击 File > New > Project
  • 在弹出的窗口中,选择 Gradle 作为项目类型。
  • 确保 Java 被选中。
  • 点击 Next
3. 配置项目
  • GroupId : 输入你的组织或项目组 ID(例如:com.example)。
  • ArtifactId : 输入项目名称(例如:mywebapp)。
  • 点击 Next
4. 配置项目名称和位置
  • Project name : 输入项目名称(例如:MyWebApp)。
  • Project location: 选择项目保存的路径。
  • 点击 Finish
5. 手动配置 Web 项目结构

项目创建完成后,手动配置 Web 项目结构:

  1. src/main 目录下创建 webapp 文件夹。
  2. webapp 文件夹下创建 WEB-INF 文件夹。
  3. WEB-INF 文件夹下创建 web.xml 文件。

项目结构示例:
登录后复制

plain 复制代码
src
└── main
    ├── java
    ├── resources
    └── webapp
        └── WEB-INF
            └── web.xml
6. 配置 web.xml

web.xml 中添加基本的 Servlet 配置,例如:
登录后复制

plain 复制代码
<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
    <display-name>MyWebApp</display-name>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>
7. 添加依赖

build.gradle 文件中添加 Web 项目所需的依赖,例如 Servlet API:
登录后复制

plain 复制代码
plugins {
    id 'java'
    id 'war' // 添加 war 插件以支持 Web 项目
}

group 'com.example'
version '1.0-SNAPSHOT'

repositories {
    mavenCentral()
}

dependencies {
    implementation 'javax.servlet:javax.servlet-api:4.0.1' // Servlet API
    testImplementation 'junit:junit:4.13.2' // 测试依赖
}
8. 创建示例 JSP 文件

src/main/webapp 目录下创建 index.jsp 文件,内容如下:
登录后复制

plain 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>My Web App</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
9. 配置 Tomcat 服务器
  1. 点击 Run > Edit Configurations
  2. 点击 + 按钮,选择 Tomcat Server > Local
  3. Deployment 选项卡中,点击 + 按钮,选择 Artifact ,然后选择你的 Web 项目(例如:mywebapp:war)。
  4. 点击 ApplyOK
相关推荐
觉醒法师1 分钟前
HarmonyOS开发 - 电商App实例二( 网络请求http)
前端·http·华为·typescript·harmonyos·ark-ts
沈剑心2 分钟前
Kotlin的协程,真能提升编程效率么?
android·前端·kotlin
堕落年代12 分钟前
Vue主流的状态保存框架对比
前端·javascript·vue.js
OpenTiny社区23 分钟前
TinyVue的DatePicker 组件支持日期面板单独使用啦!
前端·vue.js
冴羽23 分钟前
Svelte 最新中文文档教程(22)—— Svelte 5 迁移指南
前端·javascript·svelte
树上有只程序猿27 分钟前
Vue3组件通信:多个实战场景,轻松玩转复杂数据流!
前端·vue.js
用户611881615196228 分钟前
Java基础面试题
java
剪刀石头布啊35 分钟前
css属性值计算过程
前端·css
bin915340 分钟前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14基础固定表头示例
前端·javascript·vue.js·ecmascript·deepseek
小华同学ai42 分钟前
吊打中文合成!这款开源语音神器效果炸裂,逼真到离谱!
前端·后端·github