https://www.imooc.com/video/16722 友情链接1
https://www.jianshu.com/p/f9ebd23e8da4 简书 友情链接2
url传参数
th:href="@{/hello(pid=1,id=${person.id})}" 这里需要注意,在模板转化的时候会将这个 () 自动转换成一个? 类似 xxx?xxx=ssss
onclick传参数 必须按着这个写
<button class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">获得名字</button>
post写法:
@RequestMapping("/test") public String messages(User user) { ... return "redirect:/post/path"; //跳转到path所在controller处理 }
<form th:action="@{/test}" th:object="${user}" th:method="post" > <input type="text" th:filed="*{name}" /> //filed 见下方 <input type="submit" /> </form>
传值给js
public String messages(Model model) { model.addAttribute("message", "hello"); return "index"; }
<script th:inline="javascript"> var message = [[${message}]]; // 这里有个很强大的功能 [[${message}]] 可以直接放在任何地方充当字符 var message = “[[${message}]]”; console.log(message); </script> th:inline="javascript"> 当这样写时,[[${message}]]会自动带上双引号,如果不写,则写啥时啥, 比如: <script type="text/javascript"> "openId":"[[${openId}]]" <script th:inline="javascript"> "openId":[[${openId}]]
操作对象:
User user = UserDao.getUser();
<input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}" /> //或者 <div th:object="${user}"> <input th:id="*{name}" /> <input th:id="*{age}" /> </div>
时间对象:
Date mytime = new Date();
<input th:id="*{#dates.format(mytime,'yyyy-MM-dd HH:mm:ss')}" />
循环集合对象:
List<String> users = new ArrayList<>();
<tr th:each="user:${users}"> //以user为基本单元 <td th:text="${user.name}"></td> <td th:text="${user.age}"></td> </tr>
复杂循环:
主yml: Spring.messages.basename=roles Spring.messages.cache-seconds=3600 Spring.messages.encoding=UTF-8
roles.properties文件: roles.manage=b roles.superadmin=c
<div th:switch="${user.name}"> <p th:case=" 'a' "> 这是A </p> <p th:case="${roles.manage}"> 这是manage </p> <p th:case=" ${roles.superadmin} "> 这是admin </p> <p th:case="*"> 这是其他 </p> </div>
普通文本和富文本
user.set("ha","<font>hahahahahahahaha</font>");
普通
<div th:text="${ha}"></div>
富文本
<div th:utext="${ha}"></div>
网址写法:
<a th:href="@{http://xxx.xx.com}"></a>
引入js css
<script th:src="@{/static/js/xxx/js}" /> <link th:href="@{/static/css/xxx.css}" /> 在resource目录下的static文件夹里
filed:
<input type="text" th:filed="*{name}" /> 等同于 <input type="text" th:id="*{name}" th:name="*{name}" th:value="*{name}" />
判断:
<div th:if="${user.age} == 18" > 18</div> <div th:if="${user.age} gt 18" > 18+</div> <div th:if="${user.age} lt 18" > 18-</div> <div th:if="${user.age} ge 18" > 18+=</div> <div th:if="${user.age} le 18" > 18-+</div> 只显示符合条件的
复杂判断选项的时候可以用循环判断:
<div class="agile-info" th:switch="${error_code}"> <h3>SORRY</h3> <h2 th:case="403"> 403</h2> <h2 th:case="402"> 402</h2> <h2 th:case="*" > 404</h2> <p>Unfortunately, you do not have permission to access this page.</p> </div>
选择框:
<select> <option th:selectde="${user.name eq 'sss'}"> sss </option> <option th:selectde="${user.name eq 'xxx'}"> sss </option> </select> 会默认为sss
Ajax:
<script type="text/javascript" th:inline="javascript"> /*<![CDATA[*/ function ajaxSubmit(){ var songName = $("#songName").val(); var singer = $("#singer").val(); $.ajax({ url: [[@{/song/ajaxTest.action}]], type: 'post', dataType: 'json', contentType: 'application/json', data: JSON.stringify({songName : songName,singer : singer}), async: true, success: function(data){ if(data != null){ alert('flag : ' + data.flag + " , hintMessage : " + data.hintMessage); } } }); } /*]]>*/ </script>
js使用对象:
<SCRIPT th:inline="javascript"> // Morris donut chart Morris.Donut({ element: 'browser-usage', data: [ {label: "used", value: [[${free.used}]]}, {label: "free", value: [[${free.free}]]}, {label: "shared", value: [[${free.shared}]]}, {label: "cache", value: [[${free.cache}]]}, {label: "availabl", value: [[${free.availabl}]]}, ], colors: ['#00a3d8', '#2fbbe8', '#72cae7', '#d9544f', '#ffc100'] }); </SCRIPT>
js传数组且不方便用inline直接传
<div id="data2" th:data="${data2}" hidden></div> var d1 = document.getElementById('data1').getAttribute('data'); var dataArray = JSON.parse(d1); console.log(dataArray);
No Leanote account? Sign up now.