系列文章目录
- 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客(一)
- Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客(二)
- Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客(三)
- SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客(四)
- SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客(五)
- SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客(六)
- SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客(七)
- SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客(八)
- Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客(九)
- SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客(十)
- Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客(十一)
- SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客(十二)
- SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客(十三)
- SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客(十四)
- SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客(十五)
- SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客(十六)
- SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客(十七)
- SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客(十八)
- 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客(十九)
- SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客(二十)
- SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客(二十一)
- SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客(二十二)
- SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客(二十三)
项目资源下载
前言
今天带来的内容主要包括:如何创建SpringBoot项目、连接MySql数据库、测试SpringBoot项目、SpringBoot与Vue连调等内容。废话不多说,下面就开始!
一、创建SpringBoot项目
- 首先在File下New一个Project
- 然后选择Spring Initializr,使用Jdk1.8,并选择默认Url,然后点击Next
- 椭圆部分和我保持一致,方框部分可以写自己喜欢的,但是要注意Artifact要全部使用小写字母,然后点击Next
- 在这一步选择依赖,一共需要选择三个地方,按照我画出的选择即可,然后点击Next
- 然后选择项目存储目录与项目名称,这个可以自行选择,然后点击Finish
- 因为上面已经选择好了依赖,所以这一步不用再在pom.xml中引入依赖了。为了让项目看起来更整洁,我们把项目目录中没用的删掉,可以删掉我选中的几项
- 最终我们的项目目录如下所示
二、连接MySql数据库
- 如果在创建完SpringBoot项目后就启动,会报错,如下所示,因为我们还没有配置与数据库的连接,只有配置之后才能正常启动
- 所以我们接下来要配置SpringBoot项目与MySql数据库的连接,首先打开Navicat,创建一个连接
- 右击此连接,选择新建数据库
- 然后按照我写的配置,其中数据库名不需要和我一样,但是其他要和我保持一致,然后单击确定,这个时候我们已经有了这个项目的数据库了
- 然后我们再回到Idea中,配置SpringBoot项目与MySql的连接。我们需要在src/main/resources/application.properties中添加如下四行代码,具体功能我已注释到代码中,需要注意除了我标注的内容都要和我保持一致,我标注的内容需要改成你的相应内容。这些工作完成后我们已经完成了SpringBoot项目与MySql数据库的连接
三、测试SpringBoot项目
- 首先在src/main/resources/application.properties中修改后端服务器端口,以免和前端服务器端口冲突
- 然后在src\main\java\com\ironmanjay\springboot\SpringbootApplication.java中添加如下测试代码
- 然后点击启动后端服务器
- 最后访问localhost:9090,出现如下页面表示测试成功
四、SpringBoot与Vue连调
- 将之前创建的vue项目直接放到springboot项目中(直接拖进去就可以),方便后续管理与操作
- 然后需要在idea中配置vue项目的启动,首先点击这个
- 然后点击这个+号
- 选择npm
- 然后按照下图配置,最后点击APPLY,就生效了
- 可以点击这个箭头测试前端项目是否可以成功启动
- 然后在浏览器中访问http://localhost:8080/,若出现如下图片,表示前端服务器启动成功
- 然后再启动springboot项目
- 浏览器访问http://localhost:9090/出现如下界面,表示连调成功
总结
那到这里,我们今天的内容也结束了。昨天是前端基础内容的搭建,今天是后台基础内容的搭建,其实都不算很难。从明天开始我们就正式进入到整个系统的搭建过程了。下篇博文见!