冲浪网站优化 / Products Center

网站优化

meteor教程使用meteor快速开发web程序

发布时间: 2014-11-28 15:26:24

meteor是一个开源的JavaScript的Web应用程序框架。meteor最早在2011年12月推出，其核心是分布式数据协议，它的出现是最大的黑客新闻的历史。

一、meteor设计理念

Meteor基础构架是 Node.JS + MongoDB,它把这个基础构架同时延伸到了浏览器端，如果 App用纯 JavaScript 写成，JS APIs 和 DB APIs 就可以同时在服务器端和客户端无差异地调用，本地和远程数据通过 DDP（Distributed Data Protocol）协议传输。因此部分应用如 TODO 列表，网络在线和离线下使用功能完全没有差异，动作响应和数据延迟也完全感觉不出来。

二、meteor特点

1、非常愉快的用户体验

现代用户界面

让一个应用程序，感觉就像Facebook或Twitter上的网络博客，或者像一个伟大的桌面应用程序，不是像一堆由链路连接的网页。

2、支持移动互联网
无论是pc浏览器还是手机或平板电脑的应用程序都丰富的支持。

3、数据实时更新

服务器端和客户端之间数据实时更新，实现无缝衔接，服务器端内容更新，自动同步到客户端，用户不用刷新浏览器。

4、超快的速度没有延迟

用户在客户端操作根本感觉不到延迟，让用户体验飞一般的速度。

5、开发简单

过去需要1000行代码的程序，使用meteor只需要10行搞定，过去需要一周完成的项目，现在只需要几个小时就可以完成。

三、meteor开发教程

1、安装meteor

在OSX或Linux一个命令安装Meteor 的最新版本，打开终端，输入：curl https://install.meteor.com/ | sh，官方安装程序支持在x86和x86_64架构的Mac OS X 10.6（雪豹）及以上，和Linux。windows下载相应的Windows的版本。

2、创建你的第一个应用程序

要创建一个Meteor应用程序，打开终端，输入：

meteor create simple-todos

创建Meteor程序项目的文件夹。

simple-todos.js       # 加载客户端和服务器上的js文件
simple-todos.html     # 定义模板的文件
simple-todos.css      # 定义样式的文件
.meteor               # 内部传输文件

运行新创建的应用程序：

cd simple-todos
meteor

http://localhost:3000 查看运行效果。用任何编辑工具todos.html里面的内容查看，在浏览器页面会自动与新的内容更新。我们称之为“热代码推送”。

3、定义使用模板

创建列表代码：

<head>
<title>Todo List</title>
</head>

<body>
<div class="container">
    <header>
      <h1>Todo List</h1>
    </header>

    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
</div>
</body>

<template name="task">
<li>{{text}}</li>
</template>

// simple-todos.js
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
    tasks: [
      { text: "This is task 1" },
      { text: "This is task 2" },
      { text: "This is task 3" }
    ]
});
}

浏览器运行结果

Todo List

This is task 1
This is task 2
This is task 3

分析这些代码的功能

html在Meteor模板的定义，并确定了三个顶级标签：<head>, <body>, and <template>，<template>编译成模板，其中可以包含HTML里面用{{> TEMPLATENAME}}或者在你的JavaScript与Template.templateName的引用。

添加数据到模板

所有的html代码被Meteor编译器编辑，Spacebars编译器使用双花括号包围语句，如{{＃每个}}和{{＃如果}}。

添加CSS

复制所有的CSS代码

/* CSS declarations go here */
body {
font-family: sans-serif;
background-color: #315481;
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
background-attachment: fixed;

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

padding: 0;
margin: 0;

font-size: 14px;
}

.container {
max-width: 600px;
margin: 0 auto;
min-height: 100%;
background: white;
}

header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}

#login-buttons {
display: block;
}

h1 {
font-size: 1.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}

form {
margin-top: 10px;
margin-bottom: -10px;
position: relative;
}

