現(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)在,我們完成了給博客添加編輯文章與刪除文章的功能。