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

  • 相关阅读:
    极高效内存池实现 (cpu-cache)
    gles2.0环境的在windows上的建立
    使用OpenGL绘制 shapefile文件 完成最基本的gis操作
    纯C++安卓开发 (ndk)系列之 ---- 常见问题
    如何用 纯C++(ndk)开发安卓应用 ?
    Android-NDK处理用户交互事件
    图解-安卓中调用OpenGL
    图解安卓-c++开发-通过java 调用c++ jni的使用
    搭建安卓开发环境 hello world andriod
    关于socket通讯,如何才能高效?
  • 原文地址:https://www.cnblogs.com/huxdiy/p/10787836.html
Copyright © 2011-2022 走看看