NodeJS简易博客系统（八）功能需求描述及用户模块实现

一、功能需求描述

用一张导图来说明：

二、页面设计

页面设计如下：

三、梳理下整个系统的业务流程

对这个小项目进行业务流程的梳理，流程图大致如下：

四、用户模块实现

1、数据库设计及代码

（1）用户表（users）

（2）博文分类表（categories）

（3）博文评论列表(contents)

从title往下依次是博文标题，分类，浏览次数，所属用户id，评论列表（评论内容，评论所属用户id），发表时间，文章描述，文章详情，数据库版本。

2、用户模块

由上述流程图得用户模块有登录、注册、博文列表、阅读原文及评论功能。

（1）页面代码

首页的界面使用的是bootstrap+jquery框架设计，首页总共有三个div块，一个是header,content-details,login-register。下面是页面的代码：

main_template.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>简单博客系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="/public/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/public/css/index.css">
    <script type="text/javascript" src="/public/js/jquery.js"></script>
    <script type="text/javascript" src="/public/js/bootstrap.js"></script>
    <script type="text/javascript" src="/public/js/index.js"></script>
</head>
<body>
<header>
    <div class="container-fluid header1">
        <span>NodeJS简单博客系统</span>
    </div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    {%if category == ''%}
                    <li><a href="/" class="focus">首页</a></li>
                    {%else%}
                    <li><a href="/">首页</a></li>
                    {%endif%}
                    {%for cate in categories%}
                    {%if category == cate.id%}
                    <li><a href="/?category={{cate.id}}" class="focus">{{cate.name}}</a></li>
                    {%else%}
                    <li><a href="/?category={{cate.id}}">{{cate.name}}</a></li>
                    {%endif%}
                    {%endfor%}
                </ul>

            </div>

        </div>
    </nav>
</header>
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 moveup" id="content">
                <!--文章列表block-->
                {% block content %}
                {% endblock %}
            </div>
            <div class="col-lg-4 col-md-4" >
                {% if userInfo._id %}
                <div class="userinfo spindown" id="userinfo" >
                    <h2>用户信息</h2>
                    <h3 class="account">用户名：{{userInfo.username}}</h3>
                    {% if userInfo.isadmin %}
                    <p>您好，管理员! <a href="/admin/"> 点击这里</a>进入管理页面</p>
                    {% else %}
                    <p>你好，欢迎光临我的博客！</p>
                    {% endif %}
                    <p><a href="javascript:;" class="logout">退出</a></p>
                </div>
                {% else %}
                <div class="register spindown" id="register"  style="display: none">
                    <h2>注册</h2>
                    <div class="line">
                        <span>用户名:</span>
                        <input type="text" name="username" title="username">
                    </div>
                    <div class="line">
                        <span>密码:</span>
                        <input type="password" name="password" title="password">
                    </div>
                    <div class="line">
                        <span>确认:</span>
                        <input type="password" name="repassword" title="repassword">
                    </div>
                    <div class="line">
                        <input type="submit" name="submit" value="注册" >
                    </div>
                    <p class="warning"></p>
                    <p>已有账号? <a href="javascript:;">点击登录</a></p>
                </div>

                <div class="login spindown" id="login" >
                    <h2>登录</h2>
                    <div class="line">
                        <span>用户名:</span>
                        <input type="text" name="username" title="username">
                    </div>
                    <div class="line">
                        <span>密码:</span>
                        <input type="password" name="password" title="password">
                    </div>
                    <div class="line">
                        <input type="submit" name="submit" value="登录" >
                    </div>
                    <h2 class="warning"></h2>
                    <p>还没注册? <a href="javascript:;">点击注册</a></p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>
<footer>
    <p>Copyright © 小马实验室 | 京ICP备11951015号 | 京公网安备11011105210084</p>
    <a href="#"><span class="glyphicon glyphicon-arrow-up"></span></a>
</footer>
</body>
</html>

文章详情article_detail.html

