thymeleaf的使用笔记

来源：互联网发布：单片机一键信号发射编辑：程序博客网时间：2024/05/29 16:19

整合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:onclick="'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:onclick="'javascript:delActivity(\''+${message.id}+'\');'">删除 </button>
<button th:onclick="'javascript:updateActivity(\''+${message.id}+'\');'">修改 </button>
<button th:onclick="'javascript:themPage(\''+${message.id}+'\');'">查看详情 </button>
<button th:if="${message.status eq 1}" th:onclick="'javascript:shutdown(\''+${message.id}+'\');'">提前结束</button>
</td>
</tr>
</tbody>
</table>

</body>
</html>

thymeleaf使用细节：

循环：

<table border="1">
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>管理员</th>
</tr>
<tr th:each="user: ${list}">
<td th:text="${user.userName}">Onions</td>
<td th:text="${user.email}">test@test.com.cn</td>
<td th:text="${user.isAdmin}">yes</td>
</tr>
</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语句使用：

阅读全文

0 0