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列表

猜你喜欢