实现简单的评论区功能

最新推荐文章于 2024-05-25 11:37:13 发布
最新推荐文章于 2024-05-25 11:37:13 发布
阅读量3.1k 收藏 31
点赞数 3
文章标签： java javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/kensporger/p/10035843.html
版权

题述：

使用Node.js实现评论区功能，效果如下图。每条评论需要动态修改的部分为楼层号（如 #6），时间戳（如 2018-08-13 11:30），评论内容；昵称和客户端提示不必修改。要求将评论数据存入文件中。

 

 

实现所需的文件的目录

./Comment.js

./index.html

./records.txt

./public/avatar1.jpg

./public/avatar2.jpg

./public/main.css

 

index.html代码部分：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <link rel="stylesheet" href="main.css">
 9     <title>Question3</title>
10 </head>
11 
12 <body>
13     <div class="container">
14         <div class="comment-send">
15             <form id="commentForm" method="GET" action="http://127.0.0.1:8888/comment">
16                 <span class="comment-avatar">
17                     <img src="avatar1.jpg" alt="avatar">
18                 </span>
19                 <textarea class="comment-send-input" name="comment" form="commentForm" cols="80" rows="5" placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"></textarea>
20                 <input class="comment-send-button" type="submit" value="发表评论">
21             </form>
22         </div>
23         <div class="comment-list"
最低0.47元/天 解锁文章
dbt63203
关注
  • 3
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现发帖评论
weixin_48043684的博客
04-03 571
利用JS实现有字数限制的发帖评论效果，根据时间顺序，时间较早的评论位于下方。
类抖音评论区功能的实现？看这一篇，带你从 0 到 1 实现高性能评论功能
programming132的博客
04-26 3448
前言很多与社交，电商等等相关的平台都需要评论功能，那么如何设计，来实现高性能的评论服务呢？
多级留言/评论的功能实现——Vue3前端篇
最新发布
道阻且长 心态要好
05-25 1249
使用vue3对多级留言的功能前端实现
JS实现简单的评论与删除功能
Henry的博客
08-21 2515
js实现简单的评论，删除功能，简单页面布局
Node.js实现用户评论社区功能（体验前后端开发的乐趣）
10-17
主要介绍了Node.js实现用户评论社区（体验前后端开发的乐趣） ,需要的朋友可以参考下
JavaScript实现简单评论功能
12-12
本文实例为大家分享了JavaScript实现简单评论功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ /*background-image: url(../img/91R58PIC3n2_1024.jpg);*/ } #div1{ margin: auto; border: 1px beige solid; width: 512px; text-align: right; } ul{ list-style
jQuery实现简单评论区功能
01-21
本文实例为大家分享了jQuery实现简单评论区的具体代码，供大家参考，具体内容如下 直接看代码吧 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport ...
原生js实现回复评论功能
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个基本的评论回复功能。这个功能包括删除评论、显示或隐藏点赞数量、添加新的回复评论、处理回复内的点赞以及回复或删除操作。我们将通过分析给出的代码片段来理解...
微信小程序实现简单评论功能
10-17
在微信小程序中实现简单的评论功能，主要涉及到以下几个关键知识点： 1. **WXML结构**：WXML是微信小程序的标记语言，用于构建用户界面。在示例中，我们看到了一个简单的布局，包括一个显示评论数量的视图、一个...
JavaScript评论点赞功能的实现方法
10-20
通过分析评论功能的逻辑关系，学会如何使用JavaScript实现评论、回复、点赞等各种功能。这篇文章主要介绍了JavaScript评论点赞功能的实现方法,需要的朋友可以参考下
jQuery评论回复源码
09-03
jQuery评论回复源码。利用Ajax实现无刷新评论回复，类似微博、贴吧这样的回复。
评论功能区
05-11
完整的品论功能区，附有完整代码，
评论区功能的简单实现思路
CoderJia的学习之路
02-03 1835
评论区功能是社交类项目中的核心组成部分，它涉及到前端的交云和后端的数据处理。基于你的技术栈（前端 Vue3，后端 Java），下面是一个具体的实现思路和数据库设计建议，并探索一下知乎的评论系统。
html页面中加入评论功能,JavaScript实现简单评论功能
weixin_35747299的博客
05-31 5586
本文实例为大家分享了JavaScript实现简单评论功能的具体代码，供大家参考，具体内容如下body{/*background-image: url(../img/91R58PIC3n2_1024.jpg);*/}#div1{margin: auto;border: 1px beige solid;width: 512px;text-align: right;}ul{list-style-type...
网页实现的评论功能的代码
热门推荐
Strangewu的博客
10-17 1万+
实现一个评论功能的页面并能通过验证码验证 效果展示1 效果展示2 效果展示3 效果展示4 内容 名字 描述 主页面展示 main.html 文章部分与评论部分整体 主页面css main.css 修饰整个页面整体部分 评论功能整体CSS commentStyle.css 评论区大小，所处的位置等 评论后展示出来的CSS getSQLcomment.css 评论展示出来内容的位置，等 写评论过程中的js check,js 从六个中的一个头像，或网名随机产生一个，以及点击
js如何实现画词评论?
Dark_programmer的博客
01-08 645
评论 ，是一个系统很常见的功能，回复回复再回复。 过程过于死板，那能否选中某句话？对某句话进行评论？ 处于对该功能的需求，花费了一定的时间进行研究、查询、尝试。终于，摸索出一个简单的办法，特此记录。 先放出效果： 1.鼠标滑动选中某关键字 2.弹窗进行评论 那么，是怎么实现的呢？ 思路如下： 1.监听mouseup事件 2.获取选中的内容 3.打开弹窗 4.进行评论发表 关键属性： Window.getSelection 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。 【M
点击发表图标评论，滚动到评论区
weixin_51952807的博客
05-04 413
lookComFn () { // 点击 - 显示评论区顶端 // 1. 点击直接滚动过去 // 思路: window.scollTo 设置Y轴滚动值, 滚动值就是文章内容的高度 // window.scollTo(x坐标, y坐标) - 把滚动条滚动到指定位置 (左上角是0, 0) // window.scrollTo(0, document.querySelector('.article-container').offsetHeight...
springboot评论区
01-13
在Spring Boot中实现评论区功能可以通过以下步骤进行： 1. 创建评论实体类 Comment.java，包含评论的内容、作者、时间等属性。 2. 创建评论服务类 CommentService.java，实现评论的增删改查等操作。 3. 创建评论控制器 CommentController.java，处理评论相关的请求。 4. 在前端页面中使用Vue.js来渲染评论区域，并通过Ajax请求与后端进行交互。 下面是一个简单的示例代码： 1. Comment.java ```java @Entity public class Comment { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String content; private String author; private Date createTime; // 省略getter和setter方法 } ``` 2. CommentService.java ```java @Service public class CommentService { @Autowired private CommentRepository commentRepository; public List<Comment> getAllComments() { return commentRepository.findAll(); } public Comment saveComment(Comment comment) { return commentRepository.save(comment); } public void deleteComment(Long id) { commentRepository.deleteById(id); } // 其他操作方法 } ``` 3. CommentController.java ```java @RestController @RequestMapping("/comments") public class CommentController { @Autowired private CommentService commentService; @GetMapping public List<Comment> getAllComments() { return commentService.getAllComments(); } @PostMapping public Comment saveComment(@RequestBody Comment comment) { return commentService.saveComment(comment); } @DeleteMapping("/{id}") public void deleteComment(@PathVariable Long id) { commentService.deleteComment(id); } // 其他请求处理方法 } ``` 4. 前端页面 ```html <div id="app"> <div v-for="comment in comments" :key="comment.id"> <p>{{ comment.content }}</p> <p>{{ comment.author }}</p> <p>{{ comment.createTime }}</p> <button @click="deleteComment(comment.id)">删除</button> </div> <form @submit.prevent="saveComment"> <input v-model="newComment.content" placeholder="请输入评论内容"> <input v-model="newComment.author" placeholder="请输入作者"> <button type="submit">提交评论</button> </form> </div> <script> new Vue({ el: '#app', data: { comments: [], newComment: { content: '', author: '' } }, mounted() { this.loadComments(); }, methods: { loadComments() { // 发送Ajax请求获取评论列表 axios.get('/comments') .then(response => { this.comments = response.data; }) .catch(error => { console.error(error); }); }, saveComment() { // 发送Ajax请求保存评论 axios.post('/comments', this.newComment) .then(response => { this.comments.push(response.data); this.newComment.content = ''; this.newComment.author = ''; }) .catch(error => { console.error(error); }); }, deleteComment(id) { // 发送Ajax请求删除评论 axios.delete(`/comments/${id}`) .then(() => { this.comments = this.comments.filter(comment => comment.id !== id); }) .catch(error => { console.error(error); }); } } }); </script> ``` 这样，你就可以在Spring Boot中实现一个简单的评论区功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值