0
点赞
收藏
分享

微信扫一扫

HTML5新增特性

萍儿的小确幸 2024-04-22 阅读 35
状态模式

1.准备前端界面

前端小白:怎么为你的网页增加评论功能?(一)_为网页添加评论区怎么弄-CSDN博客

参考的上述文章的前端代码

我们从上述前端图片知道,我们数据库需要准备的字段:

id,commentuserName,coomentmusicId,comment,time

2.数据库的准备

DROP TABLE IF EXISTS `commentmusic`;
CREATE TABLE `commentmusic` (
`id` int PRIMARY KEY AUTO_INCREMENT,
`commentuser_name` varchar(20) NOT NULL,
`commentmusic_id` int(11) NOT NULL,
`commenttime` DATETIME DEFAULT now(),
`comment` varchar(100) NOT NULL
);

3.提交评论数据

路径:"/comment/upload"

3.1 后端代码书写 

1.MAPPER

@Mapper
public interface CommentMapper {
    @Insert("insert into commentmusic(commentmusic_id,commentuser_name,comment) values " +
            "(#{commentmusicId},#{commentuserName},#{comment})")
    Integer insertComment(Integer commentmusicId,String commentuserName,String comment);
}

2.SERVICE

@Service
@Slf4j
public class CommentService {
    @Autowired
    private CommentMapper commentMapper;
    @Autowired
    private MusicMapper musicMapper;
    public Result insertComment(Integer commentmusicId, String commentuserName, String comment){
        Comment commentable=new Comment();
        if(!StringUtils.hasLength(comment)){
            return Result.fail(Constant.RESULT_CODE_NO_CHOICE,"评论不能为空");
        }else if(musicMapper.selectByMusicId(commentmusicId)==null){
            return Result.fail(Constant.RESULT_CODE_NOTMP3_DELETEFAIL,"没有该音乐");
        }
        Integer factor=commentMapper.insertComment(commentmusicId,commentuserName,comment);
        if(factor<1){
            return Result.fail(Constant.RESULT_CODE_FAIL_SQL,"数据库插入失败");
        }
        commentable.setComment(comment);
        commentable.setCommentmusicId(commentmusicId);
        commentable.setCommentuserName(commentuserName);
        return Result.success(true);
    }
}

3.Controller

@RestController
@RequestMapping("/comment")
public class CommentController {
    @Autowired
    private CommentService commentService;
    @RequestMapping("/upload")
    public Result insertComment(Integer commentmusicId, String comment, HttpSession httpSession){
        //获得当前的用户名
        User user= (User) httpSession.getAttribute(Constant.USERINFO_SESSION_KEY);
        String commentuserName=user.getUsername();
        return commentService.insertComment(commentmusicId, commentuserName, comment);
    }
}

3.2 后端测试

4.评论页面展示 

4.1 后端代码书写

MAPPER

SERVICE

CONTROLLER

4.2 后端测试

成功!!!

5.SECTION3和SECTION4的前端代码书写 

前端测试成功!!!

想加入删除评论的功能

这时候我们要让前端获取一些值,后端增加方法

前端的书写 

此时,自己写的评论可以看到删除按钮 

5.1 完成删除评论的功能

 删除成功!!!

举报

相关推荐

0 条评论