Vue+Springboot项目运行基本步骤教程

一、运行配置Vue前端

1. 管理员打开VScode

用管理员身份打开VScode，用管理员身份打开的好处是在之后的终端里输入命令是可以直接执行的，不需要再次用管理员身份打开。(有些命令是需要在管理员身份的情况下才能够执行)

2. 打开对应的前端项目文件夹

3. 显示打开终端

Vscode最上栏找到三个点-->终端-->新建终端，这里把终端打开

4. 终端运行命令启动Vue前端

在终端的cmd中输入两条对应命令：

npm install；加载对应项目的环境依赖（注意node版本，尽量使用node v20版本，这个版本是长期支持的）

npm run dev；运行前端Vue项目，打开浏览器

5. 访问前端URL

浏览器访问URL: http://localhost:5173/home,显示前端Vue页面

二、运行配置Mysql数据库

1. 运行Navicat连接对应数据库

打开Navicat，双击连接自己的数据库连接，并且右键“选择运行SQL文件”

2. 运行项目的sql代码

点击文件的三个点，打开文件预览，找到项目对应的SQL文件，点击打开-->开始，SQL数据库文件执行完毕，刷新下数据库连接，刚才新的数据库就已经存在。这样数据库就已经配置好了。

三、运行配置后端Springboot

1. 管理员打开IDEA

用管理员方式打开IDEA，点击“以管理员身份运行此程序”，点击应用-->确定，再次打开IDEA。

2. 配置项目Maven

点击IDEA最上栏的设置(齿轮图标的那个哦)，找到构建、执行、部署，下拉构建工具-->Maven。

将Maven主路径，这个选择自己配置好的Maven文件目录下(D:\maven\apache-maven-3.9.9)，用户设置文件和本地仓库勾选上，点击旁边的文件夹图标，也是找到自己的对应配置文件路径下。这里用户设置文件和本地仓库分别是D:\maven\apache-maven-3.9.9\conf\settings.xml和D:\maven\apache-maven-3.9.9\maven-repository (这里的maven-repository是根据自己配置Maven新建仓库的文件夹名称)。

之后点击应用-->确定即可，这样IDEA的Maven就配置成自己本地环境的Maven环境。等待IDEA自动下载项目所需的pom.xml的环境依赖。

3. IDEA连接配置好的数据库

接下来就是在IDEA配置项目对应的数据库。点击右侧的数据库，找到“+”，选择数据源，下面就是选择自己需要连接的数据库管理系统(如MySQL, SQL Server, Redis, MongoDB)。

4. 配置连接数据库

选择好之后，接下来就是填写数据库连接的相关信息。

主机：默认就是localhost，如果是远程连接服务器上的数据库，这里就填写对应服务器的IP地址(公网IP即可)；

端口：如果是MySQL这里端口就是3306，如果是SQL Server那这里端口就应该填写1433，这里是根据不同数据库管理系统来填写各自对应的端口号；

身份证验证：分为“用户与密码”和“无身份验证”两种，但一般默认就是用户与密码，确保数据库连接的安全性；

用户：这里数据库一般没有修改的话就是默认root，如果有对数据库的用户进行过修改，就改成自己修改后的用户名；

密码：一般设置是123456，但如果有修改过，那就填写自己修改过后的数据库密码；

数据库：这路填写的是需要连接的数据库的名称，即数据库名，比如说这里的ktvroom_db；

URL：这里可以不用另外设置，上面的用户名、密码、数据库名都填写好，这里是默认根据上面填写信息来自动生成的；

都填写完毕之后，第一次连接数据库会出现“下载驱动”字样，先点击下载，等待下载完成后，点击“测试连接”，当测试成功会显示“已成功”字样，说明现在项目的数据库已经和IDEA成功连接。

接下来就是同上操作，点击应用-->确定即可。这样以来我们的数据库也就连接好了。

5. 配置项目的JDK版本

把IDEA的JDK环境设置成项目所需的对应的JDK版本，找到文件-->项目结构。

点击“项目设置”里的项目，将项目的语言级别设置为自己项目的SDK版本，这里一般都是选择JDK 17版本的，可以在Oracle官网下载或者点击旁边的下拉符号，找到“下载JDK”，在IDEA里下载也是可以的，但网络不好的情况下可能会下载失败。如果是其他JDK版本也是同样的操作，注意的是JDK是高版本兼容低版本，但有些功能等还是不怎么适配的，最好换成项目本身的JDK版本。

语言级别也同样换成相同的JDK版本，这里就选择17-sealed类型、始终严格的浮点语义。

然后点击左侧的“模块”，同样将语言级别换成同样的JDK版本，这步的操作同上哈。

都选择配置好项目对应的JDK版本环境之后，点击应用-->确定就好。

6. 修改application.xml配置文件的JDBC连接信息

之后就是把application.xml文件里的jdbc的数据库连接信息都修改为自己数据库对应的信息。最重要的就是下面四行jdbc的代码，这是跟我们数据库连接相关的信息，不要填写错误，不然数据库是连接不成功的，导致后续项目不能正常运行。

driverClassName: com.mysql.cj.jdbc.Driver

url:jdbc:mysql://localhost:3306/ktvroom_db?useSSL=false&useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8

username: root

password: 123456

其中如果是MySQL数据库并且是高版本，driverClassName就和上面的填写一样即可，如果是其他数据库管理系统或者是低版本的MySQL这里填写的内容信息都是不一样的，这个可以去网上查找的到的；

url一般只需要修改中间ktvroom_db的内容即可，这里表示的数据库名，其他没有特殊需求的话保持不变即可；

username和password填写自己数据库修改之后的用户名、密码即可；

上面四行代码都对应修改完毕之后，我们的application.xml就已经配置好了。

7. 运行启动项启动Springboot后端

最后就是找到系统的启动项代码，一般都是在src/main/java/com/xxx/xxx/xxx.java，这里就是KtvCoreApplication.java，打开之后，点击最上面的启动项目的小三角形即可运行整个项目代码。

启动项目之后，出现了Springboot的logo以及项目一直保持运行状态，说明项目的后端就已经运行成功，并且和数据库也已经连接成功。

之后只需要回到浏览器重新刷新项目的前端页面即可看到完整的项目内容，这时项目就完整的运行成功！