Node.jsブログ例(4)ユーザーページと記事の実装pages_html/css_WEB-ITnose

オリジナルチュートリアルの第 4 章 https://github.com/nswbmw/N-blog/wiki/_pages バージョンの都合などにより、オリジナルのチュートリアルをベースに若干の変更を加えて実装できます。

それでは、ユーザーページと記事ページをブログに追加してみましょう。
いわゆるユーザー ページとは、ユーザー名のリンクをクリックすると、ドメイン名/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: 人のすべての記事を取得する (パラメーター名を渡します) か、全員の記事を取得します (パラメーターを渡しません)。
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 %>

ブログ内 /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 %>

これで、ユーザー ページと記事ページがブログに追加されました。導入効果:

記事タイトルをクリック:

著者をクリック: