VsCode配置JavaWeb(最新)

news2025/7/7 20:47:10

我个人是很喜欢VsCode的,开源免费、功能全面。所以为了方便,我把我几乎所有的运行都集成到了VsCode上来,JavaWeb也不例外。

前言

之前也在CSDN上看到有些博主写了配置方法,但是很不幸的是,插件Tomcat for java已经不可用了:

所以之前那些提到的配置方法有了些变化,下面我将详细的从每一步带大家配置。

因为我是windows的电脑,所以就教大家windows的配置方法。

一、基本准备 

1.JDK

这个是JAVA的必须安装内容,大家在官网上下载即可,并且现在的版本已经不需要大家自己去配置环境变量了。

2.Maven

这个是一种框架,专门用来导包用的,必不可少!

先在官网上下载(官网链接:Maven – Download Apache Maven)

下载结果是这样的压缩包,解压缩即可:

解压缩打开后的内容是这样的:

最上面的文件路径是因为我把文件从下载转到我特殊的文件夹里面的,专门为JavaWeb建的文件夹 (也建议你做好文件管理:按照你电脑的实际情况来!我的电脑是不分盘的,C盘很大,你别把你小小的系统盘塞得死死的) 

下面先来验证你是否下载成功了:

首先配置环境变量,确保cmd的命令可以执行 

名字一定是那两个名字,后面的值就需要根据自己实际文件的位置去设定了:

M2_HOME:maven的bin文件夹位置

MAVEN_HOME:maven的位置

 然后设定path的内容:

 接下来验证,打开cmd,输入mvn -version

 有上面这样的就算安装成功了(当然了,不同人的版本可能不同,没有关系的)

然后打开之前图中的“conf”文件夹,这个是配置文件夹,里面有我们需要改动的地方:

一般推荐用Notepad++打开,那个更好看、操作更方便(配置方法看这篇文章Notepad ++ 安装与配置_扬牧烟的博客-CSDN博客_notepad++,不要按这篇文章里面的地址去下载,去官网下载,挂个梯子即可打开官网了。没梯子的去这个地方下载:

链接:https://pan.baidu.com/s/1rah1sYAJ35huS4eiDSjXPw 
提取码:uwvj

里面包含了多个文件,取你需要的下载!) 

打开setting.xml后看到这里:

将绿色这一行复制粘贴到下面非注释区域,然后将内部的位置改成刚刚让你新建的“maven-repo”的位置,上图是我的电脑的位置。 

接下来,还有要改动的地方:

解释一下:因为下载速度的原因,用国内的阿里云镜像会比较好,上面的<mirror>标签里面的内容可以注释,也可以不注释。 

3.Tomcat

这个单词是雄猫的意思,我直接按照猫和老鼠的Tom猫来记它。反正就是一个服务器。虽然现在已经更新到了10.x版本,但是,说实话,软件不是越新就越好的,就像VsCode现在我推荐的就用9.x版本即可,官网也有下载的,很快就可以下好:

Apache Tomcat® - Apache Tomcat 9 Software Downloads

 下载并解压打开后应该是这样的:

接下来验证一下是否安装成功:

 

双击打开,如果闪退,去看看有没有配置jdk的环境变量:

 

接下来,打开你的浏览器,在网址栏输入:

http://localhost:8080 

就会打开下面的页面: 

 

其实这个localhost和8080端口都是可以更改的,但是前者需要改你windows系统的底层文件,以免你把电脑搞崩,还是不要改了(虽然我会了,但是我不教,你要是实在想知道,去B站搜【狂神说Java】JavaWeb入门到实战,看他的视频就知道了);后面的8080端口倒是好办,打开配置文件里面的server.xml文件改配置就行了,但是实际上没必要,用默认的就行了。

二、VsCode配置 

下载安装我就不说了,你之前要是没有对VsCode有使用和了解就不会来找这篇文章了,所以直接进入配置的细节:

1.下载插件

先在插件商城搜索java,你就可以看到这样的内容:

把前7个全下载安装起来(虽然未必全都用到,但是这些都不大,下下来为妙),因为之前的Tomcat for java已经弃用了,那么去下载这个: 

