Java Web 开发环境搭建:IDEA+Tomcat 安装与部署超详细教程

Java Web 开发环境搭建:IDEA+Tomcat 安装与部署超详细教程

在 Java Web 开发中,IDEA 作为主流的集成开发工具,搭配 Tomcat 轻量级 Web 服务器是入门首选。本文将基于 Java Web 基础开发要求,从 JDK 环境配置、Tomcat 安装配置、IDEA 安装、Web 项目创建,到 Tomcat 在 IDEA 中的部署运行,进行一步一图式详细讲解,零基础也能轻松上手。

一、前置准备:JDK 环境配置

Java Web 开发的核心基础是 JDK,Tomcat 和 IDEA 的运行都依赖 JDK 环境,需先完成 JDK 的安装与环境变量配置。

1. 下载与安装 JDK

前往 Oracle 官网或 OpenJDK 官网下载对应系统(本文以 Windows10 64 位为例)的 JDK 安装包,本文使用 JDK24 版本,双击安装包按默认步骤完成安装,记住安装路径(示例:C:\Program Files\Java\jdk-24)。

2. 配置 JDK 系统环境变量

  1. 右键此电脑属性高级系统设置环境变量,进入环境变量配置界面。
  2. 新建用户变量
    • 变量名:JAVA_HOME
    • 变量值:JDK 的安装根路径(示例:C:\Program Files\Java\jdk-24),点击确定
  3. 编辑 Path 变量
    • 在用户变量的Path中点击新建,输入%JAVA_HOME%\bin,将其上移至顶部,点击确定保存。
  4. 验证配置:按下Win+R输入cmd打开命令行,输入java -versionjavac -version,若显示 JDK 版本信息,说明配置成功。

二、Tomcat 服务器安装与环境配置

Tomcat 是开源的轻量级 Web 应用服务器,专为 Java Web 开发设计,支持 JSP 和 Servlet 运行,本文使用 Tomcat9.0.115 版本。

1. 下载 Tomcat

