Mr.Gaara 's Blog

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);