Spring Boot 整合 freemarker 和 thymeleaf 模板引擎 (第四章)

一、简单介绍freemarker 和 thymeleaf

     SpringBoot推荐的模板引擎有两种:freemarker和thymeleaf。freemaker性能比thymeleaf好，模板必须符合xml规范。  thymeleaf由于使用了标签属性做为语法，模版页面直接用浏览器渲染，使得前端和后端可以并行开发。freemarket使用这样的语法，就无法直接使浏览器渲染出原本页面的样子。thymeleaf更合适前后联调，值的绑定都是基于html的dom元素属性的。

二、Spring Boot整合 freemarker 模板

1、pom.xml加入freemarker依赖

    
		org.springframework.boot
		spring-boot-starter-freemarker
	

2、application.yml加入freemarker配置

freemarker:
    allow-request-override: false
    cache: false
    check-template-location: true
    charset: UTF-8
    content-type: text/html; charset=utf-8
    expose-request-attributes: false
    expose-session-attributes: false
    expose-spring-macro-helpers: false
    suffix: .ftl
    template-loader-path: classpath:/templates

3、新建 IndexController类 添加indexFre方法

@Controller
@RequestMapping(value = "/userIndex")
public class IndexController {

    @Autowired
    private UserInfoService userInfoService;

    /**
     * freemarker模板
     * @param modelAndView
     * @return
     */
    @RequestMapping(value = "/indexFre")
    public ModelAndView indexFre(ModelAndView modelAndView) {
        //设置返回的页面名称
        modelAndView.setViewName("indexFre");
        //要返回在页面的数据
        List userList =  userInfoService.findUserInfo();
        modelAndView.addObject("userList", userList);
        return modelAndView;
    }

}

4、在resources/templates下新建 indexFre.ftl文件

    


SpringBoot整合Freemarker


    
        <#list userList as user>
            

        

            
姓名
            
年龄
            
性别
        

                
${user.name}
                
${user.age}
                
${user.sex}
            
        
    

启动服务访问：http://localhost:8086/userIndex/indexFre

三、Spring Boot整合 thymeleaf 模板

1、pom.xml加入 thymeleaf 依赖

	
		org.springframework.boot
		spring-boot-starter-thymeleaf
	

2、application.yml加入thymeleaf配置

thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encodin: UTF-8
    content-type: text/html
    cache: false

3、在新建的 IndexController类中 添加 indexThy 方法

@Controller
@RequestMapping(value = "/userIndex")
public class IndexController {

    @Autowired
    private UserInfoService userInfoService;

    /**
     * thymeleaf模板
     * @param modelAndView
     * @return
     */
    @RequestMapping(value = "/indexThy")
    public ModelAndView indexThy(ModelAndView modelAndView) {
        //设置返回的页面名称
        modelAndView.setViewName("indexThy");
        //要返回在页面的数据
        List userList =  userInfoService.findUserInfo();
        modelAndView.addObject("userList", userList);
        return modelAndView;
    }

}

4、在resources/templates下新建 thymeleaf.html文件

     注：th:each是 thymeleaf模板的语法。如：  th:if条件判断

    


SpringBoot整合thymeleaf


    

        

            
姓名
            
年龄
            
性别
        
        
        

            

            

            

        
    

启动服务访问：http://localhost:8086/userIndex/indexThy

项目目录图：

学如逆水行舟，不进则退。心似平原跑马，易放难收。全栈工程师是指掌握多种技能，并能利用多种技能独立完成产品的人。 也叫全端工程师(同时具备前端和后台能力)，英文Full Stack engineer。【人工智能】【区块链】【系统/网络/运维】【云计算/大数据】【数据库】【移动开发】【后端开发】【游戏开发】【UI设计】【微服务】【爬虫】【Java】【Go】【C++】【PHP】【Python】【Android/IOS】【HTML/CSS】【JavaScript】【Node】。。。

欢迎各位大神萌新一起专研分享各行各业技术!

IT全栈工程师技术交流群：593674370