上次博客已经是三天前了，后期修补和细化的东西多了，进度没有前几天那么明显了。因为原来工作大多是后端居多，如果非要前台也会选择一些相对对ui依赖比较小的框架，比如extjs，所以这次的基础排版就费劲了，不过也正好也趁这个机会学习下。

通过这几天对Thymeleaf这个模板的系统的学习，已经明白为什么它会取代el表达式被更多人接受了。主要的原因就是和后端分离，可以让美工直接在浏览器上静态查看效果。大白话就是原来的jsp的el表达式啥了其实浏览器是不知道咋回事的，所以执行不了。但是Thymeleaf是在html标签连增加额外的属性来达到模板+数据的展示的，所以浏览器解释html的时候会忽略未定义的标签属性，从而可以静态运行没问题。当有数据的时候，Thymeleaf标签又会动态的替换掉静态的内容，从而去动态显示。

因为上次写java已经是好几年前了，这次备课也只是背了大一的java基础，进阶的ssm等技术已经丢的差不多了，所以很多东西基本都是从头来，不过慢慢拾起来的过程也比较有啥意思，毕竟增删查改已经不会让我快乐了，如果没有别的新鲜感，是果真做不下去了！！！效率主要是输在前端布局的问题上！！用不熟悉的技术！痛并快乐!

完成了自动根据条件进行组卷

完成了试卷检验，这个页面也可以作为考试使用！

剩下的就是考生的个人中心页面了，预计是准备前后端分离！前端是前端的ui，后端是后端的ui。剩下的时间就是学习前端！！！

常用th标签都有那些？

关键字 功能介绍 案例
th:id 替换id <input th:id="'xxx' + ${collect.id}"/>
th:text 文本替换 <p th:text="${collect.description}">description</p>
th:utext 支持html的文本替换 <p th:utext="${htmlcontent}">conten</p>
th:object 替换对象 <div th:object="${session.user}"> 
th:value 属性赋值 <input th:value="${user.name}" /> 
th:with 变量赋值运算 <div th:with="isEven=${prodStat.count}%2==0"></div> 
th:style 设置样式 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" 
th:onclick 点击事件 th:onclick="'getCollect()'" 
th:each 属性赋值 tr th:each="user,userStat:${users}"> 
th:if 判断条件  <a th:if="${userId == collect.userId}" > 
th:unless 和th:if判断相反 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> 
th:href 链接地址 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> /> 
th:switch 多路选择 配合th:case 使用 <div th:switch="${user.role}"> 
th:case th:switch的一个分支 <p th:case="'admin'">User is an administrator</p>
th:fragment 布局标签，定义一个代码片段，方便其它地方引用 <div th:fragment="alert">
th:include 布局标签，替换内容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"></head> /> 
th:replace 布局标签，替换整个标签到引入的文件 <div th:replace="fragments/header :: title"></div> 
th:selected selected选择框 选中 th:selected="(${xxx.id} == ${configObj.dd})"
th:src 图片类地址引入 <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> 
th:inline 定义js脚本可以使用变量 <script type="text/javascript" th:inline="javascript">
th:action 表单提交的地址 <form action="subscribe.html" th:action="@{/subscribe}">
th:remove 删除某个属性 <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
th:attr 设置标签属性，多个属性可以用逗号分隔 比如th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。

