meteor.js笔记

2017-3-16    分类: meteor

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://www.xgllseo.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('路由被销毁时执行')}