.new-task input {
box-sizing: border-box;
padding: 10px 0;
background: transparent;
border: none;
width: 100%;
padding-right: 80px;
font-size: 1em;
}

.new-task input:focus{
outline: 0;
}

ul {
margin: 0;
padding: 0;
background: white;
}

.delete {
float: right;
font-weight: bold;
background: none;
font-size: 1em;
border: none;
position: relative;
}

li {
position: relative;
list-style: none;
padding: 15px;
border-bottom: #eee solid 1px;
}

li .text {
margin-left: 10px;
}

li.checked {
color: #888;
}

li.checked .text {
text-decoration: line-through;
}

li.private {
background: #eee;
border-color: #ddd;
}

header .hide-completed {
float: right;
}

.toggle-private {
margin-left: 5px;
}

@media (max-width: 600px) {
li {
    padding: 12px 15px;
}

.search {
    width: 150px;
    clear: both;
}

.new-task input {
    padding-bottom: 5px;
}
}

3、集合工作存储

集合是存储Meteor永久性数据的方法，集合的特点是可以自动和服务器端和客户端进行访问，无需编写大量的服务器代码，集合支持的模板将自动显示最新数据。

创建一个集合的方法：MyCollection = new Mongo.Collection("my-collection"); Mongo创建的集合叫客户端集合，存放在客户端。

// simple-todos.js
Tasks = new Mongo.Collection("tasks");

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

从控制台插入任务

通过服务器数据库添加文件到集合。

meteor mongo

以上代码打开控制面板开发本地数据库。

db.tasks.insert({ text: "Hello world!", createdAt: new Date() });

打开你的浏览器，你会发现你的浏览器自动更新了。

4、添加一个任务

添加如下代码

下面是我们需要添加表单的提交事件JavaScript代码：

// Inside the if (Meteor.isClient) block, right after Template.body.helpers:
Template.body.events({
"submit .new-task": function (event) {
    // This function is called when the new task form is submitted

    var text = event.target.text.value;

    Tasks.insert({
      text: text,
      createdAt: new Date() // current time
    });

    // Clear form
    event.target.text.value = "";

    // Prevent default form submit
    return false;
}
});

现在，你的应用程序有一个新的输入字段。要添加一个任务，只需要输入到输入字段并按下回车键。如果你打开一个新的浏览器窗口，然后再次打开该应用程序，你会看到列表自动所有客户机之间的同步。

添加事件到模板

事件监听器被添加到模板中，通过调用Template.templateName.events（...），对键值进行监听。在我们的例子，我们监听CSS选择器，当你按下submit事件，事件处理函数被调用。

插入一个集合的方法：Tasks.insert().

集合排序方法：createdAt 。

Template.body.helpers({
tasks: function () {
// Show newest tasks first
return Tasks.find({}, {sort: {createdAt: -1}});
}
});

5、检查关闭和删除任务

让我们添加两个元素到任务模板，一个复选框和删除按钮：

<template name="task">
<li class="{{#if checked}}checked{{/if}}">
    <button class="delete">×</button>

    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />

    <span class="text">{{text}}</span>
</li>
</template>

我们已经添加了UI元素，但他们没有做任何事情。我们应该增加一些事件处理程序：

// In the client code, below everything else
Template.task.events({
"click .toggle-checked": function () {
    // Set the checked property to the opposite of its current value
    Tasks.update(this._id, {$set: {checked: ! this.checked}});
},
"click .delete": function () {
    Tasks.remove(this._id);
}
});

使用对象属性添加和删除

如果类存在那么添加到任务列表。

6、部署应用程序

meteor deploy my_app_name.meteor.com

上传程序输入http://my_app_name.meteor.com打开应用程序。

7、在Android或iOS应用

在Android模拟器

meteor install-sdk android

这将帮助你安装所有必要的工具，从项目建立一个Android应用程序。当您完成安装的一切，键入：

meteor add-platform android

同意许可条款，请键入：

meteor run android

运行在Android设备上

