vs code编写web项目

最新推荐文章于 2024-07-26 13:35:59 发布
最新推荐文章于 2024-07-26 13:35:59 发布
阅读量6.1k 收藏 30
点赞数 3
文章标签： 前端 maven vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43954459/article/details/124767630
版权
本文介绍了如何使用Visual Studio Code (VSCode) 创建Java Web项目，强调了VSCode与VS的区别，并详细步骤指导通过Maven构建webapp项目。在已安装JDK、Maven、Tomcat的情况下，利用VSCode的Maven插件创建项目，配置Maven的pom.xml文件，然后通过插件运行项目，最终在Tomcat中部署并打开浏览器查看运行结果。
摘要由CSDN通过智能技术生成

vs code编写web项目

0.小贴士

1.vs和vscode是不一样的是不一样的

2.在已经存在maven的时候，直接在maven的+创建项目，用ctrl+shoeft+p 搜索不到maven的创建项目。
在这里插入图片描述

1.准备工具

jdk、maven、tomcat9、vscode

vscode不能直接创建java web项目，使用maven的webapp项目。

vscode插件：

请添加图片描述
请添加图片描述
在这里插入图片描述

配置maven的xml文件

请添加图片描述

*成功后在tomcat下有apache的文件
请添加图片描述

2.创建web项目

ctrl+shift+p输入maven
img
选择webapp
在这里插入图片描述

选择版本

在这里插入图片描述

存放的文件夹

在这里插入图片描述

此时maven开始部署项目, 在vscode的输出窗口中可以看到, 当出现如下行时, 需要我们输入项目的groupId, 此处我设置为demo, 如图:在这里插入图片描述

按下回车, 再输入artifactId,

按下回车, 此时提示我们选择version直接回车就行

提示我们选择package, 直接回车

提示Y, 是否确认, 回车确认

出现
在这里插入图片描述

项目结构中

在这里插入图片描述

创建自己要的java、test、resources。

在这里插入图片描述

3.运行项目

按下ctrl+shift+p, 输入maven, 选择如下图指出项:

在这里插入图片描述

选择package, 如下图指出项:

在这里插入图片描述

在target目录下：

在这里插入图片描述

右击tomcat运行

在这里插入图片描述

输出窗口没有报错的话, 展开tomcat插件, 右击如图项, 选择打开浏览器:

在这里插入图片描述

运行结果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-laJLWymy-1652508421583)(C:\Users\hobo\AppData\Roaming\Typora\typora-user-images\image-20220514135621285.png)]

