不完全node实践教程-第六发

今天我们来给博客添加标签.

和添加comment道理一样, 首先我们要在model/post.js添加一下tags字段, 也就是改成这样

function Post (post) {
if (post) {
this.title = post.title;
this.author = post.author;
this.content = post.content;
this.tags = post.tags;
}
}

//some other code

var post = {
title: this.title,
author: this.author,
content: this.content,
time: time,
comments: [],
tags: this.tags
};

然后修改post.ejs

<link rel="stylesheet" href="/stylesheets/post.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="/stylesheets/common.css" media="screen" title="no title" charset="utf-8">
<title><%= title%></title>

<div class="post-wrapper">
<section class="content">
<form class="postForm" action="/post" method="post">
<label for="title">
title</label>
<input type="text" name="title" value="" class="title">
<label for="tags"></label>
<input type="text" name="tags" value="" class="tag">
<span class="addClass button-big">添加标签</span><br/>
<label for="content" class="label-content">content</label><br/>
<textarea name="content" rows="8" cols="40" class="blog-content textarea"></textarea>
<input type="submit" value="post" class="submit">
</form>
</section>
</div>
<script type="text/javascript">
var addClassButton = document.getElementsByClassName('addClass')[0],
postForm = document.getElementsByClassName('postForm')[0];
addClassButton.onclick = function(e) {
var tag  = document.createElement('input');
tag.name = 'tags';
tag.type = 'text';
tag.className = 'tag';
postForm.insertBefore(tag, addClassButton);
}
</script>

这里我写了一小段js来响应添加tag的动作.然后, 我们在blog的post路由里面添加一小段代码:

var tags = [];
if (typeof( req.body.tags ) == 'string') {
tags.push(req.body.tags);
}else if (typeof(req.body.tags) == 'object') {
req.body.tags.forEach(function(tag, index) {
tags.push(tag);
});
}

var currentUser = req.session.user,
post = new Post({
title: req.body.title,
author: currentUser.name,
content: req.body.content,
tags: tags

});
//some other code

接下来修改model/post.js如下:

if (post) {
this.title = post.title;
this.author = post.author;
this.content = post.content;
this.tags = post.tags;
}

//some other code

var post = {
title: this.title,
author: this.author,
content: this.content,
time: time,
comments: [],
tags: this.tags
};

最后呢, 在article.ejs和content.ejs添加显示tag的代码,

<div class="info">
<label for="author">作者</label>
<a class="author link info-tag" href="/u/<% post.author%>"><%= post.author %></a> |
<label for="time">时间</label>
<span class="time info-tag"><%= post.time.till_minute %></span>
<div class="tags">
<% post.tags.forEach(function(tag, index) {
%>
<span class="tag"><%= tag %></span>
<% }) %>
</div>
</div>
<p class="content-wrap">
<%= post.content %>
</p>
</div>

<% posts.forEach(function(post, index) { %>
<div class="post-item">
<a href="/u/<%= post.author %>/<%= post.title%>/<%= post.time.till_minute%>" class="link post-title"><%= post.title %></a>
<div class="info">
<label for="author">作者</label>
<a class="link info-tag" href="/u/<%= post.author%>"><%= post.author %></a> |
<label for="time">时间</label>
<span class="time info-tag"><%= post.time.till_minute %></span>
<div class="tags">
<% post.tags.forEach(function(tag, index) {
%>
<span class="tag"><%= tag %></span>
<% }) %>
</div>
</div>
<p class="content-wrap">
<%= post.content %>
</p>
</div>
<% }) %>

如果一切没错的话(如果你出bug了不烦..是正常情况…), 运行app之后, 首页是这个样子的.



这是为什么呢….我自己在做的时候被这个坑到了, 所以特地提出来, 这是因为我们之前发布的用来测试的blog都没有tag这个字段, 所以会出现post.tags为null的情况, 有两种解决方案. 一个是清空数据库, 重新添加测试是数据, 另外一个是像我在article.ejs做的一样

<% if (post.comments != null ) { post.comments.forEach(function(comment, index){ %>

做一下容错处理. 当然, 对于现在的情况, 我们还是清空数据库比较好.

若干分钟之后, 我们清空了数据库, 再去发布博客的时候, 就是这个界面了



点击发布!



点击博客标题!



到这里, 我们就给博客添加了tag. 今天的代码在day06

(今天的逼就装到这里)