第5章 增加編輯與刪除功能

現(xiàn)在，我們來給博客添加編輯文章與刪除文章的功能。

我們設(shè)定：當一個用戶在線時，只允許他在自己發(fā)表的文章頁進行編輯或刪除，編輯時，只能編輯文章內(nèi)容，不能編輯文章標題。

打開 style.css ，添加如下樣式：

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

打開 article.ejs ，將代碼修改成如下：

<%- include header %>
<p>
  <span><a class="edit" href="/edit/<%= post.name %>/<%= post.time.day %>/<%= post.title %>">編輯</a></span>
  <span><a class="edit" href="/remove/<%= post.name %>/<%= post.time.day %>/<%= post.title %>">刪除</a></span>
</p>
<p class="info">
  作者：<a href="/u/<%= post.name %>"><%= post.name %></a> | 
  日期：<%= post.time.minute %>
</p>
<p><%- post.post %></p>
<%- include footer %>

至此，我們只是在文章頁面添加了編輯和刪除文章的鏈接。接下來，我們注冊這兩個鏈接的點擊事件的響應(yīng)。

打開 post.js ，在最后添加如下代碼：

//返回原始發(fā)表的內(nèi)容（markdown 格式）
Post.edit = function(name, day, title, callback) {
  //打開數(shù)據(jù)庫
  mongodb.open(function (err, db) {
    if (err) {
      return callback(err);
    }
    //讀取 posts 集合
    db.collection('posts', function (err, collection) {
      if (err) {
        mongodb.close();
        return callback(err);
      }
      //根據(jù)用戶名、發(fā)表日期及文章名進行查詢
      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') 后添加如下代碼：

app.get('/edit/:name/:day/:title', checkLogin);
app.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 header %>
<form method="post">
  標題：<br />
  <input type="text" name="title" value="<%= post.title %>" disabled="disabled" /><br />
  正文：<br />
  <textarea name="post" rows="20" cols="100"><%= post.post %></textarea><br />
  <input type="submit" value="保存修改" />
</form>
<%- include footer %>

現(xiàn)在，運行我們的博客看看吧。在文章頁面，當我們點擊 編輯 后就會跳轉(zhuǎn)到該文章對應(yīng)的編輯頁面了。接下來我們實現(xiàn)將修改后的文章提交到數(shù)據(jù)庫。

打開 post.js ，在最后添加如下代碼：

//更新一篇文章及其相關(guān)信息
Post.update = function(name, day, title, post, callback) {
  //打開數(shù)據(jù)庫
  mongodb.open(function (err, db) {
    if (err) {
      return callback(err);
    }
    //讀取 posts 集合
    db.collection('posts', function (err, collection) {
      if (err) {
        mongodb.close();
        return callback(err);
      }
      //更新文章內(nèi)容
      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('/edit/:name/:day/:title') 后添加如下代碼：

app.post('/edit/:name/:day/:title', checkLogin);
app.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);//成功！返回文章頁
  });
});

現(xiàn)在，我們就可以編輯并保存文章了。趕緊試試吧！

接下來，我們實現(xiàn)刪除文章的功能。打開 post.js ，在最后添加如下代碼：

//刪除一篇文章
Post.remove = function(name, day, title, callback) {
  //打開數(shù)據(jù)庫
  mongodb.open(function (err, db) {
    if (err) {
      return callback(err);
    }
    //讀取 posts 集合
    db.collection('posts', function (err, collection) {
      if (err) {
        mongodb.close();
        return callback(err);
      }
      //根據(jù)用戶名、日期和標題查找并刪除一篇文章
      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') 后添加如下代碼：

app.get('/remove/:name/:day/:title', checkLogin);
app.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('/');
  });
});

至此我們完成了大部分的工作，接下來我們實現(xiàn)頁面權(quán)限的控制。假如你現(xiàn)在注冊了兩個帳號 A 和 B，那么當 B 訪問 A 的用戶頁面時，也會出現(xiàn)編輯和刪除的選項，雖然點擊后并不能編輯和刪除 A 的文章。那怎么才能實現(xiàn)一個賬號只能編輯和刪除自己發(fā)表的文章呢？很簡單，添加一個判斷即可。打開 article.js ，將：

<span><a class="edit" href="/edit/<%= post.name %>/<%= post.time.day %>/<%= post.title %>">編輯</a></span>
<span><a class="edit" href="/remove/<%= post.name %>/<%= post.time.day %>/<%= post.title %>">刪除</a></span>

修改為：

<% if (user && (user.name == post.name)) { %>
  <span><a class="edit" href="/edit/<%= post.name %>/<%= post.time.day %>/<%= post.title %>">編輯</a></span>
  <span><a class="edit" href="/remove/<%= post.name %>/<%= post.time.day %>/<%= post.title %>">刪除</a></span>
<% } %>

以上代碼的意思是：通過檢測 session 中的用戶名是否存在，若存在且和當前文章頁面的作者名相同，則顯示編輯和刪除按鈕，否則不顯示。

現(xiàn)在，我們完成了給博客添加編輯文章與刪除文章的功能。