SpringBoot入门,搭建简单的web应用坏境

  • 1.前期准备
  • 2.搭建SpringBoot
  • 3.进入测试环节
  • 4.最后,我们总结一下
  • 第一种方式
  • 第二种方式
  • 第三种方式


ps:笔者用的是MAC做搭建,而且是入门之中的菜鸟,在参考了博客里多位大佬的文章的文章后自己写下的博客。

1.前期准备

JDK
Intellij IDEA
Maven

2.搭建SpringBoot

在idea主界面选择创建新项目

spring boot 跳转vue的路由地址 springboot跳转外部页面_html5

在新建项目这里选择Spring Initializr,接着点击“下一个”,其他默认即可。

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_02

箭头的地方可以自行修改,其他默认即可。接着点击下一步

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring boot_03

在第一栏里选择Web,再选择Spring Web,如果是跟MySQL对接的话就要选MySQL,笔者还没学会,暂时先做到这里把哈哈哈

spring boot 跳转vue的路由地址 springboot跳转外部页面_html5_04

刚开始进入会下载一堆东西,过程比较缓慢,要耐心等待。

spring boot 跳转vue的路由地址 springboot跳转外部页面_web_05


spring boot 跳转vue的路由地址 springboot跳转外部页面_html5_06


打开目录,看到如下图:

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring boot_07


到这里,基本的SpringBoot已经搭建完成了。

3.进入测试环节

点击运行,结果如下图:

spring boot 跳转vue的路由地址 springboot跳转外部页面_web_08


spring boot 跳转vue的路由地址 springboot跳转外部页面_html5_09


spring boot 跳转vue的路由地址 springboot跳转外部页面_html5_10


在浏览器输入localhost:8080,进入该页面:

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_11


会发现报错了,这是因为我还没做静态网页,没显示任何内容。在这个包里面新建一个包,作为controller层

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring boot_12


spring boot 跳转vue的路由地址 springboot跳转外部页面_spring boot_13

再在这个包下面新建一个controller类,名字可自行决定。

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_14


现在再次运行入口程序,然后在浏览器输入localhost:8080/MARVEL,进入页面。

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_15

可以看到,页面已经正确返回我们想要的东西,那么如何跳转到我们想要的界面呢,springboot不推荐jsp开发,推荐使用thymeleaf模版引擎进行web页面开发,所以我们需要在pom.xml添加thymeleaf依赖:

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_16

<dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

打开配置文件application.properties,我们添加一些配置命令用来指定跳转页面的存放路径和页面的格式信息:

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

classpath指向的是resourse下的templates目录

我们再新建一个controller类,完成接下来的测试步骤。

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_17


注意:这里输入的是@Controller注释而不是@RestController注释

可以看到我们返回的是"index",根据配置文件,即返回/templates/index.html页面,所以我们需要在templates目录下新建一个index.html页面。在templeats目录下新建一个HTML 文件

spring boot 跳转vue的路由地址 springboot跳转外部页面_html5_18


在这个HTML文件中输入相应代码,作为页面的信息,学过H5的人应该都明白,没学的可以去学一学。

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_19

我们再次启动程序入口,然后在浏览器输入localhost:8080/Avenger,就可以实现页面的跳转了。

spring boot 跳转vue的路由地址 springboot跳转外部页面_java_20


到这里就已经完成了,一个最简单的SpringBoot的web应用环境搭建。

4.最后,我们总结一下

笔者是大一的一名新手之中的菜鸟,刚开始学习搭建SpringBoot的搭建,在写这篇文章之前参考了多位博主的文章,总体来看写的不如人家好,但还是希望能够帮助到一些像我一样的新手之中的菜鸟。

对于SpringBoot的端口占用问题,笔者参考部分文章作出以下方法解决。
默认的端口都是8080,当有一个SpringBoot的项目占用了这个端口,另一个端口就不能用了,那该怎么办呢?
报错如下:

Error starting ApplicationContext. To display the conditions report re-run your application with ‘debug’ enabled.
2018-05-23 22:18:43.688 ERROR 3793 — [ restartedMain] o.s.b.d.LoggingFailureAnalysisReporter :


APPLICATION FAILED TO START


Description:

Web server failed to start. Port 8020 was already in use.

Action:

Identify and stop the process that’s listening on port 8020 or configure this application to listen on another port

第一种方式

杀掉端口的进程,如果是MAC的直接开启终端输入:

lsof -i:端口名

我这里是8080,所以冒号后面写的是8080,可自行修改。

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_21


我们可以看到,端口的进程ID是5941,在这里把5941的进程删掉即可。

kill 5941

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_22


这样再打开SpringBoot 就不会进行报错了。

第二种方式

找到文件目录下的其他设置,如图所示:

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_23


进入后,修改SpringBoot的多端口运行。如图所示

spring boot 跳转vue的路由地址 springboot跳转外部页面_html5_24


最后点击确定就完成了SpringBoot的多端口运行,可以多个项目一并运行了。

第三种方式

进去项目开发界面之后,在上面找到编辑配置。

spring boot 跳转vue的路由地址 springboot跳转外部页面_web_25


点击进去之后,找到右上角的“允许并行运行”

spring boot 跳转vue的路由地址 springboot跳转外部页面_spring_26


打上勾之后即可让SpringBoot多端口运行了。