尧图网站建设 免费方案咨询
ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

首页/资讯中心/资讯详情

IntelliJ IDEA创建JSP项目全攻略：从环境配置到实战开发

发布时间：2026/8/16 9:22:02 尧图网站建设
IntelliJ IDEA创建JSP项目全攻略：从环境配置到实战开发

1. 从零到一：为什么你的第一个JSP项目总在“Hello World”前倒下

我见过太多新手，兴冲冲地打开IntelliJ IDEA，照着某个教程的步骤，一路点击“Next”，最后在浏览器里满怀期待地输入localhost:8080，结果迎面而来的却是一个冷冰冰的“404 Not Found”。那一刻的挫败感，我懂。很多人以为用IDEA创建JSP项目，无非就是“新建项目 -> 选Java EE -> 配置Tomcat -> 运行”这几步，但魔鬼藏在细节里。一个能跑起来的JSP项目，远不止IDEA向导里勾选的那几个选项，它背后是一整套关于Web应用目录结构、服务器部署映射和IDE配置逻辑的理解。

网上搜索“Idea创建Jsp项目”，关联的热词清一色是“404错误”、“Tomcat启动失败”、“EditConfigurations”，这恰恰说明了问题的普遍性。大家卡住的点高度一致：环境看似配好了，但项目就是跑不起来。这篇内容，我就从一个老码农的角度，带你完整走一遍这个流程，重点不是“点哪里”，而是“为什么要点这里”，以及那些教程里不会写，但实际开发中一定会遇到的坑。我们会从项目创建、目录结构解析、Tomcat服务器深度配置、解决经典404问题，一直讲到如何创建一个带数据库连接的个人信息展示页面。目标很简单：让你不仅能跑通第一个JSP页面，更能理解其背后的每一个环节，从此告别盲目的下一步。

2. 项目基石：超越向导的Java Web项目初始化

当你打开IDEA，选择“New Project”，在左侧找到“Java Enterprise”时，向导会给你一堆选项：Jakarta EE、Web Profile、Application Server等等。对于纯粹的、传统的JSP/Servlet学习或老项目维护，我们最需要的是一个干净的、结构标准的Web项目骨架。这里第一个关键选择就来了：不要直接使用“Web Application”模板。虽然它更快，但它可能预置了一些你暂时不需要的框架或配置，对于理解原理反而是干扰。

我的建议是，选择最基础的“Java”，项目类型选“Maven”或“Gradle”。没错，即使你不用它们管理依赖，用它们来生成标准目录结构也是极好的。以Maven为例，在创建时，使用maven-archetype-webapp这个原型（Archetype）。它的GroupId通常是org.apache.maven.archetypes，ArtifactId就是maven-archetype-webapp。这个原型会为你生成一个最符合Servlet规范的Web应用目录结构：

你的项目名 ├── src │ └── main │ ├── java // 你的Java类（Servlet等）放在这里 │ ├── resources // 配置文件（如数据库连接池） │ └── webapp // **核心！** Web资源目录 │ ├── WEB-INF │ │ ├── web.xml // 部署描述符 │ │ └── lib // 依赖的JAR包 │ └── index.jsp // 默认欢迎页面 └── pom.xml // Maven配置文件

为什么这个结构如此重要？因为Tomcat、Jetty这些Servlet容器（服务器）在部署时，默认就认这个结构。webapp目录下的内容，在应用发布后，会直接映射到网站的根路径（/）。WEB-INF是一个受保护的目录，浏览器无法直接访问其中的内容，但它里面的web.xml是配置Servlet、过滤器、监听器的关键文件。lib目录用于存放项目依赖的第三方JAR包。

如果你不用Maven，也可以在创建普通Java项目后，手动创建上述目录结构。关键在于，你必须明确告诉IDEA：“这个目录是我的Web资源根目录”。操作方法是：在项目创建后，在src目录上右键，选择“New” -> “Directory”，创建webapp目录。然后，在这个webapp目录上右键，选择“Mark Directory as” -> “Resources Root”。这步操作是很多教程省略的，但它决定了IDEA能否正确识别你的JSP、HTML、CSS文件，并在部署时将它们打包到正确的位置。

