zoukankan      html  css  js  c++  java
  • 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列表

  • 相关阅读:
    【转】IOS开发:[1]Xcode5界面入门
    【转】Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得
    特征选择
    EM算法
    算法之美--3.2.3 KMP算法
    算法之美--3.2.2 MP算法
    图像质量评价方法PSNR+SSIM&&评估指标SROCC,PLCC
    C/C++二进制读写png文件
    大津法---OTSU算法
    一些优秀的面试笔试总结
  • 原文地址:https://www.cnblogs.com/huxdiy/p/10787836.html
Copyright © 2011-2022 走看看