Heim >Web-Frontend >HTML-Tutorial >Node.js 博客实例(四)实现用户页面和文章页面_html/css_WEB-ITnose

Node.js 博客实例(四)实现用户页面和文章页面_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:59:03888Durchsuche

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第四章,由于版本等的原因,在原教程基础上稍加改动即可实现。

现在,我们来给博客添加用户页面和文章页面。
    所谓用户页面就是当点击某个用户名链接时,跳转到:域名/u/用户名 ,并列出该用户的所有文章。
    同理,文章页面就是当点击某篇文章标题时,跳转到:域名/u/用户名/时间/文章名 ,进入到该文章的页面。

post.js:

将 Post.get 修改为 Post.getAll ,同时将 index.js 中 Post.get 修改为 Post.getAll 。在 post.js 最后添加如下代码:

//获取一篇文章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);				}				console.log("333");				console.log(doc);				//解析 markdown 为 html				doc.post = markdown.toHTML(doc.post);				console.log("444");				callback(null, doc);//返回查询的一篇文章				console.log("555");			});		});	});};
Post.getAll :获取一个人的所有文章(传入参数 name)或获取所有人的文章(不传入参数)。
Post.getOne :根据用户名、发表日期及文章名精确获取一篇文章。
index.js :添加如下代码:

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('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()				});			});		}); 	});		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()			});		});	});
在 blog/views/ 文件夹下新建 user.ejs,添加如下代码,同时也将 index.ejs 也修改成如下代码:
  <p></p><h2><a href="/u/<%=%20post.name%20%>/<%=%20post.time.day%20%>/<%=%20post.title%20%>"></a></h2>  <p class="info">    作者:<a href="/u/<%=%20post.name%20%>"></a> |     日期:  </p>  <p></p>

在 blog/views/ 文件夹下新建 article.ejs ,添加如下代码:

<p class="info">  作者:<a href="/u/<%=%20post.name%20%>"></a> |   日期:</p><p></p>

现在,我们给博客添加了用户页面和文章页面。实现效果:

点击文章标题:


点击作者:


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn