NodeJS实战利用Express&MongoDB搭建博客（10）内容分类及内容详情

博客布局与路由解析

最新推荐文章于 2025-03-27 08:39:19 发布

原创最新推荐文章于 2025-03-27 08:39:19 发布 · 399 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Node实战 #MongoDB实战 #Express实战 #Node搭建博客 #MongoDB数据库实战

JavaScript 同时被 3 个专栏收录

152 篇文章

订阅专栏

NodeJS

35 篇文章

订阅专栏

后端

17 篇文章

订阅专栏

本文深入探讨了博客网站的布局设计与路由配置细节，通过分析实际代码，揭示了如何使用模板引擎实现动态页面生成，以及如何通过Express路由处理请求，为读者提供了全面的博客系统架构理解。

分类显示内容

/views/main/layout.html

<nav>
    <div class="menu">
        {%if category == ''%}
        <a href="/" class="focus">首页</a>
        {%else%}
        <a href="/">首页</a>
        {%endif%}

        {%for cate in categories%}
        {%if category == cate.id%}
        <a href="/?category={{cate.id}}" class="focus">{{cate.name}}</a>
        {%else%}
        <a href="/?category={{cate.id}}">{{cate.name}}</a>
        {%endif%}
        {%endfor%}
    </div>
</nav>

/views/main/index.html

{%extends 'layout.html'%}

{%block content%}
    {%for content in contents%}
    <div class="listBox">
        <h1>{{content.title}}</h1>
        <p class="colDefault">
            作者：<span class="colInfo">{{content.user.username}}</span> -
            时间：<span class="colInfo">{{content.addTime|date('Y年m月d日 H:i:s', -8*60)}}</span> -
            阅读：<span class="colInfo">{{content.views}}</span> -
            评论：<span class="colInfo">{{content.comments.length}}</span>
        </p>
        <dfn><p>{{content.description}}</p></dfn>
        <div class="function"><a href="/view?contentid={{content.id}}">阅读全文</a></div>
    </div>
    {%endfor%}

    <div class="pager">
        <ul class="clear">

            <li class="previous">

                {%if page <= 1%}
                <span>没有上一页了</span>
                {%else%}
                <a href="/?category={{category}}&page={{page-1}}">上一页</a>
                {%endif%}

            </li>

            {%if pages > 0%}
            <li>
                <strong>{{page}} / {{pages}}</strong>
            </li>
            {%endif%}

            <li class="next">

                {%if page >= pages%}
                <span>没有下一页了</span>
                {%else%}
                <a href="/?category={{category}}&page={{page+1}}">下一页</a>
                {%endif%}

            </li>

        </ul>
    </div>
{%endblock%}

/routers/main.js

var express = require('express');
var router = express.Router();
var Category = require('../models/Category');
var Content = require('../models/Content');
/**
 * 首页
 */
router.get('/',function (req,res,next) {

    var data = {
        userInfo:req.userInfo,
        category:req.query.category||'',
        categories:[],

        count:0,
        page : Number(req.query.page || 1),
        limit : 10,
        pages : 0
    }

    var where = {};
    if(data.category){
        where.category = data.category;
    }
    //读取所有分类
    Category.find().then(function (categories) {
        data.categories = categories;

        return 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;
        res.render('main/index',data);
    });
});

module.exports = router;

内容详情

/views/main/view.html

{%extends 'layout.html'%}

{%block content%}
    <div class="listBox">
        <h1>{{content.title}}</h1>
        <p class="colDefault">
            作者：<span class="colInfo">{{content.user.username}}</span> -
            时间：<span class="colInfo">{{content.addTime|date('Y年m月d日 H:i:s', -8*60)}}</span> -
            阅读：<span class="colInfo">{{content.views}}</span> -
            评论：<span class="colInfo">{{content.comments.length}}</span>
        </p>
        <dfn>
            {{content.content}}
        </dfn>
    </div>

    

<script src="/public/js/comment.js"></script>
{%endblock%}

/routers/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('/view',function (req,res) {
   var contentId = req.query.contentid || '';
   Content.findOne({
       _id:contentId
   }).then(function (content) {
       data.content = content;

       content.views++;
       content.save();
       res.render('main/view',data);
   });
});
module.exports = router;