SpringBoot聚合项目：达内知道（十）-开发新增评论功能

本文主要是介绍SpringBoot聚合项目：达内知道（十）-开发新增评论功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1 开发新增评论功能

　　我们已经完成了讲师回复和显示讲师回答列表的功能，首先明确问题-->回答-->评论的关系：

• 一个问题可以有多个回答

• 一个回答可以有多个评论

• 评论直接关联回答id，和问题没有关系

1.1 为comment表添加用户昵称列

　　我们可以通过sql语句在不删除当前表的前提下为表新增列，comment表中没有用户昵称列，这样显示数据非常不方便，甚至需要连表查询，所以我们新增用户昵称列，sql语句如下：

 -- 为指定表新增列的代码
 ALTER TABLE comment 
 ADD COLUMN user_nick_name VARCHAR(255)
 AFTER user_id
 ​
 -- 编写修改语句,将用户对应的昵称赋值
 UPDATE comment c SET user_nick_name=(
 SELECT nickname FROM user u WHERE 
     u.id=c.user_id
 )

　　经过上面操作，我们的comment表中就新增了user_nick_name列，并赋上了对应的昵称值。数据库列变化了，那么对应数据库的实体类也已经要新增一个属性。

Comment实体类新增属性如下：

 /**
  * 用户昵称
  */
 @TableField("user_nick_name")
 private String userNickName;

1.2 编写新增评论的控制层

先创建一个新增评论用的Vo类CommentVo，代码如下：

 @Data
 @Accessors(chain = true)
 public class CommentVo implements Serializable {
     @NotNull(message = "回答id不能为空")
     private Integer answerId;
 ​
     @NotBlank(message = "评论内容不能为空")
     private String content;
 }

编写控制器方法来接收表单提交的信息：

 @RestController
 @RequestMapping("/v1/comments")
 @Slf4j
 public class CommentController {
     //不写("") 也可以,这个方法映射/v1/comments的请求
     @PostMapping
     public Comment postComment(
             @Validated CommentVo commentVo, BindingResult result,
             @AuthenticationPrincipal UserDetails user){
             log.debug("接收到表单信息:{}",commentVo);
             if(result.hasErrors()){
                 String msg=result.getFieldError().getDefaultMessage();
                 throw new ServiceException(msg);
             }
             return null;
     }
 }

1.3 编写页面的绑定

在detail_teacher.html页面修改代码：

 <p class="text-left text-dark">
   <a class="btn btn-primary mx-2"
      href="#">采纳答案</a>
   <a class="btn btn-outline-primary"
      data-toggle="collapse" href="#collapseExample1"
      role="button" aria-expanded="false"
      aria-controls="collapseExample"
      :href="'#addComment'+answer.id" ><!--修改href-->
     <i class="fa fa-edit"></i>添加评论
   </a>
 </p>
 <div class="collapse" id="collapseExample1"
     :id="'addComment'+answer.id"><!--修改id-->
   <div class="card card-body border-light">
     <form action="#" method="post" class="needs-validation"
           novalidate @submit.prevent="postComment(answer.id)"><!--阻止原有表单提交效果-->
       <div class="form-group">
         <textarea class="form-control" name="content" rows="3" required></textarea>
         <div class="invalid-feedback">
           评论内容不能为空！
         </div>
       </div>
       <button type="submit" class="btn btn-primary my-1 float-right">提交评论</button>
     </form>
   </div>
 </div>

1.4 编写提交评论的js代码

在question_detail.js文件中的answersApp对象中新增一个方法：

 postComment:function(answerId){
     if(!answerId){
         return
     }
     console.log(answerId);
     //获得输入框对象
     let textarea=$("#addComment"+answerId+" textarea");//textarea前面一定要有空格：子孙后代选择器
     let content=textarea.val();
     if(!content){
         alert("必须编写评论内容");
         return;
     }
     let form=new FormData();
     form.append("answerId",answerId);
     form.append("content",content);
     axios({
         url:"/v1/comments",
         method:"post",
         data:form
     }).then(function(response){
         console.log(response.data);
     })
 }

这篇关于SpringBoot聚合项目：达内知道（十）-开发新增评论功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！