spring boot-html和templates

静态页面

spring boot项目只有src目录,没有webapp目录,会将静态访问(html/图片等)映射到其自动配置的静态目录,如下

/static

/public

/resources

/META-INF/resources


比如,在resources建立一个static目录和index.htm静态文件,访问地址 http://localhost:8080/index.html 

如果要从后台跳转到静态index.html,代码如下。

  1. @Controller  
  2. public class HtmlController {  
  3.     @GetMapping("/html")  
  4.     public String html() {  
  5.         return "/index.html";  
  6.     }  

动态页面

动态页面需要先请求服务器,访问后台应用程序,然后再转向到页面,比如访问JSP。spring boot建议不要使用JSP,默认使用Thymeleaf来做动态页面。

在pom.xml  中添加Thymeleaf组件

  1. <dependency>  
  2.     <groupId>org.springframework.boot</groupId>  
  3.     <artifactId>spring-boot-starter-thymeleaf</artifactId>  
  4. </dependency>  

TemplatesController.java

  1. package hello;    
  2.   
  3. import javax.servlet.http.HttpServletRequest;  
  4.   
  5. import org.springframework.stereotype.*;    
  6. import org.springframework.web.bind.annotation.*;    
  7.     
  8. @Controller  
  9. public class TemplatesController {    
  10.      
  11.     @GetMapping("/templates")  
  12.     String test(HttpServletRequest request) {  
  13.         //逻辑处理  
  14.         request.setAttribute("key""hello world");  
  15.         return "/index";  
  16.     }    
  17. }    

@RestController:上一篇中用于将返回值转换成json

@Controller:现在要返回的是一个页面,所以不能再用@RestController,而用普通的@Controller/

request.setAttribute("key", "hello world"):这是最基本的语法,向页面转参数 key和value。

return "/index": 跳转到 templates/index.html动态页面,templates目录为spring boot默认配置的动态页面路径。

index.html    将后台传递的key参数打印出来

  1. <!DOCTYPE html>  
  2. <html>  
  3. <span th:text="${key}"></span>  
  4. </html>     

访问http://localhost:8080/templates


这只是一个最基本的传参,templates标签和JSP标签一样,也可以实现条件判断,循环等各种功能。不过我在上一篇讲过,建议用静态html+rest替代动态页面,所以关于templates在此不做详细介绍

动态和静态区别

静态页面的return默认是跳转到/static/index.html,当在pom.xml中引入了thymeleaf组件,动态跳转会覆盖默认的静态跳转,默认就会跳转到/templates/index.html,注意看两者return代码也有区别,动态没有html后缀

重定向

如果在使用动态页面时还想跳转到/static/index.html,可以使用重定向return "redirect:/index.html"。

  1. @GetMapping("/html")  
  2. public String html() {  
  3.     return "redirect:/index.html";  
  4. }  

posted @ 2018-05-15 17:45  星朝  阅读(8109)  评论(0编辑  收藏  举报