【项目】仿牛客网社区开发 第3章 Spring Boot 实践 开发社区核心功能 6 添加评论

移动开发 2023-05-04 16:31:01 阅读次数: 0

【项目】仿牛客网社区开发

文章目录

在这里插入图片描述

第3章 Spring Boot 实践 开发社区核心功能

6 添加评论

在这里插入图片描述

  • 数据层

    • 增加评论数据。
    • 修改帖子的评论数量。

  • 业务层

    • 处理添加评论的业务：

      先增加评论、再更新帖子的评论数量。

  • 表现层

    • 处理添加评论数据的请求。
    • 设置添加评论的表单。

首先就是数据层

在这里插入图片描述

扫描二维码关注公众号，回复： 14952462 查看本文章

添加了一个新方法，然后在映射文件中将其实现

在这里插入图片描述

下面就是业务层了

帖子里面有个数量也需要更新一下

在这里插入图片描述

实现一下

在这里插入图片描述

OK，下面就是添加评论的业务

先改帖子评论数量

在这里插入图片描述

接下来是添加评论

在这里插入图片描述

下面就是表现层了，先是控制器 处理请求

package com.nowcoder.community.controller;

import com.nowcoder.community.entity.Comment;
import com.nowcoder.community.service.CommentService;
import com.nowcoder.community.util.HostHolder;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.Date;

/**
 * @Projectname: community
 * @Classname: CommentController
 * @Author: Ding Jiaxiong
 * @Date:2023/4/19 14:11
 */

@Controller
@RequestMapping("/comment")
public class CommentController {
    
    

    @Autowired
    private CommentService commentService;

    @Autowired
    private HostHolder hostHolder;

    @RequestMapping(path = "/add/{discussPostId}", method = RequestMethod.POST)
    public String addComment(@PathVariable("discussPostId") int discussPostId, Comment comment) {
    
    
        comment.setUserId(hostHolder.getUser().getId());
        comment.setStatus(0);
        comment.setCreateTime(new Date());
        commentService.addComment(comment);

        return "redirect:/discuss/detail/" + discussPostId;
    }

}

在这里插入图片描述

OK， 我用了这么久的IDEA ，才发现，今天才发现，文件头模板里面的@Data …，那是@Date 啊… 算了算了，小问题

下面是修改前端模板

在这里插入图片描述

主要就是这里

还有给评论评论

在这里插入图片描述

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" th:href="@{/css/discuss-detail.css}"/>
    <title>牛客网-帖子详情</title>