蓝色字就是链接,直接点,进去就安装即可;

 我已经安装好了:

2.配置插件 

①maven

先在设置里面搜索maven:

搜索完先点击红线画的Java,然后在下面红线的位置里面填写之前我们配置setting.xml文件的位置 

③配置Tomcat

下面是步骤图:

这个是在最左下角的位置的,先点Create New Server...

 

因为我们已经之前的步骤已经下载好了,所以选下面的,之后会跳出页面让你选择本地的Tomcat:

 

选定后会出现一个页面让你编辑一些东西,你不要管,直接Finish就行。 

然后左下角就可以看到这个了:

 

 还可以看出,这个服务器上有一个很明显的Stopped状态,说明这个服务器没开始。

接下来我们验证一下是否可用:

先右击,再选择Start Server:

 之后的控制台应该有很长的一段内容,像这样的:

接下来这样:

 

然后:

 

点击后会出现这样的选项:

 

再次点击确认,出现这样的结果:

 

验证成功!

当然了,用完之后也可以选择关闭:

 

实际上这个也不止于测试默认的index.jsp文件 (就是咱们下完Tomcat自带的那个),看到上面的Add Deployment选项了吗?那个就是用来加载你已经弄好的网站的,现在先不提,下面我们自己做一个实例的时候自然会看到怎么用。

3.搭建实例项目

在VSCode同时按下ctrl+shift+p会打开搜索栏目(如果打不开,你看看是不是因为你笔记本电脑用的是外接键盘?用自身的键盘就可以了) 

点击上图这个红框里的这个新建;

 

 然后再在框内搜索web,出来的第一个选择:

(这个我忘记截图了,直接用了我参考的那个文章的图,它主要是比较旧的文章,所以有些地方不一样了,我等于是更新细节再写一遍。本文最后会给出链接,方便大家参考) 

上图的版本就选1.4即可

 上面这个就是给工程命名了,自己随便取但是主要符合com.xxx.xxx的规则!

再往下还有一个命名的东西,我直接默认demo,问题不大。

 上图就是选择你要建立工程的位置。

控制台会在这里卡你一下,不用管,直接回车即可。

 

还会再卡你一下,按照上图说的做;

 

有BUILD SUCCESS 就表示成功创建了。而且左上角也看到了demo文件夹的出现

 

展开可以看到demo有这些内容,但是这些还不够,你需要建立如下的文件夹:

 

注意点:

(这些是我从别处看来的,给放在这里)

“其中java文件夹用来存放java文件, resources用来存放资源文件(maven编译时会识别文件夹名所以必须要叫resources, 不然就要在pom.xml中手动配置资源文件夹)到此一个web项目的框架已经建好了, 使用maven创建web项目的话导包都是在pom.xml中进行, 这些有关maven的使用都可以通过百度搜索到, 此处不详述. 当然也可以直接将包放在webinf目录下(不推荐). (此处经历过一些挫折, 在使用tomcat10时,由于其httpservlet类的包名发生变化了, 不再是javax开头, 当时我在pom.xml文件中一直引用javax开头的servlet-api包, 被折磨了很久, 后来直接使用tomcat的servlet-api包就解决了, 但再到后来做ssm项目时, 由于spring-mvc框架中也是使用的javax开头的servlet-api包, 导致项目又挂掉了, 最后还是弃用了tomcat10, 改用回tomcat9, 算是走过的一些坑吧- -||)”

4.运行实例项目

还是先ctrl+shift+p,然后输入maven并选择红框的内容:

 然后在下面的内容中选一个(因为我是删掉原先的重新为了写文章而演示,所以会有两个选项,你们可能第一次只有一个,不过这个不重要):

(我选的第一个) 

选择package即可 

自动生成了target文件夹!里面也有demo.war文件,请注意这个文件!

接下来准备运行,右击看到这个选项,然后点击。

选择File,然后选中demo.war文件:

 

 之后选择No:

控制台有一堆东西,不要管它,看左下角:

 

还是右击这个上图蓝色的部分:

先:

 

后:

 

点击,看到出现下图的东西(点第一个):

 

 再出现下面的选项:

点第二个,这个就是我们需要的demo项目的网页!来看看结果:

