未分类

Meteor学习笔记-1

Meteor

扯淡

弄完Quanta杯总得自己找点东西来学呀~去肖老板办公室见了中大的两个做外包的师兄，有个师兄也会前端，看到他用了Meteor,那我自己也来搞一下咯~
Hexo的模板渲染遇到Meteor的模板代码会渲染出错！！所以有些代码就不放上去了。

安装

  • METEOR 还是想直接在Win下搞，选择好安装包后安装，记得要翻墙（也可能是校园网屏蔽了某些网站）
  • 框架是直接安装在C盘下的C:\Users\Administrator\AppData\Local\.meteor。把meteor.bat添加到系统变量，然后就可以在任意位置使用命令创建新的应用了：meteor create simple-todos。后来发现用WebStorm打开也可以直接创建Meteor应用，真不愧是前端神器啊，而且还有其他前端应用比如Bootstrap，PhoneGap等等。
  • 指导文档：Installing Meteor

##　学习

###　用模板定义视图
在html文件中定义视图：
在应用中对应的会被用模板渲染，使用name来关联：

1
2
3
<template name="task">
    <li>{{text}}</li>
</template>

在JS文件中对应着Template.task
在视图中还可以添加逻辑：

1
2
3
4
5
<ul>
    {{#each tasks}}
      {{> task }}
    {{/each}}
</ul>

向模板传递数据：
在JS文件中定义helpers：

1
2
3
4
5
6
7
8
9
10
11
// simple-todos.js
if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    tasks: [
      { text: "This is task 1" },
      { text: "This is task 2" },
      { text: "This is task 3" }
    ]
  });
}

这里返回一个数组，数组中有三个对象，此时这个WebApp就是循环输出tasks中的三个对象。
对于CSS来说就没有什么特别的了，该怎么写还怎么写。

在collection中存放tasks

这里用到的数据库是MongoDB，使用前先了解一下这个非关系型数据库：

collection介绍
在mongodb中，collection相当于关系型数据库的表，但并不需提前创建，更不需要预先定义字段
db.collect1.save({username:’mayj’,mail:’test@abc.com’}) #向collect1中插入一条记录，collection会在第一次插入记录的时候自动创建
db.collect1.save({username:’name2’,mail:’name2@abc.com’,age:28}) #插入一条新记录，相对上条记录这次有三个key，类似三个字段
db.collect1.find(); #列出collect1中的所有记录

参考文章：mongodb的collection几个功能介绍

在Meteor中创建一个新的collection使用：MyCollection = new Mongo.Collection("my-collection");，为了让这个Collection（我叫做集合吧）能在服务器和客户端使用，写在判断客户端还是服务器端的外面。
写好之后修改之前的JS，helper中返回集合的数据：

1
2
3
4
5
6
7
8
9
10
11
// simple-todos.js
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    tasks: function () {
      return Tasks.find({});
    }
  });
}

然后开始向数据库中插入数据。这后面就有点坑了。

安装MongoDB

虽然在启动应用的时候是显示了MongoDB启动成功了，可是在执行meteor mongo显示机器上没有MongoDB。所以觉得应该是没有装这个数据库，然后就去下载了：
官网：MongoDB
刚开始我就一直按最显眼的那些地方的按钮，START啊，BEGIN啊，然后就要我注册了，好吧，注册完一步步点，发现要装个浏览器插件之类的东西，装咯，然后发现自己到了一个网页版的数据库管理系统MMS：
MMS
额=。=老衲不会用啊。好像和之前装的MySQL管理系统有点像，可是我只需要命令行能调用就行了啊= =
然后回到官网看，原来发行的下载链接就在主页下面：
DownLoad
好咯，安装完之后发现CMD里还是不能用，再百度。
然后是这样的：C:\Program Files\MongoDB\Server\3.0\bin我自己的安装在这里，然后把bin复制到E盘，执行下面的命令：
mongod.exe dbpath=D:\mongodb\data logpath=D:\mongodb\log\mongo.log
来开始一个数据库，然后再开一个新的窗口执行：mongo.exe就成了。可以执行各种查询插入操作了。
更详细的步骤：在Window平台下安装MongoDB的方法和步骤详解
不过这时候在meteor项目下执行meteor mongo还是失败，又晚上12点了，关机睡觉，明天再搞。
——————–叫我分割线————————————-
起床再试一下OK了。能进入mongodb的shell，这时再执行插入语句，成功，app也显示出来了。

分享到