SpringBoot-规范标签库

1. 定义TagDTO对象

package com.july.community.dto;

import lombok.Data;

import java.util.List;

@Data
public class TagDTO {
    private String categoryName; //分类
    private List<String> tagList;

}

2. 标签预定义：构建TagCache.java

package com.july.community.cache;

import com.july.community.dto.TagDTO;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class TagCache {
    public static List<TagDTO> getTags(){
        List<TagDTO> tagDTOS = new ArrayList<>();
        TagDTO program = new TagDTO();
        program.setCategoryName("开发语言");
        program.setTagList(Arrays.asList("javaScript","php","java","css","html","node","python","c++","c",
                "golang","objective-c","typescript","shell","swift","c#","sass","ruby","bash","less","asp.net","lua","scala",
                "coffeeScript","actionScript","rust","erlang","perl"));
        tagDTOS.add(program);

        TagDTO framework = new TagDTO();
        framework.setCategoryName("平台架构");
        framework.setTagList(Arrays.asList("laravel","spring","express","django","flask","yii","ruby-on-rails","tornado","koa","struts"));
        tagDTOS.add(framework);
        
        TagDTO server= new TagDTO();
        server.setCategoryName("服务器");
        server.setTagList(Arrays.asList("linux","nginx","docker","apache","ubuntu","centos","tomcat","unix","hadoop","windows-server","缓存","负载均衡"));
        tagDTOS.add(server);
        
        TagDTO database = new TagDTO();
        database.setCategoryName("数据库与缓存");
        database.setTagList(Arrays.asList("mysql","redis","mongodb","sql","oracle","nosql","memcached","sqlserver","postgresql","sqlite"));
        tagDTOS.add(database);
        
        TagDTO tool = new TagDTO();
        tool.setCategoryName("开发工具");
        tool.setTagList(Arrays.asList("git","github","visual-studio-code","vim","sublime-text","xcode","intellij-idea","eclipse","maven","ide","svn","visual-studio","atom","emacs","textmate","hg"));
        tagDTOS.add(tool);
        
        return tagDTOS;
    }
//对输入的标签进行过滤，返回预定标签库中不存在的标签
    public static String filterInvalid(String tags){
        String[] split = StringUtils.split(tags, ",");
        List<TagDTO> tagDTOS = getTagList();
        List<String> tagList = tagDTOS.stream().flatMap(tag -> tag.getTagList().stream()).collect(Collectors.toList());
        String invalid = Arrays.stream(split).filter(t -> tagList.contains(t)).collect(Collectors.joining(","));
        return invalid;
        
    }
}

3. 在publishController中增加相关逻辑处理

model.addAttribute("tagList", TagCache.getTagList());

注意：两个getMapping和一个postMapping中都需要添加

在post中添加对标签的校验

 //校验输入的标签是否都是预定义的标签
        String invalid = TagCache.filterInvalid(tag); //过滤，筛选出不是预定义的标签
        if (StringUtils.isNoneBlank(invalid)){
            //存在非预定义的标签
            model.addAttribute("error","存在非预定义的标签："+invalid);
            return "publish";
        }

4. 前端显示

<!--标签库-->
                    <div id="select-tags" class="select-tags">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" th:each="selectCategory,selectCategoryStat: ${tagList}" th:class="${selectCategoryStat.first ? 'active':''}">
                                <a aria-controls="home" role="tab" data-toggle="tab"
                                   th:href="${'#'+selectCategory.categoryName}"
                                   th:text="${selectCategory.categoryName}"></a>
                            </li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" th:id="${selectCategory.categoryName}"
                                 th:each="selectCategory,selectCategoryStat : ${tagList}" th:class="${selectCategoryStat.first ? 'tab-pane active':'tab-pane'}">
                                <span>
                                    <span class="label label-info" th:each="selectTag : ${selectCategory.tagList}">
                                        <span class="glyphicon glyphicon-tag" onclick="selectTag(this)"
                                          th:data-tag="${selectTag}" th:text="${' '+selectTag}"></span>
                                    </span>
                                </span>
                            </div>
                        </div>

                    </div>

/**
 * 选取标签，标签追加写入输入框中
 * @param s 标签名
 */
function selectTag(e) {
    var tag = e.getAttribute("data-tag");
    var previous = $("#tag").val(); //获得原标签输入框中的内容
    if (previous.indexOf(tag) == -1){
        //不存在才添加
        if (previous){
            $("#tag").val(previous + ',' + tag); //追加
        }else{
            $("#tag").val(tag);
        }
    }
}

/**
 * 标签库的展示与隐藏
 */
function showSelectTags() {
    $("#select-tags").show();
}

.select-tags{
    display: none;
    margin-top: 10px;
    padding-top: 10px;
}
.select-tags .label-info{
    display: inline-block;
    margin: 5px;
    white-space: normal;
}
.select-tags .label-info{
    margin-right: 10px;
}