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);
})
}
