暑假撸系统5- Thymeleaf 常用标签的
上次博客已经是三天前了，后期修补和细化的东西多了，进度没有前几天那么明显了。因为原来工作大多是后端居多，如果非要前台也会选择一些相对对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-先把git后悔药准备好！
学校规定让暑假自己撸一款在线考试系统,其实的确需要一个款在线的考试系统系统,因为平时学校是使用Excel讲解选择题的.基于这个目标那么就话不多说.开干! 本来趁着项目想练练手,使用些新学习的技能看看, ...
- thymeleaf常用标签
1. th:checked ,th:selected标签<input type="radio" value="M" name="gender&q ...
- 暑假撸系统6- Thymeleaf ajax交互！
本来用Thymeleaf也没想着深度使用ajax,就是用也是非常传统的ajax方式提交然后js控制修改下变量.闲来无事的时候看Thymeleaf的教程发现一哥们的实现方式,以及实现思路,堪称惊奇,先说 ...
- 暑假撸系统3- petty热更新 mybatis自动填充时间字段！
经过了昨天纠结技术选型,和一大堆xml配置,终于把架子搭好了.因为最近一次做java项目也在好多年以前了(毕竟用了pytohn以后谁也不想再回来java了),java的生态发生了长足的进步,本来想从原 ...
- thymeleaf 常用标签
1.th:field th:field="*{user.sex}" 此标签会自动填充数据,比如用户的性别 user.sex 如果不为空,则会自动勾选上 2.th:each=&qu ...
- 暑假撸系统7- 熊孩子的捣乱！javascript保存前台状态！
系统大体框架已经搭的差不多了, 往下就是技术性的美化以及修补了,但这也是最最耗费时间的.在这个过程就发现了一个有意思的需求,这里把思路以及解决方案总结下. 因为做的是考试系统,不管是大或者小的考试,本 ...
- 4.Thymeleaf的常用标签
一.常用标签 二.foreach案例 1.创建项目 2. 创建Student.java package cn.kgc.pojo; /** * Created by Administrator on 2 ...
- SpringBoot入门系列（五）Thymeleaf的常用标签和用法
前面介绍了Spring Boot 中的整合Thymeleaf .不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/category/16577 ...
- 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
随机推荐
- ubuntu的一些常用操作
查看当前正在运行的操作系统版本 $ cat /etc/issue 查看操作系统详细信息 $ sudo lsb_release -a 查看内核版本号 $ uname -r 卸载软件(不保留配置文件) $ ...
- Linux上天之路（十五）之文件查找
主要内容 精确查找 模糊查找 1. 精确查找 find - search for files in a directory hierarchy 递归地在层次目录中处理文件 查找方式: 按文件属性查找 ...
- Golang实现集合（set）
package set package set import ( "bytes" "fmt" "sync" ) type Set struc ...
- MapReduce和Hive学习文档链接学习顺序
1.<CentOS6.5下安装Hadoop-2.7.3(图解教程)> https://www.toutiao.com/i6627365258090512909/ 2.<CentOS6 ...
- Jenkins Hackfest 用户体验文档报告
Jenkins 技术文档是我们项目的重要组成部分,因为它是正确使用 Jenkins 的关键.好的文档可以指导用户,并鼓励选择好的实现方式.这是用户体验的关键部分.在最近的 Jenkins UI/UX ...
- Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401开发
Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...
- 浅解XXE与Portswigger Web Sec
XXE与Portswigger Web Sec 相关链接: 博客园 安全脉搏 FreeBuf 简介XML XML,可扩展标记语言,标准通用标记语言的子集.XML的简单易于在任何应用程序 ...
- vue学习8-for循环
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta ht ...
- Linux下的ssh、scala、spark配置
注:笔记旨在记录,配置方式每个人多少有点不同,但大同小异,以下是个人爱好的配置方式. 目录 一.配置jdk 二.配置ssh 三.配置hadoop 四.配置scala 五.配置spark 平台:win1 ...
- yum搭建私有仓库远程版
目录 一:yum安装 1.简介 1.安装 2.卸载 3.更新 4.yum安装的生命周期 二:yum搭建私有仓库(本地版) 1.下载必须的软件包(准备配置) 2.创建软件仓库 3.下载对应的软件 4.初 ...