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

快来打我* 2022-05-13 14:44 304阅读 0赞

# 一、功能需求描述 #

用一张导图来说明：

![70][]

# 二、页面设计 #

页面设计如下：

![70 1][]

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

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

![70 2][]

# 四、用户模块实现 #

## 1、数据库设计及代码 ##

### （1）用户表（users） ###

![70 3][]

### （2）博文分类表（categories） ###

![70 4][]

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

![70 5][]

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

## 2、用户模块 ##

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

### （1）页面代码 ###

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

main\_template.html:

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

&lt;/div&gt;

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

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

文章详情article\_detail.html

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

首页index.html

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

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

index.js

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>$(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 &lt; showcomments.length; i++) {
            str += `&lt;div&gt;
                &lt;span class="commenter"&gt;${showcomments[i].user}&lt;/span&gt;
                &lt;span class="commenttime"&gt;${formatDate(showcomments[i].time)}&lt;/span&gt;
                &lt;/div&gt;
                &lt;p class="contents"&gt;${showcomments[i].comment}&lt;/p&gt;`;
        }
        $("#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();
    }
});</pre> </td> 
  </tr> 
 </tbody> 
</table>

index.css

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>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&gt;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&gt;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&gt;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&gt;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&gt;p{
    background: #eee;
    height: 80px;
    text-indent: 2em;
    padding:5px 20px;
    font-size: 18px;
    color: #555;
    margin-bottom: 10px;
}
#commentlist&gt;div{
    line-height: 40px;
    padding: 5px;
    height: 40px;
}
#commentlist&gt;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;
}</pre> </td> 
  </tr> 
 </tbody> 
</table>

## 3、后台代码 ##

### （1）项目配置 ###

package.json

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>{
  "name": "myblog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; 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"
  }
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

app.js

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>//加载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);
    }
});
</pre> </td> 
  </tr> 
 </tbody> 
</table>

### （2）schemas ###

users.js

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>var mongoose = require("mongoose");
module.exports = new mongoose.Schema({
    username: String,
    password: String,
    isadmin:{
        type:Boolean,
        default:false
    }
});
</pre> </td> 
  </tr> 
 </tbody> 
</table>

categories.js

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>var mongoose = require("mongoose");
module.exports = new mongoose.Schema({
    name: String
});</pre> </td> 
  </tr> 
 </tbody> 
</table>

contents.js

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>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:[]
    }
});</pre> </td> 
  </tr> 
 </tbody> 
</table>

### （3）models ###

user.js

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>var mongoose = require("mongoose");
var userschama = require("../schemas/users");
module.exports = mongoose.model("User",userschama);</pre> </td> 
  </tr> 
 </tbody> 
</table>

category.js

contents.js

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>var mongoose = require("mongoose");
var contentschama = require("../schemas/contents");
module.exports = mongoose.model("Content",contentschama);</pre> </td> 
  </tr> 
 </tbody> 
</table>

### （4）路由（routers） ###

api.js

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>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;</pre> </td> 
  </tr> 
 </tbody> 
</table>

main.js

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre>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;</pre> </td> 
  </tr> 
 </tbody> 
</table>

## （五）运行效果 ##

### （1）首页 ###

![70 6][]

### （2）博文详情页面 ###

![70 7][]

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

[70]: /images/20220504/e2ee316e5f234410aa3e2b22a39a2818.png
[70 1]: /images/20220504/4e85426b58384367aa26cec85711cfa1.png
[70 2]: /images/20220504/598b5e4b8a7c45b0a57e499a76fdf696.png
[70 3]: /images/20220504/7404252c4d594ff78d0555b3a89da3ea.png
[70 4]: /images/20220504/561eb88b728746e3b1ec30fea2cd6e8f.png
[70 5]: /images/20220504/20fd3a81429e4b9794bbf5bc9657f2a6.png
[70 6]: /images/20220504/3bc66d08aa914f14b5ea50ba242d343b.png
[70 7]: /images/20220504/51d45fb4dfd147d199177b61ab05787c.png