Meteor筆記

isNeilLin發表於2019-03-01
筆記

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.methods和Meteor.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");複製程式碼

相關文章