thymeleaf的使用笔记

曾经终败给现在 2022-06-06 00:49 212阅读 0赞

整合springmvc 前后交互：

springmvc 代码：

package com.bigdata.lab.ymlib.web;  
  
  
import java.util.List;  
  
  
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.RequestBody;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RequestMethod;  
import org.springframework.web.bind.annotation.RequestParam;  
import org.springframework.web.bind.annotation.ResponseBody;  
import org.springframework.web.servlet.ModelAndView;  
  
  
import com.bigdata.lab.ymlib.dto.SaleActivityDTO;  
import com.bigdata.lab.ymlib.dto.SaleActivityItemDTO;  
import com.bigdata.lab.ymlib.service.ISaleActivityService;  
  
  
/\*\*  
 \* @author xuchuang 促销活动  
 \* @updateTime 2017年10月18日 上午10:04:55  
 \*/  
@Controller  
@RequestMapping("/saleActivity")  
public class SaleActivityController \{  
  
  
@Autowired  
private ISaleActivityService iSaleActivityService;  
  
  
/\*\*  
\* 获取促销活动列表  
\*   
\* @return  
\*/  
//@ResponseBody  
@RequestMapping(value = "/getSaleActivities", method = RequestMethod.GET)  
public ModelAndView getSaleActivities(@RequestParam(value = "page", defaultValue = "0") Integer page,  
@RequestParam(value = "size", defaultValue = "10") Integer size) \{  
List<SaleActivityDTO> infos=iSaleActivityService.getSaleActivities(page, size);  
  
return new ModelAndView("/saleActivity/saleActivityList", "messages",infos );  
\}  
  
  
/\*\*  
\* 删除/结束促销活动，删除/结束活动下的商品   修改status状态为0或2  
\*   status 0 删除     1正常   2活动结束  
\* @param ids 批量删除/结束   id以逗号分开,  
\* @return  
\*/  
@ResponseBody  
@RequestMapping(value = "/deleteSaleActivities", method = RequestMethod.POST)  
public String deleteSaleActivities(@RequestParam(value = "ids") String ids,@RequestParam(value = "status") Integer status) \{  
  
return iSaleActivityService.deleteSaleActivities(ids,status)+"";  
\}  
  
  
/\*\*  
\* 添加促销活动  
\*   
\* @return  
\*/  
@ResponseBody  
@RequestMapping(value = "/addSaleActivities", method = RequestMethod.POST, produces = \{  
"application/json;charset=UTF-8" \}, consumes = \{ "application/json;charset=UTF-8" \})  
public String addSaleActivities(@RequestBody SaleActivityDTO saleActivityDTO) \{   
return iSaleActivityService.addSaleActivities(saleActivityDTO)+"";  
\}  
  
  
/\*\*  
\* 修改促销活动  
\*   
\* @return  
\*/  
@ResponseBody  
@RequestMapping(value = "/updateSaleActivities", method = RequestMethod.POST)  
public String updateSaleActivities(@RequestBody SaleActivityDTO saleActivityDTO) \{   
return iSaleActivityService.updateSaleActivities(saleActivityDTO)+"";  
\}  
  
  
/\*\*  
\* 获取促销活动商品  
\*   
\* @param saleActivityId  
\* @return  
\*/  
//@ResponseBody  
@RequestMapping(value = "/getSaleActivityItems", method = RequestMethod.GET)  
public ModelAndView getSaleActivityItemsByActivityId(  
@RequestParam(value = "saleActivityId") String saleActivityId) \{  
//return iSaleActivityService.getSaleActivityItemsByActivityId(saleActivityId);  
return new ModelAndView("/saleActivity/activityProducts", "messages",iSaleActivityService.getSaleActivityItemsByActivityId(saleActivityId) );  
\}

｝

html代码：

<!DOCTYPE html>    
  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">  
  <head>    
    <title>促销活动列表</title>    
  </head>    
  <script th:src="@\{/assets/js/jquery.js\}"></script>  
    
