跨界拍照app进阶



用Meteor技术实现跨平台拍照APP


我们怎么来看这个记录到底增加没有呢?我们之前提到了这个robomongo,这个是meteor的GUI。


0.png


我们用这个工具来检查一下,之前我们加入的这条数据到底是不是增加进去了。我们打开看一下这个,这是我们数据库的名字。


1.png


Collection,我们可以看见一个pictures的数据库。


2.png


为什么叫pictures呢?


3.png


我们打开这个pictures,双击看看里面有什么记录。


4.png


这里果然有一条记录。我们在展开看看,它的time就是刚才那个时间。


5.png


pic这是一个串,这是一个base64的字符串。


6.png


那么,就是看看这个pic的字符串是怎么来的。怎么样来检查它?我们再回到代码中。 用浏览器的debug,我们来看一下。我们在浏览器中为之前写的代码,在返回的数据中打上断点。


7.png


或许很多会很奇怪。Coffeescript代码不是编译成JavaScript代码才能执行吗?没错,但是我仍然能够在浏览器里面打开这个coffeescript代码,看看它的源代码,而且可以设置断点。然后我们再照一张,看一下。


8.png


马上就有一个断点停在这儿了。


9.png


停在这儿之后,我们可以往下走一步。


90.png


如果没有错误,它就到这儿了。


91.png


这个时候,我们就可以看一下这个返回值的r是什么。


92.png


r就是这个字符串。


93.png


刚才那个function直接返回的这个照相的照片,实际上是以这个String的方式base64编码方式,存起来的。当然了,只要我们把它存在数据库里面,它就会仍然保持string状态。
我们回来看数据库,这个时候应该有两条记录了。


94.png


果然,有两条记录。第二条是这个时间的记录。一切正常。
那么,我们下面要做的工作就是,怎么把刚才照的照片给显示出来。这是我们马上要完成的工作。显示在哪儿呢?显示在这儿。


95.png


因为我们可能面临不止一张照片,所以我们这里应该是个循环。这个功能我们是怎么实现的呢?是这样实现的。一个叫each pictures。


96.png


这个pictures还没有出现,等会儿我们会写它是怎么来的。对于来自于这个pictures里面的每一个元素,我都把这一段嵌入到里面去。


97.png


这个pic就是我们嵌入到数据库中的那个pic。


98.png


它会显示在这里边,src等于pic。注意,这个base64这个字符串,可以直接用于src。
还差什么,还差这个pictures,这个在哪里定义呢?我们现在来定义这个pictures,这个需要用到Hybrid的概念。我们还没有写这个Hybrid,具体的东西我们可能晚一些时间,在随后讲课中给大家介绍清楚,为什么有个Template.hello.helpers。


99.png


helpers是什么意思?包括上面的events是什么意思?我们为什么这么写?我们在随后的课程中会讲得清楚些。我们先把这个pictures定义成。


9900.png


myColl.find是典型的mongoDB的查询语句。它从这个collection里面查询符合这个条件的所有的记录,然后把它按照时间的倒叙排列。那么,也就是说这个pictures会在执行的时候,变成一个查询的结果。


9901.png


collection里面的所有记录都会被查询出来,放在cursor里面。然后在页面中执行的时候,会被一一的打开然后每一条放到这里边。


9902.png


现在我们来执行试一试。我们回到浏览器上面看一看。


9903.png


很好,已经执行出来了,这是我刚才拍的两张照片。


9904.png


如果我们来分析它的代码结构呢!就会发现,这里有两个div。


9905.png


为什么是有两个div呢?你可能都想起来了吧!因为我这里有一个each。


9906.png


也就是说,这个pictures里面一共有两个元素。我们照过两张照片。每一个元素呢!都放在了这样的div里面。其中呢!把这个双大括号里面的内容予以替换了。


9907.png


替换了以后的结果就是这样的。



9908.png


src和data-id里面的内容就是我们之前写到数据库里面的一长串。同样的,第二个也是一样的。


9909.png


那么,同样的。我们看看移动端是不是也是这样的呢?


99090.png


果然也是,移动端也有。只是因为这个照片显然太宽了,这个宽的问题我们怎么解决呢?

我们需要修改这个css。我们回到这个代码中,一样不用重启。给它添加了这么一段css的代码样式。


99091.png


我们保存一下,马上回来看一下。


99092.png


果然,马上就能够看到完整的图片了。


99093.png


如果还觉得宽,我们还可以再改一下。


99094.png


马山就变成了250的宽度了。


99095.png


这个功能就算是完成了。注意??!这个现在所有的东西都是实时多平台的。怎么能证明这一点儿呢?我们把这个模拟器和浏览器挪到同一个窗口。


99096.png


我们现在就是两个用户了,一个是在手机上的用户;一个是web用户,我们在web用户上面拍一张照片的话,来证明手机用户也能够同时得到这一张照片。我们就拍这样的一张照片。


99097.png


注意看,马上在手机端就得到了同步。也就是说,这种代码的同步是实时完成的。


99098.png


可是你们就会问,这怎么就实时完成的?我们的代码中没有写任何跟server端的交互。


99099.png


我这里没有任何ajax去server端取数据,完全没有。那么它怎么坐到的?它只是在本地数据库里面写了一条记录。然后做了个查询而已。这些就是我们经常说的meteor的“魔术”了。
这些疑问怎么得到解决呢?为什么我们就可以只用这么16行代码就能完成这么一个相当完善的应用程序呢?


990990.png


这些谜底,我们会在随后的课程中一一给大家解开。好的,我们的Demo就到这儿了。


990991.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 葡京国际首页 www.ybxiongdi.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

秋招大聚惠,豪华礼包你领了吗?

客服热线 400-862-8862

回到顶部