暑假撸系统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.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
随机推荐
- Python调用aiohttp
1. aiohttp安装 pip install aiohttp 1.1. 基本请求用法 async with aiohttp.get('https://github.com') as r: awai ...
- leetcode 54. 螺旋矩阵 及 59. 螺旋矩阵 II
54. 螺旋矩阵 问题描述 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, ...
- Jetpack—LiveData组件的缺陷以及应对策略 转至元数据结尾
一.前言 为了解决Android-App开发以来一直存在的架构设计混乱的问题,谷歌推出了Jetpack-MVVM的全家桶解决方案.作为整个解决方案的核心-LiveData,以其生命周期安全,内存安全等 ...
- Cesium入门11 - Interactivity - 交互性
Cesium入门11 - Interactivity - 交互性 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ ...
- spark中job stage task关系
1.1 例子,美国 1880 - 2014 年新生婴儿数据统计 目标:用美国 1880 - 2014 年新生婴儿的数据来做做简单的统计 数据源:https://catalog.data.gov 数据格 ...
- MyCms 自媒体 CMS 系统 v2.6，SEO 优化升级
MyCms 是一款基于Laravel开发的开源免费的自媒体博客CMS系统,助力开发者知识技能变现. MyCms 基于Apache2.0开源协议发布,免费且不限制商业使用,欢迎持续关注我们. V2.6 ...
- gin中的query和postform用法
package main import ( "github.com/gin-gonic/gin" ) func main() { r := gin.Default() // Que ...
- Android开发-页面绘制
今天主要绘制了记账页面 记账页面用到的布局是TableLayout加Viewpager联动的方式,通过设置一个标题头可以实现页面的左右滑动,viewpager中添加两个fragment. 需要制作两个 ...
- python 小兵(6)函数进阶
阅读目录 函数参数-动态参数 名称空间 函数的嵌套 gloabal.nonlocal 回到顶部 函数参数-动态参数 之前我们说过传参,如果我们在传参数的时候不很清楚有哪些的时候,或者说给一个函数传了很 ...
- 随机UA
from fake_useragent import UserAgent ua = UserAgent().random headers={ 'User-Agent':ua } print(heade ...