【Javascript】MiniComment _ 动态评论系统 _Nodejs_Vue_Mongodb_综合实践
本帖最后由 小木曾雪菜 于 2020-11-25 17:35 编辑# MiniComment _ 动态评论系统 _Nodejs_Vue_Mongodb_综合实践
## 1. 前言
以往都是在论坛里发逆向的教程，今天来尝试点别的~~
之前因为用到frida，相对系统的学习了一下JavaScript。然后又接触了jquery，Node.js，同时也关联的学习了Vue.js和mongodb。学了不少，感觉需要来实践一下。前一段时间自己搞了个(https://blog.schnee.moe/)，由于是静态博客，没法实现动态评论。我们往往采取动静结合的方法，即博客本身为静态，外加动态评论。
第三方的感觉也是感觉个别地方有点问题，比如说github相关的必须用github账号才能评论；disqus国内访问不了；valine需要实名认证麻烦。
虽然开源的评论系统也有，虽然功能很强大，但是都是比较庞大，不够精简，改起来也比较麻烦。
简化版的评论代码不是很多，于是就想着自己搞一个了，正好作为实践，了解一下前后端如何配合的。同时我认为这个例子对于初接触web开发的人，是个很不错的参考例子。
## 2. MiniComment介绍
!(https://github.com/YuriSizuku/MiniComment/raw/master/screenshot/minicomment_v0.7.png)
!(https://github.com/YuriSizuku/MiniComment/raw/master/screenshot/minicomment_v0.8_markdown.png)
**MiniComment** 评论系统前端由Vue编写而来，实现了分页系统，结合`marked`可以渲染markdown格式（见下图）。可以点reply回复指定的楼层，点击并跳转到引用处（暂时还没做子楼层）。并且有输入验证码回复的功能。前端页面可以嵌套到任意页面中，也可以通过`$.load()`动态加载，用法如下：
```html
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta article_title="Comments" api_host="http://localhost:3003"/>
<meta comment_view_limit="10" page_limit="10"/>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/marked@1.2.3/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/styles/vs.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
<div id="mini_comment"></div>
<script>$("#mini_comment").load("/ui_comment.xhtml");</script>
```
后端是Node.js和mongodb，Node.js理论上可以部署在cloudflare的worker里，mongodb可以用atlas的云服务，可以做到serverless的后端。
用法和源码详见我的github (https://github.com/YuriSizuku/MiniComment)，如果觉得还不错，还请点个star~
实例demo可以见我的博客 (https://blog.schnee.moe/comments/) ~
## 3. 数据库设计
数据库采取了mongodb，因为nosql比较轻量配置和修改起来也比较方便。但是为了方便维护，还是采取了`2范式`的传统关系结构。数据类型有`mongoose`的`shceme`来定义。
数据库定义与相关操作如下：
### **model_comment.js**
```javascript
const mongoose = require('mongoose');
const commentSchema = new mongoose.Schema({
article_title: String,
date: {type:Date, default:new Date()}, //this default is the server start time
ref: {type:mongoose.ObjectId, default:null},
idx: Number,
name: String,
content: String,
_email: String,
_hide:{type:Boolean, default:false},
})
const Comment = new mongoose.model("comments", commentSchema);
async function getCommentCount(article_title){
return await Comment.find({"article_title":article_title, _hide:false})
.countDocuments();
}
async function getComment(article_title, skip, limit){
var comments = await Comment.find({article_title:article_title, _hide:false},
{_email:0, _hide:0, __v:0})
.skip(skip)
.limit(limit)
.sort({idx:-1});
return comments;
}
async function submitComment(article_title, ref, name, email, content){
idx = await Comment.find({article_title:article_title}).countDocuments();
if(ref!=undefined){
res = await Comment.find({id:ref, article_title:article_title})
if(res==[]) return false;
}
comment = new Comment({
article_title: article_title,
date: new Date(),
ref: ref,
idx: idx+1,
name: name,
content: content,
_email: email, })
if (res=await comment.save()){
console.log(res)
return true;
}
return false;
}
module.exports = {Comment, getCommentCount, getComment, submitComment}
```
## 4. 后端api设计与express中间件
目前我们需要实现几个功能：
- 获取评论数量（count）`/api/comment/count`
- 获取一部分评论（skip，limit）并默认按照时间倒叙排序 `/api/comment/get`
- 提交评论 `/api/comment/submit`
- 请求验证码用于提交评论 `/api/captcha`
这里采取了`express`这个轻量级的框架，路由功能和各种中间件的理念非常值得学习。中间件的概念特别像流水线，结果前面中间件处理，通过`next`函数传给下一个中间件。
中间件常用方法：
- `app.use(path, mid)`全局使用中间件函数`async (req, res, next) =>{}`，
- 中间件函数`async (req, res, next) =>{}`加到参数里。
- 路由中间件`router = express.Router()`，定义了get或post的各种路由，然后在`app.use('/', router)`使用。
- 关于验证和log等公用方法，可以写成自定义中间件方便管理。见`logMid`, `authCaptchaMid`
为了让代码清楚整洁，全部采取了`async` `await`的方式。
### server.js
```javascript
const PORT = 3003;
const express = require('express');
var bodyParser = require('body-parser');// must use body-paser to get post payload
const {api_comment_router} = require('./api_comment');
console.log(api_comment_router)
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use('/', api_comment_router); // 运用中间件使代码清晰，增加可移植性
var server = app.listen(PORT, function () {
var host = server.address().address;
var port = server.address().port;
console.log("comment server at http://%s:%s", host, port);
})
```
### api_comment.js
```javascript
// 为了看起来结构更清晰，此处只保留核心代码，详见我的github ，https://github.com/YuriSizuku/MiniComment
const express = require('express');
const crypto = require('crypto');
const svgCaptcha = require('svg-captcha');
const {Comment, getComment, submitComment, getCommentCount} = require('./model_comment'); //datebase
const router = express.Router();
var SALT = svgCaptcha.randomText(4);
(function loop(interval){
//console.log("SALT changed!");
SALT = svgCaptcha.randomText(4);
setTimeout( ()=>{loop(interval)}, interval)
})(600000); //每隔一段时间改变盐
const corsMid = async (req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Expose-Headers', '*'); //use all headers
next();
}
const authCaptchaMid = async(req, res, next) => { // 无session的验证码验证
let text = req.body.captcha_code;
let hash = req.body.captcha_hash;
if(text!=undefined && hash!=undefined ){
let hash2 = crypto.createHash('sha1').update(text.toLowerCase() + SALT).digest('hex');
if(hash2==hash) {
next();
return;
}
}
res.writeHead(400, {message:"Captcha wrong, Please input again!"});
res.end();
}
const logMid = async(req, res, next) =>{
let time = new Date(new Date().getTime() - new Date().getTimezoneOffset()*60*1000).toLocaleString('zh', { hour12: false, timeZone: 'UTC'});
console.log(time, req.header('x-forwarded-for'), req.path, req.query, req.body);
next();
}
router.get('/api/captcha', logMid, corsMid, async (req, res) => {
let cap = svgCaptcha.create({height:30, width:90, fontSize:30});
let hash = crypto.createHash('sha1').update(cap.text.toLowerCase() + SALT).digest('hex');
res.json({data:cap.data, hash:hash});
})
router.get('/api/comment/count', logMid, corsMid, async (req, res) => {
count = await getCommentCount(req.query.article_title);
res.json({count:count});
})
router.get('/api/comment/get', logMid, corsMid, async (req, res) => {
var {article_title, limit, skip} = req.query;
skip = parseInt(skip);
limit =parseInt(limit);
if(limit==undefined || limit == NaN) limit = 10;
if(skip==undefined || skip == NaN) skip = 0;
comments = await getComment(article_title, skip, limit);
res.json(comments);
})
router.get("/api/comment/refidx", logMid, corsMid, async (req, res) => {
var {ref} = req.query; // 取得引用的id
var comment = await Comment.findById(ref);
res.json({refidx: comment.idx});
return;
})
router.post('/api/comment/submit', logMid, corsMid, authCaptchaMid, async (req, res) => {
var {article_title, ref, name, email, content} = req.body;
if(await submitComment(article_title, ref, name, email, content)){
res.writeHead(200, {message:"Submit comment successfully!"});
res.end();
}
else{
res.writeHead(400, {message:"Unable to submit comment!"});
res.end();
}
})
module.exports = {api_comment_router: router};
```
## 5. 前端设计
相比与后端，我认为前端设计比较费劲。对于没什么前端经验的来说，排版真是挺麻烦的。首先需要设计，然后对齐是真的头疼，调css后死活不动，要么就全乱套了。
为了简化，不用`vue-cli`也不用`webpack`，全纯手写`html`，`css`和`Vue.js`代码。Vue的设计理念就是数据驱动，数据与显示试图同步。此项目前端主要思想是：
- 用`$.get`来调用api，得到当前页的评论，同时缓存评论
- `v-for` 和结合`marked`渲染得到的评论，同时根据评论数量来选择分页，分页跳转再次获取评论
- `@submit`用`$.post`提交评论
### ajax后端交互部分代码：
```javascript
async function get_comment_count() {
return new Promise(resolve =>{
$.ajax(API_HOST + "/api/comment/count", {
dataType:'json',
data: {article_title:article_title}})
.done(function (data){return resolve(data.count);})})
}
async function get_comments(article_title, skip, limit){
return new Promise(resolve =>{
$.ajax(API_HOST + "/api/comment/get", {
dataType:'json',
method: 'GET',
data: {
article_title: article_title,
skip: skip,
limit: limit
}})
.done(function (data){return resolve(data);})})
}
async function submit_comment(article_title, ref, name, email, content, captcha_code, captcha_hash){
return new Promise(resolve =>{
$.ajax(API_HOST + "/api/comment/submit", {
method: 'POST',
data: {
article_title: article_title,
ref: ref,
name: name,
email: email,
content: content,
captcha_code: captcha_code,
captcha_hash: captcha_hash
}
})
```
### markdown渲染与代码块高亮化
```javascript
// 此处省略与markdown无关的Vue部分代码
(function init_marked() { // 初始化marked与highlight.js插件，并且显示行号（通过table实现）
var rendererMD = new marked.Renderer();
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: true,
highlight: function (code, lang) { //the highlight style is depending on css
if(hljs==undefined || hljs==null) return code;
let validLang = hljs.getLanguage(lang) ? lang : 'c++';
let highlight_code =hljs.highlight(validLang, code).value;
if(hljs.lineNumbersValue==undefined || hljs.lineNumbersValue==null){
return highlight_code
}
returnhljs.lineNumbersValue(highlight_code);
}
});
})();
var app_comment_block = new Vue({
el: '#comment_view',
data: {
comment_view_limit: $("meta").length > 0 ? parseInt($("meta").attr('comment_view_limit')): 10,
comments_count : 0,
comments: [],
comments_view: null,
page_limit: $("meta").length > 0 ? parseInt($("meta").attr('page_limit')): 10,
page_count : 0,
page_view : [], // ['«', 1, 2, 3, '»'],
cur_page : 1,
text_type: "md",
refmap: {}
},
methods: {
//...
render_md: function(){
if(this.comments_view==null || this.comments_view==undefined) return;
if(marked==undefined) return;
for(i=0;i<this.comments_view.length;i++){
this.comments_view.html = marked(this.comments_view.content);
//console.log(this.comments_view.html);
}
this.$forceUpdate();
}
//...
}
```
需要注意的是Vue库函数必须要提前加载，`new Vue(el:'', data:{}, methods:{})`要在body加载完成后执行。同理`marked`也是，要提前加载相关的依赖库，如`hightlight.js`。
至于前端界面显示的其他代码，太长了，这里就省略了。详见我github中的(https://github.com/YuriSizuku/MiniComment/blob/master/public/ui_comment.xhtml), (https://github.com/YuriSizuku/MiniComment/blob/master/public/ui_comment.js)。
## 附录：说说我hexo 修改原则与方法
hexo我是用了butterfly这个主题，这个主题非常好看，而且也不感觉花里胡哨，
设置里有很多东西可调，但是有些细节需要自己调一下，比如说页面标题颜色、有些页面太空旷，需要加张图什么的。
我的原则是尽量不修改模板，这样更新主题的时候比较方便，不用merge，兼容性比较好。
因此我的做法是，通过前端css的覆盖来调整样式，没法调整的用js方法来动态改变，包括评论系统也是这么动态加进来的。详见我的另一篇博客文章(https://blog.schnee.moe/posts/MyHexo/) 楼主真大佬级。谢谢分享。
页:
[1]