前往 Apache Tomcat 官网(https://tomcat.apache.org/)下载 Windows 64 位压缩包,解压到指定目录(示例:D:\java web\apache-tomcat-9.0.115-windows-x64\apache-tomcat-9.0.115),解压路径不要包含中文和空格

2. 配置 Tomcat 环境变量

  1. 再次打开环境变量界面,新建用户变量
    • 变量名:CATALINA_HOME
    • 变量值:Tomcat 的解压根路径(示例:D:\java web\apache-tomcat-9.0.115-windows-x64\apache-tomcat-9.0.115),点击确定
  2. 编辑 Path 变量:在 Path 中新建,输入%CATALINA_HOME%\bin,点击确定保存。

3. 验证 Tomcat 安装

  1. 打开 Tomcat 解压目录下的bin文件夹,双击startup.bat启动 Tomcat 服务器,会弹出黑窗口(不要关闭)。
  2. 打开浏览器,输入http://localhost:8080,若出现 Tomcat 默认首页,说明 Tomcat 启动成功。
  3. 关闭 Tomcat:双击bin文件夹下的shutdown.bat即可。

4. Tomcat 基础修改(可选)

  • 修改监听端口:若 8080 端口被占用,打开 Tomcat 解压目录下的conf\server.xml,找到<Connector port="8080" protocol="HTTP/1.1",将8080修改为未被占用的端口(如 8081),保存后重启 Tomcat 即可。
  • Tomcat 目录结构:核心目录包括bin(启动 / 关闭脚本)、conf(配置文件)、webapps(项目部署目录)、logs(日志文件)、webapps(默认项目存放路径)。

三、IDEA 安装与 Web 项目创建

IntelliJ IDEA 是 Java 开发的高效集成工具,分为社区版(免费)和旗舰版(付费,有试用),Java Web 开发建议使用旗舰版(支持 Servlet、JSP、Tomcat 集成)。

1. IDEA 下载与安装

  1. 前往 JetBrains 官网(https://www.jetbrains.com/idea/)下载 IDEA 旗舰版 / 社区版安装包。
  2. 双击安装包,按以下步骤安装:
    • 同意协议,点击Next
    • 选择安装路径(不要含中文 / 空格),点击Next
    • 勾选64-bit launcherAdd launchers to PATHAssociate .java files,点击Next
    • 选择默认启动界面,点击Install完成安装。
  3. 安装完成后,打开 IDEA,按提示完成激活(社区版直接使用,旗舰版可试用或激活)。

2. 在 IDEA 中创建 Java Web 项目

IDEA 创建 Web 项目有两种方式:直接创建 Web 项目、为普通 Java 项目添加 Web 支持,本文讲解为普通项目添加 Web 支持(更灵活),步骤如下:

  1. 打开 IDEA,点击New Project,选择Java,配置已安装的 JDK(IDEA 会自动识别JAVA_HOME中的 JDK),取消Create from template,点击Next
  2. 输入项目名称(示例:javaweb_demo),选择项目保存路径(无中文 / 空格),点击Finish创建普通 Java 项目。
  3. 为项目添加 Web 支持
    • 右键项目根目录→Add Framework Support
    • 在弹出的窗口中,勾选Web Application,勾选Create web.xml(生成 Web 核心配置文件),点击OK
    • 项目目录中会自动生成web目录,包含WEB-INFindex.jsp默认页面,至此 Web 项目创建完成。

3. 编辑 JSP 页面(基础操作)

创建完 Web 项目后,可直接修改默认的index.jsp,或新建 JSP 页面(如cainiao.jsp):

  1. 右键web目录→NewJSP/JSPX,输入文件名(如 cainiao),点击OK
  2. 在 JSP 页面中编写 HTML+JSP 代码,示例:

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Java Web入门</title> </head> <body> <h1>Hello Java Web!</h1> <p>IDEA+Tomcat部署成功</p> </body> </html> 

四、IDEA 中配置 Tomcat 并部署 Web 项目

这是核心步骤,配置完成后即可在 IDEA 中直接启动 Tomcat 并运行 Web 项目,无需手动操作 Tomcat 的startup.bat

1. 配置 Tomcat 服务器

  1. 点击 IDEA 右上角的Add Configuration(或下拉框中的Edit Configurations),进入运行配置界面。
  2. 点击左上角 **+号,找到Tomcat Server**→Local,创建本地 Tomcat 配置。
  3. 在弹出的界面中,配置Application server
    • 点击Configure,选择 Tomcat 的解压根路径(示例:D:\java web\apache-tomcat-9.0.115-windows-x64\apache-tomcat-9.0.115),IDEA 会自动识别 Tomcat 版本,点击OK
  4. 配置服务器基础信息:
    • Name:可自定义(如 Tomcat9);
    • HTTP port:与 Tomcat 配置的端口一致(默认 8080,若修改过则填对应端口);
    • 勾选After launch(启动后自动打开浏览器),点击Deployment选项卡。

2. 部署 Web 项目到 Tomcat

  1. Deployment选项卡中,点击左上角 **+号,选择Artifact**→项目名:war exploded(开发环境首选,热部署更方便),点击OK
  2. 配置Application context(项目上下文路径):
    • 默认为/项目名(示例:/javaweb_demo),可简化为/(直接通过localhost:8080访问);
    • Startup page(启动页面):可选择默认的index.jsp,或自定义为自己编写的页面(如cainiao.jsp),输入/cainiao.jsp即可。
  3. 点击ApplyOK,完成 Tomcat 与项目的部署配置。

3. 启动 Tomcat 并运行 Web 项目

  1. 点击 IDEA 右上角的Run(绿色三角)或Debug(绿色小虫子,调试模式),启动 Tomcat 服务器。
  2. 启动成功后,IDEA 控制台会显示Server startup in XXX ms,同时会自动打开浏览器,访问配置的启动页面(如http://localhost:8080/javaweb_demo/cainiao.jsp)。
  3. 若需修改代码,直接在 IDEA 中编辑后,点击Build Project(Ctrl+F9),刷新浏览器即可看到修改效果(热部署)。

4. 常见问题解决:启动默认打开 index.jsp 而非自定义页面

若配置后启动仍默认打开index.jsp,而非自己编写的cainiao.jsp,有 3 种解决方法,按需选择:

方法 1:修改 IDEA 的 Tomcat 启动页面(最直接)

回到Edit ConfigurationsDeployment,将Startup page改为自定义页面路径(如/cainiao.jsp),保存后重启 Tomcat。

方法 2:修改 web.xml 配置欢迎页面

在项目的WEB-INF目录下找到web.xml,添加欢迎页面列表配置,将自定义页面设为优先,代码如下:

xml

<?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-app_4_0.xsd" version="4.0"> <!-- 配置欢迎页面 --> <welcome-file-list> <welcome-file>cainiao.jsp</welcome-file> <!-- 优先访问 --> <welcome-file>index.jsp</welcome-file> <!-- 备用 --> </welcome-file-list> </web-app> 

保存后重启 Tomcat,访问项目根路径即可自动打开cainiao.jsp

方法 3:浏览器手动访问自定义页面

Tomcat 启动后,在浏览器地址栏输入完整访问路径http://localhost:8080/项目上下文路径/自定义页面.jsp(示例:http://localhost:8080/javaweb_demo/cainiao.jsp),直接访问。

五、Tomcat 手动部署项目(补充)

除了在 IDEA 中集成部署,也可手动将 Web 项目部署到 Tomcat 中,步骤如下:

  1. 在 IDEA 中对项目进行打包:右键项目→Build Artifacts项目名:warBuild,生成war包(在项目的out\artifacts目录下)。
  2. 将生成的war包复制到 Tomcat 解压目录的webapps文件夹中。
  3. 启动 Tomcat,Tomcat 会自动解压war包生成同名项目目录。
  4. 打开浏览器,输入http://localhost:8080/包名/页面名.jsp,即可访问项目。

六、总结

本文完成了 Java Web 开发的全套环境搭建:从 JDK、Tomcat 的环境变量配置,到 IDEA 的安装与 Web 项目创建,再到 Tomcat 在 IDEA 中的核心配置与项目部署,同时解决了 “启动默认打开 index.jsp” 的常见问题,还补充了 Tomcat 手动部署方法。

核心关键点总结:

  1. 所有路径不要包含中文和空格,否则会导致环境配置或项目启动失败;
  2. JAVA_HOMECATALINA_HOME必须配置正确,分别对应 JDK 和 Tomcat 的根路径;
  3. IDEA 中部署项目首选war exploded格式,支持热部署,开发更高效;
  4. 可通过web.xml或 IDEA 启动配置自定义默认访问页面。

掌握以上步骤后,就可以基于 IDEA+Tomcat 进行 JSP、Servlet 等 Java Web 基础开发了,后续可继续学习 HTTP 协议、XML 配置、过滤器、Servlet 等核心知识点,深入 Java Web 开发。

配套操作截图说明

为了让步骤更直观,以下为关键操作的截图对应位置(可根据实际操作截图补充):

  1. JDK 环境变量配置:此电脑→高级系统设置→环境变量界面,JAVA_HOME和 Path 配置截图;
  2. Tomcat 环境变量配置:CATALINA_HOME新建配置截图;
  3. Tomcat 启动验证:浏览器打开localhost:8080的 Tomcat 首页截图;
  4. IDEA 添加 Web 支持:Add Framework Support勾选Web Application截图;
  5. IDEA 配置 Tomcat:Edit Configurations中 Tomcat Server 的Application serverDeployment配置截图;
  6. 项目启动成功:IDEA 控制台启动日志和浏览器访问页面的截图。

Read more

深入解析WebView的概念、功能、应用场景以及使用过程中的优势与挑战

深入解析WebView的概念、功能、应用场景以及使用过程中的优势与挑战

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ZEEKLOG博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》 文章目录 * * 一、引言 * 二、WebView概述 * 三、WebView的功能与应用场景 * 四、WebView的优势与挑战 * 五、WebView的使用示例 * 六、总结 摘要: 本文详细介绍了App中WebView的概念、功能、应用场景以及使用过程中的优势与挑战。通过对WebView的深入剖析,帮助开发者更好地理解和运用这一技术,在App开发中实现更丰富的功能和更好的用户体验。 一、引言 在移动应用开发领域,为了在App中展示网页内容、集成Web应用或实现与网页的交互功能,WebView是一种常用的技术手段。它为开发者提供了一种在原生App中嵌入Web内容的

By Ne0inhk

Sonic数字人前端界面可用Vue + Three.js构建交互式预览

Sonic数字人前端界面可用Vue + Three.js构建交互式预览 在虚拟内容爆发的时代,我们正见证一场从“真人出镜”到“数字人上岗”的悄然变革。无论是电商平台的24小时客服、教育领域的AI讲师,还是短视频平台上活跃的虚拟主播,数字人已不再是科幻电影中的概念,而是切实走进了生产流程。然而,传统数字人系统依赖复杂的3D建模与动画绑定,开发周期长、成本高,难以满足轻量化和快速迭代的需求。 Sonic 的出现改变了这一局面。作为腾讯与浙江大学联合研发的轻量级口型同步模型,它仅需一张静态人脸图像和一段音频,就能生成唇形精准对齐、表情自然流畅的说话视频。这极大降低了数字人内容创作的技术门槛。但真正让这项技术“落地可用”的,是其前端交互体验的设计——如何让用户直观地上传素材、调节参数,并在点击“生成”前就大致预知结果? 答案正是:Vue + Three.js 构建的交互式预览系统。 为什么选择 Vue?不只是为了“写页面” 很多人认为前端框架只是用来“画按钮和表单”,但在数字人这类复杂应用中,Vue 扮演的是整个系统的“神经中枢”

By Ne0inhk

AMD显卡在windows中通过WSL安装使用stable diffusion(WebUI和ComfyUI)

确认windows的amd显卡驱动版本,至少不低于24.12.1,具体可以查看对应 一、安装wsl和ubuntu。 1.安装wsl2: wsl --install 2.安装ubuntu(24.04、22.04等): wsl.exe --install ubuntu-24.04 3.更改ubuntu安装位置(可选): wsl --manage ubuntu-24.04 --move <location> 4.进入wsl实例: #输入wsl -d <version>进入制定版本或输入wsl进入默认实例 wsl -d ubuntu-24.04 可按Ctrl+D退出当前实例。 关闭实例: wsl --shutdown

By Ne0inhk
使用Open WebUI下载的模型文件(Model)默认存放在哪里?

使用Open WebUI下载的模型文件(Model)默认存放在哪里?

🏡作者主页:点击!  🤖Ollama部署LLM专栏:点击! ⏰️创作时间:2025年2月21日21点21分 🀄️文章质量:95分 文章目录 使用CMD安装存放位置 默认存放路径 Open WebUI下载存放位置 默认存放路径 扩展知识 关于 Ollama 核心价值 服务 关于Open WebUI 核心特点 主要功能 使用场景 Open WebUI下载存放位置 在使用Ollama平台进行深度学习和机器学习模型训练时,了解模型文件的存储位置至关重要。这不仅有助于有效地管理和部署模型,还能确保在需要时能够快速访问和更新这些模型文件。本文将详细探讨Ollama下载的模型文件存放在哪里,并提供相关的操作指南和最佳实践 最后感谢大家 希望这篇文章能帮助你! 使用CMD安装存放位置 以下做测试 我们采用哦llama38B模型来测试 输入命令等待安装即可 默认存放路径 C:\Users\Smqnz\.ollama\models\manifests\registry.ollama.ai 不要直接复制粘贴 我的用户名和你的不一样

By Ne0inhk