在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ 第4章 實(shí)現(xiàn)用戶頁(yè)面和文章頁(yè)面
第9章 增加標(biāo)簽和標(biāo)簽頁(yè)面
番外篇之——使用 Mongoose
番外篇之——使用 Async
第4章 實(shí)現(xiàn)用戶頁(yè)面和文章頁(yè)面
第12章 增加友情鏈接
第14章 增加頭像
第7章 實(shí)現(xiàn)分頁(yè)功能
第5章 增加編輯與刪除功能
第11章 增加文章檢索功能
第3章 增加文件上傳功能
番外篇之——部署到 Heroku
第2章 使用 Markdown
第13章 增加404頁(yè)面
第16章 增加日志功能
第1章 一個(gè)簡(jiǎn)單的博客
番外篇之——使用 Handlebars
第10章 增加pv統(tǒng)計(jì)和留言統(tǒng)計(jì)
番外篇之——使用 Passport
第15章 增加轉(zhuǎn)載功能和轉(zhuǎn)載統(tǒng)計(jì)
第8章 增加存檔頁(yè)面
番外篇之——使用 generic pool
番外篇之——使用 _id 查詢
番外篇之——使用 Disqus
番外篇之——使用 KindEditor
第6章 實(shí)現(xiàn)留言功能

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

現(xiàn)在,我們來(lái)給博客添加用戶頁(yè)面和文章頁(yè)面。

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

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

//獲取一篇文章
Post.getOne = function(name, day, title, callback) {
  //打開(kāi)數(shù)據(jù)庫(kù)
  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ā)表日期及文章名精確獲取一篇文章。 下面我們來(lái)實(shí)現(xiàn)用戶頁(yè)面和文章頁(yè)面。

打開(kāi) 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)到主頁(yè)
    }
    //查詢并返回該用戶的所有文章
    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'),用來(lái)處理訪問(wèn)用戶頁(yè)的請(qǐng)求,然后從數(shù)據(jù)庫(kù)取得該用戶的數(shù)據(jù)并渲染 user.ejs 模版,生成頁(yè)面并顯示給用戶。

接下來(lái)我們添加文章頁(yè)面的路由規(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)建用戶頁(yè)面和文章頁(yè)面的模版文件。

在 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)在,我們給博客添加了用戶頁(yè)面和文章頁(yè)面。示例:

用戶頁(yè)面

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

文章頁(yè)面

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