IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 在 Visual Studio Code 中体验 Java Web 开发 -> 正文阅读

[开发工具]在 Visual Studio Code 中体验 Java Web 开发

上一篇博文介绍了如何将 Visual Studio Code 作为 Java 的开发环境。我们知道,Java Web 开发是 Java 开发的主战场,那么在 VS Code 中开发 Java Web 体验如何?有哪些要点呢?本文就带着大家体验一下,重点是 Tomcat 的使用。

创建 Maven Project

打开 VS Code,Ctrl + Shift + P 打开命令栏,按照下面的操作创建一个 Maven 项目,Archetype 类型选择 maven-archetype-webapp:

请添加图片描述

VS Code 默认在保存的时候创建项目文件夹,也就是刚才输入的 simpleservlet,我们需要用 VS Code 打开 simpleservlet 文件夹,这样 VS Code 正好以 simpleservlet 目录为基础,是一个完整 Java Web 项目文件结构。在 pom.xml 文件中添加三个依赖:

<!-- Servlet -->
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.0.1</version>
    <scope>provided</scope>
</dependency>

<!-- JSP -->
<dependency>
    <groupId>javax.servlet.jsp</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.2</version>
    <scope>provided</scope>
</dependency>

<!-- JSTL -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
    <scope>runtime</scope>
</dependency>

说明:因为程序在运行时需要 Tomcat web 服务器,Tomcat 包含 servlet 和 jsp 的相关 jar 包,所以将 Servlet 和 JSP 依赖的 scope 设置为 provided,这样打包时就不包括。JSTL 依赖的用于 JSP 页面的 EL 表达式。

maven-archetype-web 模板没有创建 src/main/java 文件夹,这个不是什么大问题,手工创建即可:

在 java 文件夹下新建 com/stonewang 文件夹 (对应 package: com.stonewang ),在 stonewang 文件夹下新建一个 HelloServlet.java 的文件,HelloServlet 被自动识别为 Java Class,代码编辑区中,顶部自动添加了 package:


文件夹显示的方式有一点奇怪,为什么不将 src/main/java 显示在一起?IDEA 中可以显示将 src/main/java 设置为 Source Root,但 VS Code 没有找到对应的可以设置的地方。下图为 IDEA Community 的显示,大家对比一下。

但在 VS Code 左侧面板中,有一个 Java Project 区域,打开后能清晰的显示 Java 的项目结构 :

编写 Servlet 的代码

将 HelloServlet 继承自类 HttpServlet,并覆盖 (Override) 父类的 doGet() 方法。VS Code 在这里提供了不错的体验。

请添加图片描述
为 HelloServlet 添加一个 WebServlet 注解,完成后 HelloServlet 的代码如下:

package com.stonewang;

// 省略 Import

@WebServlet("/time")
public class HelloServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        DateFormat dtFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String currentTime = dtFormat.format(new Date());

        req.setAttribute("currentTime", currentTime);
        req.getRequestDispatcher("/WEB-INF/jsp/hello.jsp").forward(req, resp);
    }
}

编写 JSP 代码

HelloServlet 的 doGet() 方法重定向到 hello.jsp,需要新建 hello.jsp 文件,在 WEB-INF/jsp 目录下面:

这里注意两个细节,一是 ${} 为 EL 表达式,在 pom.xml 中需要引入 JSTL 依赖,二是 page 指令中需要将 isELIgnored 属性设为 false,因为默认值为 true,EL 表达式的就不会显示。为了能够正确显示, 根据个人测试,web.xml 中的版本约束到 3.0 以上也是可以的。我对模板提供的 web.xml 进行了修改:

Tomcat 服务器

Tomcat for Maven 插件

Java Web 的运行需要 Web Server 支持,我们使用 Tomcat 服务器。有两种方法。第一种方法是在 Maven 项目中添加 tomcat for maven 插件。这个插件最新版是 2.2,貌似多年没有更新过。tomcat for Maven 在 pom 文件的 build 部分。

测试项目的运行:

在浏览器中输入 http://localhost:8080/simpleservlet/time:


我们也可以在 Terminal 窗口中输入 mvn tomcat7:run 来运行:

Tomcat for Java 插件

在 VS Code 中安装 Tomcat for Java 插件:


安装之后,左侧多了一个 Tomcat Servers 区域,点击 + 号关联本机的 Tomcat Server:

加载之后,关联的 tomcat server 显示如下:

可以选中该tomcat server,右键,启动或停止,启动后显示为绿色。运行的方法,首先运行 Maven package 命令,生成 war 包,选中 Target 目录下的 war 包,右键运行或者调试。可以不用提前启动 Tomcat。

Tomcat 安装和配置

在官网下载适合操作系统的 Tomcat,解压。本机需要先配置 JRE_HOME 或者 JAVA_HOME 环境变量。再配置 CATALINA_HOME环境变量,该目录为 tomcat 的根目录,然后将 CATALINA_HOME 环境变量加到 PATH 环境变量中。配置 Tomcat 是很基础的东西,网上很多文章。

安装 Tomcat 常常会碰到两个错误,一个是启动的时候一闪而过。此时,可以先打开 command 命令窗口,在窗口中运行 Startup,控制台中就会显示错误的原因。最常见的是没有配置 JRE_HOME 或者 CATALINA_HOME 环境变量;第二个常见的错误就是启动控制台显示乱码,原因是 Tomcat 默认的字符集为 utf-8,但控制台显示的字符集为 GBK。可以在注册表中添加一个作用于 tomcat 的配置。将 CodePage 设为十进制的 65001,然后重启 Tomcat。

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2021-10-08 11:58:11  更:2021-10-08 12:00:16 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/16 1:55:13-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码