电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 Meteor 构建一个响应式的销售图应用程序（1） [打印本页]

作者: look_w 时间: 2018-11-2 15:59 标题: 使用 Meteor 构建一个响应式的销售图应用程序（1）

是一个面向 JavaScript 开发人员的完全实时的应用程序堆栈。它独一无二的响应式编程模型支持快速创建交互程度很高的、可实时更新的单页 Web 应用程序。
我在 developerWorks 文章 " " 中深入探讨了 Meteor 开发和 Meteor 架构。该文中有一个编码示例是一个以单页 Web 应用程序形式生成的交互式销售图。当 Bluemix beta 计划开始时，我意识到 Bluemix 能够为我提供一种在云中演示和分享该应用程序的很好的途径。（您在本文中看到的代码已经在最新的 Meteor 预览版 V0.8.1.1 上测试过。而 " " 一文中的代码基于较早的 Meteor 版本。）因为 Bluemix 并不完全适用于开发 Meteor 应用程序，所以我准备了一个自定义的 buildpack，用它来简化在 Bluemix 上开发 Meteor 应用程序的过程。
我将向您演示如何在 DevOps Services 上创建自己的 Meteor 实时销售图应用程序，并将它部署到 Bluemix，以供全球用户进行网络访问。Meteor 在服务器端使用 MongoDB 保存数据，因此您将使用在 Bluemix 上预先定义的 MongoDB 服务来保存应用程序的销售数据。运行自己的应用程序后，您可以通过修改代码来分析 Meteor 的响应式编程模型。
What you need

一个
一个链接到您的 IBM ID 的帐号
一个帐号
一个 Web 浏览器

“我准备了一个自定义的 buildpack 来简化在 Bluemix 上开发 Meteor 应用程序的过程。”

步骤 1. 分析现有应用程序单击本文的 Run the app 按钮，尝试与销售图应用程序进行交互：

打开一个桌面或手机浏览器的多个实例，并将它们都指向应用程序的 URL（http://meteorsales.ng.Bluemix.net/)。
选择并单击（或敲击）标准的任意销售图，修改编号，然后单击 OK 进行更新。通过观察您会发现，所有应用程序实例中的表和饼图都被更新了。
尝试从另一个浏览器实例或移动设备更新销售图。

如果其他读者和您在同时试用这个应用程序，那么您还会看到他们的更新。
步骤 2. 创建项目代码

单击本文的 Get the code 按钮。
在我在 DevOps Services 上的 meteorsales 项目页面上，单击位于右上方的 EDIT CODE 按钮：
试用您的 IBM ID 和密码登录 DevOps Services。
单击 FORK 创建一个新项目。
部署在 Bluemix 上时，您的应用程序应该与 DevOps Services 项目同名。目前所有 Bluemix 项目都共享一个命名空间，因此您的项目（应用程序）名称必须是独一无二的。

输入一个不同于 meteorsales 的项目名称。您的项目可以是公共项目或私有项目。
检查项目的目录结构：
- manifest.yml：Manifest DevOps Services 用于将应用程序部署到 Bluemix
- sales.css：用于销售图应用程序的 CSS 样式
- sales.html：用于应用程序的 Meteor 模板
- sales.js：应用程序的客户端与服务器端 JavaScript 代码
- client/*—jQuery 应用程序使用的插件库
- client/css/*：jQuery 插件库使用的 CSS 样式

Meteor 代码的工作原理使用 Meteor 时，您将使用 JavaScript 编写客户端逻辑和服务器逻辑。这个应用程序的客户端与服务器端代码都位于 sales.js 中。（此外，客户端服务器代码均位于各自的子目录中。）
Meteor 扫描客户端目录（与子目录）中的 CSS 样式文件和 JS 文件，这是它选择 jQuery 插件的方式。对于 HTML 文件，它通常会将所找到文件的 <head> 与 <body> 部分进行合并。
UI 通常使用 Spacebar 构造，它是一个类似于 Handlebars 的 Meteor 特定模板。在 sales.html 中，销售图应用程序的模板代码如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<head>
<title>Sales by Region</title>
</head>

<body>
  <div id="title">
<h1>Global Sales 2014</h1>
  </div>
  <div id="container">
<div id="salestable">
      {{> salesdata}}
</div>
      {{> piechart}}
  </div>
</body>

<template name="piechart">
<div id="chart">
</div>
</template>

<template name="salesdata">
  <div class="salesdata">
{{#each dataset}}
   {{> datapoint}}
{{/each}}
  </div>
</template>

<template name="datapoint">
  <div class="datapoint {{selected}}">
<span id="{{_id}}_region" class="region">{{region}}</span>
<span id="{{_id}}_total" class="sales editable">{{total}}</span>
  </div>
</template>

销售图的表是通过 salesdata 模板呈现的，其中包含一个用于每行的 datapoint 模板实例。chart <div> 是 jqPlot 插件呈现饼图的位置。此处创建了 jEditable 插件的一个实例，用于支持销售图的就地编辑（in-place editing）。
只要在 UI 中修改销售图，就会调用 Meteor 的客户端 MongoDB 实现 (mini-mongo) 来更新数字。然后，Meteor 的响应引擎会与服务器端的 MongoDB 实例进行同步。这次修改的内容将被传播给查看相同页面的所有浏览器或移动实例，而 Meteor 引擎会相应地更新本地试图。
惟一的服务器端代码会使用种子数据来初始化 MongoDB 实例：

1
2
3
4
5
6
7
8
9
10

if (Meteor.isServer) {
  Meteor.startup(function () {
   Sales2013.remove({});
   Sales2013.insert({region:"US East", total: 2032333});
   Sales2013.insert({region:"US Central", total: 150332});
   Sales2013.insert({region:"US West", total: 1202412});
   Sales2013.insert({region:"Asia Pacific", total: 701223});

  });
}

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)