{% extends "main_template.html" %}
{% block content %}
<div class="papers">
    <h2>{{contents.title}}</h2>
    <p class="paperabout">
        作者：<span class="paperinfo">{{contents.user.username}}</span>-
        时间：<span class="paperinfo">{{contents.addtime|date('Y-m-d  H:i:s', -8*60)}}</span>-
        阅读：<span class="paperinfo">{{contents.num}}</span>-
        分类于：<span class="paperinfo">{{contents.category.name}}</span>-
        评论：<span class="paperinfo">{{contents.comment.length}}</span>
    </p>
    <dfn><p>{{contents.composition}}</p></dfn>
    <div class="readmore"><a href="javascript:window.history.back()">返回</a></div>
</div>
<div id="comment">
    <h3 ><strong>评论 </strong> <span class="much"> 共 <em id="commentCount">0</em> 条评论</span></h3>
    <div style="font-size: 22px;">
        <div>
            <textarea  name="name" id="commentarea" placeholder="请填写评论"
            style="height: 150px;width: 100%;"></textarea>
            <input  type="hidden" id="contentid" name="contentid" value="{{contents.id}}">
        </div>
        <button type="submit" id="addcomment" class="btn btn-primary btn-lg">发表评论</button>
    </div>
    {% if userInfo._id %}
    {% else %}
    <h4 class="loginfo" >你还没有登录，请先登录！</h4>
    {% endif %}
    {% if contents.comment.length == 0 %}
    <h4 class="loginfo" >暂无评论，赶紧来评论吧！</h4>
    {% endif %}
    <div id="commentlist">
    </div>
    <div class="pages">
        <a id="prevpage" style="float: left;"><span>上一页</span></a>
        <span id="currentpage"></span> / <span id="totalpage"></span>
        <a id="nextpage" style="float: right;"><span>下一页</span></a>
    </div>
</div>
{% endblock %}

首页index.html

<!--首页-->
{% extends "main_template.html" %}
{% block content %}
 {% for content in contents %}
 <div class="papers">
     <h2>{{content.title}}</h2>
     <p class="paperabout">
         作者：<span class="paperinfo">{{content.user.username}}</span>-
         时间：<span class="paperinfo">{{content.addtime|date('Y-m-d  H:i:s', -8*60)}}</span>-
         阅读：<span class="paperinfo">{{content.num}}</span>-
         分类于：<span class="paperinfo">{{content.category.name}}</span>-
         评论：<span class="paperinfo">{{content.comment.length}}</span>
     </p>
     <dfn><p>description:{{content.description}}</p></dfn>
     <div class="readmore"><a href="/article?contentid={{content.id}}">阅读全文</a></div>
 </div>
 {% endfor %}
<div class="pages">
    <a href="/?category={{category}}&page={{page-1}}" style="float: left;"><span>上一页</span></a>
    <span>{{page}}</span> / <span>{{pages}}</span>
    <a href="/?category={{category}}&page={{page+1}}" style="float: right;"><span>下一页</span></a>
</div>
{% endblock %}

（2）页面对应的js、css代码

index.js

