正文

实现简单的评论区功能(代码片段)

kensporger  kensporger  2023-01-27  197

关键词：

题述：

使用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" id="commentList">
24             <div class="comment">
25                 <span class="comment-avatar">
26                     <img src="avatar1.jpg" alt="avatar">
27                 </span>
28                 <div class="comment-content">
29                     <p class="comment-content-name">EdmundDZhang</p>
30                     <p class="comment-content-article">惊了</p>
31                     <p class="comment-content-footer">
32                         <span class="comment-content-footer-id">#2</span>
33                         <span class="comment-content-footer-device">来自安卓客户端</span>
34                         <span class="comment-content-footer-timestamp">2018-01-20 14:05</span>
35                     </p>
36                 </div>
37                 <div class="cls"></div>
38             </div>
39             <div class="comment comment-bottom">
40                 <span class="comment-avatar">
41           <img src="avatar2.jpg" alt="avatar">
42         </span>
43                 <div class="comment-content">
44                     <p class="comment-content-name">bilibili英雄联盟赛事</p>
45                     <p class="comment-content-article">Hello World!</p>
46                     <p class="comment-content-footer">
47                         <span class="comment-content-footer-id">#1</span>
48                         <span class="comment-content-footer-device">来自安卓客户端</span>
49                         <span class="comment-content-footer-timestamp">2018-01-20 13:10</span>
50                     </p>
51                 </div>
52                 <div class="cls"></div>
53             </div>
54         </div>
55     </div>
56 </body>
57 
58 </html>

main.css代码部分：

  1 * 
  2   margin: 0;
  3   padding: 0;
  4   font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
  5 
  6 
  7 .cls 
  8   clear: both;
  9 
 10 
 11 .container 
 12   width: 780px;
 13   min-height: 10px;
 14   margin: 50px auto;
 15   /* border: 1px solid #dfdfdf; */
 16 
 17 
 18 .comment 
 19   min-height: 60px;
 20   /* border: 1px solid red; */
 21 
 22 
 23 .comment-avatar img 
 24   margin: 20px 0 0 20px;
 25   width: 48px;
 26   height: 48px;
 27   border-radius: 50%;
 28 
 29 
 30 .comment-content 
 31   float: right;
 32   width: 685px;
 33   padding-top: 15px;
 34   border-top: 1px solid #dfdfdf;
 35 
 36 
 37 .comment-bottom>.comment-content 
 38   border-bottom: 1px solid #dfdfdf;
 39 
 40 
 41 .comment-content-name 
 42   color: #6d757a;
 43   font-size: 12px;
 44   margin-bottom: 5px;
 45 
 46 
 47 .comment-content-article 
 48   font-size: 14px;
 49   margin-bottom: 10px;
 50 
 51 
 52 .comment-content-footer 
 53   color: #6d757a;
 54   font-size: 12px;
 55   margin-bottom: 15px;
 56 
 57 
 58 .comment-content-footer span 
 59   margin-right: 10px;
 60 
 61 
 62 
 63 .comment-send 
 64   position: relative;
 65   margin-bottom: 30px;
 66 
 67 
 68 .comment-send-input 
 69   outline: none;
 70   box-sizing: border-box;
 71   -moz-box-sizing: border-box;
 72   transition: all 0.3s;
 73   position: absolute;
 74   top: 15px; left: 95px;
 75   resize: none;
 76   width: 605px;
 77   height: 65px;
 78   padding: 10px;
 79   border-radius: 4px;
 80   background: #f4f5f7;
 81   border: 1px solid #e5e9ef;
 82 
 83 .comment-send-input:hover, .comment-send-input:active 
 84   background: #fff;
 85   color: #555;
 86 
 87 
 88 .comment-send-button 
 89   border: none;
 90   cursor: pointer;
 91   user-select: none;
 92   -moz-user-select: none;
 93   transition: all 0.3s;
 94   position: absolute;
 95   top: 15px; right: 0px;
 96   width: 65px;
 97   height: 65px;
 98   border-radius: 4px;
 99   background: #1aa2d4;
