1.博客列表页面blogs.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(1)" 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="active 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="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/blogs/save}" class=" item">发布</a><a href="#" th:href="@{/admin/blogs}" class="teal active item">列表</a></div></div></div><!--中间内容--><div class="m-container-small m-padded-tb-big"><div class="ui container"><div class="ui secondary segment form"><input type="hidden" name="page" ><div class="inline fields"><div class="field"><input type="text" name="title" placeholder="标题"></div><div class="field"><div class="ui labeled action input"><div class="ui type selection dropdown"><input type="hidden" name="typeId"><i class="dropdown icon"></i><div class="default text">分类</div><div class="menu"><div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">错误日志</div><!--/*--><div class="item" data-value="2">开发者手册</div><!--*/--></div></div><button id="clear-btn" class="ui compact button">clear</button></div></div><div class="field"><div class="ui checkbox"><input type="checkbox" id="recommend" name="recommend"><label for="recommend">推荐</label></div></div><div class="field"><button type="button" id="search-btn" class="ui mini teal basic button"><i class="search icon"></i>搜索</button></div></div></div><div id="table-container"><table th:fragment="blogList" class="ui compact teal table"><thead><tr><th></th><th>标题</th><th>类型</th><th>推荐</th><th>状态</th><th>更新时间</th><th>操作</th></tr></thead><tbody><tr th:each="blog,iterStat : ${page.content}"><td th:text="${iterStat.count}">1</td><td th:text="${blog.title}">刻意练习清单</td><td th:text="${blog.type.name}">认知升级</td><td th:text="${blog.recommend} ? '是':'否'">是</td><td th:text="${blog.published} ? '发布':'草稿'">草稿</td><td th:text="${blog.updateTime}">-10-02 09:45</td><td><a href="#" th:href="@{/admin/blogs/{id}/edit(id=${blog.id})}" class="ui mini teal basic button">编辑</a><a href="#" th:href="@{/admin/blogs/{id}/delete(id=${blog.id})}" class="ui mini red basic button">删除</a></td></tr></tbody><tfoot><tr><th colspan="7"><div class="ui mini pagination menu" th:if="${page.totalPages}>1" ><a onclick="page(this)" th:attr="data-page=${page.number}-1" class="item" th:unless="${page.first}">上一页</a><a onclick="page(this)" th:attr="data-page=${page.number}+1" class=" item" th:unless="${page.last}">下一页</a></div><a href="#" th:href="@{/admin/blogs/save}" class="ui mini right floated teal basic button">新增</a></th></tr></tfoot></table><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></div></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="admin/_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');});$('#clear-btn').on('click', function() {$('.ui.type.dropdown').dropdown('clear');});function page(obj) {$("[name='page']").val($(obj).data("page"));loaddata();}$("#search-btn").click(function () {$("[name='page']").val(0);loaddata();});function loaddata() {$("#table-container").load(/*[[@{/admin/blogs/search}]]*/"/admin/blogs/search",{title : $("[name='title']").val(),typeId : $("[name='typeId']").val(),recommend : $("[name='recommend']").prop('checked'),page : $("[name='page']").val()});}</script></body></html>
2.博客编辑页面blogs-intput.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(1)" 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="active 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="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/blogs/save}" class="teal active item">发布</a><a href="#" th:href="@{/admin/blogs}" class="item">列表</a></div></div></div><!--中间内容--><div class="m-container m-padded-tb-big"><div class="ui container"><form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="post" class="ui form"><input type="hidden" name="published" th:value="*{published}"><input type="hidden" name="id" th:value="*{id}"><div class="required field"><div class="ui left labeled input"><div class="ui selection compact teal basic dropdown label"><input type="hidden" value="原创" name="flag" th:value="*{flag}" ><i class="dropdown icon"></i><div class="text">原创</div><div class="menu"><div class="item" data-value="原创">原创</div><div class="item" data-value="转载">转载</div><div class="item" data-value="翻译">翻译</div></div></div><input type="text" name="title" placeholder="标题" th:value="*{title}"></div></div><div class="required field"><div id="md-content" style="z-index: 1 !important;"><textarea placeholder="博客内容" name="content" style="display: none" th:text="*{content}"></textarea></div></div><div class="two fields"><div class="required field"><div class="ui left labeled action input"><label class="ui compact teal basic label">分类</label><div class="ui fluid selection dropdown"><input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}"><i class="dropdown icon"></i><div class="default text">分类</div><div class="menu"><div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">错误日志</div></div></div></div></div><div class=" field"><div class="ui left labeled action input"><label class="ui compact teal basic label">标签</label><div class="ui fluid selection multiple search dropdown"><input type="hidden" name="tagIds" th:value="*{tagIds}" ><i class="dropdown icon"></i><div class="default text">标签</div><div class="menu"><div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">java</div></div></div></div></div></div><div class="required field"><div class="ui left labeled input"><label class="ui teal basic label">首图</label><input type="text" name="firstPicture" th:value="*{firstPicture}" placeholder="首图引用地址"></div></div><div class="required field"><textarea name="description" th:text="*{description}" placeholder="博客描述..." maxlength="200"></textarea></div><div class="inline fields"><div class="field"><div class="ui checkbox"><input type="checkbox" id="recommend" name="recommend" checked th:checked="*{recommend}" class="hidden"><label for="recommend">推荐</label></div></div><div class="field"><div class="ui checkbox"><input type="checkbox" id="shareStatement" name="shareStatement" th:checked="*{shareStatement}" class="hidden"><label for="shareStatement">转载声明</label></div></div><div class="field"><div class="ui checkbox"><input type="checkbox" id="appreciation" name="appreciation" th:checked="*{appreciation}" class="hidden"><label for="appreciation">赞赏</label></div></div><div class="field"><div class="ui checkbox"><input type="checkbox" id="commentabled" name="commentabled" th:checked="*{commentabled}" class="hidden"><label for="commentabled">评论</label></div></div></div><div class="ui error message"></div><div class="ui right aligned container"><button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button><button type="button" id="save-btn" class="ui secondary button">保存</button><button type="button" id="publish-btn" class="ui teal button">发布</button></div></form></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="admin/_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>//初始化Markdown编辑器var contentEditor;$(function() {contentEditor = editormd("md-content", {width : "100%",height : 640,syncScrolling : "single",// path : "../static/lib/editormd/lib/"path : "/lib/editormd/lib/"});});$('.menu.toggle').click(function () {$('.m-item').toggleClass('m-mobile-hide');});$('.ui.dropdown').dropdown({on : 'hover'});$('#save-btn').click(function () {$('[name="published"]').val(false);$('#blog-form').submit();});$('#publish-btn').click(function () {$('[name="published"]').val(true);$('#blog-form').submit();});$('.ui.form').form({fields : {title : {identifier: 'title',rules: [{type : 'empty',prompt: '标题：请输入博客标题'}]},content : {identifier: 'content',rules: [{type : 'empty',prompt: '标题：请输入博客内容'}]},typeId : {identifier: 'type.id',rules: [{type : 'empty',prompt: '标题：请输入博客分类'}]},firstPicture : {identifier: 'firstPicture',rules: [{type : 'empty',prompt: '标题：请输入博客首图'}]}}});</script></body></html>
3.BlogRepository
package com.tedu.blog.dao;import com.tedu.blog.pojo.Blog;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.data.jpa.repository.JpaSpecificationExecutor;public interface BlogRepository extends JpaRepository<Blog, Long>, JpaSpecificationExecutor<Blog> {}
4.BlogService
package com.tedu.blog.service;import com.tedu.blog.pojo.Blog;import com.tedu.blog.vo.BlogQuery;import org.springframework.data.domain.Page;import org.springframework.data.domain.Pageable;public interface BlogService {Blog getBlog(Long id);Page<Blog> listBlog(Pageable pageable, BlogQuery blog);Blog saveBlog(Blog blog);Blog updateBlog(Long id,Blog blog);void deleteBlog(Long id);}
5.BlogServiceImpl
package com.tedu.blog.service;import com.tedu.blog.dao.BlogRepository;import com.tedu.blog.handler.NotFoundException;import com.tedu.blog.pojo.Blog;import com.tedu.blog.pojo.Type;import com.tedu.blog.util.MyBeanUtils;import com.tedu.blog.vo.BlogQuery;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.data.jpa.domain.Specification;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;import javax.persistence.criteria.CriteriaBuilder;import javax.persistence.criteria.CriteriaQuery;import javax.persistence.criteria.Predicate;import javax.persistence.criteria.Root;import java.util.ArrayList;import java.util.Date;import java.util.List;@Servicepublic class BlogServiceImpl implements BlogService {@Autowiredprivate BlogRepository blogRepository;@Overridepublic Blog getBlog(Long id) {return blogRepository.getOne(id);}@Overridepublic Page<Blog> listBlog(Pageable pageable, BlogQuery blog) {return blogRepository.findAll(new Specification<Blog>() {@Overridepublic Predicate toPredicate(Root<Blog> root, CriteriaQuery<?> cq, CriteriaBuilder cb) {List<Predicate> predicates = new ArrayList<>();if (!"".equals(blog.getTitle()) && blog.getTitle() != null) {predicates.add(cb.like(root.<String>get("title"), "%"+blog.getTitle()+"%"));}if (blog.getTypeId() != null) {predicates.add(cb.equal(root.<Type>get("type").get("id"), blog.getTypeId()));}if (blog.isRecommend()) {predicates.add(cb.equal(root.<Boolean>get("recommend"), blog.isRecommend()));}cq.where(predicates.toArray(new Predicate[predicates.size()]));return null;}},pageable);}@Transactional@Overridepublic Blog saveBlog(Blog blog) {if (blog.getId() == null) {blog.setCreateTime(new Date());blog.setUpdateTime(new Date());blog.setViews(0);} else {blog.setUpdateTime(new Date());}return blogRepository.save(blog);}@Transactional@Overridepublic Blog updateBlog(Long id, Blog blog) {Blog b = blogRepository.getOne(id);if (b == null) {throw new NotFoundException("该博客不存在");}BeanUtils.copyProperties(blog,b, MyBeanUtils.getNullPropertyNames(blog));b.setUpdateTime(new Date());return blogRepository.save(b);}@Transactional@Overridepublic void deleteBlog(Long id) {blogRepository.deleteById(id);}}
6.博客列表
6.1.TypeService中新增listType
/*** 博客页面查询条件的下拉框列表*/List<Type> listType();
6.2.TypeServiceImpl中新增listType实现
@Overridepublic List<Type> listType() {return typeRepository.findAll();}
6.3.BlogController
package com.tedu.blog.web.admin;import com.tedu.blog.pojo.Blog;import com.tedu.blog.pojo.User;import com.tedu.blog.service.BlogService;import com.tedu.blog.service.TagService;import com.tedu.blog.service.TypeService;import com.tedu.blog.vo.BlogQuery;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.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.servlet.http.HttpSession;/*** @description:* @author: zfh* @email: hst1406959716@* @date: Created in /8/26 10:44* @modified By:* @version: 1.0*/@Controller@RequestMapping("/admin")public class BlogController {private static final String INPUT = "admin/blogs-input";private static final String LIST = "admin/blogs";private static final String REDIRECT_LIST = "redirect:/admin/blogs";@Autowiredprivate BlogService blogService;@Autowiredprivate TypeService typeService;@GetMapping("/blogs")public String blogs(@PageableDefault(size = 8, sort = {"updateTime"}, direction = Sort.Direction.DESC) Pageable pageable,BlogQuery blog, Model model) {model.addAttribute("types", typeService.listType());model.addAttribute("page", blogService.listBlog(pageable, blog));return LIST;}@PostMapping("/blogs/search")public String search(@PageableDefault(size = 8, sort = {"updateTime"}, direction = Sort.Direction.DESC) Pageable pageable,BlogQuery blog, Model model) {model.addAttribute("page", blogService.listBlog(pageable, blog));return "admin/blogs :: blogList";}}
6.4.页面访问
登录后点击博客
7.新增博客
7.1.编辑TagService
/*** 博客新增时下拉框*/List<Tag> listTag();List<Tag> listTag(String ids);
7.2.编辑TagServiceImpl
@Overridepublic List<Tag> listTag() {return tagRepository.findAll();}private List<Long> convertToList(String ids) {List<Long> list = new ArrayList<>();if (!"".equals(ids) && ids != null) {String[] idarray = ids.split(",");for (int i=0; i < idarray.length;i++) {list.add(new Long(idarray[i]));}}return list;}@Overridepublic List<Tag> listTag(String ids) {//1,2,3return tagRepository.findAllById(convertToList(ids));}
7.3.编辑BlogController
/*** 跳转新增页面* @param model* @return*/@GetMapping("/blogs/save")public String saveBlog(Model model) {setTypeAndTag(model);model.addAttribute("blog", new Blog());return INPUT;}private void setTypeAndTag(Model model) {model.addAttribute("types", typeService.listType());model.addAttribute("tags", tagService.listTag());}@PostMapping("/blogs")public String edit(Blog blog, RedirectAttributes attributes, HttpSession session) {blog.setUser((User) session.getAttribute("user"));blog.setType(typeService.getType(blog.getType().getId()));blog.setTags(tagService.listTag(blog.getTagIds()));Blog b;if (blog.getId() == null) {b = blogService.saveBlog(blog);} else {b = blogService.updateBlog(blog.getId(), blog);}if (b == null ) {attributes.addFlashAttribute("message", "操作失败");} else {attributes.addFlashAttribute("message", "操作成功");}return REDIRECT_LIST;}
7.4.页面测试
8.编辑博客
/*** 编辑回显* @param id* @param model* @return*/@GetMapping("/blogs/{id}/edit")public String editInput(@PathVariable Long id, Model model) {setTypeAndTag(model);Blog blog = blogService.getBlog(id);blog.init();model.addAttribute("blog",blog);return INPUT;}/*** 编辑(新增与修改)* @param blog* @param attributes* @param session* @return*/@PostMapping("/blogs")public String edit(Blog blog, RedirectAttributes attributes, HttpSession session) {blog.setUser((User) session.getAttribute("user"));blog.setType(typeService.getType(blog.getType().getId()));blog.setTags(tagService.listTag(blog.getTagIds()));Blog b;if (blog.getId() == null) {b = blogService.saveBlog(blog);} else {b = blogService.updateBlog(blog.getId(), blog);}if (b == null ) {attributes.addFlashAttribute("message", "操作失败");} else {attributes.addFlashAttribute("message", "操作成功");}return REDIRECT_LIST;}
9.删除博客
@GetMapping("/blogs/{id}/delete")public String delete(@PathVariable Long id,RedirectAttributes attributes) {blogService.deleteBlog(id);attributes.addFlashAttribute("message", "删除成功");return REDIRECT_LIST;}
