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

今天我们来实现发布博客的功能.

等等…刚刚瞄了一眼csdn上的博客浏览记录, 发现一个神奇的事情…

看到头两篇访问量还挺客观的, 一天之内能有这么多人看我也是很欣慰,毕竟是第一次写博客, 有这样的成绩我很满足…..
但是….为什么到第三篇的时候就是40..40..要不要这么落差, 我想..可能是因为前两篇比较长…大家觉得啊这个作者好努力啊,写这么多肯定超级详细. 肯定适合新手, 我要看我要看…然后…第三篇的时候发现, 咦..怎么变短了..而且可能…突然出现好多bug, 并不是像我所说的..一切都没有问题…什么鬼啊!!!垃圾!!我不看了!!!又或者, 大家还卡在一开始的搭建环境上面, 这也不是不可能, 不管怎样, 我想说的是, 如果你跟我一样也是新手…也是想从菜鸡变的牛逼一点…请坚持..沉下心来…慢慢调那些莫名其妙的bug, 当你真正做出来一两个feature的时候, 你就会有一种原来是世界这么美好的感觉…不知道有没有同学看到这里…如果有…我就很欣慰了..

好, 我们继续..

首先在model文件夹新建post.js, 添加以下代码.

var mongodb = require('./db');
var markdown = require('markdown').markdown;

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

module.exports = Post;


Post.prototype.save = function(callback) {
  var date = new Date();
  var time = {
    date:  date,
    till_year: date.getFullYear(),
    till_month: date.getFullYear() + '-' + (date.getMonth() + 1),
    till_day:  date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
    till_minute: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getHours() + ':' +
    (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() )
  };

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

  // console.dir(post);
  db.collection('posts', function(err, collection) {
    if (err) {
      mongodb.close();
      return callback(err);
    }

    collection.insert(post, {safe: true}, function(err) {
      if (err) {
        mongodb.close();
        return callback(err);
      }
      return callback(null);
    });

  });


};

Post.getOne = function(author, title, time, callback) {

    db.collection('posts', function(err, collection) {
      if (err) {
        mongodb.close();
        return callback(err);
      }

      var doc = {
        "author": author,
        "title": title,
        "time.till_minute":  time,

      };

      collection.findOne(doc, function(err, post) {
        if (err) {
          mongodb.close();
          return callback(err);
        }
        return callback(null, post);
      });

  });
};

Post.getAll = function(name, callback) {
    db.collection('posts', function(err, collection) {
      if (err) {
        mongodb.close();
        return callback(err);
      }

      var doc = {};
      if (name) {
        doc.author = name;
      }

      collection.find(doc).sort({time: -1}).toArray(function(err, posts) {
        if (err) {
          mongodb.close();
          return callback(err);
        }
        return callback(null, posts);
      });


  });

};

然后, 我们要添加处理写博客请求的路由.修改routes/post.js文件

var express = require('express');
var router = express.Router();

/* GET users listing. */
app.get('/', function(req, res){
  res.render('post', {title: 'post page'});
});

app.post('/', function(req, res){

  console.log(tags);
  var currentUser = req.session.user,
      post = new Post({
        title: req.body.title,
        author: currentUser.name,
        content: req.body.content,
      });
  post.save(function(err) {
    if (err) {
      req.flash("error", "can not save post");
      return res.redirect("/");
    }
    req.flash("success", "post success");
    return res.redirect("/");
  });
});

module.exports = router;

然后, 我们就要设计一下写博客的页面了, 这里博客就只有三个字段, 标题, 作者, 和内容,我的post页面是这样滴.
大家可以根据自己的审美随意设计.

<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="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>

从这里我们差不多可以看到新增feature的一般流程.

• 新建模型(这个不一定, 有的feature是对已经存在的模型进行操作), 实现模型的curd操作的代码.
• 新增模板文件(这个也不一定, 也可能实在已有的页面添加新feature)
• 新增路由, 对请求进行逻辑处理, 利用模型的crud方法, 对数据进行逻辑操作, 组装结果数据.
• 渲染模板, 返回.

我们如果填写了博客, 提交之后, post.js会存储到数据库, 然后重定向到首页, 我们应该在首页把数据库的博客都提取出来显示.
所以我们在views文件夹里面新增content.ejs.代码如下:

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

<div class="content">
  <div class="post-list-wrapper">
    <div class="post-list">
      <% if(!posts.length) { %>
        <p class="hint">
          no blog you search yet~
        </p>
      <% } %>

      <% 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>
          <p class="content-wrap">
            <%= post.content %>
          </p>
        </div>
      <% }) %>
    </div>
  </div>

</div>

如果到这里没错的话, 我们重新运行app, 点击post按钮. 就会是这样滴.

然后填写博客提交之后是这样滴.

那么, 我们已经那个实现了发布博客的功能. 今天的代码在day03

(今天的逼就装到这里,谢谢大家)