初识Thymeleaf

一、引入依赖

 

         <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

 

二、目录结构

 

三、引入CSS、JS等文件

使用th:href 和 th:src

                <link rel="stylesheet" href="css/weui.min.css" th:href="@{css/weui.min.css}"/>
		<link rel="stylesheet" href="css/example.css" th:href="@{css/example.css}"/>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" th:src="@{js/jquery-3.3.1.min.js}" ></script>

 

四、表单映射

使用th:action 、和name 属性进行表单提交

<form id="form"  th:action="@{/search}" method="post">
		<div class="weui-cell" id="warn2" >
			<div class="weui-cell__hd "><label class="weui-label">手机号</label></div>
				<div class="weui-cell__bd">
						<input class="weui-input" id="sjh" name="phone" type="tel" pattern="[11]*" placeholder="请输入手机号" />
					</div>
					<div class="weui-cell__ft" id="warn" style="visibility: hidden;">
						<i class="weui-icon-warn"></i>
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">XXX</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input"  name="qyh" type="text" placeholder="XXX" />
					</div>
				</div>
			</form>

 

五、在javascript 传递参数

 <div class="weui-dialog__ft">
                    <a th:href="'javascript:ck2(\''+${bz.mid}+'\');'"  class="weui-dialog__btn weui-dialog__btn_primary">关闭</a>
                </div>

使用th:href="XXX"能将后台的参数传入js中

六、给ID或class添加内容

th:attrappend="id=${'-'+bz.mid}" 

th:attrappend="class=${'-'+bz.mid}"