  <script type="text/javascript">  
  
  
function themPage(value)\{  
alert("查看详情："+value);  
window.location.href="http://localhost:9080/ymlib/saleActivity/getSaleActivityItems?saleActivityId="+value;  
  
  
\}  
  
  
  
  
function delActivity(activityId)\{  
  $.ajax(\{  
type : "POST",  
url : "/ymlib/saleActivity/deleteSaleActivities",  
data : \{   
ids:activityId,  
status:0  
\},  
success : function(data) \{  
alert(data);  
window.location.reload();   
\}  
\});    
\}  
function updateActivity(activityId)\{  
  
alert("修改一条记录："+activityId);  
/\*   $.ajax(\{  
type : "POST",  
url : "/ymlib/saleActivity/updateSaleActivities",  
data : \{   
ids:activityId  
\},  
success : function(data) \{  
alert(123);  
window.location.reload();   
\}  
\});   \*/  
  
  
\}  
  
  
function addActivity()\{  
alert("添加一条记录");  
/\*   $.ajax(\{  
type : "POST",  
url : "/ymlib/saleActivity/addSaleActivities",  
data : \{   
  
\},  
success : function(data) \{  
alert(123);  
window.location.reload();   
\}  
\});   \*/  
\}  
  
  
function shutdown(activityId)\{  
$.ajax(\{  
type : "POST",  
url : "/ymlib/saleActivity/deleteSaleActivities",  
data : \{   
ids:activityId,  
status:2  
\},  
success : function(data) \{  
alert(data);  
window.location.reload();   
\}  
\});    
\}  
  
  
</script>  
  <body>    
   
      
      <div class="pull-right">    
         
       <p>促销活动列表</p>   
       </div>   
        <div class="pull-right">    
        <button th:οnclick="'javascript:addActivity();'">添加</button>  
       </div>   
          
      <table class="table table-bordered table-striped">    
        <thead>    
          <tr>    
            <td>活动标题</td>    
            <td>开始时间</td>    
            <td>结束时间</td>   
            <td>状态</td>   
            <td>活动内容</td>  
            <td>操作</td>  
          </tr>    
        </thead>    
        <tbody>    
          <tr th:if="$\{messages.empty\}">    
            <td colspan="3">    
             无活动信息    
            </td>    
          </tr>    
          <tr th:each="message : $\{messages\}"  th:id="$\{message.id\}" >    
            <td th:text="$\{message.name\}">1</td>    
            <td th:text="$\{message.beginDate\}">    
              2017-10-26 22:22:22   
            </td>    
               <td th:text="$\{message.endDate\}">    
              2017-10-24 22:22:22   
            </td>   
              
            <td th:if="$\{message.status eq 1\}">活动中</td>  
            <td th:if="$\{message.status eq 2\}" >结束</td>  
              
            <td th:text="$\{message.description\}">1</td>   
            <td>  
            <button th:οnclick="'javascript:delActivity(\\''+$\{message.id\}+'\\');'">删除 </button>  
             <button th:οnclick="'javascript:updateActivity(\\''+$\{message.id\}+'\\');'">修改 </button>  
             <button th:οnclick="'javascript:themPage(\\''+$\{message.id\}+'\\');'">查看详情 </button>  
             <button  th:if="$\{message.status eq 1\}" th:οnclick="'javascript:shutdown(\\''+$\{message.id\}+'\\');'">提前结束</button>  
            </td>   
          </tr>    
        </tbody>    
      </table>    
       
  </body>    
</html>

#     #

thymeleaf使用细节：

循环：

1.  1.     **<****table** border="1"**>**  
    2.                **<****tr****>**  
    3.                  **<****th****>**用户名**</****th****>**  
    4.                  **<****th****>**邮箱**</****th****>**  
    5.                  **<****th****>**管理员**</****th****>**     
    6.                **</****tr****>**  
    7.                **<****tr**  th:each="user: $\{list\}"**>**  
    8.                  **<****td** th:text="$\{user.userName\}"**>**Onions**</****td****>**  
    9.                  **<****td** th:text="$\{user.email\}"**>**test@test.com.cn**</****td****>**  
    10.                 **<****td** th:text="$\{user.isAdmin\}"**>**yes**</****td****>**  
    11.               **</****tr****>**  
    12.             **</****table****>**

each 的状态变量  userStat 循环中的一些参数极其意义：

index:当前迭代对象的index（从0开始计算）  
    count: 当前迭代对象的index(从1开始计算)  
    size:被迭代对象的大小  
    current:当前迭代变量  
    even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）  
    first:布尔值，当前循环是否是第一个  
    last:布尔值，当前循环是否是最后一个

取值：$\{userStat.count\}

thymeleaf页面改动后需要重启才会生效，解决方法如下：

在`application.properties`中加入配置：`spring.thymeleaf.cache=false`；

thymeleaf if语句使用：