web开发环境配置 | VS Code+Maven+Tomcat+mysql

水深无声 2023-07-17 12:59 3阅读 0赞

## 1. 前言 ##

这篇博客介绍如何搭建开发Web项目的环境，这一过程我也弄了好几天，大家在安装的时候也可能会遇到各种各样的问题，鼓励大家动手网上查询解决，这一过程很能提升自我问题解决能力！

当然，要是我写的有任何差错欢迎大家批评指正。

--------------------

## 2. 一个完整的Web项目是怎样的？ ##

*  大致解释一下：  
    一个完整的Web项目，大致可以分为前端和后端。前端主要分则展示给用户看的东西，涉及到的技术有html/css/js等；后端主要通过java/数据库等技术搭建。web项目搭建完成后，还需要Tomcat服务器进行部署之后才可以在本地进行发布。（具体可以看看这篇文章：[做一个完整的Java Web项目需要掌握的技能][Java Web]）

**由此，我们需要进行的环境安装有以下这些：**

*  VS code 是一款免费的、开源的、高性能的、跨平台的、轻量级的代码编辑器。——用来写代码、开发的。
 *  JDK安装与环境配置。(Java Development Kit)是整个java 的核心，包括了Java运行环境、Java工具、和Java基础的类库。——web开发的核心技术。
 *  Tomcat服务器。——用来部署项目的
 *  Mysql。——用来写数据库的
 *  Maven，核心功能便是合理叙述项目间的依赖关系，是一种管理工具。——用来管理项目的。

的确，一次性配置这么多东西是有点麻烦，所以我将一些比较简单的安装/配置教程贴上了比较完整的教程。

而这篇博客主要是写如何在VS Code上，用一些插件来将各种软件功能集成在一起的。

--------------------

## 3. 软件下载与教程 ##

按照以下顺序一个个下载/安装就好；有必要的用记事本记录以下这些软件分别安装的地方，以防之后配置有用又找不到就尴尬了（别问我咋知道的。。）

1.  [java环境配置教程][java]，可以在cmd里面输入`java -version` 如果弹出相关信息就表明装好/过了。
2.  [MySQL安装教程][MySQL]，**其中注册的用户名和密码一定要记住！！不然就是血泪的教训！！**
3.  [Tomcat下载地址][Tomcat]（具体步骤请：[参考博客教程][Link 1]）我下载的是tomcat10版本；
4.  [Maven 的下载、安装与配置教程][Maven]，下载最新版本的就可以；  
    [maven配置以及设置国内镜像][maven]（上面配置部分看不懂的可以看这个）
5.  [VS code 下载地址][VS code]，这个跟着向导安装即可，不会有太大问题，故也不用教程。

--------------------

## 4. VS Code 配置相关环境 ##

#### 4.1 Vs Code配置 Tomcat ####

1.  首先将JAVA、Mysql、Maven等环境按照上面教程配置好，Vs Code安装好以后：
2.  打开vs code 在扩展里面搜索`tomcat for java`，点击安装  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70][]
3.  安装完成后 下方会出现 `Tomcat Servers`  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 1][]
4.  打开设置（文件->首选项->设置），输入`tomcat`，会出现两个相关设置，一个是`tomcat.restart_when_http(s)_port_change`设置在端口改变时是否重启，默认为true；另一个是`tomcat.workspace`设置tomcat的工作目录，tomcat扩展相关的资源都会存储在此工作目录下，此目录不是安装的tomcat的目录。  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 2][]
5.  其中的`workspace`可以自己配置，也可以不配置。如果没有配置，则部署在VSCode工作区存储目录下的`User\workspaceStorage`下对应工作区间目录下的`adashen.vscode-tomcat`目录中。所以，还是配置一下吧，为C盘节省点空间。
6.  点击左边的小齿轮（鼠标放到`“Tomcat：workspace`”选项上才会出现），选择编辑，然后在输入框内输入你设置的路径  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 3][]
7.  上面部署完成以后，来验证一下是否部署正确：添加Tomcat服务（点击Tomcat servers右边的“+”号），并选择你tomcat安装的根目录。  
    ![20200321212609252.png][]  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 4][]
8.  右击红色的Tomcat，选择“`open in Broswer`”，右下角跳出来的提示消息选择“yes”就会跳出tomcat的默认页面，并且tomcat变成绿色，表示tomcat是设置成功的。  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 5][]

--------------------

#### 4.2 VS Code配置与使用mysql数据库 ####