$(function(){
    var loginbox = $("#login");
    var registerbox = $("#register");
    var userinfobox = $("#userinfo");
    loginbox.find("a").on("click",function(){
        loginbox.hide();
        registerbox.show();
    });
    registerbox.find("a").on("click",function(){
        loginbox.show();
        registerbox.hide();
    });    registerbox.find("input[name='submit']").on("click",function(){
        $.ajax({
            type: "post",
            url: "/api/user/register",
            dataType: "json",
            data: {
                username: registerbox.find('input[name="username"]').val(),
                password: registerbox.find('input[name="password"]').val(),
                repassword: registerbox.find('input[name="repassword"]').val()},
            success :function(result){
                console.log(result);                registerbox.find(".warning").html(result.message);
                setTimeout(function(){
                    registerbox.find(".warning").html("");
                },1500);
                if(!result.code){
                    setTimeout(function(){
                        loginbox.show();
                        registerbox.hide();                        registerbox.find('input[name="username"]').val("");
                        registerbox.find('input[name="password"]').val("");
                        registerbox.find('input[name="repassword"]').val("");
                    },1500);
                }
            }

        });

    });
loginbox.find("input[name='submit']").on("click",function(){
        $.ajax({
            type: "post",
            url: "/api/user/login",
            dataType: "json",
            data: {
                username: loginbox.find('input[name="username"]').val(),
                password: loginbox.find('input[name="password"]').val()
                },
            success :function(result){
                console.log(result);
                loginbox.find(".warning").html(result.message);
                setTimeout(function(){
                    loginbox.find(".warning").html("");
                },1500);
                if(!result.code){
                    setTimeout(function(){
                        window.location.reload();
                    },1500);
                }
            }

        });

    });
    userinfobox.find(".logout").on("click",function(){

        $.ajax({
            url:"/api/user/logout",
            success:function(result){
                console.log(result);
                if(!result.code){
                    window.location.reload();
                }
            }
        })

    });


//在页面加载时获取评论
    $.ajax({
        url: '/api/pinglun',
        type:"get",
        dataType:"json",
        data: {
            contentid: $('#contentid').val()
        },
        success: function(result) {
            //console.log(111111);
            render(result.postdata);
            quanju=result.postdata;
        }
    });

//提交评论
    $("#addcomment").on("click",function(){
        $.ajax({
            type:"post",
            url:"/api/comment",
            dataType:"json",
            data:{
                comment: $("#comment").find("textarea").val(),
                contentid: $("#contentid").val()
            },
            success:function(result){
                //console.log(result);
                $("#commentarea").val("");
                render(result.postdata);
                quanju=result.postdata;
            }
        })
    });
    var quanju=null;
    var page=1;
    var limit=3;
    var pagecount=0;
    $("#prevpage").on("click",function(){
       page--;
        render(quanju);
    });
    $("#nextpage").on("click",function(){
        page++;
        render(quanju);
    });
    function render(data) {
        var str = "";
        var start=(page-1)*limit;
        var end = start+limit;
        var comments=data.comment.reverse();
        var showcomments=comments.slice(start,end);
        pagecount = Math.ceil(data.comment.length/limit);
        page = Math.min(pagecount,page);
        page = Math.max(1,page);
        $("#totalpage").html(pagecount);
        $("#currentpage").html(page);
        $("#commentCount").html(comments.length);
        for (var i = 0; i < showcomments.length; i++) {
            str += `<div>
                <span class="commenter">${showcomments[i].user}</span>
                <span class="commenttime">${formatDate(showcomments[i].time)}</span>
                </div>
                <p class="contents">${showcomments[i].comment}</p>`;
        }
        $("#commentlist").html(str);
    }
    function formatDate(d) {
        var date1 = new Date(d);
        return date1.getFullYear() + '-' + (date1.getMonth()+1) + '-' + date1.getDate() + '- ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds();
    }
});

index.css

