在Vs Code中搭建JSP开发环境

     阅读:79

如何在Visual Studio Code中搭建JSP网页的开发环境

准备:

  • Visual Studio Code
  • jdk
  • Maven
  • Tomcat

VsCode和Java开发环境

VsCode的安装不再赘述
首先需要在vscode中搭建好Java的开发环境,安装java环境的扩展插件
在这里插入图片描述
下载jdk,建议使用jdk11,若有梯子可以上官网下载,没有的话建议去清华大学的镜像站下载

下载好之后将JDK的环境变量配置好,配置JDK的环境变量网上已经有大量资料,不再赘述。特别提醒系统变量中必须要有一个叫JAVA_HOME的变量,否则后面使用Maven新建项目会失败
在这里插入图片描述

下载并配置Maven

Maven官网上下载任意版本
在这里插入图片描述
这里我们选择最新的3.8.2,并且下载解压版,下载完成之后解压

之前在vscode中安装好了Java开发环境之后,Maven for Java这个扩展应该也装好了,但不能直接使用,按ctrl+shift+p搜索Maven的设置,把的Maven的配置文件目录的路径设置好
这是下载的Maven根目录,conf即为配置文件目录
至此Maven已经配置好

Tomcat的下载与配置

Tomcat的官网上下载任意版本,这里我们选用较为稳定的8.5.71版本
在这里插入图片描述
下载完成后解压

在VsCode中安装Tomcat for Java插件
在这里插入图片描述
与前面设置maven类似,在vscode的设置中搜索tomcat,并设置tomcat的工作目录
在这里插入图片描述

配置Maven和Tomcat的环境变量

因为是类似的步骤,所以放在一起了在这里插入图片描述

使用

重启vscode,可以看到文件目录里多了tomcat的服务器选项,点击加号添加
在这里插入图片描述
选择tomcat的根目录即可添加tomcat服务器
在这里插入图片描述
之后按Ctrl+Shift+P,输入Maven,点击创建一个Maven项目
在这里插入图片描述
再搜索webapp,来创建webapp项目,选择版本,输入项目名,选择项目目录之后即可开始创建
在这里插入图片描述
开始后如果报错可以检查有没有添加JAVA_HOME这个环境变量

耐心等待Maven创建项目,直到命令行提升要输入版本号(任意填写,相当于填你这个项目的信息),根据命令行的提示输入对应内容之后,项目即创建成功,由于我这里之前已经创建过其他项目,而使用Maven创建过第一次项目之后就不用再输入上述内容,所以这里没有截到图。

总之创建完的项目结构是这个样子的
在这里插入图片描述
此时已经可以开始编码了,可以看到默认的jsp页面中的内容如下
在这里插入图片描述
想要查看页面效果,在webapp文件夹上右键,选择Run On Tomcat Server
在这里插入图片描述
可以看到之前创建的tomcat服务器已经变成了绿色,看到命令行输出Server startup in xxx ms即代表服务器启动成功
在这里插入图片描述
通过命令行的提示可知道服务器启动在8080端口,在浏览器中输入127.0.0.1:8080/webapp/即可看到JSP页面部署后的样子
在这里插入图片描述

注意,如果网页报错则可能是服务器默认端口被占用,可以尝试去tomcat根目录中的conf文件夹中找到server.xml文件,搜索当前端口,并改为其他端口
在这里插入图片描述
可以看出我这里把端口号改为了8000

参考百度贴吧https://tieba.baidu.com/p/6546145317