暑假撸系统5- Thymeleaf 常用标签的的更多相关文章

  1. 暑假撸系统1-先把git后悔药准备好！

    学校规定让暑假自己撸一款在线考试系统,其实的确需要一个款在线的考试系统系统,因为平时学校是使用Excel讲解选择题的.基于这个目标那么就话不多说.开干! 本来趁着项目想练练手,使用些新学习的技能看看, ...

  2. thymeleaf常用标签

    1. th:checked ,th:selected标签<input type="radio" value="M" name="gender&q ...

  3. 暑假撸系统6- Thymeleaf ajax交互！

    本来用Thymeleaf也没想着深度使用ajax,就是用也是非常传统的ajax方式提交然后js控制修改下变量.闲来无事的时候看Thymeleaf的教程发现一哥们的实现方式,以及实现思路,堪称惊奇,先说 ...

  4. 暑假撸系统3- petty热更新 mybatis自动填充时间字段！

    经过了昨天纠结技术选型,和一大堆xml配置,终于把架子搭好了.因为最近一次做java项目也在好多年以前了(毕竟用了pytohn以后谁也不想再回来java了),java的生态发生了长足的进步,本来想从原 ...

  5. thymeleaf 常用标签

    1.th:field th:field="*{user.sex}" 此标签会自动填充数据,比如用户的性别 user.sex 如果不为空,则会自动勾选上  2.th:each=&qu ...

  6. 暑假撸系统7- 熊孩子的捣乱！javascript保存前台状态！

    系统大体框架已经搭的差不多了, 往下就是技术性的美化以及修补了,但这也是最最耗费时间的.在这个过程就发现了一个有意思的需求,这里把思路以及解决方案总结下. 因为做的是考试系统,不管是大或者小的考试,本 ...

  7. 4.Thymeleaf的常用标签

    一.常用标签 二.foreach案例 1.创建项目 2. 创建Student.java package cn.kgc.pojo; /** * Created by Administrator on 2 ...

  8. SpringBoot入门系列（五）Thymeleaf的常用标签和用法

    前面介绍了Spring Boot 中的整合Thymeleaf .不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/category/16577 ...

  9. 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

随机推荐

  1. javascript错误类型

    ECMA-262 定义了下列 7 种错误类型,简单说明如下: Error:普通异常.通常与 throw 语句和 try/catch 语句一起使用. 利用属性 name 可以声明或了 解异常的类型,利用 ...

  2. 实验 7 : OpenDaylight 实验 —— Python 中的 REST API 调用

    实验 7 : OpenDaylight 实验 -- Python 中的 REST API 调用 一.实验 目的 对 Python 调用 OpenDaylight 的 REST API 方法有初步了解. ...

  3. textarea换行符转换

    /** * @description textarea换行符转指定字符 * @param str:要放到textarea的字符串 * @param code:要转换成换行的字符,默认为',' */ e ...

  4. 一网打尽JVM垃圾回收知识体系

    垃圾回收的区域 堆:Java 中绝大多数的对象都存放在堆中,是垃圾回收的重点 方法区:此中的 GC 效率较低,不是重点 由于虚拟机栈的生命周期和线程一致,因此不需要 GC 对象判活 在垃圾收集器对堆进 ...

  5. linux 安装 elasticsearch 步骤及问题解决方案

    1.下载安装包并上传至服务器 2.解压至当前文件夹 tar -xzvf xxx.tar.gz 3.配置JDK 如果服务器上已经配置了JDK,则在解压后的elasticsearch 文件夹的bin 目录 ...

  6. CesiumJS下载量超过1百万次

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ CesiumJS的下载总量已经超过100万.这一里程碑对我们(C ...

  7. java关键字final

    //继承弊端:打破了封装性 /* * final关键字: * 1,final是一个修饰符,可以修饰类,方法,变量. * 2,final修饰的类不可以被继承. * 3,final修饰的方法不可以被覆盖. ...

  8. 你可能不知道的Animation动画技巧与细节

    引言 在web应用中,前端同学在实现动画效果时往往常用的几种方案: css3 transition / animation - 实现过渡动画 setInterval / setTimeout - 通过 ...

  9. 【故障公告】数据库服务器 CPU 100% 引发全站故障

    今天 11:12-12:03 期间,园子使用的阿里云 RDS 实例(SQL Server2016 标准版,16核CPU)出现 CPU 100% 问题,引发全站故障,由此给您带来麻烦,请您谅解. 发现故 ...

  10. CentOS7安装部署Prometheus+Grafana （转）

    转自:https://www.jianshu.com/p/967cb76cd5ca 作为监控系统的后起之秀,prometheus的安装可谓非常简单,不需要第三方的依赖(数据库.缓存.PHP之类的).下 ...