注意：web.xml在Servlet 3.0规范之后不再是必须的，你可以用注解（如@WebServlet）来配置Servlet。但对于初学者，我强烈建议保留并使用web.xml，因为它能让你更清晰地看到整个Web应用的配置全貌，避免注解配置不生效时无从排查。

3. 心脏与引擎：Tomcat服务器的深度集成与配置逻辑

项目结构有了，接下来需要引擎——Tomcat。从热词“tomcat安装”、“tomcat安装及配置教程”就能看出，这是另一个高频卡点。首先，确保你已经在系统上安装了Tomcat（建议版本8.5或9.0），并知道其安装目录（例如C:\apache-tomcat-9.0.xx）。IDEA本身不包含Tomcat，它只是提供一个集成界面来管理和启动外部的Tomcat服务器。

在IDEA中配置Tomcat，路径是：点击右上角“Add Configuration...” -> “+” -> 找到“Tomcat Server” -> 选择“Local”。这里会出现几个关键配置面板：

3.1 Server标签页：定义服务器行为

  • Application server：点击“Configure...”按钮，指向你本地Tomcat的安装目录。IDEA会读取conf/server.xml等文件。
  • Open browser：建议勾选，并设置URL为http://localhost:8080/你的项目上下文路径。这样启动后会自动打开浏览器。
  • JRE：确保使用的是项目兼容的JDK版本（通常JDK 8或11）。
  • VM options：这里可以设置JVM参数，比如调大内存（-Xms512m -Xmx1024m）或解决中文乱码问题（-Dfile.encoding=UTF-8）。热词中提到的“idea tomcat run中文乱码”，很多时候就是在这里添加-Dfile.encoding=UTF-8来解决的。
  • Startup/Connection：可以设置端口（默认8080）、启动超时时间（默认45秒）。如果你遇到“Server Tomcat v9.0 Server at localhost was unable to start within 45 seconds”这个错误，除了检查项目是否有阻塞启动的代码，也可以适当调大这个超时时间。

3.2 Deployment标签页：关联项目与部署方式（核心！）这是解决404问题的核心所在。你需要点击“+” -> “Artifact”，选择你的项目生成的构建产物（通常是一个war包或war exploded）。

  • war explodedvswar：这是关键选择。war exploded意为“展开的WAR包”，IDEA不会真正打一个WAR包，而是直接将你的项目目录（主要是src/main/webapp）映射到Tomcat的webapps目录下。它的优点是热部署：你修改了JSP、HTML甚至某些Java类后，无需重启Tomcat，仅需“重新编译”或“更新资源”，浏览器刷新即可看到变化，极其适合开发调试。而war模式是每次启动都打包成一个完整的WAR文件再部署，速度慢，不支持热更新。开发阶段务必选择war exploded。
  • Application context：这是你的项目上下文路径，即访问你应用的根路径。默认可能是/项目名_war_exploded这样一长串。你可以把它简化为/（表示根应用，直接通过http://localhost:8080/访问）或/myapp（通过http://localhost:8080/myapp访问）。很多404错误就是因为浏览器访问的URL和这里设置的上下文路径不匹配。例如，上下文路径是/demo，你的JSP页面叫hello.jsp，那么完整访问地址必须是http://localhost:8080/demo/hello.jsp。

3.3 一个真实的配置示例与对比假设我的项目叫JspDemo，我希望通过http://localhost:8080/jspdemo来访问。

配置项推荐设置错误设置示例可能导致的问题
Server -> VM options-Dfile.encoding=UTF-8留空JSP页面或控制台输出中文乱码
Deployment -> ArtifactJspDemo:war exploded未添加任何ArtifactTomcat启动成功，但无项目部署，访问任何路径都404
Deployment -> Application context/jspdemo/JspDemo_war_exploded(默认)必须用更长、更不直观的URL访问
Server -> URLhttp://localhost:8080/jspdemohttp://localhost:8080/浏览器自动打开的页面不对，需要手动补全路径

配置完成后，点击“Apply” -> “OK”。然后点击绿色的运行或调试按钮，IDEA会启动Tomcat，并将你的项目部署上去。观察IDEA的“Run”或“Services”工具窗口，如果看到类似“Deployment of ‘JspDemo:war exploded’ finished”和“Tomcat started on port(s): 8080”的日志，说明部署启动成功。

4. 告别404：从页面创建到访问的完整链路排查

