在上一屆會議中，您重構了整個博客系統。現在一切都已清理干凈，您已準備好加速進行一些新的冒險。在本次會議中，我們將圍繞路由器做更多的事情，并向我們的博客系統添加三個功能：刪除、注銷和單個博客視圖。
1。刪除
在第 6 部分中，我們介紹了編輯功能。您很可能還想刪除您的一篇博客文章。有兩個地方可以放置此函數：將其添加到 BlogsAdminView 中，或者將其發送到 URL 并在 Router 中處理。
我將向您展示路由器的方式。它更常用，并且使代碼更加結構化。
第 1 步：添加 URL 模式
像往常一樣，我們先添加一個 URL 模式：
routes: {
'': 'index',
'admin': 'admin',
'login': 'login',
'add': 'add',
'edit/:id': 'edit',
'del/:id': 'del'
}
登錄后復制
第 2 步：刪除鏈接
然后，更新管理頁面中的鏈接：
Delete
登錄后復制
第 3 步：del 函數
現在，讓我們向 Router 添加一個新的 del 函數來處理它。這非常簡單：使用我們從 URL 傳入的 id 找到博客文章，并將其銷毀。
嘗試挑戰自己，在不閱讀我的代碼的情況下編寫它。此時您應該已經很好地掌握了 Parse.js。
del: function(id) {
var query = new Parse.Query(Blog);
query.get(id).then(function(blog){
blog.destroy().then(function(blog){
alert('Deleted!');
})
});
}
登錄后復制
請注意，您可以在此處使用 .then() 函數，而不是像我們之前那樣傳遞對象：
query.get(id, {
success: function(blog) {
...
},
error: function(blog, error) {
...
}
});
登錄后復制
這是在 Parse.js 中添加回調函數的簡單方法，使您的代碼更干凈、更具可讀性。請訪問 Parse.com 查看有關 Promise 的完整文檔。
讓我們對其進行測試運行，并仔細檢查數據庫以查看它是否正常工作。
恭喜，它正在工作！
第 4 步：重定向回管理頁面
如果你注意一下URL，你會發現，點擊掉警告框后，URL仍然是/del/，而你剛剛刪除的帖子仍然存在。我們希望在刪除后將用戶發送回管理頁面，并且該頁面應該刷新并反映他們剛剛所做的更改。
您可以通過重定向來實現所有這些：
del: function(id) {
var self = this,
query = new Parse.Query(Blog);
query.get(id).then(function(blog){
blog.destroy().then(function(blog){
self.navigate('admin', { trigger: true });
})
});
}
登錄后復制
請注意，因為這次您從路由器內部調用 navigate，所以您可以將路由器存儲為 self，然后調用 self.navigate()。
第 5 步：檢查登錄
最后，我們需要確保您是唯一可以刪除您的博客帖子的人。讓我們檢查一下該功能的登錄。這應該與 edit 函數相同。
del: function(id) {
if (!Parse.User.current()) {
this.navigate('#/login', { trigger: true });
} else {
...
}
}
登錄后復制
2。注銷
與刪除一樣，注銷也可以由路由器處理。它還從添加 URL 模式開始：
routes: {
...
'logout': 'logout'
},
登錄后復制
Parse.js 中的注銷功能本身非常簡單。只需調用 Parse.User.logOut() ，然后重定向到 /login 頁面：
logout: function () {
Parse.User.logOut();
this.navigate('#/login', { trigger: true });
}
登錄后復制
最后，讓我們向 #admin-tpl 添加一個按鈕：
Logout
登錄后復制
如您所見，樣式確實不是本教程的重點。您可以隨意修復填充并根據需要設置樣式。
3。單個博客視圖
現在讓我們繼續開發一些新功能。
到目前為止，我們正在主頁上顯示整篇博客文章。雖然有些人確實喜歡這種風格，但大多數博客系統都支持預先提供片段摘要的想法，如果訪問者點擊文章，他們就可以在單獨的頁面上看到內容，周圍可能還有一些評論區域。
我將在本次會議中引導您創建這個詳細的單一博客視圖，我們將在下一次會議中重點關注構建評論。
第 1 步：添加摘要列
首先，我們在博客表中添加一列作為摘要：
第 2 步：在 WriteBlogView 中包含摘要
現在，讓我們將其添加到 Blog.update() 函數中。您可以更改該函數以獲取包含標題、摘要和內容的數據對象，以避免記住變量的順序。
update: function(data) {
// Only set ACL if the blog doesn't have it
...
this.set({
'title': data.title,
'summary': data.summary,
'content': data.content,
...
}).save(null, {
...
});
}
登錄后復制
在#write-tpl中再添加一個<textarea>作為摘要：
// Put this form-group in between the form-group for title and content
Summary
{{summary}}
登錄后復制
并相應地更改 WriteBlogView.submit() 函數：
submit: function(e) {
...
this.model.update({
title: data[0].value,
summary: data[1].value,
content: data[2].value
});
}
登錄后復制
現在，由于我們在模板中添加了一個新變量，因此我們需要在 WriteBlogView.render() 函數中為其指定一個默認的空值：
render: function(){
...
if (this.model) {
...
} else {
attributes = {
form_title: 'Add a Blog',
title: '',
summary: '',
content: ''
}
}
...
}
登錄后復制
如果您對內容使用 wysihtml5 插件，您會注意到之前我們的目標是所有 <textarea> 元素：
this.$el.html(this.template(attributes)).find('textarea').wysihtml5();
登錄后復制
讓我們為內容文本區域指定一個類，并僅使用 wysihtml5 插件來定位該類。
在#write-tpl中：
{{{content}}}
登錄后復制
在WriteBlogView.render()函數中：
this.$el.html(this.template(attributes)).find('.write-content').wysihtml5();
登錄后復制
現在可以使用了！
第 3 步：在主頁上顯示摘要
使用新的撰寫博客頁面并添加一些帶有摘要的博客文章，并提取摘要而不是#blogs-tpl中的內容：
{{#each blog}}
{{title}}
At {{time}} by {{authorName}}
{{summary}}
{{/each}}
登錄后復制登錄后復制
第 4 步：添加 SingleBlogView 頁面
花一點時間考慮一下如何添加 /blog/:id 頁面來顯示每篇博客文章的內容，并嘗試自己完成。您現在應該能夠自己完成這一切了！
但為了本教程的目的，讓我給您快速演練：
為此頁面添加新的 HTML 模板：
<div class="blog-post">
<h2 class="blog-post-title">{{title}}</h2>
<p class="blog-post-meta">At {{time}} by {{authorName}}</p>
<div>{{{content}}}</div>
</div>
登錄后復制
添加一個新的 BlogView 類，該類接受 blog 對象，并將其呈現在 #blog-tpl 中：
BlogView = Parse.View.extend({
template: Handlebars.compile($('#blog-tpl').html()),
render: function() {
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
}),
登錄后復制
在 BlogRouter 中添加新的 URL 模式：
routes: {
...
'blog/:id': 'blog',
...
}
登錄后復制
并在 BlogRouter.blog() 函數中，通過 id 獲取博客，渲染一個 blogView，并將其放入 $container:
blog: function(id) {
var query = new Parse.Query(Blog);
query.get(id, {
success: function(blog) {
console.log(blog);
var blogView = new BlogView({ model: blog });
blogView.render();
$container.html(blogView.el);
},
error: function(blog, error) {
console.log(error);
}
});
}
登錄后復制
最后，更新#blogs-tpl中的鏈接以鏈接到此頁面：
{{#each blog}}
{{title}}
At {{time}} by {{authorName}}
{{summary}}
{{/each}}
登錄后復制登錄后復制
嘗試一下：
如果您自己完成此操作，可加分。
結論
在本次會議中，您構建了很多內容：刪除功能、注銷功能和另一種新頁面類型。如果您到目前為止一直在關注本教程系列，我認為您對數據庫、模型、視圖、模板和路由器如何協同工作有深入的了解。我希望您現在也開始喜歡構建 Parse.js 項目。請留下您的反饋并告訴我是否有幫助。
通過我們這次構建的這個單一博客文章頁面，我們下次將添加評論部分。應該是一件有趣的事。敬請關注！
以上就是開始使用 Parse.js 創建博客：刪除、注銷和查看個人博客文章的詳細內容，更多請關注www.92cms.cn其它相關文章！