成功!!!

这里显示的是index.jsp的内容.到此, 一个maven web项目就搭建好了. 使用vscode的maven插件其实也能编译, 但肯定是没有直接package那么方便的, 平常比较常用到的话一般是clean, 用来清理target目录, 其实一个package命令实际上是maven插件的依次执行, 在输出窗口也有体现出来, 有关maven插件的更多使用可以通过百度得到, 此处不详述, 如图为clean命令, 点击图中的三角形即可执行:

 

 这是我学习的文章的原文链接:https://blog.csdn.net/weixin_44573776/article/details/107899379 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405729.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Web过滤器:Filter

Filter 概述工作原理生命周期web.xml配置的常用节点FilterConfig类过滤器链FilterChainHttpFilter的简化设计自动登录功能的改进验证登入页面的改进浏览器的缓存功能概述 Filter过滤器,是Servlet技术中最实用的技术,能够管理Web服务器的所有Web资源,实现信息拦截、权限访问控…

vue动态路由添加,vue-router的addRoute方法实现权限控制,添加根路由和子路由

addRoute路由分为静态路由和动态路由静态路由和动态路由的优缺点动态路由实现思路&#xff1a;动态路由遇到的问题与解决方式动态添加子路由路由分为静态路由和动态路由 静态路由和动态路由的优缺点 1、中大型项目&#xff0c;采用的都是动态路由方式,因为后台导航目录运营人…

Vue3如何封装组件?

&#x1f525;&#x1f525;&#x1f525;欢迎关注csdn前端领域博主: 前端小王hs &#x1f525;&#x1f525;&#x1f525;email: 337674757qq.com &#x1f525;&#x1f525;&#x1f525;前端交流群&#xff1a; 598778642 在开发Vue3项目的过程中&#xff0c;我们经常会使…

H5页面跳转微信小程序时:wx.miniProgram.navigateTo 报错 ‘wx‘ is not defined no-undef

有一个功能&#xff0c;需要从H5页面跳转到微信小程序&#xff0c;查了微信官方文档&#xff1a;只需要引入js文件&#xff0c;然后直接使用即可&#xff1a; 1&#xff1a;引用&#xff1a; 当然也可以下载下来直接引用项目具体位置的js文件 2: 使用&#xff1a; 然后一直报错…

vue3 hooks使用

vue3 hooks使用 今天我们稍微说一下 vue3 项目中的 hooks 的使用&#xff0c;其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的&#xff0c;学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉&#xff0c;就算没用过也一定了解过&#xff0c;也就是混入&#xff0c;通过 mixin …

useDark的使用方法以及Element-Plus深色主题切换案例(vue3)

useDark 顾名思义&#xff0c;是否使用深色模式&#xff0c;useDark它是通过读取localStorage/sessionStorage的存储值&#xff08;key 是可自定义的&#xff09;。从而设置html的class。VueUse的官方案例使用了Tailwind CSS 偏好的暗模式。因为我们不一定都用得到Tailwind CSS…

vue实现本地预览word(docx)、excel(xlsx)、pdf文件

vue实现本地预览word(docx)、excel(xlsx)、pdf文件 实现效果&#xff1a; 通过点击预览&#xff0c;浏览器打开新标签页展示文件内容 word效果&#xff1a; pdf效果&#xff1a; excel效果&#xff1a; 前期准备&#xff1a; word插件&#xff1a; npm install --save …

【TFS-CLUB社区 第5期赠书活动】〖Python OpenCV从入门到精通〗等你来拿,参与评论,即可有机获得

文章目录❤️‍&#x1f525; 赠书活动 - 《Python OpenCV从入门到精通》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 内容提要❤️‍&#x1f525; 赠书活动 → 获奖名单❤️‍&#x1f525; 赠书活动 - 《Python OpenCV从入门到精通》 内容简介&#xff1a; 《Python O…

【uniapp】页面下拉刷新

目录 一、全局 二、局部 1、一个页面一个下拉刷新 2、一个页面多个下拉刷新&#xff08;切换时滚动条回到顶部&#xff09; 3、一个页面多个下拉刷新&#xff08;切换时恢复滚动条位置&#xff09; 一、全局 修改pages.json的"enablePullDownRefresh": true, …

