手把手教你运行Spring Boot + Vue前后端分离项目
手把手教你运行Spring Boot + Vue前后端分离项目
本文将详细介绍如何运行一个Spring Boot + Vue的前后端分离项目。对于许多初学者来说，拿到这样的项目却不知道如何运行是一个常见的问题。本文将从环境准备、Spring Boot后端项目的配置和运行步骤，包括软件安装、项目导入、依赖配置、数据库配置等，并提供了具体的截图和代码示例。
一、环境准备
要运行Spring Boot + Vue项目，你需要准备以下软件：
- Java后端软件：Idea、JDK、MySQL、Navicat（可用其他数据库管理工具代替，如dbear等）
- Vue前端软件：VSCode、Node.js
准备好这些软件之后，我们就可以开始运行项目了。
二、运行Spring Boot后端
2.1 打开Idea软件
点击Open，选择你要运行的Spring Boot项目文件目录。
博主这里选择 “springbootxs5o6” 文件夹，点击“OK”，点击使用“Maven project”运行项目。
2.2 导入项目
导入完成的项目目录为这样，根目录下包含pom.xml依赖包文件。
2.3 配置Java环境
先查看根目录下的pom.xml文件中的Java环境是多少，选择对应JDK；我们这里是1.8版本。
配置项目运行环境，点击软件顶部的“File”，然后选择“Project Structure”。
选择 “Project”，然后找到SDK，选择1.8的JDK环境，点击“OK”。
2.4 配置语言版本
选择语言版本配置，选择软件头部的“File”，然后选择“Settings”。
选择“Build Execution Deployment”，然后选择“Compiler”，选择“Java Compiler”，其中“Project bytecode version”选择“Same as language level”或者是根据语言版本选择“8”（1.8就是8），可以看到Module下的文件目录下的版本与语言版本一致1.8，如果不是就手动选择；点击“Apply”，“OK”。
2.5 配置SQL依赖
将pom.xml文件下的SQL服务依赖包换成Java 8兼容的版本；替换为以下代码段：
<dependency>
<groupId>com.microsoft.sqlserver</groupId>
<artifactId>mssql-jdbc</artifactId>
<version>6.2.0.jre8</version> <!-- 选择与 Java 8 兼容的版本 -->
<scope>runtime</scope>
</dependency>
2.6 加载依赖
点击软件右边的“m”图标，然后出来Maven仓库，点击刷新加载，直到依赖包没有爆红为止，如果爆红需要百度一下是什么原因导致的，版本过高还是已经删除此依赖包。
如果出现爆红的情况，可以点击“Lifecycle”，然后选择“clean”双击，再“install”双击，直到pom.xml文件中不会出现爆红为止。
2.7 导入数据库
到此，可以导入数据库文件了，找到项目目录下的“db.sql”（名字不同，只需找后缀为.sql的文件即可）数据库文件，导入数据库中。
打开Navicat软件，连接你的MySQL数据库，小海豚绿色代表连上，鼠标右键，选择运行SQL文件，导入数据库。
刷新一下，可以看到MySQL下面多了一个数据库“springbootxs5o6”。
2.8 配置数据库连接
回到我们的Idea软件，找到resources --> application.yml文件，打开找到datasource下的MySQL配置，更换 driverClassName，直接datasouce换位以下代码，username为MySQL数据库的用户名，password为MySQL数据库的密码。
spring:
datasource:
driverClassName: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/springbootxs5o6?useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8
username: root
password: 123456
2.9 运行项目
我们找到src --> com --> "SrpingbootSchemaApplication"文件，双击；可以看到打开文件之后，软件头部显示“三角形”图标可运行，点击运行即可。
运行成功，在浏览器中输入，端口号为：8080，访问地址为：http://localhost:8080/springbootxs5o6/front/index.html
即可访问成功！
至此，Spring Boot项目已经运行起来，接下来你可以运行Vue的后台管理代码了。