100   color: #fff;
101   font-size: 14px;
102   text-align: center;
103 
104 .comment-send-button:hover 
105   background: #1eb6e3;
106

Comment.js代码部分：

 1 const express = require(‘express‘);
 2 const app = express();
 3 const fs = require(‘fs‘);
 4 const sd = require(‘silly-datetime‘);
 5 const readline = require(‘readline‘);
 6 
 7 app.use(express.static(‘./public‘));
 8 
 9 let oldHtmlContent = fs.readFileSync(‘./index.html‘).toString(); //读取index.html文档
10 
11 app.get(‘/‘, function(req, res) 
12     res.send(oldHtmlContent);
13     fs.writeFileSync(‘records.txt‘, ‘‘); //初始化txt为空白
14 );
15 
16 app.get(‘/comment‘, function(req, res) 
17 
18     writeRecord(req.query.comment, sd.format(new Date(), ‘YYYY-MM-DD HH:mm‘)); //记录评论与时间
19 
20     //加载评论
21     let newHtmlContent = ‘‘;
22     let r = /d4-d2-d2 d2:d2/ //匹配日期
23     let floorNumber = 2;
24     let comment = ‘‘;
25     //使用readline逐行读取文件
26     const r1 = readline.createInterface(
27         input: fs.createReadStream(‘./records.txt‘)
28     )
29     r1.on(‘line‘, (line) => 
30         if (r.test(line)) 
31             //新评论的HTML代码
32             newHtmlContent =
33                 `<div class="comment">
34                 <span class="comment-avatar">
35                 <img src="avatar1.jpg" alt="avatar">
36                 </span>
37                 <div class="comment-content">
38                     <p class="comment-content-name">EdmundDZhang</p>
39                     <p class="comment-content-article">$comment</p>
40                     <p class="comment-content-footer">
41                         <span class="comment-content-footer-id">#$++floorNumber</span>
42                         <span class="comment-content-footer-device">来自安卓客户端</span>
43                         <span class="comment-content-footer-timestamp">$line</span>
44                     </p>
45                 </div>
46                 <div class="cls"></div>
47                 </div>` + newHtmlContent;
48             comment = ‘‘;
49          else 
50             comment += line;
51         
52     ).on(‘close‘, () => 
53         res.send(oldHtmlContent.replace(‘<div class="comment-list" id="commentList">‘, ‘<div class="comment-list" id="commentList">
‘ + newHtmlContent));
54     )
55 )
56 
57 function writeRecord(comment, datetime) 
58     fs.writeFileSync(‘./records.txt‘, `$comment
$datetime
`,  flag: ‘a‘ );
59 
60 
61 app.listen(8888, ‘127.0.0.1‘);

2018-11-28 23:53:32

评论区抽奖程序(代码片段)

文章目录评论区抽奖程序1.思路2.准备3.实现爬虫爬取数据4.随机数模块抽取5.main函数6.大功告成评论区抽奖程序这个小程序很简陋，没什么难度1.思路使用爬虫爬取评论区数据随机抽取一名幸运用户思路很简单，实现也很... 查看详情

文末送书python实现评论区抽奖功能(代码片段)

「作者主页」：士别三日wyx评论区抽奖功能1.分析评论接口2.获取评论数据3.筛选评论用户4.抽取幸运观众5.完整源码5.1字符串截取的方式5.2正则匹配方式5.3执行结果6.抽奖送书6.1奖励介绍6.2抽奖规则1.分析评论接口 ... 查看详情

mucmuc项目个人总结(代码片段)

...MucMusic一、个人分工1、完成前端页面设计和安卓端的界面实现2、完成搜索功能，用户资料修改功能，评论功能等二、开发总结2.1页面设计项目前期在墨刀根据需求先设计了几张UI原型，因为尚未接触过Android程序开发，与此同时... 查看详情

35.实战：python实现视频去水印（文末源码）(代码片段)

