首頁 >web前端 >html教學 >開始使用 Parse.js 建立部落格:刪除、登出和查看個人部落格文章

開始使用 Parse.js 建立部落格:刪除、登出和查看個人部落格文章

WBOY
WBOY原創
2023-09-11 20:13:06594瀏覽

开始使用 Parse.js 创建博客:删除、注销和查看个人博客文章

在上一屆會議中,您重構了整個部落格系統。現在一切都已清理乾淨,您已準備好加速進行一些新的冒險。在本次會議中,我們將圍繞路由器做更多的事情,並在我們的部落格系統中添加三個功能:刪除、登出和單一部落格視圖。

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 的完整文件。

讓我們對其進行測試運行,並仔細檢查資料庫以查看它是否正常工作。

开始使用 Parse.js 创建博客:删除、注销和查看个人博客文章

#

恭喜,它正在工作!

第 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

开始使用 Parse.js 创建博客:删除、注销和查看个人博客文章

#

如您所見,樣式確實不是本教學的重點。您可以隨意修復填滿並根據需要設定樣式。

3。單一部落格視圖

現在讓我們繼續開發一些新功能。

到目前為止,我們正在主頁上顯示整篇部落格文章。雖然有些人確實喜歡這種風格,但大多數部落格系統都支持預先提供片段摘要的想法,如果訪客點擊文章,他們就可以在單獨的頁面上看到內容,周圍可能還有一些評論區域。

我將在本次會議中引導您建立這個詳細的單一部落格視圖,我們將在下一次會議中專注於建立評論。

第 1 步:新增摘要列

首先,我們在部落格表中新增一列作為摘要:

开始使用 Parse.js 创建博客:删除、注销和查看个人博客文章

#

第 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中再加入一個4750256ae76b6b9d804861d8f69e79d3作為摘要:

	// 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 插件,您会注意到之前我们的目标是所有 4750256ae76b6b9d804861d8f69e79d3 元素:

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();

现在可以使用了!

开始使用 Parse.js 创建博客:删除、注销和查看个人博客文章

第 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 中: p>

	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 项目。请留下您的反馈并告诉我是否有帮助。

通过我们这次构建的这个单一博客文章页面,我们下次将添加评论部分。应该是一件有趣的事。敬请关注!40587128eee8df8f03d0b607fe98301440587128eee8df8f03d0b607fe983014

以上是開始使用 Parse.js 建立部落格:刪除、登出和查看個人部落格文章的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn