目录
在原有thymeleaf使用中,每个方法都必须要在controller层红put进ModelAndView中,然后thymeleaf中进行获取并使用。这种实现方法对前后端,对多项目使用非常的不友好。阻碍了通用CMS的实现,不符合通用CMS的理念。因此就有了该篇文章“thymeleaf使用中通用方法设计”。
这主要靠以下三个方面设计,
在后台要把一些常用的通用方法的service写好,比如:在首页上的,根据栏目Code获取指定某个栏目,并只获取前几条等,我新增了以下接口。这些也许还有些不能符合CMS所有的可能,后续会根据可能新增相关接口。
/**
* thymeleaf前端使用的WebService
*
* @author tzy
* @date 2023/10/29
*/
public interface ContentByWebService {
/**
* 获取web的配置
*
* @return
*/
public List<SysConfig> getWebSysConfigs();
/**
* 根据configCode查询数据
*
* @param configCode
* @return
*/
SysConfigDto findByConfigCode(String configCode);
/**
* 根据调用别名返回栏目数据
*
* @param callIndex
* @return
*/
public ContentCategoryDto findByCallIndex(String callIndex);
/**
* 根据调用别名和top数量返回文章数据
*
* @param callIndex 别名
* @param top top数量
* @param isSlide 是否幻灯片
* @param isTop是否置顶
* @param isRed是否推荐
* @param isHot是否热门
* @return
*/
public List<ContentWebResponseDto> getTopContentArticleByParam(String callIndex, Integer top, Integer isSlide,
Integer isTop, Integer isRed, Integer isHot);
/**
* 根据栏目id获取文章分页
*
* @param categoryId
* @param pageNum
* @param pageSize
* @return
*/
public ContentCategoryDto getContentArticlePageByParam(Long categoryId, Integer pageNum, Integer pageSize);
/**
* 根据内容Id查询内容
*
* @param contentArticleId
* @return
*/
public ContentArticleDto getContentArticleDtoByParam(Long contentArticleId);
/**
* 根据内容id查询详情
*
* @param contentArticleId
* @return
*/
public ContentDetailsDto getContentDetailsDtoByParam(Long contentArticleId);
/**
* 根据内容Id查询内容和详细
*
* @param contentArticleId
* @return
*/
public ContentArticleDto getContentArticleDetailByParam(Long contentArticleId);
/**
* 根据内容Id查询内容的附件
*
* @param contentArticleId
* @return
*/
public List<ContentAttachmentDto> getContentArticleAttachmentByParam(Long contentArticleId);
/**
* 根据内容Id查询内容、详细、附件
*
* @param contentArticleId
* @return
*/
public ContentArticleDto getContentArticleAllDetailByParam(Long contentArticleId);
/**
* 获取栏目下的子栏目及相关下面的文章
*
* @param contentCategoryDto
* @return
*/
public List<ContentCategoryDto> getContentCategoryAndArticleTreeByCategory(String callIndex);
/**更新文章的点击次数
* @param contentArticleId
*/
public void updateContentArticleDtoClick(Long contentArticleId);
在上篇文章中的3个通用界面中,把上面刚新建的contentByWebService新增到ModelAndView中。
@AnonymousAccess
@Log("网站首页")
@RequestMapping("/index")
public ModelAndView index(@RequestParam(required = false, value = "id") Long id) throws Exception {
ModelAndView mv = new ModelAndView();
ChannelCategoryDto channelCategory = null;
if (null == id) {
channelCategory = channelCategoryService.findByIsDefault();
} else {
channelCategory = channelCategoryService.findById(id);
}
StaticLog.info("进入:/contentWeb/index");
mv.addObject("contentByWebService", contentByWebService);
mv.setViewName(channelCategory.getTempletPath() + "index.html");
return mv;
}
@AnonymousAccess
@Log("业务展示")
@RequestMapping("/contentList")
public ModelAndView businessShows(@RequestParam("id") Long id) throws Exception {
ModelAndView mv = new ModelAndView();
ContentCategoryDto contentCategoryDto = contentCategoryService.findById(id);
ChannelDto channelDto = channelService.findChannelAndCategoryById(contentCategoryDto.getChannelId());
// 查询业务数据
mv.addObject("contentByWebService", contentByWebService);
mv.setViewName(channelDto.getTempletPath() + contentCategoryDto.getTemplateListUrl());
return mv;
}
@AnonymousAccess
@Log("新闻详情")
@RequestMapping("/contentDetails")
public ModelAndView contentDetails(@RequestParam("id") Long id) throws Exception {
ModelAndView mv = new ModelAndView();
ContentArticleDto contentArticleDto = contentArticleService.findById(id);
ChannelDto channelDto = channelService.findChannelAndCategoryById(contentArticleDto.getChannelId());
ContentCategoryDto contentCategoryDto = contentCategoryService.findById(contentArticleDto.getCategoryId());
mv.addObject("contentByWebService", contentByWebService);
mv.setViewName(channelDto.getTempletPath() + contentCategoryDto.getTemplateDetailsUrl());
return mv;
}
那在前台要怎么调用呢,这个就需要根据thymeleaf的提供的方法。
首先在头部引用我们put进去的方法,要带上参数。
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="businessShows=${contentByWebService.getContentArticlePageByParam(param.id,param.pageNum,param.pageSize)}">
网页中就可以通过businessShow进行使用了。如下代码:
<div class="col-lg-12" th:each="businessShow:${businessShows.contentArticleDtoList}">
<div class="card">
<div class="row row-0">
<div th:class="${businessShowStat.count%2==0?'col-3' : 'col-3 order-md-last'}">
<!-- Photo -->
<a th:href="@{/contentWeb/contentDetails(id=${businessShow.id})}" class="col-auto">
<img th:src="${businessShow.imgUrl}" class="w-100 h-100 object-cover card-img-start"
th:alt="${businessShow.title}">
</a>
</div>
<div class="col">
<div class="card-body">
<a th:href="@{/contentWeb/contentDetails(id=${businessShow.id})}">
<h1 class="card-title" th:utext="${businessShow.title}"></h1>
</a>
<p class="text-muted" th:utext="${businessShow.zhaiyao}"></p>
</div>
</div>
</div>
</div>
</div>