勇哥带您手搓一个信息发布系统CMS（3）--thymeleaf使用中通用方法设计

目录

引言

一、后台通用方法设计。

二、配置前段后通用方法调用。

三、前台通用方法调用。

---

引言

在原有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>