- 定义TagDTO对象
package com.july.community.dto;
import lombok.Data;
import java.util.List;
@Data
public class TagDTO {
private String categoryName; //分类
private List<String> tagList;
}
- 标签预定义:构建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;
}
}
- 在publishController中增加相关逻辑处理
model.addAttribute("tagList", TagCache.getTagList());
注意:两个getMapping和一个postMapping中都需要添加
在post中添加对标签的校验
//校验输入的标签是否都是预定义的标签
String invalid = TagCache.filterInvalid(tag); //过滤,筛选出不是预定义的标签
if (StringUtils.isNoneBlank(invalid)){
//存在非预定义的标签
model.addAttribute("error","存在非预定义的标签:"+invalid);
return "publish";
}
- 前端显示
<!--标签库-->
<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;
}