一個簡單的blog系統(tǒng)（四） 實現(xiàn)用戶頁面和文章頁面

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

　　1.1 所謂用戶頁面就是當單擊某個用戶名鏈接時，跳轉到：域名/u/用戶名，并且跳出該用戶的所有文章。同樣，文章頁面就是當單擊某篇文章標題時，跳轉到：域名/u/用戶名/事件/文件名，進入到該文章的頁面（也許還有該文章的評論等）

　　首先，我們先打開post.js，將Post.get修改為Post.getAll, 同時將index.js中的Post.get修改為Post.getAll。在post.js最后添加如下代碼：

1 //獲取一篇文章，根據(jù)用戶名，發(fā)表日期以及文章名精確獲取一篇文章 2 Post.getOne = function(name, day, title, callback) { 3 //打開數(shù)據(jù)庫 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 //根據(jù)用戶名、發(fā)表日期及文章名進行查詢 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 };

　　然后，我們來實現(xiàn)用戶頁面和文章頁面，打開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()});}); });

　　最后，我們創(chuàng)建用戶頁面和文章頁面的模板文件：在views文件夾下面新建user.ejs，添加如下代碼，同時將index.ejs也做出相應的修改：

<!-- 發(fā)表的文章內(nèi)容 --><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;發(fā)布于：&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;發(fā)布于：&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>

至此，用戶頁面和文章頁面的相應功能已經(jīng)實現(xiàn)。

posted on 2016-03-20 20:15?Yuity 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/yuity/p/5299455.html

總結

以上是生活随笔為你收集整理的一个简单的blog系统（四） 实现用户页面和文章页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。