不完全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

(今天的逼就装到这里)