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

1.如今咱们来给博客添加用户页面和文章页面。

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

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

 1 //获取一篇文章，根据用户名，发表日期以及文章名精确获取一篇文章
 2 Post.getOne = function(name, day, title, callback) {
 3       //打开数据库
 4       mongodb.open(function (err, db) {
 5         if (err) {
 6           return callback(err);
 7         }
 8         //读取 posts 集合
 9         db.collection('posts', function (err, collection) {
10               if (err) {
11                 mongodb.close();
12                 return callback(err);
13               }
14           //根据用户名、发表日期及文章名进行查询
15               collection.findOne({
16                 "name": name,
17                 "time.day": day,
18                 "title": title
19               }, function (err, doc) {
20                 mongodb.close();
21                 if (err) {
22                   return callback(err);
23                 }
24                 //解析 markdown 为 html
25                 doc.post = markdown.toHTML(doc.post);
26                 callback(null, doc);//返回查询的一篇文章
27               });
28         });
29       });
30 };

　　而后，咱们来实现用户页面和文章页面，打开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>

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