一个简单的blog系统（四） 实现用户页面和文章页面

1.现在我们来给博客添加用户页面和文章页面。

　　1.1 所谓用户页面就是当单击某个用户名链接时，跳转到：域名/u/用户名，并且跳出该用户的所有文章。同样，文章页面就是当单击某篇文章标题时，跳转到：域名/u/用户名/事件/文件名，进入到该文章的页面（也许还有该文章的评论等）

　　首先，我们先打开post.js，将Post.get修改为Post.getAll, 同时将index.js中的Post.get修改为Post.getAll。在post.js最后添加如下代码：

//获取一篇文章，根据用户名，发表日期以及文章名精确获取一篇文章
Post.getOne = function(name, day, title, callback) {
      //打开数据库
      mongodb.open(function (err, db) {
        if (err) {
          return callback(err);
        }
        //读取 posts 集合
        db.collection('posts', function (err, collection) {
              if (err) {
                mongodb.close();
                return callback(err);
              }
          //根据用户名、发表日期及文章名进行查询
              collection.findOne({
                "name": name,
                "time.day": day,
                "title": title
              }, function (err, doc) {
                mongodb.close();
                if (err) {
                  return callback(err);
                }
                //解析 markdown 为 html
                doc.post = markdown.toHTML(doc.post);
                callback(null, doc);//返回查询的一篇文章
              });
        });
      });
};

　　然后，我们来实现用户页面和文章页面，打开index.js,在app.post('/upload')后添加如下代码：

//用户页面路由
router.get('/u/:name', function(req, res) {
    //检查用户是否存在
    User.get(req.params.name, function(err, user) {
        if(!user) {
            req.flash('error', '用户不存在！');
            return res.redirect('/');    //用户不存在则跳转到主页
        }
        //查询并返回该用户的所有文章
        Post.getAll(user.name, function(err, posts) {
            if(err) {
                req.flash('error', err);
                return res.redirect('/');
            }
            res.render('user', {
                title: user.name,
                posts: posts,
                user: req.session.user,
                success: req.flash('success').toString(),
                error: req.flash('error').toString()
            });
        });
    });
});


//文章页面路由
router.get('/u/:name/:day/:title', function(req, res) {
    Post.getOne(req.params.name, req.params.day, req.params.title, function(err, post) {
        if(err) {
            req.flash('error', err);
            return res.redirect('/');
        }
        res.render('article', {
            title: req.params.title,
            post: post,
            user: req.session.user,
            success: req.flash('success').toString(),
            error: req.flash('error').toString()
        });
    });
});

　　最后，我们创建用户页面和文章页面的模板文件：在views文件夹下面新建user.ejs，添加如下代码，同时将index.ejs也做出相应的修改：

<!-- 发表的文章内容 -->
    <div class="list-group">
        <%  posts.forEach(function(post, index) { %> 
        <div class="list-group-item">
            <h4><a href="/u/<%= post.name %>/<%= post.time.day %>/<%= post.title %>"><%= post.title %></a></h4>
            <p class="list-group-item-text" style="padding: 10px 0;">
                <%- post.post %>
            </p>
            <p class="info">
                <a href="/u/<%= post.name %>"><%= post.name %></a>&nbsp;&nbsp;发布于：&nbsp;&nbsp;<%= post.time.minute %>
                <span class='glyphicon glyphicon-comment' style="padding:0 10px;">评论(0)</span>
                <span class="glyphicon glyphicon-share-alt">阅读(0)</span>
            </p>
        </div>
    <% }); %>

　　在views文件夹下新建 article.ejs ，添加如下代码：

<div class='container'>
    <p class="list-group-item-text" style="padding: 10px 0;">
        <%- post.post %>
    </p>
    <p class="info">
        <a href="/u/<%= post.name %>"><%= post.name %></a>&nbsp;&nbsp;发布于：&nbsp;&nbsp;<%= post.time.minute %>
        <span class='glyphicon glyphicon-comment' style="padding:0 10px;">评论(0)</span>
        <span class="glyphicon glyphicon-share-alt">阅读(0)</span>
    </p>
</div>

至此，用户页面和文章页面的相应功能已经实现。