springBoot 随笔(二)

时间：2023-03-09 04:54:53
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列表

相关文章