说明

前台功能我们已经完全完成了，我们现在来看看后台剩下的内容：控制台、评论管理及登录功能，这节课完了的博客项目就完了，下节课给大家说说我们的项目怎么部署到线上服务器

评论管理

• 我们先来改造下页面，给左边加上一键已读的按钮，给右边加上评论过滤条件：全部、已读、未读的按钮

<div class="btn-group" role="group" style="margin-bottom: 20px;" aria-label="...">
  <button type="button" id="lw-add-btn" class="btn btn-default"><i class="fa fa-plus"></i> 新增</button>
  <button type="button" id="lw-read-all" class="btn btn-default"><i class="fa fa-circle-o"></i> 一键已读</button>
</div>
<div class="btn-group" role="group" style="margin-bottom: 20px;float: right" aria-label="...">
  <button type="button" class="btn btn-primary">全部</button>
  <button type="button"  class="btn btn-default">已读</button>
  <button type="button"  class="btn btn-default">未读</button>
</div>

• 一键已读功能开发

//Mapper
@Modifying
@Transactional
@Query("update  Comment  set view = true where view = false ")
void readAll();
//Service
public void readAll() {
  mapper.readAll();
}
//Controller
@GetMapping("/read")
public Result<String> read() {
  service.readAll();
  return Result.success();
}

$('#lw-read-all').on('click', function () {
  console.log(111);
  $.ajax({
    url: '/admin/comment/read',
    dataType: 'json',
    success: res => {
      if (res.code === 200) {
        layer.msg("保存成功", {icon: 1, time: 500}, function () {
          $('#data-table').bootstrapTable('refresh', {silent: true})
        })
      } else {
        layer.msg(res.message, {icon: 2})
      }
    }
  })
})

• 给BSTable表格一个双击事件，参考传送门，点击表格时将表格变为一个textarea，内容为评论内容，然后在这个textarea失去焦点时调用更新接口来进行更新操作

onDblClickCell: function (field, value, row, $element) {
  let comment = $(`#data-table .lw-comment-content`);
  comment.parent().html(comment.val())
  if (field === 'content') {
    $element.html(`<textarea class="form-control lw-comment-content">${value}</textarea>`)
    $('.lw-comment-content').blur(function () {
      let data = {id: row.id, content: $(this).val()}
      $.ajax({
        url: '/admin/comment/',
        method: 'post',
        data: data,
        dataType: 'json',
        success: res => {
          if (res.code === 200) {
            layer.msg("保存成功", {icon: 1, time: 500}, function () {
              $('#data-table').bootstrapTable('refresh', {silent: true})
            })
          } else {
            layer.msg(res.message, {icon: 2})
          }
        }
      })
    })
  }
},

• 完成后端更新接口的开发，更新时直接利用非空拷贝

public void save(Comment comment) {
  //新评论
  if (Objects.isNull(comment.getId())) {
    sendMailToWebsite(comment.getArticle().getId());
    comment.setCreated(new Date());
    comment.setView(false);
    if (comment.getPid() != 0) {
      sendMailToComment(comment.getArticle().getId(), comment.getPid(), comment.getContent());
      Comment parent = detail(comment.getPid());
      comment.setContent("@" + parent.getNickname() + ": " + comment.getContent());
      comment.setPid(findParent(comment.getPid()));
    }
    mapper.save(comment);
  } else {
    Comment one = detail(comment.getId());
    UpdateUtil.copyNullProperties(comment, one);
    mapper.save(one);
  }

}

• 将表格的修改按钮改为回复按钮，点击后给其一个弹出回复框输入我们的回复内容调用回复接口，这里可以直接用Layer

$("#data-table").on('click', '.lw-update-btn', function () {
  //   获取目标资源id
  let id = $(this).data('id')
  let aid = $(this).data('aid')
  layer.prompt({title: '回复', formType: 2}, function (text, index) {
    layer.close(index);
    $.ajax({
      url: '/admin/comment/' + id,
      method: 'post',
      data: {
        aid: aid,
        message: text
      }, dataType: 'json',
      success: res => {
        if (res.code === 200) {
          layer.msg("回复成功", {icon: 1})
          $('#data-table').bootstrapTable('refresh', {silent: true})
        } else {
          layer.msg(res.message, {icon: 2})
        }
      }
    })
  });

})

