實現簡單的評論區功能
阿新 • • 發佈：2018-11-29
技術分享 view timestamp info \n css代碼 += back 客戶
題述：
使用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 = /\d{4}-\d{2}-\d{2} \d{2}:\d{2}/ //匹配日期 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">\n‘ + newHtmlContent)); 54 }) 55 }) 56 57 function writeRecord(comment, datetime) { 58 fs.writeFileSync(‘./records.txt‘, `${comment}\n${datetime}\n`, { flag: ‘a‘ }); 59 } 60 61 app.listen(8888, ‘127.0.0.1‘);
2018-11-28 23:53:32
實現簡單的評論區功能