目录前言目的思路代码实现1.请求URL，查看源代码2.源代码中没有就去抓包工具3.拿到视频源链接，继续检索来源4.拿到数据和链接，二进制写入到本地完整源码运行效果总结前言我们在刷某短视频平台时，有些视... 查看详情

❤️python爬虫实现：评论区抽奖（上期开奖）❤️(代码片段)

🍅作者：不吃西红柿 🍅简介：CSDN博客专家🏆、HDZ核心组成员💪、C站总榜前10名✌ 🍅粉丝专属福利：简历模板、PPT模板、学习资料、面试题库。文末领取🍅如觉得文章不错，欢迎点赞... 查看详情

❤️python爬虫实现：评论区抽奖（上期开奖）❤️(代码片段)

java单表实现评论回复功能(代码片段)

Java单表实现评论回复功能1.简介2.功能实现图3.数据库设计4.实体类5.实现思路6.功能实现6.1Sql入手6.2业务实现7.前端实现8.最终成果1.简介最近在写毕业设计的时候发现需要实现一个评论功能，然后看了一下掘金和csdn的评论区&#... 查看详情

评论区抽奖程序2.0(代码片段)

评论区抽奖程序2.0稍微的加了一点点功能，让程序更加的自动化了【送书活动】每周三发文章送书，两本开奖时间为周五晚上8.00下周书籍寄出关注博主，每周抽奖1.程序作用从某CSDN文章的评论区抽取人，至于抽人... 查看详情

博客系统评论功能的实现(代码片段)

由于后端传来的评论数据是列表的形式，而前端要实现将评论按层级展示，直观地看出评论的回复情况。同时为了兼顾功能和美观，要将子评论显示级数限定在二级，而三级之后的评论通过显示回复的评论者的名... 查看详情

php更改评论收件人电子邮件的简单功能(代码片段)

查看详情

pythonb站动态转发动态评论区抽奖（已打包成exe，可以下载食用）(代码片段)

...发布后，计划了这次的python版本，本来的预期是实现同功能的python版并挂我服务器上免费提供抽奖服务来查看详情

b站动态评论区抽奖python版（已打包成exe，可以下载食用）(代码片段)

...发布后，计划了这次的python版本，本来的预期是实现同功能的python版并挂我服务器上免费提供抽奖服务来着。不过写着写着突然发现了之前对API的解析有所漏洞，导致我发现了一个新bug。。。（居然没人提醒我... 查看详情

day87-bbs项目数据库设计与简单登陆验证码(代码片段)

...程：1搞清楚需求（产品经理）(1)基于用户认证组件和Ajax实现登录验证(图片验证码)(2)基于forms组件和Ajax实现注册功能(3)设计系统首页（文章列表渲染）(4)设计个人站点页面---跨表查询，分组查询(5)文章详情页(6)实现文章点赞功... 查看详情

jquery简单几句代码实现星级评论效果(代码片段)

我前面博客写过一个星级评论的原生写法，非常复杂，今天就通过jquery来写一个简单的星级点亮的效果，来看代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.ct-stardisplay:inl 查看详情

博客系统评论功能的实现(代码片段)

b站动态评论+视频评论区抽奖2合1js版本(代码片段)

...资源的大量占用，所以这期新版本提上了开发。本次实现方式使用的b站api，构建get请求调用api获取评论信息，解析json数据存入集合，最后从集合获取中奖者信息。相关API为//用于获取oid"https://api.vc.bilibili.com/dyn... 查看详情

vue+springboot实现评论功能(代码片段)

目录前言难点实现思路数据表设计数据传输格式设计前端递归显示删除评论前言评论系统相信大家并不陌生，在社交网络相关的软件中是一种常见的功能。然而对于初学者来说，实现一个完整的评论系统并不容易。本文... 查看详情

python实现csdn平台自动化定时评论功能实现(代码片段)

Csdn自动化评价功能前言之前一段时间，看到一些博主在文章下自动评论，当然我是欢迎大家为我的文章进行评论。我也思考了一下，如果是我来进行开发自动化评价，我要如何操作。首先，我们需要思考的问... 查看详情