最近摸索了怎么使用vscode搭建一个网页，从中我遇到了很多问题，同时我也摸索了一条新的搭建方式。作为实战帖，我将向大家介绍整个流程以及会遇到的问题。

一，准备环境

1.安装JDK

安装教学，点击即可看到完整的安装过程。

安装完可以使用指令查看版本

java -version

我的版本是11.0.8,出现版本号就是安装成功了。

2.安装tomcat

1.下载：Tomcat 10.x / 9.0（Core: zip 免安装版）

2.下载地址

直接下载入口

Windows 系统下载：zip 压缩包（免安装，解压即用）找到页面里：Core → 64-bit Windows zip

3.解压路径

解压到无中文路径：D:\apache-tomcat

测试：运行 bin/startup.bat，访问 http://localhost:8080 看到猫页即成功

二.vscode必备插件

1.Extension Pack for Java（Java 全家桶）

2.Community Server Connector（Red Hat，替代旧 Tomcat for Java）

3.建立项目

当成功下载完Extension pack for java 之后，就会发现页面左下角会有SERVERS和JAVAPROJECTS，如果没有可以重启一下vscode，如果还是没有，

  • 打开 Services 面板
    • 菜单：View → Tool Windows → Services。
    • 快捷键：Ctrl+Shift+P → 输入 Services: Focus on Services View。

1.文件结构

点击新建文件

点击新建一个空的项目，选择No build tools。

新建的项目目录是这样的，里面还很空，我们要在项目的文件夹里面补上其他的部分文件

我的文件夹最终是这个结构（在项目文件夹里面加新的子文件夹，在vscode里面加新代码文件。）

对了，还有一个lib文件夹里面的文件，这个是Tomcat里面的servlet里面的文件，没有这个后面的代码会报错，我们直接把文件复制下来，粘贴到项目的lib文件夹里面就ok了。粘贴完重启一下vscode。

代码分享

HelloServlet.java

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;

// 用注解配置Servlet，不用再写web.xml（更方便）
@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置响应编码，解决中文乱码
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("<h2>✅ GET请求成功！后端Servlet响应：</h2>");
        response.getWriter().write("<p>这是实验四的Servlet基础交互Demo，服务器时间：" + new java.util.Date() + "</p>");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置请求编码，解决表单提交的中文乱码
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");

        // 读取表单提交的参数
        String username = request.getParameter("username");
        response.getWriter().write("<h2>✅ POST请求成功！表单提交结果：</h2>");
        response.getWriter().write("<p>你输入的姓名是：" + username + "</p>");
        response.getWriter().write("<p>服务器已成功接收并处理你的请求！</p>");
    }
}

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实验四：Servlet基础交互</title>
</head>
<body>
    <h1>实验四：Servlet基础交互Demo</h1>
    <p>服务器：Tomcat 9.0.85 | 开发工具：VS Code</p>
    <hr>

    <!-- 1. 链接访问Servlet -->
    <p><a href="hello">点击访问后端Servlet（GET请求）</a></p>

    <!-- 2. 表单提交（POST请求，拓展用） -->
    <h3>表单提交测试</h3>
    <form action="hello" method="post">
        <label>请输入你的姓名：</label>
        <input type="text" name="username" required>
        <button type="submit">提交</button>
    </form>
</body>
</html>

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">

    <!-- 注册Servlet -->
    <servlet>
        <servlet-name>HelloServlet</servlet-name>
        <servlet-class>HelloServlet</servlet-class>
    </servlet>

    <!-- 配置访问路径 -->
    <servlet-mapping>
        <servlet-name>HelloServlet</servlet-name>
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>

</web-app>。

到此三个重要的文件都成功建成。写完之后保存，后台自动生成.class文件（很重要)，在bin文件夹下面。

三.运行项目

到这里基本的条件都满足了，接下来就是开始运行。

1.部署服务器

点击右边的加号，新加服务器

选择no,再把tomcat的路径加进去。记住要点进目录里面再加（有bin文件夹的那个目录）。然后点finish完成。

右键服务器，选择要运行的网页文件夹，点击add deployment，选择webcotent文件夹。

最后右键start server,网站就在http://localhost:8080/里面跑起来了。

2.项目实际运行

这里有一个巨大的坑，我发现vscode真实编译运行的是tomcat里面的ROOT文件夹，如果你和我一样，发现显示404，说明编译的是tomcat里面文件夹。我们需要把项目复制到里面去。

点开Root，把项目webcontent里面所有的项目都复制到里面，直接control+A,直接复制进去。

同时增加一个classes文件夹，放.class文件。

同时再去重新启动服务器，访问http://localhost:8080/，就可以看到网页的内容了。

# java # 开发语言
Logo
openEuler 社区

openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构

更多推荐

cover

ZS315Q + 2.0Hub Type-C 拓展坞转DP1.4 投屏8k 5合1 DP1.4 (8K@60Hz) + PD 100W + 3xUSB2.0

avatar openEuler 社区
cover

还在用HTTP轮询？WebSocket让你前后端实时“贴贴“不香吗？

avatar openEuler 社区

Linux网络编程基础（IO多路复用）

IO多路复用技术是现代高性能网络编程的核心，它通过单线程监控多个文件描述符状态，解决了传统IO模型在高并发场景下的性能瓶颈。文章详细介绍了三种主流实现机制：select（早期方案，存在性能限制）、poll（改进select但仍有不足）和epoll（Linux特有，最高效）。重点分析了epoll的工作原理、优势（无数量限制、事件驱动、高效通知）和使用示例，并提供了性能优化策略。该技术广泛应用于Ngi

avatar openEuler 社区