在第一节我们演示通过接口返回数据,数据没有渲染展示在页面上 。在这里我们演示一下从后台返回数据渲染到前端页面的项目案例.模板引擎
SpringBoot是通过模版引擎进行页面结果渲染的,官方提供预设配置的模版引擎主要有
- Thymeleaf
- FreeMarker
- Velocity
- Groovy
- Mustache
我们在这里演示使用ThymeleafThymeleaf
和FreeMarker
模板引擎。
Thymeleaf是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。新建一个模块
Thymeleaf 的主要目标是为你的开发工作流程带来优雅的自然模板——HTML可以在浏览器中正确显示,也可以作为静态原型工作,从而加强开发团队的协作。
凭借 Spring Framework 的模块、与你最喜欢的工具的大量集成以及插入你自己的功能的能力,Thymeleaf 是现代 HTML5 JVM Web 开发的理想选择——尽管它还有更多功能。
文章图片
选择我们需要的组建
Developer Tools
中的Spring Boot DevTools
Web
中的Spring Web
Template Engines
中的Thymeleaf
文章图片
文章图片
文章图片
也可以直接在pom.xml中引入
thymeleaf
依赖
org.springframework.boot
spring-boot-starter-thymeleaf
创建
com.rumenz.lession4.controller
包
文章图片
创建模板页面
src/main/resources/templates/index.html
thymeleaf - 入门小站 - 锐客网
创建
controller
com.rumenz.lession4.controller.ThymeleafRumenController
package com.rumenz.lession4.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
/**
* @className: ThymeleafRumenController
* @description: TODO 类描述
* @author: 入门小站 rumenz.com
* @date: 2021/11/1
**/
@Controller
@RequestMapping("/")
public class ThymeleafRumenController {@RequestMapping(value = "https://www.it610.com/index",method= RequestMethod.GET)
public String index(ModelMap m){
//数据也可以从数据库查询出来返回
m.addAttribute("name", "入门小站");
m.addAttribute("url", "https://rumenz.com");
//返回是一个页码:src/main/resources/templates/thymeleaf.html
return "thymeleaf";
}
}
启动项目
文章图片
浏览器验证
浏览器访问
http://127.0.0.1:8080/index
文章图片
FreeMarker
FreeMarker是一款模板引擎,即一种基于模板和要改变的数据,并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具。引入依赖
org.springframework.boot
spring-boot-starter-freemarker
创建模板
src/main/resources/templates/freemarker.html
freemarker - 入门小站 - 锐客网
FreeMarker案例名字:${name}
网址:${url}
配置文件
src/main/resources/application.properties
,指定模板文件的后缀。
spring.freemarker.suffix=.html
编写
controller
com.rumenz.lession4.controller.FreeMarkerRumenController
package com.rumenz.lession4.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* @className: FreeMarkerRumenController
* @description: TODO 类描述
* @author: 入门小站 rumenz.com
* @date: 2021/11/1
**/@Controller
@RequestMapping("/")
public class FreeMarkerRumenController {@RequestMapping("/index2")
public String index2(ModelMap m){
//数据也可以从数据库查询出来返回
m.addAttribute("name", "入门小站");
m.addAttribute("url", "https://rumenz.com");
//返回是一个页码:src/main/resources/templates/freemarker.html
return "freemarker";
}
}
启动项目
文章图片
浏览器验证
浏览器访问
http://127.0.0.1:8080/index2
文章图片
本小结源码地址:
- GitHub:https://github.com/mifunc/spr...
- Gitee:https://gitee.com/rumenz/spri...
- https://rumenz.com/rumenbiji/...
介绍
- 我的博客 https://rumenz.com/
- 我的工具箱 https://tooltt.com/
- 微信公众号:【入门小站】
文章图片
- 关注【入门小站】回复【1001】获取 linux常用命令速查手册
- 关注【入门小站】回复【1003】获取 LeetCode题解【java语言实现】
- 关注【入门小站】回复【1004】获取 Java基础核心总结
- 关注【入门小站】回复【1009】获取 阿里巴巴Java开发手册
推荐阅读
- 第五节:SpringBoot常用注解介绍
- SpringBoot2022【草稿】
- 聊聊springboot项目全局异常处理那些事儿
- 第一节:创建SpringBoot项目并运行HelloWorld
- springboot管理系统[基于员工角色和文件权限的分级的后台管理系统源码]
- SpringBoot之@ComponentScan和@SpringBootApplication扫描覆盖问题
- mybatis|记mybatis查询null字段导致的NPE
- SpringBoot|SpringBoot 整合 druid数据源
- springboot项目配置application添加图片映射 (windows and linux 都可使用)