且醉听风吟
关注
vscode使用教程（web开发）
weixin_30291791的博客
05-25 1万+
1.安装 进入官网下载https://code.visualstudio.com/ 一直下一步就好了，中间可以选择把软件安装在哪个目录。 2.常用插件安装 a. 进入扩展视图界面安装/卸载 a1.快捷键：Ctrl+shift+x； a2.查看——>扩展； a3.点左侧边框的扩展图标按钮进入。（最下面的正方形图标） 在顶部搜索框输入你需要的扩...
从入门开始使用Vscode，学写Web也很简单
flippy17的博客
11-30 9294
我在一篇文章里看到过“拥有 VSCode，你就拥有了全世界”。今天向大家介绍在编写html时需要注意的一些小知识。作为简单入门的基础，可以为小白们答疑解惑。 首先我们在安装好Vscode后，很多人刚打开就被一片英文操作系统冲昏了头脑，其实想要设置中文不必麻烦的去安装什么汉化包，只要在程序中搜索中文语音包安装并重启，就完成了中文设置。 接下来就是新建项目开始打代码了，那么要如何新建项目呢，接下来让我带你一起学习新建。首先我们在想要保存项目的路径里新建一个文件夹，然后回到程序中选择打开文件，找到新建的.
Visual Studio Code （VSCode）使用之普通Web项目启动
qq_41099935的博客
11-19 6709
由于当前接触到的一些老项目，未使用maven管理依赖；使用idea社区版无法实现热部署，在调整页面时超级不方便。基于总总原因，需要找寻一个方便且简洁的ide工具启动普通Web项目。此时，VSCode出现啦。本文主要是介绍启动项目的相关内容，插件的安装和设置不做赘述。ps：安装VSCode插件或启动maven管理依赖的项目可查看另一篇帖子。启动普通Web项目，相比启动Maven管理依赖的项目在设置上更繁琐一些（也可能是我没找到更好的方法）。一次设置，永久使用。
web前端开发一、VScode环境搭建
最新发布
qq_40170041的博客
07-26 331
1、VScode安装live server插件，写完代码后，保存就会在浏览器自动更新，不需要再去浏览器点击刷新了。5、右键，选择 open with Live Server。4、选择第一个，然后回车，就会自动输入html的标准程序。2、创建html文件。
JavaWeb：VsCode创建Web项目
qq_55038440的博客
05-11 1502
其中java是放java代码的，resources是放资源文件的，lib是放jar包的。在settings.xml的mirrors标签下添加mirror标签，具体为以下代码。建好文件夹后，打开conf文件夹，打开settings.xml，这步是设置本地依赖存储仓库的。这里的包添加的是Maven打包成的war包用来发布项目，当然也可以上传文件。之前安装的服务器插件，在vscode上配置tomcat服务器。先在官网上下载tomcat，解压到自己设定的文件夹。Java的运行插件和Maven的运行插件。
使用vscode创建web项目
ouyangqing的专栏
09-21 3251
使用vscode创建web项目
VSCode中开发JavaWeb项目（Maven+Tomcat+热部署）
weixin_49666086的博客
07-29 1万+
在VSCode中开发JavaWeb项目，包括Maven构建、Community Server Connectors插件部署Tomcat、Deploy热部署等。
使用vscode搭建javaweb项目
热门推荐
weixin_44573776的博客
08-09 3万+
使用vscode搭建javaweb项目工具准备创建web项目运行项目 工具准备 jdk, maven, tomcat9, vscode; 上述软件的安装配置在百度就能找到很多教程, 所以此处不详述. (jdk使用1.8以上版本的就行, tomcat的话最好用9, 10的话由于httpservlet类的包名修改了所以会出现一些不兼容的错误导致运行失败,剩下两个使用哪个版本都可以). 由于vscode不能直接创建javaweb项目, 所以使用maven的webapp项目; vscode需要下载的插件如图: 下
vscode 搭建web工程_你会在本地搭建 Web 版 VS Code 吗，看完这一篇你就能轻松实现了！...
weixin_39788969的博客
12-19 1104
Visual Studio Code是微软推出的一款轻量级编辑器，与它一起在市场争锋的相似软件还有 Atom和 Sublime Text，面世第二年的它只占据 7%左右的市场，后来在短短三年时间雄踞了半壁江山，不可谓不哇塞。近日，微软在 Ignite 2019大会上，正式发布了 「Visual Studio Online」。其中包含了微软托管的 Web版 VSCode，如今又发布了 VSCode ...
创新之使用 VS Code 编写 Caché.pdf
12-06
而采用VS Code编写Caché的优点则包括： 1. 使用Alt+Shift+F快捷键可以快速格式化代码，保持代码整洁。 2. 强大的智能提示功能，输入首字母即可自动联想相关函数和变量。 3. Ctrl+鼠标左键可实现方法跳转，便于代码...
nodejs-vscode-debug:使用VS Code远程调试您的Node.js Web应用程序
04-07
总结来说，使用VS Code远程调试Node.js Web应用程序能提升开发效率，尤其是当项目复杂度增加时。结合TypeScript的静态类型检查，可以减少错误，提高代码质量。通过正确配置`launch.json`和`tsconfig.json`，你可以...
vscode环境搭建及项目启动
08-27
vscode环境搭建及项目启动
Enlighten:Code First Girls团队项目“启迪” Web开发简介
05-26
"启迪"是Code First Girls团队项目的一个Web开发入门课程，旨在帮助初学者了解并掌握Web开发的基本概念和技术。Code First Girls是一个致力于增加女性在技术领域参与度的组织，通过这样的项目，他们为女性提供免费或...
MakeCode-Android：在Android上运行MakeCode Arcade项目！
02-04
MakeCode Arcade允许用户通过图形化编程或JavaScript编写2D游戏，而MakeCode-Android项目则为Android设备提供了运行这些游戏的环境。 MakeCode-Android项目的重点在于提供一个原生的Android应用，使用户能够在移动...
CGB2102Code_Web
04-19
【标题】"CGB2102Code_Web"是一个与Web开发相关的项目代码库，可能代表一个课程或项目的代码示例集合。这个标题暗示了它包含与Web编程相关的代码，可能涵盖了各种技术和概念。 【描述】由于描述简单地重复了标题...
前端-VScode安装和使用，公司开发web
m0_60388292的博客
03-31 1311
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》用算法》**[外链图片转存中…(img-CYzWhQVb-1711824602612)][外链图片转存中…(img-6r6PKjxj-1711824602612)]
vscode 搭建web工程_VsCode搭建Java开发环境（Spring Boot项目创建、运行、调试）
weixin_42503415的博客
12-29 968
配置Maven：点左下角的设置图标->设置，打开设置内容筛选框，输入maven，然后点击右侧的打开json格式setting：然后把maven的可执行文件路径配置、maven的setting路径配置、java.home的路径配置，拷贝到右侧的用户设置区域并且设置为自己电脑的实际路径设置内容如下：{"workbench.iconTheme": "vscode-icons","workbench...
vscode 配置javaweb开发环境,超级简单,纯新手带图,学会后真香.宇宙无敌第一编辑器vscode
zhongjl666的博客
10-27 3904
vscode配置javaweb环境
Python 魔法方法
06-27
Python 魔法方法（Magic Methods）是一组特殊的方法名，这些名字以两个下划线（`__`）开始和结束，它们主要用于提供特定的行为或交互，使得 Python 对象看起来就像是拥有某些魔法能力一样。当你使用这些魔法方法时，实际上是在调用 Python 内置的特殊处理机制，用于处理诸如属性访问、比较、序列操作等常见的操作。 以下是一些常见的 Python 魔法方法： 1. `__init__()`：构造函数，创建新对象时自动调用。 2. `__str__()`：当打印对象时，返回的字符串表示。 3. `__repr__()`：通常返回一个可重现对象的字符串，更适合于调试。 4. `__len__()`：获取对象的长度，如列表、元组或字符串。 5. `__getitem__()` 和 `__setitem__()`：实现索引和切片操作，类似于字典和列表的 `[]` 操作符。 6. `__add__()`、`__sub__()` 等：用于定义加法、减法等运算符的行为。 7. `__eq__()` 和 `__ne__()`：用于比较两个对象是否相等。 魔法方法让开发者能够自定义对象行为，使其更符合业务逻辑，提升代码的灵活性和可读性。如果你对某个特定的魔法方法感兴趣，可以问我更多细节，或者举个例子来说明。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值