【前后端分离】如何快速运行一个Spring Boot+Vue的前后端分离项目（保姆级图文教程））

一、环境准备

后端环境：Java、JDK、MySQL、Navicat、Idea 前端环境：Node.js、VS Code

软件不唯一，大家自行准备即可，但是必要的环境是需要的，比如jdk和nodejs等。

二、后端Spring Boot运行

这里选择我们需要运行的Spring Boot项目，找到项目的地址即可。

打开pom.xml文件。

首先核对一下pom文件中的java对应版本是什么。

下一步我们配置项目运行环境，点击File，然后选择Project Structure。

然后进一步选择 “Project”，然后找到SDK，选择1.8的jdk环境，点击“OK”；

选择语言版本配置，选择软件头部的“File”，然后选择“Settings”。

选择“Build Execution Deployment”，然后选择“Compiler”，选择“Java Compiler”，其中“Project bytercode version”选择“Same as language level”或者是根据语言版本选择“8”（1.8就是8），可以看到Module下的文件目录下的版本与语言版本一致1.8，如果不是就手动选择；点击“Apply”，“OK”。

然后查看对应的Mysql版本。

如果有依赖下面有爆红的问题，我们点击Maven进行刷新，如果还是有问题，可以试着把Idea关了，重新打开即可。

接着我们打开Navicat，输入mysql账号密码即可连接。

新建一个数据库，然后右键点击这个绿色的行，然后选择运行SQL文件。

然后打开对应的SQL文件即可。

这样就运行成功了。

然后再IDEA软件中找到配置文件，设置好自己的数据库用户名和密码，还有对应的数据库名称，方框中“nideshujukumingchen”就是刚刚导入sql文件的那个数据库名称，一定要对应上。

下一步找到运行的文件。

三、前端Vue项目运行

在VScode中导入项目，然后运行终端。

然后运行命令：npm install。

等待提示安装好之后，就可以开始运行命令：npm run serve了。

npm run serve

然后就可以运行项目了。

复制这个local地址到浏览器地址，即可。