服务器跑起来了，我们来创建第一个JSP页面。在src/main/webapp目录下右键，新建一个JSP文件（比如hello.jsp）。IDEA可能会问你是否添加JSP支持库，选择添加。一个简单的JSP内容如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>我的第一个JSP</title> </head> <body> <h1>Hello, JSP World!</h1> <p>当前时间是：<%= new java.util.Date() %></p> </body> </html>

保存后，理论上我们访问http://localhost:8080/jspdemo/hello.jsp就能看到页面。但如果出现404，请按照以下链路系统性排查，这也是解决“idea配置tomcat 404错误”的完整思路：

4.1 检查部署状态首先，确认Tomcat是否真的成功部署了你的项目。启动后，直接访问Tomcat默认页http://localhost:8080。如果连这个都打不开，说明Tomcat本身没启动成功，检查端口是否被占用。如果能打开，在Tomcat默认页的“Manager App”部分（可能需要配置用户权限），或者直接查看Tomcat安装目录下的webapps文件夹，看里面是否有你的项目文件夹（如jspdemo）或jspdemo.war文件。如果没有，说明IDEA的Deployment配置没生效，回到上一步检查。

4.2 检查URL路径这是最常见的错误。你的访问URL必须严格等于：http://localhost:8080+Application context+/+文件在webapp下的相对路径。

  • 假设Application context设置为/jspdemo。
  • 你的hello.jsp直接放在webapp下。
  • 那么访问URL就是：http://localhost:8080/jspdemo/hello.jsp。
  • 如果你的hello.jsp放在webapp/pages下，那么URL就是：http://localhost:8080/jspdemo/pages/hello.jsp。

很多人会忽略上下文路径，直接访问http://localhost:8080/hello.jsp，这肯定404。

4.3 检查文件是否被正确复制如果你使用的是war exploded模式，修改JSP后，IDEA通常会自动同步（热部署）。但有时自动同步会失败。你可以手动触发：在IDEA中，点击菜单栏的“Build” -> “Build Project”重新编译，或者更直接地，在Tomcat运行配置的“Deployment”标签页，有一个“On frame deactivation”选项，设置为“Update resources”，这样当你切换出IDEA窗口时，它会自动更新资源。也可以手动点击Tomcat运行窗口的“Update”按钮（两个旋转箭头的图标）。

4.4 检查欢迎页面（web.xml配置）如果你希望直接访问http://localhost:8080/jspdemo就能打开hello.jsp，需要在WEB-INF/web.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>hello.jsp</welcome-file> <welcome-file>index.html</welcome-file> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>

这样，当访问应用根路径时，Tomcat会按顺序寻找这些文件并展示第一个找到的。

4.5 检查JSP引擎和依赖极少数情况下，可能是Tomcat的JSP解析引擎（Jasper）有问题，或者项目缺少Servlet/JSP API的依赖。如果你用的是Maven项目，确保pom.xml中有如下依赖（范围provided，因为Tomcat自带）：

<dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>javax.servlet.jsp-api</artifactId> <version>2.3.3</version> <scope>provided</scope> </dependency>

按照以上链路一步步排查，99%的JSP项目启动404问题都能被解决。核心就是理解“项目结构 -> IDEA配置 -> Tomcat部署 -> 浏览器访问”这条链路上的映射关系。

5. 实战进阶：构建一个动态的个人信息展示页面

理解了基础，我们来点实际的。结合热词“jsp个人信息展示页面”和“jsp实现mp4视频播放”，我们构建一个稍复杂的页面，展示个人资料，并嵌入一段视频。

5.1 数据准备：使用JavaBean模拟数据在src/main/java下创建包com.example.model，然后创建Person.java类，这是一个简单的JavaBean：

