一个简单的blog系统（五） 增加编辑与删除功能

1. 现在我们来给博客添加编辑文章与删除文章的功能。

　　假定： 当一个用户在线时，只允许他在自己发表的文章页进行编辑和删除，编辑时，只能编辑文章内容，不能编辑文章标题。

　　1.1 首先，我们来给文章页面增加编辑和删除文章的链接。打开 article.ejs 将代码增加如下所示：

<p>
    <% if(user && (user.name == post.name)) { %>
        <a class="edit" href="/edit/<%= post.name %>/<%= post.time.day %>/<%= post.title %>">编辑</a>
        <a class="edit" href="/remove/<%= post.name %>/<%= post.time.day %>/<%= post.title %>">删除</a>
    <% }; %>
</p>

　　然后，来给页面增加一些基本的样式，打开style.css,增加代码如下所示：

.edit{
    margin:4px;
    padding:2px 5px;
    border-radius:3px;
    background-color:#f3f3f3;
    color:#333;
    font-size:16px;
}
.edit:hover{
    text-decoration:none;
    background-color:#f00;
    color:#fff;
    -webkit-transition:color .2s linear;
}

　　1.2 接下来，我们来给这两个链接注册响应事件，我们打开post.js,增加如下代码：

//返回原始发表的内容(markdown形式)
Post.edit = 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);
                }
                callback(null, doc);    //返回查询的一篇文章（markdown格式）
            });
        });
    });
};

　　　　然后，打开index.js,在在 app.get('/u/:name/:day/:title') 后添加如下代码：

//编辑页面路由
router.get('/edit/:name/:day/:title', checkLogin);
router.get('/edit/:name/:day/:title', function (req, res) {
      var currentUser = req.session.user;
      Post.edit(currentUser.name, req.params.day, req.params.title, function (err, post) {
        if (err) {
          req.flash('error', err); 
          return res.redirect('back');
        }
        res.render('edit', {
          title: '编辑',
          post: post,
          user: req.session.user,
          success: req.flash('success').toString(),
          error: req.flash('error').toString()
        });
      });
});

　　　　其次，在views下新建edit.ejs,修改代码如下所示：

<%- include common/header %>

<div class='container'>
    <form role="form" method="post">
          <h2>编辑</h2>
          <hr/>
          <div class="form-group">
            <label for="title" class="control-label">标题:</label>
               <input type="text" class="form-control" name="title" value="<%= post.title %>" disabled="disabled">
         </div>
          <div class="form-group">
              <label for="name" class="control-label">正文:</label>
              <textarea class="form-control" name="post" rows="10" cols="10"><%= post.post %></textarea>
        </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary">保存修改</button>
           </div>
    </form>
</div>

<%- include common/footer %>

　　　　现在，运行我们的博客，单击编辑按钮后就可以跳转到该文章对应的编辑页面了。然后，我们实现将修改后的文章提交到数据库的操作，打开post.js,添加如下代码：

//更新一篇文章及其相关信息
Post.update = function(name, day, title, post, 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.update({
                "name": name,
                "time.day": day,
                "title": title
              }, {
                $set: {post: post}
              }, function (err) {
                mongodb.close();
                if (err) {
                      return callback(err);
                }
                callback(null);
              });
        });
      });
};

　　　　然后，打开index.js,在在 app.get('/u/:name/:day/:title') 后添加如下代码：

router.post('/edit/:name/:day/:title', checkLogin);
router.post('/edit/:name/:day/:title', function (req, res) {
      var currentUser = req.session.user;

      Post.update(currentUser.name, req.params.day, req.params.title, req.body.post, function (err) {
        var url = encodeURI('/u/' + req.params.name + '/' + req.params.day + '/' + req.params.title);
        if (err) {
              req.flash('error', err); 
              return res.redirect(url);//出错！返回文章页
        }
        req.flash('success', '修改成功!');
        res.redirect(url);//成功！返回文章页
      });
});

　　　　至此，我们就可以编辑并且保存文章了。赶紧运行试一试吧。

　　　　

　　　　1.2 接下来，我们来实现删除文章的功能，打开post.js，在最后添加如下代码：

//删除一篇文章
Post.remove = 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.remove({
                "name": name,
                "time.day": day,
                "title": title
            }, {
            w: 1
              }, function (err) {
                mongodb.close();
                if (err) {
                  return callback(err);
                }
                callback(null);
              });
        });
      });
};

　　然后，我们打开index.js，在app.post('/edit/:name/:day/:title')后面添加如下代码：

//删除页面路由
router.get('/remove/:name/:day/:title', checkLogin);
router.get('/remove/:name/:day/:title', function (req, res) {
      var currentUser = req.session.user;
      Post.remove(currentUser.name, req.params.day, req.params.title, function (err) {
        if (err) {
          req.flash('error', err); 
          return res.redirect('back');
        }
        req.flash('success', '删除成功!');
        res.redirect('/');
      });
});

 

现在，我们就给博客里的文章添加了编辑和删除的功能。