第4章 實(shí)現(xiàn)用戶頁面和文章頁面

現(xiàn)在，我們來給博客添加用戶頁面和文章頁面。

所謂用戶頁面就是當(dāng)點(diǎn)擊某個(gè)用戶名鏈接時(shí)，跳轉(zhuǎn)到：域名/u/用戶名 ，并列出該用戶的所有文章。 同理，文章頁面就是當(dāng)點(diǎn)擊某篇文章標(biāo)題時(shí)，跳轉(zhuǎn)到：域名/u/用戶名/時(shí)間/文章名 ，進(jìn)入到該文章的頁面（也許還有該文章的評(píng)論等）。

在開始之前我們需要做一個(gè)工作，打開 post.js ，將 Post.get 修改為 Post.getAll ，同時(shí)將 index.js 中 Post.get 修改為 Post.getAll 。在 post.js 最后添加如下代碼：

//獲取一篇文章
Post.getOne = function(name, day, title, callback) {
  //打開數(shù)據(jù)庫
  mongodb.open(function (err, db) {
    if (err) {
      return callback(err);
    }
    //讀取 posts 集合
    db.collection('posts', function (err, collection) {
      if (err) {
        mongodb.close();
        return callback(err);
      }
      //根據(jù)用戶名、發(fā)表日期及文章名進(jìn)行查詢
      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);//返回查詢的一篇文章
      });
    });
  });
};

簡(jiǎn)單解釋一下：

• Post.getAll ：獲取一個(gè)人的所有文章（傳入?yún)?shù) name）或獲取所有人的文章（不傳入?yún)?shù)）。
• Post.getOne ：根據(jù)用戶名、發(fā)表日期及文章名精確獲取一篇文章。 下面我們來實(shí)現(xiàn)用戶頁面和文章頁面。

打開 index.js ，在 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('/');//用戶不存在則跳轉(zhuǎn)到主頁
    }
    //查詢并返回該用戶的所有文章
    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()
      });
    });
  }); 
});

這里我們添加了一條路由規(guī)則 app.get('/u/:name')，用來處理訪問用戶頁的請(qǐng)求，然后從數(shù)據(jù)庫取得該用戶的數(shù)據(jù)并渲染 user.ejs 模版，生成頁面并顯示給用戶。

接下來我們添加文章頁面的路由規(guī)則。 在 app.get('/u/:name') 后添加如下代碼：

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('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()
    });
  });
});

最后，我們創(chuàng)建用戶頁面和文章頁面的模版文件。

在 views 文件夾下新建 user.ejs，添加如下代碼，同時(shí)也將 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.name %></a> | 
    日期：<%= post.time.minute %>
  </p>
  <p><%- post.post %></p>
<% }) %>
<%- include footer %>

在 views 文件夾下新建 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 %>

然后將index.ejs中的href更改如下：

<%- 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.name %></a> |
    日期：<%= post.time.minute %>
  </p>
  <p><%- post.post %></p>
  <% }) %>
<%- include footer %>

現(xiàn)在，我們給博客添加了用戶頁面和文章頁面。示例：

用戶頁面

http://wiki.jikexueyuan.com/project/express-mongodb-setup-blog/images/4.1.jpg" alt="" />

文章頁面

http://wiki.jikexueyuan.com/project/express-mongodb-setup-blog/images/4.2.jpg" alt="" />