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:布尔值,当前循环是否是最后一个