body{
    background:#ebebeb;
    min-width: 650px;
}
body h2, body h3 {
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none !important;
    color: #fc6423;
}
.container .row .container-fluid {
    padding: 0;
}
.header1{
    height: 200px !important;
    background:url(/public/img/backimg.jpg);
    background-size:cover;

}
.header1 span{
    margin-left: 40px;
    line-height: 200px;
    font-size: 30px;
    color: #fc6423;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
div[class*="col"]{
    padding: 0;
    color:#000;
}
#content .papers{
    height: 500px;
    margin-bottom: 20px;
    background:#fff;
    text-align: center;
    position: relative;
}
#content .papers h2{
    /*height: 80px;*/
    line-height: 50px;
    font-size: 25px;
}
#content .paperabout{
    font-size: 18px;
}
#content .paperinfo{
    color: #fc6423;
}
#content dfn p{
    height: 300px;
    font-size: 25px;
    padding: 20px;
    background: #ddd;
}
#content .readmore{
    width: 150px;
    height: 40px;
    line-height: 36px;
    font-size: 25px;
    background:#fff;
    border:2px solid #fc6423;
    position: absolute;
    bottom: 30px;
    left: 50px;
}
#content .readmore a{
    display: inline-block;
    width: 150px;
    height: 40px;
}
#content .readmore:hover{
    background:#fc6423;
    border:2px solid #fff;
}
#content .pages{
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-bottom:20px;
}
#content .pages a{
    color: #fc6423;
    display: block;
    height: 40px;
    line-height: 40px;
    width: 80px;
    border:1px solid #fc6423;
}
#content .pages a:hover{
    color: #fff;
    background-color: #fc6423;

}
#content .pages>span{
    color: #fc6423;
}
#register{
    background:#fff;
    margin-left: 30px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    transition: 0.5s ease-out;
}
#register h2{
    height: 50px;
    margin-left: 30px;
    line-height: 50px;
    font-size: 24px;
    color: #fc6423;
}
#register .line{
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
}
#register .line input{
    height: 60%;
    outline: none;
    border-color: #fc6423;
}
#register .line input[type="submit"]{
    width: 200px;
    border:none;
    padding: 0;
    background-color: #fc6423;
    line-height: 100%;
}
#register .warning{
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #fc6423;
}
#register>p{
    margin-left: 30px;
}
#login{
    background:#fff;
    padding-bottom: 20px;
    margin-left: 30px;
    margin-bottom: 20px;
    transition: 0.5s ease-out;
}
#login h2{
    height: 50px;
    margin-left: 30px;
    line-height: 50px;
    font-size: 24px;
    color: #fc6423;
}
#login .line{
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
}
#login .line input{
    height: 60%;
    outline: none;
    border-color: #fc6423;
}
#login .line input[type="submit"]{
    width: 200px;
    border:none;
    padding: 0;
    background-color: #fc6423;
    line-height: 100%;
}
#login .warning{
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #fc6423;
}
#login>p{
    margin-left: 30px;
}
#userinfo, #community{
    background:#fff;
    margin-left: 30px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
#userinfo h2, #community h2{
    height: 50px;
    margin-left: 30px;
    line-height: 50px;
    font-size: 24px;
    color: #fc6423;
}
#userinfo h3, #community h3{
    height: 35px;
    margin-left: 30px;
    line-height: 35px;
    font-size: 16px;
}
#userinfo>p{
    text-align: center;
    font-size: 15px;
}
footer{
    height: 60px;
    background:#333;
    position: relative;
}
footer p{
    text-align: center;
    line-height: 60px;
    color: #fff;
    opacity: 0.7;
}
footer a{
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: -70px;
    right: 10px;
    background-color: #fc6423;
    border-radius: 30px;
    text-align: center;
    line-height:100%;
}
footer a span{
    font-size: 30px;
    color: #fff;
    margin-top: 10px;
}
#bs-example-navbar-collapse-1 ul{
    width: 100%;
    padding-left: 15%;
    text-align: center;
}
#bs-example-navbar-collapse-1 li{
    height: 60px;
}
#bs-example-navbar-collapse-1 ul a{
    margin: 0;
    padding: 0;
    color: #fc6423;
    width: 150px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
}
#bs-example-navbar-collapse-1 ul a:hover{
    background: #fc6423;
    color:#fff;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: 0.5s ease-out;
}

#comment{
    padding: 30px;
    background: #fff;

}
#comment h3{
    text-align: left;
    height: 60px;
    line-height: 100%;
    color: #fc6423;
}
#comment h3 .much{
    float: right;
    color: #888;
    font-size: 18px;
}
#comment h4{
    color: red;
    text-align: center;
}
#commentlist{

    margin-bottom: 30px;
}
#commentlist>p{
    background: #eee;
    height: 80px;
    text-indent: 2em;
    padding:5px 20px;
    font-size: 18px;
    color: #555;
    margin-bottom: 10px;
}
#commentlist>div{
    line-height: 40px;
    padding: 5px;
    height: 40px;
}
#commentlist>div .commenter{
    float: left;
    margin-left: 20px;
    color: #fc6423;
}
#commentlist .commenttime{
    float: right;
    margin-right: 20px;
}
@keyframes moveup {
    0%{
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
        filter: alpha(opacity=0);
    }
    50%{
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0.25;
        filter: alpha(opacity=25);
    }
    75%{
         -webkit-transform: translateY(13px);
         transform: translateY(13px);
         opacity: 0.5;
         filter: alpha(opacity=50);
     }
    100%{
          -webkit-transform: translateY(0);
          transform: translateY(0);
          opacity: 1;
          filter: alpha(opacity=100);
      }

}
@keyframes turndown {
    0%{
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100%{
        opacity: 1;
        filter: alpha(opacity=100);
    }
}
.moveup{
    -webkit-animation: moveup 0.7s ease-in;
    animation: moveup 0.7s ease-in;
    -webkit-animation-fill-mode: forwards;
}
.spindown{
    -webkit-animation: turndown 0.7s  ease-in;
    animation: turndown 0.7s  ease-in;
    -webkit-animation-fill-mode: forwards;
}

3、后台代码

（1）项目配置

package.json

{
  "name": "myblog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.2",
    "cookies": "^0.7.1",
    "express": "^4.16.2",
    "mongoose": "^4.12.4",
    "promise": "^8.0.1",
    "swig": "^1.4.2"
  }
}

