Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Meteor笔记 #11

Open
isNeilLin opened this issue Nov 15, 2017 · 0 comments
Open

Meteor笔记 #11

isNeilLin opened this issue Nov 15, 2017 · 0 comments
Labels
框架&工具库 Vue和React等前端框架或工具库相关

Comments

@isNeilLin
Copy link
Owner

isNeilLin commented Nov 15, 2017

Meteor

Meteor应用的文件结构

  • /server文件夹中的代码只会在服务端运行
  • /client文件夹中的代码只会在客户端运行
  • 其他代码则同时运行于服务端和客户端
  • /lib文件夹中的文件将被优先载入
  • 所有以main.*命名的文件将在其他文件载入后载入
  • 所有静态资源文件放在/public文件夹中

Blaze模版

定义一个模板

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

引用一个模板

{{> xx1}}

相互嵌套

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

条件

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

遍历

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


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

上下文

模板动态数据业务逻辑helpers,有关一些动态数据的判断都写在helpers对象中

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

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

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

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

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

事件绑定
模板内置了jQuery,也就是说平时我们在前台操作的dom,转在了后台写。

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

模板的生命周期

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

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

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

MongoDB

meteor中使用的数据库是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中的所有记录。

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

Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    tasks: function () {
      return Tasks.find({});
    }
  });
}

Meteor可以使用的数据库操作API

find,findOne,insert,update,upsert,remove,allow,deny

insecure包

模拟每个客户端对服务器上的数据库拥有完全读/写权限的效果,通常生产环境需要移除这个包meteor remove insecure
这时如果创建一个清单,会发现多出一个清单又瞬间回到原样了,控制台显示update failed: Access denied,这就是延迟补偿:客户端上使用预读和模式模拟技术,使它看起来与数据库的连接是零延迟的
去掉了insecure包,需要修改代码

  • 方法一
// server
Tasks.allow({
    update: function(userId,doc,fieldNames,modifier){
        return true;
    }
});

如果返回true,允许客户端执行update操作,false时拒绝,也可以使用collection.deny方法来拒绝客户端修改数据库的请求。只有在客户端试图修改数据时才会触发,而服务器端不受这个限制

  • 方法二 通过Meteor.methodsMeteor.call的组合来实现客户端修改数据
//server
Meteor.methods({
    insert:function(task){
      Tasks.insert(task);
    }
});

//client
Template.task.events({
    'click .add': function () {
      Meteor.call('insert',{name:'Lin',skill: 'JS'});
    }
});

autopublish包

使用autopublish包,Meteor会客户端Minimongo中的内容和服务器端的MongoDB同步(除了users集合部分的内容和索引)通常生产环境也需要移除这个包meter remove autopublish

这时候客户端和服务器端的数据库就不同步了,假如我们有多个集合,可以选择性地从服务器端发布,然后从客户端订阅

//server
Meteor.publish("task",function(){
    return Tasks.find();
});

//client
Meteor.subscribe("task");
@isNeilLin isNeilLin added the 框架&工具库 Vue和React等前端框架或工具库相关 label Nov 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
框架&工具库 Vue和React等前端框架或工具库相关
Projects
None yet
Development

No branches or pull requests

1 participant