Mr丶冷文

文章 分类 评论
115 10 5698

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

(二十二)后台其它功能的实现

MR丶冷文 2022-10-15 203 1条评论 个人博客项目视频教程 javaspringboot个人博客

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

说明

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

评论管理

  • 我们先来改造下页面,给左边加上一键已读的按钮,给右边加上评论过滤条件:全部、已读、未读的按钮
<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>

评论(1)

  1. 潇洒 游客 2022-10-17 18:52 回复

    学习一下,进阶知识点。

最新评论

  •  hh

  •  hh

  • 蝌蚪

    支持大佬

  • SURELY

    下载支持一下大佬

  • SURELY

    大佬支持啊,下载了试一下

日历

2022年12月

    123
45678910
11121314151617
18192021222324
25262728293031

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