<!DOCTYPE HTML>
<link rel="stylesheet" type="text/css" media="all" href="../../css/gtvg.css" th:href="@{/css/gtvg.css}"
xmlns:th="http://www.w3.org/1999/xhtml"/>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- <script th:src="@{/jquery/jquery-3.3.1.min.js}"></script>-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" th:inline="javaScript">
function show() {
alert('[[${switchCase}]]')
}
function show1() {
var str=/*[[${str}]]*/ null;
var arr1=/*[[${arr1}]]*/ null;
var list=/*[[${list}]]*/ null;
var map=/*[[${map[__'dept'__]}]]*/ null;
alert(str);
alert(arr1[0]);
alert(list.length);
alert(map.deptName);
}
function ajax_get() {
//alert("ajax_get");
//var var_url = "[[@{/test/selectById}]]";
var var_url = "http://localhost:8080/test/selectById";
var data = {userId:1};
$.ajax({
type : 'GET',
dataType: "json",
contentType: "application/json; charset=utf-8",
url : var_url,
data: data,
success : function(data) {
alert(data.userId + " " + data.userName + " " + data.phone);
}
});
}
function ajax_post() {
alert("ajax_post");
var var_url = "http://localhost:8080/test/add";
var data = {userId:1, userName:'a', password:'a', phone:'小疯子'};
$.ajax({
type : 'POST',
dataType: "json",
contentType: "application/json; charset=utf-8",
url : var_url,
data: {userName:'a', password:'a', phone:'小疯子'},
success : function(data) {
alert(data);
}
});
}
</script>
</head>
<div th:insert="~{/footer.html}"></div>
<body>
数据库
<table border="1" width="200px;" style="test-align: center;">
<thead>
<tr>
<th width="30%">数据ID</th>
<th>部门名称</th>
</tr>
</thead>
<tbody>
<tr th:each="deptDomain : ${deptDomainList}">
<td th:text="${deptDomain.deptId}">0</td>
<td th:text="${deptDomain.deptName}">0</td>
</tr>
</tbody>
</table>
<p></p>
参数及格式化
<table border="1" width="1000px;" style="test-align: center;">
<tr>
<td width="30%">
#{page.myText}
</td>
<td width="70%">
<span th:text="#{page.myText}">This is prototype text.</span>
</td>
</tr>
<tr>
<td width="30%">
#{data.key}
</td>
<td width="70%">
<span th:text="#{data.key}">This is prototype text.</span>
</td>
</tr>
<tr>
<td width="30%">
List中第一个元素
</td>
<td width="70%">
<span th:text="${deptDomainList[0].deptId}"></span>,
<span th:text="${deptDomainList[0].deptName}"></span>,
<span th:text="${deptDomainList[1].deptId}"></span>,
<span th:text="${deptDomainList[1].deptName}"></span>,
<span th:text="${dept.deptId}"></span>,
<span th:text="${dept.deptName}"></span>
</td>
</tr>
<tr>
<td width="30%">
ref linkage
</td>
<td width="70%">
<a href="view.html" th:href="@{/test/selectById(userId=${deptDomainList[1].deptId})}" th:text="${deptDomainList[1].deptName}">
</td>
</tr>
<tr>
<td width="30%">
ref linkage1
</td>
<td width="70%">
formatInteger:<div th:text="${#numbers.formatInteger(10.99,5)}">
<div th:each="num : ${#numbers.arrayFormatInteger(arr1,5)}">
<div th:text="${num}"><div>
</div>
</td>
</tr>
<tr>
<td width="30%">
date format1
</td>
<td width="70%">
<div th:each="num : ${#numbers.arrayFormatInteger(arr1,5)}">
<div th:text="${num}"><div>
</div>
<div th:each="num : ${#numbers.arrayFormatDecimal(arr1,5,2)}">
<div th:text="${num}"><div>
</div>
<div th:each="num : ${#numbers.arrayFormatDecimal(arr1,5,2,'COMMA')}">
<div th:text="${num}"><div>
</div>
</td>
</tr>
<tr>
<td width="30%">
date format2
</td>
<td width="70%">
<div th:each="num : ${#numbers.arrayFormatDecimal(arr1,5,2)}">
<div th:text="${num}"><div>
</div>
</td>
</tr>
<tr>
<td width="30%">
date format
</td>
<td width="70%">
<div th:text="${#dates.day(today)}"></div>
<div th:text="${#dates.month(today)}"></div>
<div th:text="${#dates.year(today)}"></div>
<div th:text="${#dates.format(today,'yyyy年MM月dd日 HH:mm:ss')}"></div>
</td>
</tr>
</table>
<p></p>
<table border="1" width="1000px;" style="test-align: center;">
<thead>
<tr>
<th>test case</th>
<th>result</th>
</tr>
</thead>
<tr>
<td width="30%">
表达式
</td>
<td width="70%">
<span th:utext="'Hello World'"></span>
</td>
</tr>
<tr>
<td width="30%">
布尔值
</td>
<td width="70%">
<div th:if="${isTrue} == true">
show text
</div>
<div th:if="${isTrue} != true">
show text
</div>
</td>
</tr>
<tr>
<td width="30%">
if 表达式
</td>
<td width="70%">
<span th:text="男" th:if="${switchCase == 'aaa'}"></span>
<span th:text="女" th:if="${switchCase == 'bbb'}"></span>
</td>
</tr>
<tr>
<td width="30%">
case 判断1
</td>
<td width="70%">
<div class="top" th:switch="${switchCase}">
<div class="logo" th:case="'aaa'">
<input type="text" name="userName" value="aaa">
</div>
<div class="logo" th:case="'bbb'">
<input type="text" name="userName" value="bbb">
</div>
<div class="logo" th:case="*">
<input type="text" name="userName" value="***">
</div>
</div>
</td>
</tr>
<tr>
<td width="30%">
case 判断2
</td>
<td width="70%">
<select th:switch="${switchCase}">
<option th:case="aaa">男</option>
<option th:case="bbb">女</option>
<option th:case="*">不明确</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
th:attr 带有按钮的提交
</td>
<td width="70%">
<form>
<input type="text" name="userName" value="小明">
<input type="submit" value="提交">
</form>
<form>
<input type="text" name="userName" value="小明">
<input type="submit" th:attr="value=#{submitKeyName}">
</form>
调用本机的服务
<form th:attr="method='post', name=#{formName}, action=@{http://localhost:8080/test/add}">
<input type="text" name="userName" value="小鸭子">
<input type="text" name="password" value="小明子">
<input type="text" name="phone" value="小疯子">
<input type="submit" th:attr="value=#{submitKeyName}">
<input type="submit" th:value="#{submitKeyName}">
</form>
调用指定服务器上的的服务
<form th:attr="method='post', name=#{formName}, action=@{/test/add}">
<input type="text" name="userName" value="小鸭子">
<input type="text" name="password" value="小明子">
<input type="text" name="phone" value="小疯子">
<input type="submit" th:attr="value=#{submitKeyName}">
<input type="submit" th:value="#{submitKeyName}">
</form>
</td>
</tr>
<tr>
<td width="30%">
内联语法+JS调用
</td>
<td width="70%">
hello, [[${switchCase}]]
<p></p>
<input type="button" th:value="#{submitKeyName}" onClick="show()"/>
</td>
</tr>
<tr>
<td width="30%">
内联语法序列化,读取arrray,list,map对象
</td>
<td width="70%">
hello, [[${switchCase}]]
<p></p>
<input type="button" th:value="#{submitKeyName}" onClick="show()"/>
<input type="button" value="show1" onClick="show1()"/>
</td>
</tr>
<tr>
<td width="30%">
颜色显示
</td>
<td width="70%">
<span style="color: red;">内联语法+JS调用</span>
<span style="color: green;">内联语法+JS调用</span>
<span style="color: yellowgreen;">内联语法+JS调用</span>
</td>
</tr>
<tr>
<td width="30%">Radio and Option check box</td>
<td>
<!-- <form method="post" th:action=@{/test/add}" th:object="${dept}">-->
<form method="post" th:action="@{/test/add}" th:object="${dept}">
<table>
<tr>
<td><input type="text" th:field="*{deptName}"/></td>
</tr>
<tr>
<td><textarea th:field="*{deptName}"/></td>
</tr>
</table>
<select class="form-control select2" id="catId" name="catId">
<option value=""> -- 请选择 -- </option>
<option th:each="dept:${deptDomainList}" th:value="${dept.deptId}" th:text="${dept.deptName}" value="1">14Dept</option>
</select>
</form>
</td>
</tr>
<tr>
<td width="30%">
颜色显示
</td>
<td width="70%">
<div class="form-group">
<label for="isBoy" class="col-sm-2 control-label">是否过期</label>
<div id="isBoy" class="col-sm-8">
<div class="radio-inline">
<label><input name="expire" type="radio" value="1" th:field="*{isTrue}"/>未过期</label>
</div>
<div class="radio-inline">
<label><input name="expire" type="radio" value="0" th:field="*{isTrue}"/>过期</label>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td width="30%">
按照类提交
</td>
<td width="70%">
调用本机的服务
<form th:attr="method='post', name=#{formName}, action=@{/test/addDept}">
<input type="text" name="deptName" value="生产小队">
<input type="text" name="desp" value="糊纸盒子">
<input type="text" name="phone" value="13033589010">
<input type="submit" th:value="#{submitKeyName}">
</form>
</td>
</tr>
<tr>
<td width="30%">
ajax调用
</td>
<td width="70%">
<input type="button" th:value="ajax_get" onClick="ajax_get()"/>
<input type="button" th:value="ajax_post" onClick="ajax_post()"/>
</td>
</tr>
</table>
<div th:insert="~{/footer.html}"></div>
</body>
</html>
spring boot,thymleaf 代码模型
最新推荐文章于 2022-05-08 10:49:54 发布