</head>
<body>
<div class="nk-container">
    <!-- 头部 -->
    <header class="bg-dark sticky-top" th:replace="index::header">
        <div class="container">
            <!-- 导航 -->
            <nav class="navbar navbar-expand-lg navbar-dark">
                <!-- logo -->
                <a class="navbar-brand" href="#"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- 功能 -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item ml-3 btn-group-vertical">
                            <a class="nav-link" href="../index.html">首页</a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical">
                            <a class="nav-link position-relative" href="letter.html">消息<span
                                    class="badge badge-danger">12</span></a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical">
                            <a class="nav-link" href="register.html">注册</a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical">
                            <a class="nav-link" href="login.html">登录</a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle"
                                     style="width:30px;"/>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item text-center" href="profile.html">个人主页</a>
                                <a class="dropdown-item text-center" href="setting.html">账号设置</a>
                                <a class="dropdown-item text-center" href="login.html">退出登录</a>
                                <div class="dropdown-divider"></div>
                                <span class="dropdown-item text-center text-secondary">nowcoder</span>
                            </div>
                        </li>
                    </ul>
                    <!-- 搜索 -->
                    <form class="form-inline my-2 my-lg-0" action="search.html">
                        <input class="form-control mr-sm-2" type="search" aria-label="Search"/>
                        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
                    </form>
                </div>
            </nav>
        </div>
    </header>

    <!-- 内容 -->
    <div class="main">
        <!-- 帖子详情 -->
        <div class="container">
            <!-- 标题 -->
            <h6 class="mb-4">
                <img src="http://static.nowcoder.com/images/img/icons/ico-discuss.png"/>
                <span th:utext="${post.title}">备战春招，面试刷题跟他复习，一个月全搞定！</span>
                <div class="float-right">
                    <button type="button" class="btn btn-danger btn-sm">置顶</button>
                    <button type="button" class="btn btn-danger btn-sm">加精</button>
                    <button type="button" class="btn btn-danger btn-sm">删除</button>
                </div>
            </h6>
            <!-- 作者 -->
            <div class="media pb-3 border-bottom">
                <a href="profile.html">
                    <img th:src="${user.headerUrl}" class="align-self-start mr-4 rounded-circle user-header"
                         alt="用户头像">
                </a>
                <div class="media-body">
                    <div class="mt-0 text-warning" th:utext="${user.username}">寒江雪</div>
                    <div class="text-muted mt-3">
                        发布于 <b th:text="${#dates.format(post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15
                        15:32:18</b>
                        <ul class="d-inline float-right">
                            <li class="d-inline ml-2"><a href="#" class="text-primary">赞 11</a></li>
                            <li class="d-inline ml-2">|</li>
                            <li class="d-inline ml-2"><a href="#replyform" class="text-primary">回帖 <i
                                    th:text="${post.commentCount}">7</i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 正文 -->
            <div class="mt-4 mb-3 content" th:utext="${post.content}">
                金三银四的金三已经到了，你还沉浸在过年的喜悦中吗？
                如果是，那我要让你清醒一下了：目前大部分公司已经开启了内推，正式网申也将在3月份陆续开始，金三银四，春招的求职黄金时期已经来啦！！！
                再不准备，作为19应届生的你可能就找不到工作了。。。作为20届实习生的你可能就找不到实习了。。。
                现阶段时间紧，任务重，能做到短时间内快速提升的也就只有算法了，
                那么算法要怎么复习？重点在哪里？常见笔试面试算法题型和解题思路以及最优代码是怎样的？
                跟左程云老师学算法，不仅能解决以上所有问题，还能在短时间内得到最大程度的提升！！！
            </div>
        </div>
        <!-- 回帖 -->
        <div class="container mt-3">
            <!-- 回帖数量 -->
            <div class="row">
                <div class="col-8">
                    <h6><b class="square"></b> <i th:text="${post.commentCount}">30</i>条回帖</h6>
                </div>
                <div class="col-4 text-right">
                    <a href="#replyform" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</a>
                </div>
            </div>
            <!-- 回帖列表 -->
            <ul class="list-unstyled mt-4">
                <li class="media pb-3 pt-3 mb-3 border-bottom" th:each="cvo:${comments}">
                    <a href="profile.html">
                        <img th:src="${cvo.user.headerUrl}" class="align-self-start mr-4 rounded-circle user-header"
                             alt="用户头像">
                    </a>
                    <div class="media-body">
                        <div class="mt-0">
                            <span class="font-size-12 text-success" th:utext="${cvo.user.username}">掉脑袋切切</span>
                            <span class="badge badge-secondary float-right floor">
									<i th:text="${page.offset + cvoStat.count}">1</i>#
								</span>
                        </div>
                        <div class="mt-2" th:utext="${cvo.comment.content}">
                            这开课时间是不是有点晚啊。。。
                        </div>
                        <div class="mt-4 text-muted font-size-12">
                            <span>发布于 <b th:text="${#dates.format(cvo.comment.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b></span>
                            <ul class="d-inline float-right">
                                <li class="d-inline ml-2"><a href="#" class="text-primary">赞(1)</a></li>
                                <li class="d-inline ml-2">|</li>
                                <li class="d-inline ml-2"><a href="#" class="text-primary">回复(<i
                                        th:text="${cvo.replyCount}">2</i>)</a></li>
                            </ul>
                        </div>
                        <!-- 回复列表 -->
                        <ul class="list-unstyled mt-4 bg-gray p-3 font-size-12 text-muted">

                            <li class="pb-3 pt-3 mb-3 border-bottom" th:each="rvo:${cvo.replys}">
                                <div>
										<span th:if="${rvo.target==null}">
											<b class="text-info" th:text="${rvo.user.username}">寒江雪</b>:&nbsp;&nbsp;
										</span>
                                    <span th:if="${rvo.target!=null}">
											<i class="text-info" th:text="${rvo.user.username}">Sissi</i> 回复
											<b class="text-info" th:text="${rvo.target.username}">寒江雪</b>:&nbsp;&nbsp;
										</span>
                                    <span th:utext="${rvo.reply.content}">这个是直播时间哈，觉得晚的话可以直接看之前的完整录播的~</span>
                                </div>
                                <div class="mt-3">
                                    <span th:text="${#dates.format(rvo.reply.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</span>
                                    <ul class="d-inline float-right">
                                        <li class="d-inline ml-2"><a href="#" class="text-primary">赞(1)</a></li>
                                        <li class="d-inline ml-2">|</li>
                                        <li class="d-inline ml-2"><a th:href="|#huifu-${rvoStat.count}|"
                                                                     data-toggle="collapse"
                                                                     class="text-primary">回复</a></li>
                                    </ul>
                                    <div th:id="|huifu-${rvoStat.count}|" class="mt-4 collapse">
                                        <form method="post" th:action="@{|/comment/add/${post.id}|}">
                                            <div>
                                                <input type="text" class="input-size" name="content"
                                                       th:placeholder="|回复${rvo.user.username}|"/>
                                                <input type="hidden" name="entityType" value="2">
                                                <input type="hidden" name="entityId" th:value="${cvo.comment.id}">
                                                <input type="hidden" name="targetId" th:value="${rvo.user.id}">
                                            </div>
                                            <div class="text-right mt-2">
                                                <button type="submit" class="btn btn-primary btn-sm" onclick="#">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </li>

                            <!-- 回复输入框 -->
                            <li class="pb-3 pt-3">
                                <form method="post" th:action="@{|/comment/add/${post.id}|}">
                                    <div>
                                        <input type="text" class="input-size" name="content"
                                               placeholder="请输入你的观点"/>
                                        <input type="hidden" name="entityType" value="2">
                                        <input type="hidden" name="entityId" th:value="${cvo.comment.id}">
                                    </div>
                                    <div class="text-right mt-2">
                                        <button type="submit" class="btn btn-primary btn-sm" onclick="#">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
                                    </div>
                                </form>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!-- 分页 -->
            <nav class="mt-5" th:replace="index::pagination">
                <ul class="pagination justify-content-center">
                    <li class="page-item"><a class="page-link" href="#">首页</a></li>
                    <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    <li class="page-item"><a class="page-link" href="#">末页</a></li>
                </ul>
            </nav>
        </div>
        <!-- 回帖输入 -->
        <div class="container mt-3">
            <form class="replyform" method="post" th:action="@{|/comment/add/${post.id}|}">
                <p class="mt-3">
                    <a name="replyform"></a>
                    <textarea placeholder="在这里畅所欲言你的看法吧!" name="content"></textarea>
                    <input type="hidden" name="entityType" value="1">
                    <input type="hidden" name="entityId" th:value="${post.id}">
                </p>
                <p class="text-right">
                    <button type="submit" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;
                    </button>
                </p>
            </form>
        </div>
    </div>

    <!-- 尾部 -->
    <footer class="bg-dark">
        <div class="container">
            <div class="row">
                <!-- 二维码 -->
                <div class="col-4 qrcode">
                    <img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail"
                         style="width:136px;"/>
                </div>
                <!-- 公司信息 -->
                <div class="col-8 detail-info">
                    <div class="row">
                        <div class="col">
                            <ul class="nav">
                                <li class="nav-item">
                                    <a class="nav-link text-light" href="#">关于我们</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-light" href="#">加入我们</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-light" href="#">意见反馈</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-light" href="#">企业服务</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-light" href="#">联系我们</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-light" href="#">免责声明</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-light" href="#">友情链接</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <ul class="nav btn-group-vertical company-info">
                                <li class="nav-item text-white-50">
                                    公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
                                </li>
                                <li class="nav-item text-white-50">
                                    联系方式：010-60728802(电话)&nbsp;&nbsp;&nbsp;&nbsp;[email protected]
                                </li>
                                <li class="nav-item text-white-50">
                                    牛客科技©2018 All rights reserved
                                </li>
                                <li class="nav-item text-white-50">
                                    京ICP备14055008号-4 &nbsp;&nbsp;&nbsp;&nbsp;
                                    <img src="http://static.nowcoder.com/company/images/res/ghs.png"
                                         style="width:18px;"/>
                                    京公网安备 11010502036488号
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script th:src="@{/js/global.js}"></script>
</body>
</html>

启动服务器测试

在这里插入图片描述

对这条帖子进行评论

在这里插入图片描述

回帖

在这里插入图片描述

这是对帖子进行评论，对别人的评论进行评论

在这里插入图片描述

在这里插入图片描述

没问题，然后针对某人的回复进行回复

我们登录niuke 这个账号

在这里插入图片描述

在这里插入图片描述

对 dingjiaxiong 这条回复进行回复

在这里插入图片描述

回复

在这里插入图片描述

没问题。

猜你喜欢

转载自blog.csdn.net/weixin_44226181/article/details/130480357
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022