app.js

//加载express模块
var express = require("express");
//加载swig模块
var swig = require("swig");
var User = require("./models/user");
//加载mongoose数据库，这个中间件是nodejs与mongoDB数据库的桥梁
var mongoose = require("mongoose");
var Cookies = require('cookies');
//创建一个新的服务器，相当于httpcreateServer
var app = express();

//静态文件资源托管的，js css img等
app.use("/public",express.static( __dirname+"/public"));

//定义应用使用的模板引擎，第一个参数：所要渲染模板文件的后缀，也是模板引擎的名称，第二个参数：渲染的方法
app.engine("html",swig.renderFile);
//定义模板文件存放的路径，第一个参数必须是views，这是模块内指定的解析字段，第二个参数为路径：./表示根目录
app.set("views","./views");
//注册使用模板引擎；第一个参数不能变，第二个参数和上面的html一致
app.set("view engine","html");
//设置完就可以直接在res中渲染html文件了：res.render("index.html",{要渲染的变量})第一个参数是相对于views文件夹

//在开发过程中要取消模板缓存，便于调试
swig.setDefaults({cache : false});

//加载bodyparser模块，用来解析前端提交过来的数据
var bodyparser = require("body-parser");
app.use(bodyparser.urlencoded({extended:true}));

app.use( function(req, res, next) {
    req.cookies = new Cookies(req, res);
    req.userInfo = {};
    if(req.cookies.get('userInfo')){
        var str1 = req.cookies.get('userInfo');
        req.userInfo=JSON.parse(str1);
        User.findById(req.userInfo._id).then(function(userInfodata){
            req.userInfo.isadmin = Boolean(userInfodata.isadmin);
        });
    }
    next();

} );
//浏览器地址映射
app.use("/admin" ,require("./routers/admin"));
app.use("/" ,require("./routers/main"));
app.use("/api" ,require("./routers/api"));
// 连接数据库
mongoose.connect("mongodb://localhost:27017/myBlog",{useMongoClient:true},function (err) {
    if(err){
        console.log("数据库连接失败！");
    }else{
        console.log("数据库连接成功！");
        app.listen(3000);
    }
});

（2）schemas

users.js

var mongoose = require("mongoose");
module.exports = new mongoose.Schema({
    username: String,
    password: String,
    isadmin:{
        type:Boolean,
        default:false
    }
});

categories.js

var mongoose = require("mongoose");
module.exports = new mongoose.Schema({
    name: String
});

contents.js

var mongoose = require("mongoose");
module.exports = new mongoose.Schema({
    title: String,
    category : {
        type:mongoose.Schema.Types.ObjectId,
        ref : "Category"
    },
    composition:{
        type: String,
        default : ""
    },
    description :{
        type: String,
        default : ""
    },
    user:{
        type:mongoose.Schema.Types.ObjectId,
        ref : "User"
    },
    num:{
        type:Number,
        dafault:0
    },
    addtime:{
        type:Date,
        default: new Date()
    },
    comment:{
        type:Array,
        default:[]
    }
});

（3）models

user.js

var mongoose = require("mongoose");
var userschama = require("../schemas/users");
module.exports = mongoose.model("User",userschama);

category.js

var mongoose = require("mongoose");
var userschama = require("../schemas/users");
module.exports = mongoose.model("User",userschama);

contents.js

