Meteor 创建帖子

由 北公爵无欢 创建，路飞 最后一次修改 2016-08-12 创建帖子我们曾经轻松地通过控制台去使用 Posts.insert 来创建帖子并插入到数据库。但我们不可能指望用户去打开控制台来创建一个新的帖子吧？所以我们需要在用户界面上创建一些表单控件，让用户在我们的 App 上发布一些新的帖子。构建新帖子的提交页面我们首先为新帖子的提交页面定义一个路线：Router.configure({ layoutTemplate: 'layout', loadingTemplate: 'loading', notFoundTemplate: 'notFound', waitOn: function() { return Meteor.subscribe('posts'); }});Router.route('/', {name: 'postsList'});Router.route('/posts/:_id', { name: 'postPage', data: function() { return Posts.findOne(this.params._id); }});Router.route('/submit', {name: 'postSubmit'});Router.onBeforeAction('dataNotFound', {only: 'postPage'});在头部（Header）添加一个链接定义了这条路线后，现在我们可以在头部模板（Header）中添加一个访问我们提交页面的链接：<template name="header"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{{pathFor 'postsList'}}">Microscope</a> </div> <div class="collapse navbar-collapse" id="navigation"> <ul class="nav navbar-nav"> <li><a href="{{pathFor 'postSubmit'}}">Submit Post</a></li> </ul> <ul class="nav navbar-nav navbar-right"> {{> loginButtons}} </ul> </div> </div> </nav></template>设置了这个路线就意味着如果用户浏览 /submit 的 URL 路径， Meteor 会显示 postSubmit 模板。 下面让我们来写这个模板吧：<template name="postSubmit"> <form class="main form"> <div class="form-group"> <label class="control-label" for="url">URL</label> <div class="controls"> <input name="url" id="url" type="text" value="" placeholder="Your URL" class="form-control"/> </div> </div> <div class="form-group"> <label class="control-label" for="title">Title</label> <div class="controls"> <input name="title" id="title" type="text" value="" placeholder="Name your post" class="form-control"/> </div> </div> <input type="submit" value="Submit" class="btn btn-primary"/> </form></template>注意：这里有大量的标签样式，只不过都来自于 Twitter Bootstrap。只有表单元素是必不可少的，样式的设置只是让我们的 App 更好看一点。在浏览器中显示：帖子提交页面这是一个简单的表单页面，不需要担心它的提交事件，因为我们会通过 JavaScript 拦截表单的提交事件并更新数据。（但如果你考虑到一旦禁用了 JavaScript 的话， Meteor App 就会完全失效）。创建帖子让我们将一个事件处理绑定到表单的 submit 事件。最好使用 submit 事件（而不是按钮的 click 事件），因为这会覆盖所有可能的提交方式（比如敲击回车键）。Template.postSubmit.events({ 'submit form': function(e) { e.preventDefault(); var post = { url: $(e.target).find('[name=url]').val(), title: $(e.target).find('[name=title]').val() }; post._id = Posts.insert(post); Router.go('postPage', post); }});添加一个帖子提交页面并把链接放到头部（Header）这个函数使用 jQuery 去获取我们表单字段的值，并填充到一个新的帖子对象。我们需要调用 event 的 preventDefault 方法来确保浏览器不会再继续尝试提交表单。最后，我们要跳转到新的帖子页面。 insert() 方法把这个对象插入到数据库并返回插入对象的 _id 值，路由器的 go() 方法将构建一个帖子页面的 URL 提供我们访问。最终的结果是用户点击提交时，创建一个帖子，然后用户浏览器将立即跳到帖子创建页面。添加一些安全检查创建帖子这功能看起来都很好，但我们不想让随机浏览的游客都可以这样做：我们希望他们必须登录。首先可以对登出的用户隐藏帖子创建页面的链接。不过，没有登录的用户仍然可以在浏览器控制台中创建一个帖子，这是我们不能允许的。值得庆幸的是数据安全已经集成在 Meteor 的集合中，只是在默认情况下它是关闭的。这样的设置可以使你在刚开始构建 App 的时候更加轻松。我们的 App 不再需要这些辅助了，果断扔掉吧！我们去删除 insecure 包（恢复数据安全）：meteor remove insecureTerminal 终端执行以后你会注意到，帖子的提交页面不可用了。这是因为没有了 insecure 包，从客户端插入帖子集合已经不再被允许了。我们需要给出一些明确的规则告诉 Meteor ，什么时候才能允许客户插入帖子，否则我们只能从服务端插入。允许帖子插入首先，为了让我们的提交页面再次可用，我们先展示如何允许从客户端插入数据。事实上，我们最终还会用不同的技术去解决这个问题，但是现在，先做一些简单的处理吧：Posts = new Mongo.Collection('posts');Posts.allow({ insert: function(userId, doc) { // 只允许登录用户添加帖子 return !! userId; }});移除 insecure 包并允许插入帖子Posts.allow 是告诉 Meteor：这是一些允许客户端去修改帖子集合的条件。上面的代码，等于说“只要客户拥有 userId 就允许去插入帖子”。这个拥有 userId 用户的修改会传递到 allow 和 deny 的方法（如果没有用户登录就返回 null），这个判断通常都是准确的。因为用户帐户是绑定到 Meteor 核心里面的，我们可以依靠 userId 去判断。然而，我们仍然需要处理一些问题：登出后的用户仍然可以访问帖子创建页面。帖子并没有以任何方式与用户进行绑定（没有在服务器上的代码去执行这个）。允许创建指向相同的 URL 的多个帖子。让我们来解决这些问题吧！帖子创建页面的可访问性让我们首先阻止已登出的用户看到帖子创建页面。