1. 程式人生 > >meteor學習-- #一 安裝meteor快速使用

meteor學習-- #一 安裝meteor快速使用

caption ron install 如果 public 指定路徑 upload 也會 original

下載安裝


curl https://install.meteor.com/ | sh

meteor會自動下載mongodb和其他需要依賴的庫,不需要手動安裝.

如果是Windows 的用戶,請使用 meteor 官方安裝包,安裝時,如果殺毒軟件出現警告,請信任,防止出現無法使用meteor的情況,windows版本檢查是否正確安裝的方法是在命令提示行內,可以執行 meteor --version,出現您的meteor 版本號即可,這裏不推薦使用Windows開發Meteor,因為無法正常打包出APP

創建項目


meteor create MyApp

創建一個APP


meteor create --list 

可查看meteor自帶的例子,如下:

技術分享圖片 Paste_Image.png

創建例子中的項目


meteor create --example examplename

即可,例如


meteor ceate --example todos

輸出如下


todos: created. 

To run your new app:    cd todos    meteor

運行 :


cd todos

meteor

服務默認運行在 localhost:3000上,

也可以直接使用命令 meteor run ios 讓例子直接運行在模擬器上

技術分享圖片 Paste_Image.png

運行效果如下

技術分享圖片 Paste_Image.png

路徑

meteor前後端都是用js寫的,所以有些文件是前後端公用的

client 文件夾

只有前端能用

server 文件夾

文件只有後端能訪問

其他

其他文件夾下的文件前後端都可以訪問到

數據庫訪問

在服務器端

啟動服務後 打開另一個窗口進入服務目錄下

運行


meteor mongo

即可打開mongodb數據監控

mongodb會運行在服務端口+1的端口上, 例如 服務在3000端口上運行,則mongodb運行在3001端口

在客戶端

首先要在js文件中定義好集合變量並且訂閱好

例如


user = new Mnong,collection(‘user‘);

然後打開網頁控制臺 運行


user.find()

即可訪問數據.

模板和路由

meteor 用的是handlebars模板

** iron 有性能瓶頸 flow:router 更好用 **

添加iron:router路由庫,即可定義路由.

例如


Router.config(

    // 默認會渲染的模板

    layoutTemplate: ‘appBody‘,



    // 指定模板找不到時渲染的模板

    notFoundTemplate: ‘appNotFound‘,



    // 加載狀態時的模板

    loadingTemplate: ‘appLoading‘,



    // 等待時的操作

    waitOn: function(){

        return [Meteor.subscribe(‘publicLists‘), Meteor.subscribe(‘privateLists‘)];

    }

).




//route.js定義好路由:



Router.route(‘detail‘,{path:‘/u/:_id‘, name:‘detail‘});



Router.route(‘detail‘);

//如果不指定路徑或者action,則默認找到如參數同名的模板,例如此路由會默認找到detail模板,如果不存在就會渲染在路由配置中指定的notfond頁面.

{{#each users}}



//{{pathFor route=‘detail‘}}



//此時a標簽會取name值為detail的路由,href就是/u/_id的形式,



//路由path的parmes的key就是對象的同名key,對象不含有這個key的話,a標簽就沒有href屬性



//同理,{{name}}如果不指定的話也會取對象中的name屬性,不存在的話則沒有值

{{name}}  {{/each}}

發布和訂閱:

server.js中添加如下代碼:


//(meteor的所有變量都是全局的[代碼塊中的除外],所以不加var);

u = new Mongo.Collection("posts");

//發布somePub頻道,當有人訂閱時返回posts數據庫的數據

Meteor.publish(‘somePub‘, function() {

    return u.find()}

});

client.js中:


//即可實現前後端數據相同,否則前端js文件拿不到後端的數據.

Meteor.subscribe(‘somePub‘);

meteor學習-- #一 安裝meteor快速使用