• 完成后端回复接口的开发

@PostMapping("/{pid}")
public Result<String> replay(@PathVariable Integer pid, Integer aid, String message) {
  Comment comment = Comment.builder().article(Article.builder().id(aid).build()).email(webSite.getMail()).nickname(webSite.getNickname()).content(message).pid(pid).url(webSite.getUrl()).build();
  service.save(comment);
  return Result.success();
}

• 将页面改为分页

//Mapper
Page<Comment> findAllByView(Boolean view, Pageable pageable);
//Service
public PageHelper<Comment> list(Boolean view, int pn, int ps) {
  Pageable pageable = PageRequest.of(pn - 1, ps, Sort.by(Sort.Direction.DESC, "created"));
  Page<Comment> page = Objects.isNull(view) ? mapper.findAll(pageable) : mapper.findAllByView(view, pageable);
  return PageHelper.<Comment>builder()
    .rows(page.getContent())
    .total(page.getTotalElements())
    .build();
}
//Controller
@GetMapping("/")
public Result<PageHelper<Comment>> list(@RequestParam(required = false) Boolean view, @RequestParam(required = false, defaultValue = "1") Integer pn, @RequestParam(required = false, defaultValue = "1") Integer ps) {
  pn = Math.max(1, pn);
  ps = Math.max(1, ps);
  return Result.success(service.list(view, pn, ps));
}

$('#lw-comment-search button').on('click',function () {
  $('#lw-comment-search .btn-primary').removeClass('btn-primary').addClass('btn-default')
  $(this).removeClass('btn-default').addClass('btn-primary')
  $('#data-table').bootstrapTable('refresh', {silent: true})
})

$('#data-table').bootstrapTable({
  url: '/admin/comment/',
  pagination: true,
  pageNumber: 1,
  sidePagination: 'server',
  pageSize: 10,
  pageList: [10, 20, 40],
  responseHandler: function (res) {
    return res.data
  },
  queryParams: function (params) {
    return {
      pn: (params.offset / params.limit) + 1,
      ps: params.limit,
      view: $('#lw-comment-search .btn-primary').data('view')
    }
  }
})

控制台

这里没什么好说的，页面上需要什么内容我们查什么内容就可以了，然后在未读评论这里我们给一个参数标识一下我们要查未读评论，然后在评论管理的路由里解析一下这个参数就行了

@GetMapping("/")
public String index(Model model) {
  model.addAttribute("category", categoryService.count());
  model.addAttribute("comment", commentService.count(null));
  model.addAttribute("commentFalse", commentService.count(false));
  model.addAttribute("article", articleService.count());
  model.addAttribute("newArticleList", articleService.search(ArticleSearch.builder().type(Article.TYPE_ARTICLE).pageNum(1).pageSize(5).build()).getRows());
  model.addAttribute("newCommentList", commentService.list(null, 1, 5).getRows());
  return "admin/index";
}

<div class="jumbotron">
  <h3>网站概要</h3>
<p>目前有 <i th:text="${article}"></i> 篇文章, 并有 <i th:text="${comment}"></i> 条关于你的评论在 <i
th:text="${category}"></i> 个分类中.</p>
  <p>其中有 <i th:text="${commentFalse}"></i>条 评论未查看:</p>
    <p><a class="btn btn-primary btn-lg" th:href="@{/admin/comment.html(view=false)}" role="button">点此查看</a></p>
      </div>
<div class="row">
  <div class="col-md-6">
    <ul class="list-group">
      <li class="list-group-item disabled">
        <b>最新文章</b>
</li>
<li class="list-group-item" th:each="post:${newArticleList}">
  <span class="badge" th:text="${#dates.format(post.created,'MM-dd')}">09-28</span>
<a target="_blank" th:href="@{/{id}.html(id=${post.id})}" th:text="${post.title}"></a>
</li>
</ul>
</div>
<div class="col-md-6">
  <ul class="list-group">
    <li class="list-group-item disabled">
      <b>最新评论</b>
</li>
<li class="list-group-item" th:each="comm:${newCommentList}">
  <span class="badge" th:text="${#dates.format(comm.created,'MM-dd')}">09-29</span>
<th:block th:text="${comm.content}"></th:block>
</li>
</ul>
</div>
</div>