var mongoose = require("mongoose");
var contentschama = require("../schemas/contents");
module.exports = mongoose.model("Content",contentschama);

（4）路由（routers）

api.js

var express = require("express");
var User = require("../models/user");
var Content = require("../models/content");
var router= express.Router();

//统一返回给前端的数据格式
var resdata;
router.use(function(req,res,next){
    resdata = {
        code:0,
        message:""
    };
    next();
});
router.post("/user/register",function(req ,res ){
    var username = req.body.username;
    var password = req.body.password;
    var repassword = req.body.repassword;
    if(username == ""){
        resdata.code=1;
        resdata.message="用户名不能为空！";
        res.json(resdata);
        return;
    }
    if(password == ""){
        resdata.code=2;
        resdata.message="密码不能为空！";
        res.json(resdata);
        return;
    }
    if(password != repassword){
        resdata.code=3;
        resdata.message="两次输入的密码不一致！";
        res.json(resdata);
        return;
    }
    User.findOne({
        username:username
    },function(err,userinfo){
        if(err){
            console.log(err);
        }
        if(userinfo){
            resdata.code = 4;
            resdata.message = "该用户已被注册！";
            res.json(resdata);
            return false;
        }else{
            var newuser = new User({
                username: username,
                password: password
            });
            newuser.save();
            resdata.message = "注册成功！";
            res.json(resdata);
        }
    });
});
router.post("/user/login",function(req ,res ){
    var username = req.body.username;
    var password = req.body.password;
    if(username == ""||password==""){
        resdata.code=1;
        resdata.message="用户名和密码不能为空！";
        res.json(resdata);
        return;
    }
    User.findOne({
        username:username,
        password:password
    },function(err,userinfo){
        if(err){
            console.log(err);
        }
        if(!userinfo){
            resdata.code = 2;
            resdata.message = "用户名或密码错误！";
            res.json(resdata);
            return false;
        }
        resdata.message = "登录成功！";
        resdata.userinfo={
            id:userinfo._id ,
            username:userinfo.username,
            isadmin:userinfo.isadmin
        };
        req.cookies.set('userInfo', JSON.stringify({
            "_id": userinfo._id,
            "username": userinfo.username,
            "isadmin":userinfo.isadmin
        }));

        res.json(resdata);

    })

});
router.get("/user/logout",function(req ,res ){
    req.cookies.set('userInfo', null);
    res.message="退出成功！";
    res.json(resdata);
});
router.get('/pinglun', function(req, res) {
    var contentid = req.query.contentid || '';
    Content.findOne({
        _id: contentid
    }).then(function(content) {
        //content.comment.reverse();
        resdata.postdata = content;
        //resdata.data.comments.reverse();
        res.json(resdata);
    })
});
router.post("/comment",function(req,res){
    var id = req.body.contentid;
    var commentdata={
        comment:req.body.comment||"",
        user:req.userInfo.username,
        time: new Date()
    };
    Content.findOne({_id:id}).then(function(thiscon){
        if(commentdata.comment!=""){
            thiscon.comment.push(commentdata);
        }
        //thiscon.comment.reverse();
        thiscon.save().then(function(newcon){
            resdata.postdata = newcon;
            resdata.message="评论成功！";
            res.json(resdata);
            //console.log(newcon);
        });

    });

});

module.exports=router;

main.js

var express = require("express");
var router= express.Router();
var Category = require("../models/category");
var Content = require("../models/content");

var data;

//处理通用的数据,首页，分类页，每篇文章详情页均需要的变量
router.use(function (req, res, next) {
    data = {
        userInfo: req.userInfo,
        categories: []
    };
    Category.find().then(function(categories) {
        data.categories = categories;
        next();
    });
});

