SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）

系列文章目录

1. 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）
2. Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）
3. Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）
4. SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）
5. SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）
6. SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（六）
7. SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
8. SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客（八）
9. Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）
10. SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
11. Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）
12. SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客（十二）
13. SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）
14. SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）
15. SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客（十五）
16. SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）
17. SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客（十七）
18. SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
19. 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）
20. SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客（二十）
21. SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）
22. SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
23. SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）

---

项目资源下载

1. GitHub下载地址
2. Gitee下载地址
3. 项目MySql数据库文件

---

---

前言

  今天带来的内容主要包括：如何创建SpringBoot项目、连接MySql数据库、测试SpringBoot项目、SpringBoot与Vue连调等内容。废话不多说，下面就开始！

---

一、创建SpringBoot项目

1. 首先在File下New一个Project
   
2. 然后选择Spring Initializr，使用Jdk1.8，并选择默认Url，然后点击Next
   
3. 椭圆部分和我保持一致，方框部分可以写自己喜欢的，但是要注意Artifact要全部使用小写字母，然后点击Next
   
4. 在这一步选择依赖，一共需要选择三个地方，按照我画出的选择即可，然后点击Next
   
   
   
   
5. 然后选择项目存储目录与项目名称，这个可以自行选择，然后点击Finish
   
6. 因为上面已经选择好了依赖，所以这一步不用再在pom.xml中引入依赖了。为了让项目看起来更整洁，我们把项目目录中没用的删掉，可以删掉我选中的几项
   
7. 最终我们的项目目录如下所示
   

二、连接MySql数据库

1. 如果在创建完SpringBoot项目后就启动，会报错，如下所示，因为我们还没有配置与数据库的连接，只有配置之后才能正常启动
   
2. 所以我们接下来要配置SpringBoot项目与MySql数据库的连接，首先打开Navicat，创建一个连接
   
3. 右击此连接，选择新建数据库
   
4. 然后按照我写的配置，其中数据库名不需要和我一样，但是其他要和我保持一致，然后单击确定，这个时候我们已经有了这个项目的数据库了
   
5. 然后我们再回到Idea中，配置SpringBoot项目与MySql的连接。我们需要在src/main/resources/application.properties中添加如下四行代码，具体功能我已注释到代码中，需要注意除了我标注的内容都要和我保持一致，我标注的内容需要改成你的相应内容。这些工作完成后我们已经完成了SpringBoot项目与MySql数据库的连接
   

三、测试SpringBoot项目

1. 首先在src/main/resources/application.properties中修改后端服务器端口，以免和前端服务器端口冲突
   
2. 然后在src\main\java\com\ironmanjay\springboot\SpringbootApplication.java中添加如下测试代码
   
3. 然后点击启动后端服务器
   
4. 最后访问localhost:9090，出现如下页面表示测试成功
   

四、SpringBoot与Vue连调

1. 将之前创建的vue项目直接放到springboot项目中（直接拖进去就可以），方便后续管理与操作
   
2. 然后需要在idea中配置vue项目的启动，首先点击这个
   
3. 然后点击这个+号
   
4. 选择npm
   
5. 然后按照下图配置，最后点击APPLY，就生效了
   
6. 可以点击这个箭头测试前端项目是否可以成功启动
   
7. 然后在浏览器中访问http://localhost:8080/，若出现如下图片，表示前端服务器启动成功
   
8. 然后再启动springboot项目
   
9. 浏览器访问http://localhost:9090/出现如下界面，表示连调成功
   

---

总结

  那到这里，我们今天的内容也结束了。昨天是前端基础内容的搭建，今天是后台基础内容的搭建，其实都不算很难。从明天开始我们就正式进入到整个系统的搭建过程了。下篇博文见！