开始使用Parse.js构建博客：删除，注销和单个Blog视图

您将要创造的

在上一个会话中，您重构了整个博客系统。 现在，所有内容都已清理完毕，您可以为新的冒险做好准备了。 在本节中，我们将围绕路由器做更多的事情，并向我们的博客系统添加另外三个功能：删除，注销和单个博客视图。

1.删​​除

在第6部分中，我们介绍了编辑功能。 您也可能希望删除您的博客文章之一。 您可以在两个地方放置此函数：将其添加到BlogsAdminView ，或将其发送到URL并在Router 。

我将向您展示路由器的方式。 它更常用，并且使代码的结构更好。

步骤1：添加网址格式

像往常一样，让我们​​先添加一个URL模式：

routes: {
		'': 'index',
		'admin': 'admin',
		'login': 'login',
		'add': 'add',
		'edit/:id': 'edit',
		'del/:id': 'del'
	}

步骤2：连结至删除

然后，更新管理页面中的链接：

Delete

步骤3：del函数

现在，让我们向路由器添加一个新的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.单个博客视图

现在让我们继续进行一些新功能。

到目前为止，我们在主页上显示了整个博客文章。 尽管有些人确实喜欢这种样式，但是大多数博客系统都支持在摘要中预先添加摘要的想法，如果访问者单击文章，则他们可以在单独的页面上看到内容，并且页面周围可能会有一些注释区域。

在本节中，我将引导您创建这个详细的单个Blog视图，在下一个中我们将重点关注构建评论。

步骤1：添加摘要列

首先，让我们在Blog表中为摘要添加一列：

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

让我们为内容textarea提供一个类，并仅使用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模板：

添加一个接受blog对象的新BlogView类，并将其呈现在#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项目。 留下您的反馈意见，让我知道是否有帮助。

这次我们建立了这个单一的博客文章页面，下次我们将添加评论部分。 应该是一个有趣的。 敬请关注！

翻译自: https://code.tutsplus.com/tutorials/get-started-building-your-blog-with-parsejs-delete-logout-and-single-blog-view--cms-24196