一個簡單的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>

至此，用戶頁面和文章頁面的相應功能已經實現。