在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ 第5章 增加編輯與刪除功能
第9章 增加標(biāo)簽和標(biāo)簽頁(yè)面
番外篇之——使用 Mongoose
番外篇之——使用 Async
第4章 實(shí)現(xiàn)用戶頁(yè)面和文章頁(yè)面
第12章 增加友情鏈接
第14章 增加頭像
第7章 實(shí)現(xiàn)分頁(yè)功能
第5章 增加編輯與刪除功能
第11章 增加文章檢索功能
第3章 增加文件上傳功能
番外篇之——部署到 Heroku
第2章 使用 Markdown
第13章 增加404頁(yè)面
第16章 增加日志功能
第1章 一個(gè)簡(jiǎn)單的博客
番外篇之——使用 Handlebars
第10章 增加pv統(tǒng)計(jì)和留言統(tǒng)計(jì)
番外篇之——使用 Passport
第15章 增加轉(zhuǎn)載功能和轉(zhuǎn)載統(tǒng)計(jì)
第8章 增加存檔頁(yè)面
番外篇之——使用 generic pool
番外篇之——使用 _id 查詢
番外篇之——使用 Disqus
番外篇之——使用 KindEditor
第6章 實(shí)現(xiàn)留言功能

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

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

我們?cè)O(shè)定:當(dāng)一個(gè)用戶在線時(shí),只允許他在自己發(fā)表的文章頁(yè)進(jìn)行編輯或刪除,編輯時(shí),只能編輯文章內(nèi)容,不能編輯文章標(biāo)題。

打開 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è)面添加了編輯和刪除文章的鏈接。接下來,我們注冊(cè)這兩個(gè)鏈接的點(diǎn)擊事件的響應(yīng)。

打開 post.js ,在最后添加如下代碼:

//返回原始發(fā)表的內(nèi)容(markdown 格式)
Post.edit = function(name, day, title, callback) {
  //打開數(shù)據(jù)庫(kù)
  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ā)表日期及文章名進(jìn)行查詢
      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">
  標(biāo)題:<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)在,運(yùn)行我們的博客看看吧。在文章頁(yè)面,當(dāng)我們點(diǎn)擊 編輯 后就會(huì)跳轉(zhuǎn)到該文章對(duì)應(yīng)的編輯頁(yè)面了。接下來我們實(shí)現(xiàn)將修改后的文章提交到數(shù)據(jù)庫(kù)。

打開 post.js ,在最后添加如下代碼:

//更新一篇文章及其相關(guān)信息
Post.update = function(name, day, title, post, callback) {
  //打開數(shù)據(jù)庫(kù)
  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);//出錯(cuò)!返回文章頁(yè)
    }
    req.flash('success', '修改成功!');
    res.redirect(url);//成功!返回文章頁(yè)
  });
});

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

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

//刪除一篇文章
Post.remove = function(name, day, title, callback) {
  //打開數(shù)據(jù)庫(kù)
  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ù)用戶名、日期和標(biāo)題查找并刪除一篇文章
      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('/');
  });
});

至此我們完成了大部分的工作,接下來我們實(shí)現(xiàn)頁(yè)面權(quán)限的控制。假如你現(xiàn)在注冊(cè)了兩個(gè)帳號(hào) A 和 B,那么當(dāng) B 訪問 A 的用戶頁(yè)面時(shí),也會(huì)出現(xiàn)編輯和刪除的選項(xiàng),雖然點(diǎn)擊后并不能編輯和刪除 A 的文章。那怎么才能實(shí)現(xiàn)一個(gè)賬號(hào)只能編輯和刪除自己發(fā)表的文章呢?很簡(jiǎn)單,添加一個(gè)判斷即可。打開 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>
<% } %>

以上代碼的意思是:通過檢測(cè) session 中的用戶名是否存在,若存在且和當(dāng)前文章頁(yè)面的作者名相同,則顯示編輯和刪除按鈕,否則不顯示。

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