Node.js 博客实例(四)实现用户页面和文章页面

    原教程 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 也修改成如下代码:
<%- 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 %>

在 blog/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 %>

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

点击文章标题:


点击作者:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值