很多初学 Java Web 的同学最大的卡点不是代码，而是环境联调：

前端页面写完访问 404、Tomcat 启动成功但连不上数据库、MySQL 配置正确但项目读不到数据、无法断点调试后端代码……

绝大多数教程只教「单独配置」，没有教三者如何真正联动调试。

今天这篇博文，带你从零搭建VSCode 开发 — Tomcat 部署运行 — MySQL 数据交互完整可调试链路，一次性打通前后端闭环。

全程可直接复刻，无玄学、无报错、一步到位。

0、项目页面展示

前端数据存储界面

后端存储数据库成功界面

mysql数据库界面·

一、整体架构梳理（先懂流程，再排错）

整套联动运行逻辑非常清晰：

  1. VSCode：编写 Java 后端代码、Servlet、JDBC、前端 html/js
  2. Tomcat：作为服务器，部署 Web 项目、接收前端请求、运行后端程序
  3. MySQL：提供持久化数据，后端 JDBC 连接数据库完成增删改查
  4. 联动调试：前端页面发请求 → Tomcat 拦截 → 后端代码执行 → 操作 MySQL → 返回数据渲染前端

所有 404、500、空白页面、数据库为空 的问题，都可以根据这个链路精准定位。

二、前期环境准备

确保本地已安装：

重点：必须使用适配自己数据库版本的驱动，否则直接报错无法连接。

三、VSCode Java Web 项目标准结构（关键！）

很多人连不上服务器，是目录结构不标准。

必须严格如下：

plaintext

WebProject/
 ┣━ WEB-INF/
 ┃   ┣━ classes        # Java编译输出
 ┃   ┣━ lib            # 放mysql驱动、所有jar包
 ┃   
 ┣━ index.html         # 前端页面
 ┗━ .java 源码文件

核心规则：

  • jar 包必须放在 WEB-INF/lib（有两个，servlet.api我放在博客最上面了）
  • class 文件必须自动编译到 classes(代码保存后vscode会自动生成class文件，一般在bin目录下面）
  • 最终webproject文件夹里面所有的文件都要放在tomcat里面的root文件里面。D:\apache-tomcat-9.0.85-windows-x64\webapps\ROOT（不管你在哪里编译的项目，都要把文件放到这个目录下面。）

四、VSCode 配置 Tomcat 实现一键运行 & 断点调试

1. 安装必备扩展

  • Extension Pack for Java
  • Tomcat Helper
  • Debugger for Java

装好之后 VSCode 才具备：编译 Java、部署 Tomcat、断点调试能力。

2. Tomcat 本地路径绑定

VSCode 左下角 → 服务器 → 选中 Tomcat → 设置本地解压路径。

绑定成功后可以：

  • 右键项目 Run on Tomcat 一键部署
  • 支持热部署、重启、清空缓存
  • 支持后端代码断点调试

3. 开启调试模式（最关键）

很多人只是 “运行项目”，不是调试项目，所以打了断点不生效。

正确操作：

  1. 左侧运行和调试
  2. 选择「Java on Tomcat」
  3. 启动调试

此时 Tomcat 是以 Debug 模式 启动，所有断点均可拦截请求。

4.代码分享

后端AddUserServlet.java

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/addUser")
public class AddUserServlet extends HttpServlet {

    // 数据库连接信息（和你测试成功的配置完全一致）
    private static final String URL = "jdbc:mysql://localhost:3306/testdb?useSSL=false&characterEncoding=utf-8";
    private static final String USER = "root";
    private static final String PASSWORD = "12345678"; // 换成你自己的密码

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        // 处理中文乱码
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");

        // 1. 接收前端表单提交的数据
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        String address = request.getParameter("address");

        Connection conn = null;
        PreparedStatement pstmt = null;

        try {
            // 2. 加载驱动并获取连接
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(URL, USER, PASSWORD);
            
            // 3. 执行插入SQL
            String sql = "INSERT INTO user(name, age, address) VALUES (?, ?, ?)";
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, name);
            pstmt.setString(2, age);
            pstmt.setString(3, address);
            
            int result = pstmt.executeUpdate();
            
            // 4. 给前端返回结果
            if (result > 0) {
                response.getWriter().println("<h2>✅ 提交成功！数据已保存到数据库！</h2>");
            } else {
                response.getWriter().println("<h2>❌ 提交失败！数据未保存！</h2>");
            }
            
        } catch (Exception e) {
            e.printStackTrace();
            response.getWriter().println("<h2>❌ 连接或执行SQL出错：" + e.getMessage() + "</h2>");
        } finally {
            // 关闭资源，避免连接泄漏
            try { if (pstmt != null) pstmt.close(); } catch (Exception e) {}
            try { if (conn != null) conn.close(); } catch (Exception e) {}
        }
    }
}

前端index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>提交数据到MySQL</title>
</head>
<body>
    <h2>用户信息提交</h2>
    <form action="addUser" method="post">
        姓名：<input type="text" name="name"><br><br>
        年龄：<input type="text" name="age"><br><br>
        地址：<input type="text" name="address"><br><br>
        <button type="submit">提交到数据库</button>
    </form>
</body>
</html>

五、JDBC 连接 MySQL 配置（可直接抄模板）

放在你的工具类 / Servlet 中即可使用。

java

import java.sql.*;

public class DBUtil {
    public static Connection getConnection() {
        Connection conn = null;
        String url = "jdbc:mysql://localhost:3306/testdb?useSSL=false&serverTimezone=UTC&characterEncoding=utf8";
        String user = "root";
        String password = "你的密码";

        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url, user, password);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return conn;
    }
}

重点避坑（90% 人踩的雷）

  1. 必须加时区参数 serverTimezone=UTC
  2. 必须放 mysql-connector.jar 到 WEB-INF/lib（链接放在第二步了）
  3. MySQL8 驱动类是 com.mysql.cj.jdbc.Driver
  4. 数据库名、端口、账号密码严格对应本地

六、前后端联动完整流程演示

1. 前端发起请求

简单写一个前端测试：

<script>fetch ("testServlet").then (res=>res.text ()).then (data=>{console.log ("后端返回数据：",data);</script>

plaintext


### 2. Servlet 接收请求、查询数据库、返回数据
```java
@WebServlet("/testServlet")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
        // 1.连接数据库
        Connection conn = DBUtil.getConnection();
        String resData = "";

        try{
            Statement stmt = conn.createStatement();
            ResultSet rs = stmt.executeQuery("select * from user");
            while(rs.next()){
                resData += rs.getString("username") + "\n";
            }
        }catch (Exception e){
            e.printStackTrace();
        }

        // 2.向前端返回数据
        resp.getWriter().write(resData);
    }
}

3. 调试效果

  • 在 Servlet 第一行打断点
  • 浏览器刷新页面
  • VSCode 成功拦截请求、暂停代码
  • 可逐行查看：连接状态、SQL 语句、数据库返回值、响应结果

真正实现：前后端全链路可视化调试

七、高频报错一站式解决（独家总结）

1. Tomcat 能启动，页面 404

  • 项目未部署成功
  • 没有把class文件放在classes目录下面（亲测最容易出错）

2. Tomcat 启动成功但连不上 MySQL

  • 没放驱动 jar
  • 时区参数缺失
  • MySQL 服务未启动
  • 账号密码错误

3. 断点不生效

  • 没有以「调试模式」启动 Tomcat
  • 代码未更新、热部署未刷新
  • 断点打在了无效位置

4. 页面空白、后端无报错

  • SQL 查询为空
  • 前端接收回调异常
  • 后端未输出响应流

八、这套联动的优势（开发效率翻倍）

  1. VSCode 全程一站式开发，不用 IDEA 笨重环境
  2. Tomcat 动态部署、随时重启、调试快速
  3. 数据库实时交互，可断点看每一步数据状态
  4. 适合初学 Java Web 建立完整开发思维
  5. 轻量化、配置简单、不容易崩环境

九、结语

VSCode + Tomcat + MySQL 看似简单，实则是 Java Web 新手最关键的一套基础链路。

只要你能完整调通这一套前后端 + 数据库调试流程，Servlet、JDBC、MVC 模式、前后端交互逻辑你就彻底入门了。

# java # 数据库 # vscode
Logo
亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

avatar 亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

avatar 亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

avatar 亚马逊云科技技术品牌专区