meteor.js笔记

meteor.txt

1，linux mac安装方法
curl https://install.meteor.com/ | sh
根据提示创建项目目录和安装模块

2，目录介绍
client/main.html //相当于index.html，所有的模块都插入到页面中
client/main.js //main.html的一些业务逻辑代码都在这里写
client/main.css //添加样式
server/main.js //向服务器提交数据

//希望加载额外额插件
在client目录下手动创建lib目录
例如：client/lib/jquery.js //运行meteor就会自动加载jquery
例如：client/lib/css.css //运行meteor就会自动加载css.css
//将数据库信息插入到模板中。（meteor只支持mongodb）
在项目的根目录中手动创建lib/collection目录
例如：lib/collection/users.js

内容：
//不能加var不然就成了局部变量了，要实现全局变量这样任意的模块都能调用
Users=new Mongo.Collection(‘users’);

3，Blaze模板
可以实现后台数据有变化前台页面会实现自动刷新这就是响应式
只要html、js、css有变化页面就会自动刷新

（1）在client目录下创建user.html

 内容：
<template name="user_list"> <!--模板命名，名字必须是唯一的user_list-->
 <p>{{xx}}</p> <!--xx是要从业务逻辑代码中调用出来的数据-->
 <ul>
 {{#each users }}
   <li>
     name:{{name}}----age:{{age}}
   </li>
 {{/each}}
 </ul>
</template>

（2）在client目录下创建user.js

import { Template } from 'meteor/templating';
Template.user_list.helpers({
 xx:"xxx1",
 users:function () {
   return Users.find() //Users.find()是从mongodb数据中获取数据
 }
});

（3）创建目录和js，lib/collection/users.js

Users=new Mongo.Collection('users');

（4）编辑client/main.html

在main.html页面需要插入打地方，加入

{{> user_list}}

——————-以上大概介绍了meteor与数据库的交互流程—————————

下面介绍Blaze模板基础用法：

{{name}} //不解析html代码，写什么代码直接显示出来
{{{name}}} //解析html代码

//定义一个模板

<template name="xx1"> //xx命名必须要唯一
 ...
</template>

//引用一个模板

{{> xx1}}

//相互嵌套

<template name="xx1"> //xx命名必须要唯一
 {{> xx2}}
</template>

//条件

 {{#if true}}
    <p>真</p>
 {{else}}
    <p>假</p>
 {{/if}}

<template name="ifelse">
  {{#if panduan canshu}}
    {{> test}}
  {{else}}
 <p>没有</p>
 {{/if}}
</template>

 Template.ifelse.helpers({
   canshu:'11111',
   panduan:function (canshu) {
      return !!canshu && canshu.length>5;
   }
 });

{{#unless false}} //与if相反
 <p>真</p>
 {{else}}
 <p>假</p>
{{/unless}}

//遍历

 {{#each arry}}
   <p>{{name}}---{{age}}</p>
 {{/each}}


arry:function () {
 return [{name:'11'},{age:22},{name:'11'},{age:22}]
}

{{#each arry}}
 <p>{{this}}</p>
 {{/each}}

arry:function () {
 return ['123','456']
}

//上下文
{{#with}}
模板动态数据业务逻辑helpers，有关一些动态数据的判断都写在helpers对象中
使用之前先引入import { Template } from ‘meteor/templating’;

局部：仅仅在xxx模板中起作用

Template.xxx.helpers({
 ...
});

全局：任意模板中都可以调用该变量

Template.registerHelper('变量名',(a,b)=>{
  return a===b;
});

某模板内：
<input type="checkbox" checked={{变量名 select 'yes'}}>
Template.xxx.helpers({
  select:'yes'
});

事件绑定
模板内置了jQuery，也就是说平时我们在前台操作的dom，转在了后台写。
click
dbclick
focus
blur
change
mouseenter/mouseleave
mousedown/mouseup
keydown/keypress/keyup

案例：

Template.xx.events({
  "click button":function(event,template){
      ...
  },
  "mouseenter #myid":function(event,template){
      ...
  }
});

//阻止冒泡
event.stopImmediatePropagation();

//阻止默认行为
event.preventDefault();

模板的生命周期：(说白了就是模板在不同时期的回调函数)

Template.xxx.onCreated(function(){
  //模板的实例化完成，但是还看见，适合设置初始化的变量
  this.haha='123'; //设置初始化变量 ，想在helpers和events函数中获取到此变量使用Template.instance().haha;
});

Template.xxx.onRendered(function () {
  //dom已经在页面存在，用户可以看见了，需要用js操作dom就在此步进行操作
});

Template.xxx.onDestroyed(function () {
  //模板被销毁时候回调
});

——————————————-
与mongodb数据库交互
——————————————-

用mysql的概念来理解mongodb

库—集合
表—文档
字段—键值对

1，进入mongodb
meteor mongo

增删改查：https://sdeno.com/?p=5397
2，meteor连接mongodb

lib/collection/Users.js
Users=new Mongo.Collection(‘users’); //连接并获取到users集合，不需要账号密码（但是这样不安全）
client/user.js
Users.find(); //查询users集合的所有文档

——————————————-
session
——————————————-
在shell中切换到meteor目录
下载模块：meteor add session

引入：import { Session } from ‘meteor/session’;

获取：Session.get(‘name’);
设置：Session.set(‘name’,value);
——————————————-
路由（推荐使用）
——————————————-
如果使用过express、koa类似的框架它们都内置了路由功能，而meteor内置没有路由功能，需要额外安装
安装：meteor add iron:router
官网：http://iron-meteor.github.io/iron-router/

导航：
client/nav.html
<template name=”nav”>
<ul>
<a href=”/”>首页</a>
<a href=”/aboutus”>关于</a>
</ul>
</template>

首页：
client/home.html

<template name=”home”>
{{> nav}}
<p>这里是首页</p>
</template>
为首页创建路由,并渲染否则页面无法显示
lib/router.js

import { Router } from ‘meteor/iron:router’;

Router.route(‘/’,function () {
this.render(‘home’); //这里的home是 template的模板名称home
});
模板和路由都创建好，只要访问url就自动在main.html的body标签里面插入内容。
以上是简单基础的用法，但如果10个页面跟home模板一样都引入了{{> nav}}，之后又不需要的话，就需要一个个删除这样会比较麻烦。
这了需要了解{{yield}}的用法

公共模板：
client/public.html

<template name=”public”>
{{> nav}}
{{> yield}}
</template>
首页
client/home.html

<template name=”home”>
<!–跟之前相比这里可以不需要{{> nav}}了–>
<p>这里是首页</p>
</template>
路由：
lib/router.js

import { Router } from ‘meteor/iron:router’;
Router.configure({layoutTemplate:’public’}); //这代码说明，默认渲染出来的页面都默认嵌套到public.html页面的{{> yield}}中

Router.route(‘/’,function () {
this.render(‘home’);
});

//因为默认都会加载了导航，但是有时候我们不需要呢，可以使用以下代码：

Router.route(‘/aboutus’,function () {
this.layout(‘aboutus’); //使用this.layout() 说明就不需要嵌套到public.html模板中，而是独立使用自己的aboutus.html模板
});
——————————————-
路由与数据交互
——————————————-

开启meteor自带数据库mogodb：
meteor mongo

1，假设用Users.find()能查询到数据

2，从数据库获取数据
lib/collection/User.js
Users=new Mongo.Collection(‘users’); //users是mongodb数据集合

3，将数据集合传入到路由中
Router.route(‘/’,function () {
this.render(‘home’,{
data:function () {
return {users:Users.find()} //这里的users，就是要传到前台的变量
}
});
});
4，前台显示数据
{{#each users}}
<li>_id:{{_id}}—-{{name}}—-{{age}}</li>
{{/each}}

——————————————-
路由的生命周期
——————————————-

action: function () {
console.log(‘3’);
this.render();
},
onRun: function () {console.log(‘1’);this.next()},
onRerun: function () {console.log(‘执行第二次时才被执行’);},
onBeforeAction: function () {console.log(‘2’);this.next()},
onAfterAction: function () {console.log(‘4’);},
onStop: function () {console.log(‘路由被销毁时执行’)}