Meteor 初级入门 三
废话先:
今天的废话呢有些多,主要是我在学习Meteor中遇到的一些问题,待这些问题解决后我们继续Meteor 初级入门 三的叙述。
前几天我就简单的搞了一个用户注册的界面,这里说明一下,Meteor中有accounts-ui这个package提供登录注册之类的服务,你只需在HTML中添加{{loginButtons}}就行。但是你总不能全部依赖这玩意吧。登录界面很简单了,username,email,password。可问题在我点击log in按钮时来了。我的打算就是以管理员的身份创建用户,可当我创建用户成功后,我的Meteor管理员账户尽然被server强制log out 了?what happened?
我看了一下source coder,里面是这样写的:
1: Accounts.createUser = function (options, callback) {
2: options = _.clone(options); // we'll be modifying options
3:
4: if (!options.password)
5: throw new Error("Must set options.password");
6: var verifier = SRP.generateVerifier(options.password);
7: // strip old password, replacing with the verifier object
8: delete options.password;
9: options.srp = verifier;
10:
11: Accounts.callLoginMethod({
12: methodName: 'createUser',
13: methodArguments: [options],
14: userCallback: callback
15: });
16: };
其中第七行注册的意思就是移除旧的password,以认证的对象代替。可这和我的管理员账户被强制下线没有丝毫的关系啊,咱们再来看看password_server.js中的source coder刚刚的是password_client.js中的source coder.:
1: Meteor.methods({createUser: function (options) {
2: // createUser() above does more checking.
3: check(options, Object);
4: options.generateLoginToken = true;
5: if (Accounts._options.forbidClientAccountCreation)
6: throw new Meteor.Error(403, "Signups forbidden");
7:
8: // Create user. result contains id and token.
9: var result = createUser(options);
10: // safety belt. createUser is supposed to throw on error. send 500 error
11: // instead of sending a verification email with empty userid.
12: if (!result.id)
13: throw new Error("createUser failed to insert new user");
14:
15: // If `Accounts._options.sendVerificationEmail` is set, register
16: // a token to verify the user's primary email, and send it to
17: // that address.
18: if (options.email && Accounts._options.sendVerificationEmail)
19: Accounts.sendVerificationEmail(result.id, options.email);
20:
21: // client gets logged in as the new user afterwards.
22: this.setUserId(result.id);
23: Accounts._setLoginToken(this.connection.id, result.token);
24: return result;
25: }});
我们看21-24行的codes,看到21行的注释,是不是知道了原因了?他那句话的意思就是,当用户注册后,立马以刚刚注册的用户id作为马上要登录的id,
22行就是这样设置了,这样做有一个好处,就是省时!
嗯,好了,问题阐述了,原因也找到了,我们是不是总结下为什么会出现这个问题以及如何去解决它?
为什么会出现这种问题:
错!还是错在我啊!我试图用客户端的账户来管理如何分派想要执行的任务,然而Meteor的accounts-password package是用来让新用户注册,并且为他们立马登录的。
如何解决这样的问题:
首先呢,我们必须牢记,在Meteor中同样的方法运行在客户端和服务端的效果是不同的!其次,解决这个问题的办法就是:将创建用户的method写在server端,并且能被你客户端的管理员模块能够调用!
下面我们开始今天的主要内容
在上一篇的博文 ,我们将MongoDB中的数据呈现在网页中,我们可以对这个project进一步的做得更好!
在上面的基础之上,我们对这个project添加用户的管理。
具体的思路:
每个用户只能看到自己在CloudTel中的添加的电话号码,或者是个人的隐私之类的信息,而别人没有权利去看。也就是一个用户对应一个只属于自己的保存空间。那么我们如何实现这样一个功能呢?
首先我们现在HTML中添加这段代码:
添加这段代码的前提呢,就你要在这个project中添加一个package:accounts-ui;
具体的添加方法就是先暂停你这个运行的项目(CTRL+C);之后键入:meteor add accounts-ui、meteor add accounts-base、meteor add accounts-password和meteor add email
我们在考虑accounts的同时也应当考虑security紧接着我们应当还要移除insecure具体的就是 meteor remove insecure
上面这部做完后,还有一步也是非常的重要的,这一步像我们在ASP.NET中的config;
当你完成了如上的操作后再次运行。你会在网页上看到:
点击之后呢我们可以看到这样的ui:
好了,当你完成了上面的操作,下面几项操作,你就不再需要管理了,你可以集中精力去实现你的业务。
1.用户登录管理
2.用户注册管理
3.如果用户忘记邮箱之后的操作
4.用户在线状态的管理
5.MongoDB的管理
我先以上的四个步骤,如果我们去做的话,再加上界面的设计,没有一个钟头是拿不下的吧!
恩,到现在我们有了用户管理的这个工具,那么我们得把它用在更加需要的地方。
上面的这段代码,是server端的代码。如果读者一直在看本系列,也许通过以前的比较可以发现,这段代码中比以前多了({owner:this.userId},{…}).也就是这个owner的添加让我们对用户账户的管理变得更加的轻松了。
那么有了server端,我们的client端如果执行诸如update,insert之类的操作那怎么办呢?我想聪明的你一定想到了。
或许读者已经在《Meteor 初级入门二》中已经发现了。
其实这个也就是多加一句owner:Meteor.userId();
恩?等等,为什么这里我们不用this.userId呢?我在meteor的官方文档中看到的也是可以用this.userId;来获取目前的用户,我可我试了好多遍,都试不通,我也很纳闷,我用console.log(this.userId);来查看页没有结果。最后我在官方文档中继续查阅。看到了Meteor.userId();我就用它在client端试了一下,okay。通过。具体的什么原因,现在的我暂时也没有搞清楚,文档也是English的,所以也有些晦涩难懂。可不管怎么样,现在程序调试通过了就好,这就是我们的目的。
恩,到了现在我们将最基本的一个用户对应一个view的管理已经完成了。如果读者正确操作的话,这是你应该成功的看到如下的界面:
读者在这里可能看到我的注册名为DzhangAdmin。顾名思义就是我是这个project的最终的管理员,我又最高的权利去管理每个使用这个project的用户的行为,那么我们怎么样去实现这样一个管理的功能呢?
首先我们应该看Meteor的官方文档,里面提供了解决这个问题的API,具体的介绍,我在这边就不再说了。请看下面这段代码(此时请忽略lists.allow({}))的右半边代码,稍后将会解答:
上面的这段代码也就是允许管理员对这个project的管理,当然在《Getting Started with Meteor.js javascript Framework》这本书中是这么说的。我个人在学习这个项目的这一步的时候,觉得,这样做不好,为什么呢?你这个project是对用户而开发的,而不仅是一个人。那是的我带着这样的疑问往下看了下去。恩,那么现在书中所阐述的实现就是我在上图贴出的lists.allow({});的右半边的代码,这样只要有人注册就会有对数据操作的权限了。
好了到了现在我们的这个project的已经快要结束了,还有一步也是至关重要的。请接着往下看吧。
packaging and Deploying.
其实在Meteor中呢,有很多的third-party packages。其实说到这里不得不提下Node.js了,在以前javascript并没有什么包管理,模块之类的规范,因此javascript也被很多程序员抱怨。不久commonJS就来规范javascript。要求其得到相应的规范。毕竟Meteor是基于Node.js而开发的所以少不了包,模块之类的。当然读者现在没有看到。等下我将阐述。
我们可以通过以下的命令查看在现在读者的电脑里有哪些可以获取到的包:Meteor list。在执行上面的命令后你将会看到一串包名呈现在CMD窗口中。
在Meteor 初级入门 二中我们在网上下了关于Bootstrap。现在我们可以不要它了,读者现在可以删除你添加进来的Bootstrap的两个文件。为什么这样做。因为meteor有自带的bootstrap。但是可能版本不一样。读者执行下面的指令:Meteor add bootstrap.添加成功后会后提示。
如果你想更新你的meteor的包,可以在命令行中键入:Meteor update;
好了,现在我们可以打包我们的这个项目了。
当你确保你这个project都已经完成后将目录定位到你这个项目的根目录。执行Meteor bundle CloudTel.tgz
稍等片刻后读者会在其根目录中看到一个已经打包好的压缩文件。
恩,到了现在我们就可以发布了。(注意:此时还是保持在你打包的根目录下面)
执行meteor deploy yourAppName.meteor.com
过了一会后读者就可以看到 Now Servering at yourAppName.meteor.com这样的成功提示。紧接着读者就可以在 yourAppName.meteor.com这个域名里看到自己发布的这个项目了。因为我不是发布的这个项目,所以这里我就不在截图了。基本的和你做的项目运行在电脑上的一样,只不过地址栏里不是localhost:xxxx。
现在说说为什么Meteor基于Node.js开发的具体“蛛丝马迹”。现在读者可以解压刚刚打包的压缩包。里面的内容我就不再贴图了。里面的基本上都符合Node.js的应用开发的规范。
恩,到了现在咱这个meteor这个项目已经做完了。如果您还有什么疑问欢迎email,具体的邮件我的博客的左上方有。只要有问题我一一回答。
这个项目的源代码我已经在百度云盘上共享:点击。有疑问的可以看一下。
同时我也做了一个类似于微博的小应用。如果您这个CloudTel的项目已经掌握,可以看看我那微博的小应用。获取代码点击这:点击;
同时大家可点击 http://dzhangblog.meteor.com
进行访问。
本系列也是本人在学习过程中的记录,与其藏在脑子里,不如写出来与大家分享,同时也为刚刚学习Meteor的同学们一个好的开始,而不是读蛋疼的Meteor的英文Docs,也为刚刚学习Meteor的同学们省去了很多时间。此外,就目前而言国内关于Meteor的中文文档甚少!此系列,也是本人阅读《Getting Started with Meteor.js JavaScript Framework》之后将此书的小项目拿出来作为本入门系列的project。特此声明!
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步