meteor run android-device

部署服务器，运行：

meteor run android-device --mobile-server my_app_name.meteor.com

运行在iOS模拟器（仅限Mac）

meteor install-sdk ios

建设iOS应用程序

meteor add-platform ios
meteor run ios

8、临时UI状态

我们需要一个复选框添加到我们的HTML：

<label class="hide-completed">
<input type="checkbox" checked="{{hideCompleted}}" />
Hide Completed Tasks
</label>

我们需要一个事件处理程序时，该复选框被选中或取消选中更新会话变量。

// Add to Template.body.events
"change .hide-completed input": function (event) {
Session.set("hideCompleted", event.target.checked);
}

更新Session变量的状态

// Replace the existing Template.body.helpers
Template.body.helpers({
tasks: function () {
    if (Session.get("hideCompleted")) {
      // If hide completed is checked, filter tasks
      return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});
    } else {
      // Otherwise, return all of the tasks
      return Tasks.find({}, {sort: {createdAt: -1}});
    }
},
hideCompleted: function () {
    return Session.get("hideCompleted");
}
});

9、添加用户帐户

meteor add accounts-ui accounts-password

// At the bottom of the client code
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY" //配置用户名
});

新任务的事件处理程序：

Tasks.insert({
text: text,
createdAt: new Date(), // current time
owner: Meteor.userId(), // _id of logged in user
username: Meteor.user().username // username of logged in user
});

{{#if currentUser}}
<form class="new-task">
<input type="text" name="text" placeholder="Type to add new tasks" />
</form>
{{/if}}

<span class="text"><strong>{{username}}</strong> - {{text}}</span>

10、安全的方法

删除不安全代码：

meteor remove insecure

定义方法：

// At the bottom of simple-todos.js, outside of the client-only block
Meteor.methods({
addTask: function (text) {
    // Make sure the user is logged in before inserting a task
    if (! Meteor.userId()) {
      throw new Meteor.Error("not-authorized");
    }

    Tasks.insert({
      text: text,
      createdAt: new Date(),
      owner: Meteor.userId(),
      username: Meteor.user().username
    });
},
deleteTask: function (taskId) {
    Tasks.remove(taskId);
},
setChecked: function (taskId, setChecked) {
    Tasks.update(taskId, { $set: { checked: setChecked} });
}
});

更新使用方法：

// replace Tasks.insert( ... ) with:
Meteor.call("addTask", text);

// replace Tasks.update( ... ) with:
Meteor.call("setChecked", this._id, ! this.checked);

// replace Tasks.remove( ... ) with:
Meteor.call("deleteTask", this._id);

11、发布和订阅过滤数据

用程序开始与自动发布包：

meteor remove autopublish

指定哪些服务信息发送给客户端

// At the bottom of simple-todos.js
if (Meteor.isServer) {
Meteor.publish("tasks", function () {
return Tasks.find();
});
}

// At the top of our client code
Meteor.subscribe("tasks");

实施私有任务

{{#if isOwner}}
<button class="toggle-private">
    {{#if private}}
      Private
    {{else}}
      Public
    {{/if}}
</button>
{{/if}}


<li class="{{#if checked}}checked{{/if}} {{#if private}}private{{/if}}">

我们需要修改我们的JavaScript代码在三个地方：

// Define a helper to check if the current user is the task owner
Template.task.helpers({
isOwner: function () {
return this.owner === Meteor.userId();
}
});

// Add an event for the new button to Template.task.events
"click .toggle-private": function () {
Meteor.call("setPrivate", this._id, ! this.private);
}

// Add a method to Meteor.methods called setPrivate
setPrivate: function (taskId, setToPrivate) {
var task = Tasks.findOne(taskId);

// Make sure only the task owner can make a task private
if (task.owner !== Meteor.userId()) {
throw new Meteor.Error("not-authorized");
}

Tasks.update(taskId, { $set: { private: setToPrivate } });
}

上一条：sockscap代理轻松应用教程