在第一节咱们演示通过接口返回数据,数据没有渲染展现在页面上 。在这里咱们演示一下从后盾返回数据渲染到前端页面的我的项目案例.

模板引擎

SpringBoot是通过模版引擎进行页面后果渲染的，官网提供预设配置的模版引擎次要有
  • Thymeleaf
  • FreeMarker
  • Velocity
  • Groovy
  • Mustache
咱们在这里演示应用Thymeleaf和FreeMarker模板引擎。

Thymeleaf

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依赖
<dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

创立com.rumenz.lession4.controller包

创立模板页面

src/main/resources/templates/index.html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>thymeleaf - 入门小站</title></head><body><p th:text="'名字:'+${name}"></p><p th:text="'网址:'+${url}"></p></body></html>

创立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 = "/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网页，电子邮件，配置文件，源代码等)的通用工具。

引入依赖

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

创立模板

src/main/resources/templates/freemarker.html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>freemarker - 入门小站</title></head><body><h1>FreeMarker案例</h1><p>名字:${name}</p><p>网址:${url}</p></body></html>

配置文件

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开发手册