Thymeleaf在后台获取数据在前台显示

Thymeleaf在后台获取数据在前台显示以及 JavaScript根据获取的数据进行分页初始化

后台也设计了分页

后台分页:

通过pagehelper插件实现后台数据库分页在2019.3.19中有具体描述

Pagehelper先正常的通过mybatis的mapper设置查询所有设置的sql语句与方法

然后通过配置

设置在mysql查询时自动使用pagehelper拦截器

然后通过使用这种方式来调用代码使用PageHelper

只要你可以保证在 PageHelper 方法调用后紧跟 MyBatis 查询方法，这就是安全的。

 

通过分页从数据库获得一定的数据之后放入hashmap

Map<String, Object> data = new HashMap<>();

Map<String, Object> data = new HashMap<>();

 

前端对于分页的应用：

在js中先初始化以及对于分页跳转的动态设置

 

在每个html页面中都有JavaScript的初始化这其实是在一开始的加载页面中通过js与后台进行交互获取一定的数据再生成前台界面（mvc）

在前台生成页面时通过spring搭配thymeleaf在前台显示从数据库中取到的值

例如：

 

th:if="${current_account == null}"

 

这是一条选择语句具体看thymeleaf的描述

其中current_account就是从model中直接选择获取的值

Model是springboot中保存数据的东西

在后台把需要的数值塞入model

在前台通过thymeleaf获取显示

文本替换

在前台通过thymeleaf的each循环将多项数据显示在前台

<div class="column" th:each="item,itemStats : ${data['subjects']}">
    <div class="ui fluid card">
        <a href="javascript:void(0)" class="image">
            <img th:src="@{'/upload/images/'+${item.imgUrl}}" style="max-height: 240px;" />
        </a>
        <div class="content">
            <div class="header">
                <!-- TODO::跳转处理 -->
                <a th:if="${current_account != null}" th:href="@{'/problemset/'+${item.id}+'/problems'}" th:text="${item.name}">计算机组成原理</a>
                <a th:if="${current_account == null}" th:onclick="'app.showLogin()'" th:text="${item.name}">计算机组成原理</a>
            </div>
            <p class="meta">
                <i class="user icon"></i>
                <a href="javascript:void(0)">admin</a>
            </p>
            <p class="description"></p>
        </div>
        <div class="extra content">
            <span class="right floated">
                <span>
                <i class="globe icon"></i>私有题库
                </span>
            </span>
            <i class="file text outline icon"></i>
            <span th:text="${item.questionNum}"></span>
        </div>
    </div>
</div>

 

迭代对象可以是java.util.List,有：

    index:当前迭代对象的index（从0开始计算）

    count: 当前迭代对象的ind

    current:当前迭代变量

    even/odd:布尔值，当前循环是否是最后一个