2024最新最详细保姆教程！SpringBoot+Vue前后端分离项目部署运行教程文档。

作者:b站-程序员阿水呀

阿水编程学习交流QQ群：818279563

1、下载所需环境安装包

百度网盘地址：学习交流群内获取

下载网盘中目录中的所有文件，下载好以后有下面6个

注意：如果用百度网盘下载太慢，可以考虑使用下方地址直接下载

1.1、idea2023.3.7下载地址

https://download.jetbrains.com/idea/ideaIU-2023.3.7.exe

1.2、mysql8.0.37下载地址

https://dev.mysql.com/get/Downloads/MySQLInstaller/mysql-installer-community-8.0.37.0.msi

1.3、nodejs16下载地址

https://nodejs.org/dist/v16.20.2/node-v16.20.2-x64.msi

1.4、系统安装目录建议

建议安装的环境统一放在一个目录里，方便后期维护，这里我安装的软件都是放在的是G盘的env（environment环境的意思）目录下

G:\env

2、安装idea2023.3.7

2.1、双击打开idea安装包

2.2、打开后界面如下所示，点击下一步

2.3、点击浏览修改目录地址，这里我选的是我在上面提到的统一软件安装目录，选择完成以后点击下一步

2.4、当前页面只勾选创建桌面快捷方式即可，下一步

2.5、这里就默认使用它提供的目录就好，点击安装

2.6、安装中，等待安装完成

2.7、这里不勾选运行，点击完成即可

2.8、看一下桌面，这个时候我们桌面上有一个idea图标，代表安装完成

3、安装idea补丁，详情视频链接学习交流群内获取

这里因为一些客观原因，不做展示，详情加群观看视频

4、安装mysql8.0.37

4.1、双击打开mysql安装包

4.2、出现如下界面，只需要等待即可，不用操作

4.3、加载完成以后，会出现如下界面，选择Server only（第一项），点击next

4.4、新页面如下所示，点击下方Execute（执行）即可

4.5、这个时候，会出现正在安装的提示

4.6、等待安装完成以后，点击next

4.7、出现如下界面，点击next

4.8、这里虽然配置很多，但是我们不用管，继续next

4.9这里选择上方的加密方式，点击next

4.10、这里就是设置你的数据库密码的地方，新手建议使用root，保证两次输入的密码一致，我这里输入的是root，下方有一个密码强度提示weak（较弱），这个没关系，不是强制的，完成后点击next

4.11、这里还是有比较多的配置，不用管，直接next

4.12、选第一项，点击next

4.13、这里直接点击下方execute执行

4.14、可以看到，提示mysql8.0.37安装完成，点击finish完成

4.15、又回到配置这里，我们配置过了，所以点击next即可

4.16、安装完成，点击finish关闭窗口，到此mysql安装完成

5、安装mysql可视化工具navicat16

5.1、双击打开navicat16安装包

5.2、点击浏览选择目录，我选择我在最开始提到的环境目录，点击next

5.3、创建目录默认就行，下方不用勾选，点击next

5.4、这里问你是否创建桌面图标，对勾挂上，点击next

5.5、安装界面，点击install（安装）

5.6、安装进行中，等待完成

5.7、安装完成，现在不运行navicat，所以去掉勾选，点击finish

5.8、看一下桌面，这个时候桌面上已经有navicat了，证明安装成功

5.9、注意！第一次打开navicat的时候会有很多提示，一直点下一步就行。提示你是否更新的时候，一定选择不要更新！一定选择不要更新！一定选择不要更新！否则后续会导致你的navicat无法用，一定注意！

6、安装nodejs16

6.1、双击运行nodejs安装包

6.2、点击next

6.3、接受协议，然后点击next

6.4、这里我们还是选择环境目录，然后点击next

6.5、这里配置比较多，不用管，默认就可以，next

6.6、这里不勾选，点击next

6.7、点击install安装

6.8、安装中，等待一下

6.9、安装完成，点击finish

6.10、检验是否安装成功，回到桌面上，按下键盘上的windows+R键，windows键就是ctrl右边，alt左边那个键，会出来一个弹窗

6.11、输入cmd点击确定

6.12、出现了一个新的窗口

6.13、输入node -v,看到下方显示v16.20.2证明安装成功，关闭窗口

7、部署运行项目具体操作方式

1、mysql数据库操作

7.1.1通过navicat连接数据库mysql

7.1.1.1、打开navicat，点击左上角的连接

7.1.1.2、选择mysql选项

7.1.1.2、密码填你安装mysql时候填写的密码，我这里写的是root，点击左下角测试连接

7.1.1.3、提示连接成功，点确定和下方的确定

7.1.1.4、这个时候会出现一个新的连接，双击打开

7.1.1.5、这里是默认的数据库，不用管

7.1.2在navicat中创建新数据库

7.1.2.1、对着localhost_3306右键，点击新建数据库

7.1.2.2、数据库名称写seat（因为这里教学项目是图书馆座位预约系统，其他系统自行填写一下）字符集选择utf8mb4 排序规则选择utf8mb4_unicode_ci （一般都是拉到最下面就能找到）点击确定

7.1.2.3、这里可以看到，localhost_3306这个连接下面多了一个数据库叫seat，双击打开

7.1.3给新数据库导入sql文件

