1.在admin下添加标签页面tags.html
<!DOCTYPE html><html lang="en" xmlns:th="/1999/xhtml"><head th:replace="admin/_fragments :: head(~{::title})"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签管理</title><link rel="stylesheet" href="/semantic-ui/2.2.4/semantic.min.css"><link rel="stylesheet" href="../../static/css/me.css"></head><body><!--导航--><nav th:replace="admin/_fragments :: menu(3)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ><div class="ui container"><div class="ui inverted secondary stackable menu"><h2 class="ui teal header item">管理后台</h2><a href="#" class=" m-item item m-mobile-hide"><i class="home icon"></i>博客</a><a href="#" class=" m-item item m-mobile-hide"><i class="idea icon"></i>分类</a><a href="#" class="active m-item item m-mobile-hide"><i class="tags icon"></i>标签</a><div class="right m-item m-mobile-hide menu"><div class="ui dropdown item"><div class="text"><img class="ui avatar image" src="https://unsplash.it/100/100?image=1005">java小生不才</div><i class="dropdown icon"></i><div class="menu"><a href="#" class="item">注销</a></div></div></div></div></div><a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><i class="sidebar icon"></i></a></nav><div class="ui attached pointing menu"><div class="ui container"><div class="right menu"><a href="#" th:href="@{/admin/tags/save}" class="item">新增</a><a href="#" th:href="@{/admin/tags}" class="teal active item">列表</a></div></div></div><!--中间内容--><div class="m-container-small m-padded-tb-big"><div class="ui container"><div class="ui success message" th:unless="${#strings.isEmpty(message)}"><i class="close icon"></i><div class="header">提示：</div><p th:text="${message}">恭喜，操作成功！</p></div><table class="ui celled table"><thead><tr><th></th><th>名称</th><th>操作</th></tr></thead><tbody><tr th:each="type,iterStat : ${page.content}"><td th:text="${iterStat.count}">1</td><td th:text="${type.name}">刻意练习清单</td><td><a href="#" th:href="@{/admin/tags/{id}/edit(id=${type.id})}" class="ui mini teal basic button">编辑</a><a href="#" th:href="@{/admin/tags/{id}/delete(id=${type.id})}" class="ui mini red basic button">删除</a></td></tr></tbody><tfoot><tr><th colspan="6" ><div class="ui mini pagination menu" th:if="${page.totalPages}>1"><a th:href="@{/admin/tags(page=${page.number}-1)}" class=" item" th:unless="${page.first}">上一页</a><a th:href="@{/admin/tags(page=${page.number}+1)}" class=" item" th:unless="${page.last}">下一页</a></div><a href="#" th:href="@{/admin/tags/save}" class="ui mini right floated teal basic button">新增</a></th></tr></tfoot></table></div></div><br><br><!--底部footer--><footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><div class="ui inverted link list"><div class="item"><img src="../../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px"></div></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4><div class="ui inverted link list"><a href="#" class="item m-text-thin">用户故事1（User Story）</a><a href="#" class="item m-text-thin">用户故事2（User Story）</a><a href="#" class="item m-text-thin">用户故事3（User Story）</a></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4><div class="ui inverted link list"><a href="#" class="item m-text-thin">Email: hst1406959716@</a><a href="#" class="item m-text-thin">QQ: 383568194</a></div></div><div class="seven wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4><p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © - java小生不才 Designed by java小生不才</p></div></footer><!--/*/<th:block th:replace="_fragments :: script">/*/--><script src="/npm/jquery@3.2/dist/jquery.min.js"></script><script src="/semantic-ui/2.2.4/semantic.min.js"></script><!--/*/</th:block>/*/--><script>$('.menu.toggle').click(function () {$('.m-item').toggleClass('m-mobile-hide');});$('.ui.dropdown').dropdown({on : 'hover'});//消息提示关闭初始化$('.message .close').on('click', function () {$(this).closest('.message').transition('fade');});</script></body></html>
2.添加新增标签页面tags-input.html
<!DOCTYPE html><html lang="en" xmlns:th="/1999/xhtml"><head th:replace="admin/_fragments :: head(~{::title})"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签新增</title><link rel="stylesheet" href="/semantic-ui/2.2.4/semantic.min.css"><link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"><link rel="stylesheet" href="../../static/css/me.css"></head><body><!--导航--><nav th:replace="admin/_fragments :: menu(3)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ><div class="ui container"><div class="ui inverted secondary stackable menu"><h2 class="ui teal header item">管理后台</h2><a href="#" class=" m-item item m-mobile-hide"><i class="home icon"></i>博客</a><a href="#" class=" m-item item m-mobile-hide"><i class="idea icon"></i>分类</a><a href="#" class="active m-item item m-mobile-hide"><i class="tags icon"></i>标签</a><div class="right m-item m-mobile-hide menu"><div class="ui dropdown item"><div class="text"><img class="ui avatar image" src="https://unsplash.it/100/100?image=1005">java小生不才</div><i class="dropdown icon"></i><div class="menu"><a href="#" class="item">注销</a></div></div></div></div></div><a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><i class="sidebar icon"></i></a></nav><div class="ui attached pointing menu"><div class="ui container"><div class="right menu"><a href="#" th:href="@{/admin/tags/save}" class="active item">新增</a><a href="#" th:href="@{/admin/tags}" class="teal item">列表</a></div></div></div><!--中间内容--><div class="m-container-small m-padded-tb-big"><div class="ui container"><form action="#" method="post" th:object="${tag}" th:action="*{id}==null ? @{/admin/tags} : @{/admin/tags/{id}(id=*{id})} " class="ui form"><input type="hidden" name="id" th:value="*{id}"><div class=" field"><div class="ui left labeled input"><label class="ui teal basic label">名称</label><input type="text" name="name" placeholder="标签名称" th:value="*{name}" ></div></div><div class="ui error message"></div><!--/*/<div class="ui negative message" th:if="${#fields.hasErrors('name')}" ><i class="close icon"></i><div class="header">验证失败</div><p th:errors="*{name}">提交信息不符合规则</p></div>/*/--><div class="ui right aligned container"><button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button><button class="ui teal submit button">提交</button></div></form></div></div><br><br><br><br><br><br><br><br><!--底部footer--><footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><div class="ui inverted link list"><div class="item"><img src="../../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px"></div></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4><div class="ui inverted link list"><a href="#" class="item m-text-thin">用户故事1（User Story）</a><a href="#" class="item m-text-thin">用户故事2（User Story）</a><a href="#" class="item m-text-thin">用户故事3（User Story）</a></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4><div class="ui inverted link list"><a href="#" class="item m-text-thin">Email: hst1406959716@</a><a href="#" class="item m-text-thin">QQ: 383568194</a></div></div><div class="seven wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4><p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © - java小生不才 Designed by java小生不才</p></div></footer><!--/*/<th:block th:replace="_fragments :: script">/*/--><script src="/npm/jquery@3.2/dist/jquery.min.js"></script><script src="/semantic-ui/2.2.4/semantic.min.js"></script><!--/*/</th:block>/*/--><script>$('.menu.toggle').click(function () {$('.m-item').toggleClass('m-mobile-hide');});$('.ui.dropdown').dropdown({on : 'hover'});$('.ui.form').form({fields : {title : {identifier: 'name',rules: [{type : 'empty',prompt: '请输入标签名称'}]}}});</script></body></html>
3.编写TagRepository
在dao下新建TagRepository
package com.tedu.blog.dao;import com.tedu.blog.pojo.Tag;import org.springframework.data.jpa.repository.JpaRepository;public interface TagRepository extends JpaRepository<Tag,Long> {Tag findByName(String name);}
4.编辑TagService
package com.tedu.blog.service;import com.tedu.blog.pojo.Tag;import org.springframework.data.domain.Page;import org.springframework.data.domain.Pageable;public interface TagService {Tag saveTag(Tag type);Tag getTag(Long id);Tag getTagByName(String name);Page<Tag> listTag(Pageable pageable);Tag updateTag(Long id, Tag type);void deleteTag(Long id);}
5.编写TagServiceImpl
package com.tedu.blog.service;import com.tedu.blog.dao.TagRepository;import com.tedu.blog.handler.NotFoundException;import com.tedu.blog.pojo.Tag;import org.springframework.beans.BeanUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.Pageable;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;@Servicepublic class TagServiceImpl implements TagService {@Autowiredprivate TagRepository tagRepository;@Transactional@Overridepublic Tag saveTag(Tag tag) {return tagRepository.save(tag);}@Transactional@Overridepublic Tag getTag(Long id) {return tagRepository.getOne(id);}@Overridepublic Tag getTagByName(String name) {return tagRepository.findByName(name);}@Transactional@Overridepublic Page<Tag> listTag(Pageable pageable) {return tagRepository.findAll(pageable);}@Transactional@Overridepublic Tag updateTag(Long id, Tag tag) {Tag t = tagRepository.getOne(id);if (t == null) {throw new NotFoundException("不存在该标签");}BeanUtils.copyProperties(tag,t);return tagRepository.save(t);}@Transactional@Overridepublic void deleteTag(Long id) {tagRepository.deleteById(id);}}
6.编写TagController
package com.tedu.blog.web.admin;import com.tedu.blog.pojo.Tag;import com.tedu.blog.service.TagService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Pageable;import org.springframework.data.domain.Sort;import org.springframework.data.web.PageableDefault;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.validation.BindingResult;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.servlet.mvc.support.RedirectAttributes;import javax.validation.Valid;@Controller@RequestMapping("/admin")public class TagController {@Autowiredprivate TagService tagService;/*** 标签列表* @param pageable* @param model* @return*/@GetMapping("/tags")public String tags(@PageableDefault(size = 5,sort = {"id"},direction = Sort.Direction.DESC)Pageable pageable, Model model) {model.addAttribute("page",tagService.listTag(pageable));return "admin/tags";}/*** 跳转标签新增页面* @param model* @return*/@GetMapping("/tags/save")public String insertTag(Model model) {model.addAttribute("tag", new Tag());return "admin/tags-input";}@PostMapping("/tags")public String save(@Valid Tag tag,BindingResult result, RedirectAttributes attributes) {Tag tag1 = tagService.getTagByName(tag.getName());if (tag1 != null) {result.rejectValue("name","nameError","不能添加重复的标签");}if (result.hasErrors()) {return "admin/tags-input";}Tag t = tagService.saveTag(tag);if (t == null ) {attributes.addFlashAttribute("message", "新增失败");} else {attributes.addFlashAttribute("message", "新增成功");}return "redirect:/admin/tags";}/*** 编辑回显* @param id* @param model* @return*/@GetMapping("/tags/{id}/edit")public String editInput(@PathVariable Long id, Model model) {model.addAttribute("tag", tagService.getTag(id));return "admin/tags-input";}@PostMapping("/tags/{id}")public String update(@Valid Tag tag, BindingResult result,@PathVariable Long id, RedirectAttributes attributes) {Tag tag1 = tagService.getTagByName(tag.getName());if (tag1 != null) {result.rejectValue("name","nameError","不能添加重复的标签");}if (result.hasErrors()) {return "admin/tags-input";}Tag t = tagService.updateTag(id,tag);if (t == null ) {attributes.addFlashAttribute("message", "更新失败");} else {attributes.addFlashAttribute("message", "更新成功");}return "redirect:/admin/tags";}@GetMapping("/tags/{id}/delete")public String delete(@PathVariable Long id,RedirectAttributes attributes) {tagService.deleteTag(id);attributes.addFlashAttribute("message", "删除成功");return "redirect:/admin/tags";}}
在Tag.java的校验字段上加上@NotBlank
@NotBlank(message = "标签名称不能为空")private String name;
7.访问页面
启动项目，浏览器访问localhost:8080/admin,输入账号密码(均为admin)，点击标签
点击新增非空校验
防重校验
大体过程与个人博客系统分类管理(/qq_41596346/article/details/119986188)类似
