nodejs實戰express筆記之實作使用者和文章頁面

本筆記所有文章均算是仿照趙坤的node.js實戰一書，記錄學習過程
           

概念

• 使用者頁面：單擊某個使用者連結名，跳轉到：

  域名/u/使用者

  ，并列出該使用者的所有文章

• 文章頁面：同理，某個文章的頁面

  當通路這些頁面的時候，會從路徑中提取使用者名，時間，标題等查詢資料庫并傳回查詢的文章資訊，然後渲染文章頁模闆（article.ejs)生成頁面顯示給使用者。

是以，整體步驟如下，

• 修改資料庫函數，便于擷取文章資訊
• 建立新的使用者和文章路由規則
• 建立使用者和文章ejs模闆

修改post.js的資料庫擷取函數

1. Post.get改為Post.getAll,同時把調用該函數的其它檔案也相應改名，如index.js中的
2. 建立Post.getOne()函數

//擷取一篇文章
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
                doc.post= markdown.toHTML(doc.post);
                callback(null,doc);
            });
        });
    });
};
           

添加使用者頁面的路由規則

在

app.post('/upload')

後添加如下代碼

//使用者頁路由
    app.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('err',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()
                });
            });
        });
    });
           

添加文章頁的路由

接着上面的使用者路由，添加下面代碼

//文章頁路由
    app.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('err',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()
                });
            });
    });
           

建立user.ejs，并把首頁index.ejs也修改成如下代碼

<%- include header %>
    <% posts.forEach(function(post,index){ %>
    <p><h2>
        <a href="/u/<%= post.name %>/<%= post.time.day %>/<%= post.title %>"><%= post.title %></a>
    </h2></p>
    <p class="info">
      作者：<a href="/u/<%= post.name %>"><%= post.title %></a>
      日期：<%= post.time.minute %>
    </p>
    <p><%- post.post %></p> //首頁中可以把這個删掉
    <%  }) %>
<%- include footer %>
           

建立article.ejs模闆，以供渲染

<%- include header %>
    <p class="info">
      作者：<a href="/u/<%= post.name %>"><%= post.name %></a>
      日期：<%= post.time.minute %>
    </p>
    <p><%- post.post %></p>
<%- include footer %>
           

小結

至此，實作使用者和文章頁面功能完成，中間因為敲錯字母，出了不少岔子。以後注意

比如：

• Post.getOne()函數在調用時沒注意，寫成了，getone()

• error:req.flash('error').toString()

  的

  toString()

  敲成了

  toSring()

  找了好久才找的，要注意。