7.1.3.1、可以看到，这个数据库的表是空的，对seat右键，选择执行sql文件

7.1.3.2、在新窗口中文件选择我们系统中给到的sql文件，点击开始

7.1.3.3、可以看到这里提示成功完成，我们点击关闭

7.1.3.4、这个时候我们回去看，seat数据库中的表还是空的，不要担心，右键seat然后选择刷新

7.1.3.5、这个时候我们就成功把sql导入到数据库当中了

2、SpringBoot（后端）运行准备

7.2.1、通过idea打开项目的目录（要确认好打开到哪一层）

7.2.1.1、打开打过补丁的idea，点击中间的open

7.2.1.2、选择目录，注意，需要的是到springboot这一层，选择完以后点击ok

7.2.1.3、选择trust project，信任项目

7.2.2、配置SpringBoot项目的java环境（包含如何下载所需jdk）

7.2.2.1、点击左上角的菜单选项

7.2.2.2、选择file（文件下面的）project structure（项目结构）选项

7.2.2.3、选择project选项中的sdk下拉框，这里注意，如果电脑上你有jdk1.8，那么就选你自己的，这里介绍的是你电脑上从来没有安装过jdk（也就是java环境）的情况，点击download jdk，下载jdk选项

7.2.2.4、这里version版本选择1.8，vendor公司和我选一样的就可以，location，安装路径可以自己自定义，推荐用idea官方给的路径，也就是不改了，点击下方蓝色download按钮下载

7.2.2.5、这个时候看idea的右下角是正在安装这个jdk1.8的，我们等它安装完成

7.2.2.6、这里点击右侧的进度条可以查看详情

7.2.2.7、没有安装完成的时候，可以看到我们的主启动类右上角提示我们需要设置sdk，等待就行

7.2.3、配置SpringBoot项目的maven环境

7.2.3.1、左上角配置文件选择setting设置

7.2.3.2、左上角输入maven，左下角会出现被筛选到的maven选项，鼠标左键点击，可以看到右边出现了maven的配置界面

7.2.3.3、解压下载的maven3.8.1到我们的环境目录下，如下图所示，现在我们的env环境目录里面应该已经有这三个目录文件了

7.2.3.4、修改我们idea中的maven配置，按照我图中配置来，下方第二行的配置要的是maven目录下，conf目录下的settings.xml文件，这里一定要改，一定要改，一定要改！操作完成以后，点击ok

7.2.3.5、点击完ok以后，点击idea右边的蓝色M，可以看到右侧出来一个弹窗，点击刷新按钮，就可以看到下方提示解决springboot依赖，这个时候等待即可，如果是第一次运行项目，会下载非常多的springboot项目依赖，2-3分钟都是常有的事情，耐心等待，多点刷新按钮

7.2.4、配置SpringBoot项目中的application.yaml文件，确保数据库正确连接

7.2.4.1、这里按照我的图中目录打开这个配置文件，右侧密码填你的数据库密码，seat那里填创建数据库时候的名称，我这里填的是seat（用的是图书馆座位预约系统，其他系统这里可能不同，注意修改）

3、运行SpringBoot项目（7.1.1-7.2.4都需要完成）

3.1、按照途中目录结构双击springbootApplication这个文件，在右侧代码编写的地方右键弹窗

3.2、选择Run springbootApplication，左键点击

3.3、可以看到idea下方有一个控制台在记录项目运行情况

3.4、当看到下方提示启动springbootapplication 在4.31seconds这个提示之后，说明springboot运行成功

3.5、在浏览器输入localhost:9090提示401，证明后端接口调用没问题

4、安装Vue（前端）依赖文件

4.1、回到idea目录，选择左下角的终端

4.2、可以看到，这里我们就有了类似于电脑命令行的操作模式

4.3、输入cd vue，进入vue目录，可以看到下面的目录已经发生改变

4.4、当前我们的命令行已经处在vue目录下，输入npm i，安装前端依赖，时间比较久，耐心等待

4.5、注意安装的过程中，包括安装后，idea会帮你把这些新安装的依赖进行文件索引（时间很长），也需要耐心等待完

4.6、当出现这个提示的时候，证明我们的前端依赖已经安装完成了

5、运行Vue（前端）项目

5.1、在命令行当中输入npm run serve 运行Vue（前端项目）

5.2、这里就是正在运行项目，等待就可以

5.3、命令行中出现下图所示，证明前端运行成功

5.4、点击http://localhost:8080/打开浏览器界面，证明Vue前端运行成功

5.5、在登陆栏中输入admin admin点击登录，进入到后台提示登陆成功

关于前端的特别说明，如果使用vscode也是可以的，vscode和idea本质上都是代码编辑器，他能给你提供的就是一个舒适的编辑界面，合理的代码提示功能，无论使用vscode还是idea来运行前端项目，都是在使用终端执行npm的命令，可以根据个人情况来选择。

8、大功告成，完结撒花，记得三连+关注！

如果过程中遇到任何报错问题，不要担心，一步一步跟着我的视频，我的笔记来排查。相信你最终也一定可以运行出来项目，能够独立运行出来这个项目是个非常有成就感的事情。能够这么认真仔细教你如何安装软件，部署项目的up主你还见过第二个吗？这么宝藏的up还不来个一键三连+关注！