1.  VS Code上配置数据库，安装插件：`MySQL` 与 `MySQL Syntax`  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 6][]
2.  依旧是点击右边加号，然后在弹出的输入框内依次输入**服务器、用户名、密码**等（这个是你之前下载MySQL软件的时候注册的，一定要记住！！），最后一个忽略，每输入一项回车即可；  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 7][]
3.  选择数据库，右击`new query`  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 8][]
4.  在新建的文件中，写好sql代码，然后右击即可运行  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 9][]

--------------------

#### 4.3 Vs Code配置 Maven ####

1.  打开vs code 在扩展里面搜索`Java Extension Pack`，点击安装，该插件会自动帮你装上其他的你必须的插件  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 10][]
2.  在`file->preferences->settings->输入maven->在下方红框位置`输入相应地址来配置路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 11][]

1.  安装完成后重启vs code，出现`maven projects`，鼠标放上去右边出现加号，可以创建新项目。  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 12][]
2.  在弹出的框中检索`WebApp`，选择`1.4`，直接确认在当前文件夹进行创建，终端开始进行安装必要插件以及环境的配置（时间可能稍微会久一点）。  
    终端中出现的groupId，artifact，version: 1.0-SNAPSHOT，package都可以使用同一个名称，（但是在进行大型项目开发时应当参照开发手册的命名规定）  
    最后Y：：处回车创建完成，输入exit退出终端。  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 13][]
3.  在根目录下，会生成一个`pom.xml`文件。

#### 4.4 测试Maven项目 ####

1.  打开Maven项目根目录 `webapp\src\main\webapp`已经存在Index页面文件，右键根目录，选择`Run on Tomcat Server`，在`TOMCAT SERVERS`中，已添加的伺服器就会变成绿色（如果只有一个会确认为默认）。  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 14][]
2.  右键服务器下的项目`Open in Browser`，网页即可显示。  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 15][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 16][]

## 完成！ ##

至此，web开发需要的一些基本的配置都搭建完了，大家可以愉快地做项目了~

--------------------

**参考博客：**

*  [VSCode集成tomcat及使用方法][VSCode_tomcat]
 *  [VsCode 配置 Java Web开发环境][VsCode _ Java Web]
 *  [使用VSCode进行Java+Maven+Tomcat环境][VSCode_Java_Maven_Tomcat]

[Java Web]: https://www.cnblogs.com/lmmblogs/p/7069784.html
[java]: https://blog.csdn.net/konggu_youlan/article/details/79942800?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
[MySQL]: https://blog.csdn.net/qq_33236248/article/details/80046448
[Tomcat]: https://mirrors.cnnic.cn/apache/tomcat/
[Link 1]: https://blog.csdn.net/qq_41113081/article/details/88061570
[Maven]: https://jingyan.baidu.com/article/0202781151f3471bcc9ce5d9.html
[maven]: https://blog.csdn.net/boywcx/article/details/82628703?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
[VS code]: https://code.visualstudio.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70]: /images/20230528/07bc7e60f81f4e64bef3bd0ac92ccc0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 1]: /images/20230528/3d64bd3255e5417b815f64798165ac26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 2]: /images/20230528/83f58db34c20426da72a1a9f2c3d9bd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 3]: /images/20230528/d683b9f6228c43888e29c91d143fda68.png
[20200321212609252.png]: /images/20230528/2244d6f57eae405aa2d3d4e5b37b3b14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 4]: /images/20230528/a1e939eaf48846ca92df80941d518710.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 5]: /images/20230528/60252a3fa75d46168b817eb35e13a878.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 6]: /images/20230528/c9b75f4b294943faa55329f60a613ced.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 7]: /images/20230528/593d0023271048ab972cff3b0bede814.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 8]: /images/20230528/eb288dcd9ff646749d3da8093dbe5ba3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 9]: /images/20230528/484f08d4a2514b388104fa09a41c9b13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 10]: /images/20230528/f3b8e38b85de4f0a9a256502888ad885.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 11]: /images/20230528/7182697275904b6f83a2feb2c05bf9db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 12]: /images/20230528/cd622a600c864824b814465b90ddfa47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 13]: /images/20230528/7d4fae075ade45fc9dd4cbf8254f50ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 14]: /images/20230528/16cd925d3d694608a61f867e0f1bb5e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 15]: /images/20230528/c31e87c05d38423eb14cfe5f48ff1164.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 16]: /images/20230528/1ac6fffd642b48d98ce7e9e309410367.png
[VSCode_tomcat]: https://blog.csdn.net/asty9000/article/details/90205328?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
[VsCode _ Java Web]: https://blog.csdn.net/qq_37086982/article/details/101455807?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
[VSCode_Java_Maven_Tomcat]: https://tieba.baidu.com/p/6546145317