SpringBoot如何达成转页功能

在 配置文件 resources application.properties 中可以找到转页的配置信息,

这类是SpringBoot的默认配置, 是可以省略不写在配置文件中的

#在构建URL时添加到视图名字前的前缀（默认值: classpath:/templates/ )

spring.thymeleaf.prefix=classpath:/templates/

#在构建URL时添加到视图名字后的后缀（默认值:.html )

spring.thymeleaf.suffix=.html

在 resources 文件夹下 创建新文件夹 templates , 这个文件夹是springboot默认存放模板页面的文件夹

在文件夹下打造 目的页面 ref.html

同样 在创建文件时, 同时创建了所属的文件夹,

当然也可以分开创建 , 文件夹 Directory

创建后, 添加一句 hello spring boot

!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/title/headbodyhellospringboot/body/html在办法中添加转页

办法是通过返回值来进行转页的, 添加新的办法

String 返回种类对应的返回值 就是 转页路径, 本例中应该是 templates ref.html

@RequestMapping(/test/test02)publicStringtest02(){System.out.println(controller中的测试办法test02);return转页的路径;}得到页面路径

通过 菜单选择项得到 页面路径

文件上 右键 Copy Pathhellip; Path From Source Root 将路径复制到剪切板上

将信息替换返回值,

注意要 掐头( templates/ ) 去尾 ( .html ) 由于这类信息已经在配置文件中指定了

@RequestMapping(/test/test02)publicStringtest02(){System.out.println(controller中的测试办法test02);returnref;}测试

重新启动项目, 在浏览器地址栏输入URL : http://localhost:8080/test/test02

看到 ref.html 页面上添加的信息, 测试成功

就是办法实行后, 不是返回页面, 而是跳转到别的办法里, 继续实行

添加测试办法 test03

返回值 增加 redirect: 关键词

后面是新的请求URL, 本例是 test02,

假如目前办法的请求前缀与重新定向的办法前缀相同( 本例 前缀为 /test ), 可以省略

特别注意 : 与后面的URL之间不可以有空格

@RequestMapping(/test/test03)publicStringtest03(){System.out.println(controller中的测试办法test03);returnredirect:test02;}测试

重新启动项目, 在浏览器地址栏输入URL : http://localhost:8080/test/test03

看到 ref.html 页面上添加的信息, 注意URL又从 test03 跳转 成 test02, 说明依旧还是 test02 办法转页的

但在idea控制台能看到两个办法被 依次实行

当 只不过简单的进行转页, 没具体业务代码时, SpringBoot 提供了简单的转页方法

注意 :

类上加 注释 @Configuration说明这是一个配置类, 项目启动时会优先读取类中的配置信息

类 达成 WebMvcConfigurer 接口 , 并覆盖 addViewControllers() 办法

通过传入 ViewControllerRegistry 种类的参数, 来达成内部转页, 重新定向

packagecom.yuan.config;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotation.ViewControllerRegistry;importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;@ConfigurationpublicclassWebMvcConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddViewControllers(ViewControllerRegistryregistry){//内部转页registry.addViewController(/).setViewName(start);//重新定向registry.addRedirectViewController(/test03,/);}}页面发请求的三种方法

在 resources templates 文件夹下 增加新的页面 start

!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/title/headbodywelcomestartbr/body/html

因为 在 WebMvcConfig 配置类 配置了默认请求 / 转到 start.html, 所以启动项目后默认打开 start页面

在start.html 里增加 超链接 , 通过 href 属性 对 test02 发请求, 转页到 ref.html页面

!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/title/headbodywelcomestartbrahref=/test/test02rel=externalnofollowrel=externalnofollowrel=externalnofollowtest02/abr/body/html

重启项目, 浏览器上可以看到超链接

点击超链接测试, 可以转到ref.html页面

在 start.html 里增加 表单, 通过 action 属性 对 test02 发请求, 转页到 ref.html页面

!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/title/headbodywelcomestartbrahref=/test/test02rel=externalnofollowrel=externalnofollowrel=externalnofollowtest02/abrformaction=/test/test02inputtype=submitvalue=提交/form/body/html

重启项目, 浏览器上可以看到表单的 submit 提交按钮

点击提交按钮, 可以转到ref.html页面

在 start.html 里增加 按钮 , 通过 按钮的 onclick单击事件 调用函数,

从而通过 location.href属性 对 test02 发请求, 转页到 ref.html页面

!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/title/headbodywelcomestartbrahref=/test/test02rel=externalnofollowrel=externalnofollowrel=externalnofollowtest02/abrformaction=/test/test02method=postinputtype=submitvalue=提交/formbuttontype=buttononclick=fn()按钮/button/bodyscripttype=text/javascriptfunctionfn(){window.location.href=/test/test02}/script/html

重启项目, 浏览器上可以看到按钮

点击按钮, 可以转到ref.html页面