【Node.js实战】一文带你开发博客项目之登录(前置知识)

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿多个前端 offer&#xff08;秋招&#xff09; &#x1f680;未…

微信小程序自定义组件(超详细)

&#x1f48c;写在开头&#xff1a; 哈喽呀&#xff0c;亲爱的宝子们。 今天要介绍的是关于小程序自定义组件的相关内容。 主要分以下几个部分&#xff1a;组件的创建&#xff0c;组件的结构&#xff0c;组件的引用&#xff0c;组件样式&#xff0c;组件的生命周期等。 文章目录…

【蓝桥杯真题】当蓝桥杯开设Web组之后,对几题能拿省一?

目录 &#x1f3c6;难度分析 &#x1f3c6;一、水果拼盘 &#x1f3c6;二、展开你的扇子 &#x1f3c6;三、和手机相处的时光 &#x1f3c6;四、灯的颜色变化 &#x1f3c6;五、冬奥大抽奖 &#x1f3c6;六、蓝桥知识网 &#x1f3c6;七、布局切换 &#x1f3c6;八、购…

vue3,使用watch监听props中的数据

情况一&#xff1a;监听 props 中基本数据类型 父组件中对传入数据的处理 const handleClick () > {testStr.value P }子组件中监听传入的数据 watch(() > props.testStr,(newVal, oldVal) > {console.log(监听基本类型数据testStr)console.log(new, newVal)cons…

Vue 和 React 有什么不同?

大家好&#xff0c;我是前端西瓜哥。今天的文章简单探讨一下 Vue 和 React 的不同。 本人 Vue2 和 React 都用过&#xff0c;但不熟悉 Vue3&#xff0c;没用它做过项目。 其实我对这两大框架也没有认真钻研过它们的细节&#xff0c;也就是工作上用它们写一些简单业务&#xf…

解决npm ERR! Cannot read properties of null (reading ‘pickAlgorithm‘)报错问题

在vue项目中&#xff0c;使用npm i 命令安装node modules时&#xff0c;出现报错。 第一句&#xff1a; npm ERR! Cannot read properties of null (reading pickAlgorithm) 搜索的话也是有很多答案的&#xff0c;比如&#xff1a; 在终端中运行命令&#xff1a;npm cache cle…

Vue使用axios进行get请求拼接参数的几种方式

前言 本文主要介绍如何在Vue使用axios进行get请求拼接参数的两种方式 我们就以github上的一个开源接口举例&#xff1a; https://api.github.com/search/users?qxxx 这是github给开发人员提供的一个接口&#xff0c;是get请求。我们可以直接通过浏览器访问 很明显&#xff0…

ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色

本文首发&#xff1a;《ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色》 ECharts 饼状图颜色设置教程 方法一&#xff1a;在 series 内配置饼状图颜色方法二&#xff1a;在 option 内配置饼状图颜色方法三&#xff1a;在 data 内配置饼状图颜色方法四&#xff1a;配置 E…

UE4 利用WEBUI插件完成UE与JS的交互 (UE4嵌入WEB)

目录 一、UE4显示Echart图表 二、UE调用JS&#xff08;修改Echart图表数据&#xff09; 三、JS调用UE&#xff08;UE4中打印js传递过来的数据&#xff09; 一、UE4显示Echart图表 步骤&#xff1a; 1.下载WEBUI插件 我的UE编辑器版本是4.24.3对应版本的插件下载地址是 链…

全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】

源码获取方式&#xff1a; 数据滚动大屏源码&#xff0c;原生js实现超级简单-Javascript文档类资源-CSDN下载原生js实现的数据滚动大屏案例&#xff0c;实现应该是全网最简单的&#xff0c;拿来直接使用即可&#xff0c;没有会员的小伙伴去我文章主更多下载资源、学习资料请访问…

聊一聊浏览器打印 - window.print

前言 一般信息填写类的需求页面&#xff0c;都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图&#xff0c;而打印则是基于预览来生成 PDF 文件。 浏览器原生 API window.print() 可以用于打印当前窗口&#xff08;window.document&#xff09;视图…