package com.example.model; public class Person { private String name; private int age; private String occupation; private String bio; private String avatarUrl; // 头像图片URL private String videoUrl; // 视频URL // 构造方法、Getter和Setter方法省略（必须生成） // 可以使用IDEA快捷键 Alt+Insert 快速生成。 }

然后，我们创建一个Servlet来准备数据。在src/main/java下创建包com.example.web，创建ProfileServlet.java：

package com.example.web; import com.example.model.Person; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/profile") // 注解配置，映射到 /profile 路径 public class ProfileServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 1. 模拟从数据库或其它地方获取数据 Person person = new Person(); person.setName("张三"); person.setAge(28); person.setOccupation("全栈开发工程师"); person.setBio("热爱编程，专注于Java和Web技术栈。业余喜欢摄影和骑行。"); person.setAvatarUrl("images/avatar.jpg"); // 假设图片放在 webapp/images/下 person.setVideoUrl("videos/intro.mp4"); // 假设视频放在 webapp/videos/下 // 2. 将数据放入请求属性中，传递给JSP req.setAttribute("person", person); // 3. 转发到展示页面的JSP req.getRequestDispatcher("/profile.jsp").forward(req, resp); } }

5.2 视图层：创建功能丰富的JSP页面在webapp目录下创建profile.jsp。这个页面将展示个人信息，并嵌入视频播放器。

<%@ page import="com.example.model.Person" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>个人主页</title> <style> body { font-family: Arial, sans-serif; margin: 40px; background-color: #f4f4f4; } .container { max-width: 800px; margin: auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .header { text-align: center; border-bottom: 2px solid #eee; padding-bottom: 20px; margin-bottom: 30px; } .avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 5px solid #ddd; } .info-section { margin-bottom: 25px; } .info-label { font-weight: bold; color: #555; margin-bottom: 5px; } .info-content { color: #333; line-height: 1.6; } .video-section { margin-top: 30px; text-align: center; } video { max-width: 100%; border-radius: 5px; } </style> </head> <body> <div class="container"> <div class="header"> <% Person p = (Person) request.getAttribute("person"); if (p != null) { %> <img src="<%= request.getContextPath() + "/" + p.getAvatarUrl() %>" alt="头像" class="avatar"> <h1><%= p.getName() %>的个人主页</h1> <% } else { %> <h1>用户信息未找到</h1> <% } %> </div> <% if (p != null) { %> <div class="info-section"> <div class="info-label">年龄</div> <div class="info-content"><%= p.getAge() %> 岁</div> </div> <div class="info-section"> <div class="info-label">职业</div> <div class="info-content"><%= p.getOccupation() %></div> </div> <div class="info-section"> <div class="info-label">个人简介</div> <div class="info-content"><%= p.getBio() %></div> </div> <div class="video-section"> <h3>个人介绍视频</h3> <!-- 使用HTML5 video标签播放视频 --> <video controls width="600"> <!-- 注意src路径，使用上下文路径确保正确 --> <source src="<%= request.getContextPath() + "/" + p.getVideoUrl() %>" type="video/mp4"> 您的浏览器不支持HTML5视频标签。 </video> <p>这是一个使用HTML5 `<video>`标签嵌入的MP4视频。确保视频文件路径正确，且浏览器支持该视频格式。</p> </div> <% } %> </div> </body> </html>

5.3 关键点解析与避坑

  1. 路径问题：JSP中引用静态资源（图片、视频、CSS）时，务必使用${pageContext.request.contextPath}或<%= request.getContextPath() %>来获取当前应用的上下文路径。例如src="<%= request.getContextPath() %>/images/avatar.jpg"。这样无论你的应用部署在/根路径还是/jspdemo下，路径都是正确的。这是避免资源（图片、CSS、JS）404的黄金法则。
  2. 视频播放：HTML5的<video>标签在现代浏览器中支持良好。确保type属性正确（如video/mp4），并且视频文件本身是浏览器兼容的编码格式（如H.264编码的MP4）。视频文件应放在webapp下的某个目录（如videos），并通过上述正确路径引用。
  3. Servlet注解：我们使用了@WebServlet(“/profile”)注解，这等价于在web.xml中配置一个Servlet映射。访问这个Servlet的URL就是http://localhost:8080/jspdemo/profile。它会处理请求，准备好数据，然后转发（forward）到profile.jsp页面进行渲染。注意forward是服务器内部跳转，浏览器地址栏不会变。
  4. 对象传递：Servlet通过req.setAttribute(“person”, person)设置数据，JSP通过(Person) request.getAttribute(“person”)获取。这是Servlet与JSP之间传递数据的基本方式。

将图片avatar.jpg放入webapp/images/，视频intro.mp4放入webapp/videos/（请准备一个小的测试视频）。启动项目，访问http://localhost:8080/jspdemo/profile，你应该能看到一个包含个人信息和视频播放的完整页面。

6. 开发提效：IDEA中与JSP开发相关的实用技巧

项目跑通后，一些IDEA的实用技巧能极大提升开发效率，减少那些搜索“idea快捷键”、“idea插件”的时间。

6.1 实时模板与代码补全在JSP文件中，IDEA对JSTL（JSP标准标签库）和EL表达式有很好的支持。例如，输入c:然后按Tab键，可以快速补全JSTL核心标签。对于<%= %>这样的脚本片段，也有补全。可以在“Settings -> Editor -> Live Templates”中查看和自定义。

6.2 导航与查找

  • 快速在Servlet和JSP间跳转：在Servlet的doGet/doPost方法中，将光标放在“/profile.jsp”这个字符串上，按Ctrl+B (Windows/Linux) 或 Cmd+B (Mac)，可以直接跳转到对应的JSP文件。反之亦然。
  • 查找所有引用：在Servlet类名或JSP文件名上按Alt+F7，可以查找所有引用或链接到该资源的地方。

6.3 调试JSPJSP本质上会被Tomcat编译成Servlet。你可以在JSP页面的Java代码片段（<% ... %>）中打断点。在IDEA中，以“Debug”模式启动Tomcat。当浏览器访问该JSP页面，执行到断点处时，IDEA会挂起，你可以像调试普通Java代码一样查看变量、单步执行。这对于排查JSP中的业务逻辑错误非常有用。

6.4 处理JSP中的警告和错误IDEA可能会对JSP中的旧式脚本（Scriptlet）发出警告，建议使用JSTL/EL。对于学习目的，可以暂时忽略。如果想关闭这些警告，可以在“Settings -> Editor -> Inspections”中，搜索“JSP”，调整相关检查的级别。

6.5 热部署与热更新确保Tomcat配置中部署的是war exploded，并在“Server”配置标签页的“On Update action”和“On frame deactivation”中，设置为“Update classes and resources”或“Update resources”。这样，修改Java代码后，可以点击“Update”按钮（或等待自动更新）重新加载类；修改JSP、HTML、CSS、JS文件后，通常只需保存，然后在浏览器中刷新即可看到变化，无需重启服务器。

7. 从项目到部署：打包与发布前的最后检查

开发调试完成后，你可能需要将项目打包，部署到独立的测试或生产环境Tomcat中。

7.1 构建WAR包如果你用的是Maven，在IDEA右侧的Maven工具窗口中，找到你的项目，展开“Lifecycle”，双击package。Maven会在target目录下生成一个项目名.war文件（例如JspDemo.war）。

如果是普通项目，你可以使用IDEA的“Build” -> “Build Artifacts…”功能，为你的项目模块创建一个“Web Application: Archive”类型的产出物，也就是WAR包。

7.2 独立Tomcat部署将生成的WAR文件复制到独立Tomcat的webapps目录下。启动Tomcat（执行bin/startup.bat或startup.sh），Tomcat会自动解压WAR包并部署应用。此时，访问的上下文路径默认就是WAR包的文件名（不含.war后缀）。例如，JspDemo.war对应路径http://服务器IP:端口/JspDemo。

7.3 部署常见问题

  • 数据库连接池配置：如果项目用了数据库，确保独立Tomcat的lib目录下有对应的JDBC驱动JAR包，或者将驱动JAR包放在你应用的WEB-INF/lib目录下，并在web.xml或代码中正确配置数据源。
  • 静态资源路径：再次强调，在JSP/HTML中引用资源时使用${pageContext.request.contextPath}，这样无论应用部署在什么路径下都能自适应。
  • 环境差异：开发环境（如Windows）和生产环境（如Linux）的路径分隔符、文件编码可能不同。在代码中处理文件路径时，使用File.separator或Paths.get()，并明确指定字符编码（如UTF-8）。

走到这一步，你已经完成了一个JSP项目从创建、开发、调试到打包部署的全流程。这个过程里最宝贵的不是记住了点击哪个按钮，而是理解了每一个配置项的意义、每一个文件存放的位置、每一次请求的流转路径。下次再遇到404，你脑子里自然会浮现出从浏览器到服务器再到项目目录的完整地图，排查起来也就得心应手了。

网站建设 视觉设计 SEO优化
返回列表