springBoot 随笔(二)

此文为springBoot 结合 thymeleaf ,解析后台接口数据展示到html页面

基于 springBoot(一)工程。

1/ 引用 thymeleaf 组件依赖

         <!--  dependencies 节点下新增-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2/ 新建页面文件存放路径,存放html

src/main/resources/templates

3/ 更新application.properties配置文件,新增thymeleaf 配置文件

#thymelea配置  资源文件目录
spring.thymeleaf.prefix=classpath:/templates/
#后缀
spring.thymeleaf.suffix=.html
#类型
spring.thymeleaf.mode=HTML5
#编码
spring.thymeleaf.encoding=UTF-8
#热部署文件,页面不产生缓存,及时更新
spring.thymeleaf.cache=false

4/新增数据接口

package com.hux.stu.dydatasorce.controller;

import java.util.ArrayList;
import java.util.List; import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView; @RestController
public class ThymeleafDataController { @RequestMapping("page")
public ModelAndView showPage(Model mode) {
List list = new ArrayList();
list.add("a");
list.add("b");
list.add("c");
list.add("d");
list.add("e");
//返回视图以及数据, 根据配置文件 读取资源目录下index.html 文件
return new ModelAndView("index", "list",list); }
}

5/新增页面 index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" /> <!-- 自动生成的文件,该节点没有结束/ ,不添加会报错 -->
<title>Insert title here</title>
</head>
<body> <table>
<tr><td>读取的数据</td></tr>
<tr th:if="${list.size()} eq 0">
<td colspan="3">无数据</td>
</tr>
<!-- 读取数据 -->
<tr th:each="info : ${list}">
<td th:text="${info}"></td>
</tr> </table>
</body>
</html>

6/ main方法运行,访问页面,http://127.0.0.1:8081/page  查看展示数据,展示abcde列表

上一篇:Flexible 弹性盒子模型之CSS flex-grow 属性


下一篇:springboot基础(随笔)