自学内容网 自学内容网

运行Springboot + Vue 项目

前言:很多小白拿到java  SpringBoot + Vue前后端分离的项目却不知道怎么运行起来,这里博主就带领小白们一起将项目运行起来吧!

一、环境准备

java后端软件:Idea、jdk、mysql、Navicat(可用其他代替,如dbear等)

vue前端软件:VScode、nodejs

准备好软件之后我们就可以开始了!

二、运行SpringBoot后端

2.1 打开Idea软件,点击Open,选择我们要运行的springboot项目文件目录

2.2 博主这里选择 “springbootxs5o6” 文件夹,点击“OK”,点击使用“Maven project”运行项目;

2.3 导入完成的项目目录为这样,根目录下包含pom.xml依赖包文件;

 2.4 先查看根目录下的pom.xml文件中的java环境是多少,选择对应jdk;我们这里是1.8版本

2.5 配置项目运行环境,点击软件顶部的“File”,然后选择“Project Structure”

2.6 选择 “Project”,然后找到SDK,选择1.8的jdk环境,点击“OK”;

2.7 选择语言版本配置,选择软件头部的“File”,然后选择“Settings”;

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

2.9 将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.10 点击软件右边的“m”图标,然后出来Maven仓库,点击刷新加载,直到依赖包没有爆红为止,如果爆红需要百度一下是什么原因导致的,版本过高还是已经删除此依赖包;

2.11 如果出现爆红的情况,可以点击“Lifecycle”,然后选择“clean”双击,再“install”双击,直到pom.xml文件中不会出现爆红为止;

2.12 到此,可以导入数据库文件了,找到项目目录下的“db.sql”(名字不同,只需找后缀为.sql的文件即可)数据库文件,导入数据库中;

2.13 打开navicat软件,连接你的mysql数据库,小海豚绿色代表连上,鼠标右键,选择运行SQL文件,导入数据库;

2.14 刷新一下,可以看到mysql下面多了一个数据库“springbootxs5o6”;

2.15 回到我们的Idea软件,找到resources--> application.yml文件,打开找到datasource下的mysql配置,更换 driverClassName,直接datasouce换位以下代码,username为mysql数据库的用户名,password为mysql数据库的密码。


    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.16 ,我们找到src--> com --> "SrpingbootSchemaApplication"文件,双击;可以看到打开文件之后,软件头部显示“三角形”图标可运行,点击运行即可;

2.17 运行成功,在浏览器中输入,端口号为:8080,访问地址为:http://localhost:8080/springbootxs5o6/front/index.html

即可访问成功!

至此,springboot项目已经运行起来,接下来我们运行vue的后台管理代码吧!

vue后台代码运行请点击:


原文地址:https://blog.csdn.net/qq_45758854/article/details/142964362

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!