//渲染首页
router.get("/", function(req, res) {
    data.category = req.query.category ||"";
    data.count = 0;
    data.page = Number(req.query.page || 1);
    // 默认两条数据
    data.limit = 2;
    data.pages = 0;
    var where = {};
    if (data.category) {
        where.category = data.category
    }
    Content.where(where).count().then(function(count) {
        data.count = count;
        //计算总页数
        data.pages = Math.ceil(data.count / data.limit);
        //取值不能超过pages
        data.page = Math.min( data.page, data.pages );
        //取值不能小于1
        data.page = Math.max( data.page, 1 );
        var skip = (data.page - 1) * data.limit;
        return Content.where(where).find().limit(data.limit).skip(skip).populate(['category', 'user']).sort({
            addtime:-1
        });
    }).then(function(contents) {
        data.contents = contents;
        //console.log(data);
        res.render('main/index', data);
    })
});
//进入详细阅读部分
router.get("/article",function(req,res){
    var id = req.query.contentid||"";
    Content.findOne({_id:id}).populate(["category","user"]).then(function(content){
        data.contents = content;
        content.num++;
        content.save();
        //console.log(data);
        res.render("main/article_detail",data);
    });
});

module.exports = router;

（五）运行效果

（1）首页

（2）博文详情页面

下篇博文将说明后台管理的设计与实现。

全部评论

相关推荐

昨天 20:41
巨野县第一中学 Java
秋招公司统计（暂无offer版）
一共收到了这些面试！！！华为、三七互娱、招商云创、中科创达、格力、阳光电源、58同城、经纬恒润、去哪儿、浪潮、华云三维、大智慧、恒丰银行、麦吉太文、卓望、维信金科、吉利、迅雷、金山测开、泰隆银行、极智嘉、葡萄城、瑞幸、联通西安研究院、菏泽联通、菏泽电信、北京农商银行、山东港口、默沙东走完流程的有：华为、招商云创、格力、浪潮、瑞幸、中科创达感受：华为不知道会是个什么结果希望是个好结果瑞幸刚hr面完希望会是个好结果吧山东港口刚一面完希望也能有点好消息吧招商云创发邮件问了hr排序太靠后了格力给发offer但是离家好远啊而且绩效好高浪潮给发offer但是风评好差&amp;加班都没加班费中科创达给发of...
投递吉利汽车分公司等公司10个岗位 > 25届秋招总结
点赞 评论 收藏
分享
11-20 11:02
门头沟学院 Java
点赞 评论 收藏
分享
11-06 16:12
中国地质大学（武汉） 产品经理
杜蕾斯也拒绝我，以后不用了
#牛客创作赏金赛#
jack_miller：杜:你不用我那你就用我的美赞臣
牛客创作赏金赛
点赞 评论 收藏
分享
10-08 14:04
门头沟学院 测试开发
点赞 评论 收藏
分享
11-22 00:55
武汉理工大学 汽车制造其它
点赞 评论 收藏
分享
点赞 收藏 评论
分享

全站热榜

正在热议
# 25届秋招总结 #
330147次浏览 3120人参与
# 上班苦还是上学苦呢？ #
73069次浏览 654人参与
# 阿里云管培生offer #
37186次浏览 423人参与
# 地方国企笔面经互助 #
4547次浏览 12人参与
# 如果有时光机，你最想去到哪个年纪？ #
21944次浏览 408人参与
# 选完offer后，你后悔学本专业吗 #
21980次浏览 159人参与
# 百度开奖 #
185043次浏览 1160人参与
# 我的实习求职记录 #
6071445次浏览 83549人参与
# 如何一边实习一边秋招 #
996948次浏览 12665人参与
# 找工作时遇到的神仙HR #
553581次浏览 3801人参与
# 入职第一天，你准备什么时候下班 #
21655次浏览 144人参与
# 招聘要求与实际实习内容不符怎么办 #
10803次浏览 277人参与
# bilibili求职进展汇总 #
33296次浏览 357人参与
# 许愿池 #
214863次浏览 2535人参与
# 学历or实习经历，哪个更重要 #
54017次浏览 423人参与
# 你今年的平均薪资是多少？ #
70971次浏览 345人参与
# 实习工作，你找得还顺利吗？ #
247882次浏览 2910人参与
# 通信硬件薪资爆料 #
609332次浏览 5194人参与
# 海康威视求职进展汇总 #
400840次浏览 3408人参与
# 携程求职进展汇总 #
135875次浏览 932人参与
# 正在实习的你，几点下班 #
53417次浏览 396人参与
# 工作两年想退休了 #
53136次浏览 672人参与
牛客网
牛客企业服务