Meteor——以NodeJS为基础环境，MongoDB为数据环境的全栈开发平台！

chenatu 发布于2019-06-26 16:55 / 3245人阅读

摘要：当一个应用启动时，会自动加载这些库，为应用提供了一个基础环境。也就是说，模板文件只能包含以这三种标签为顶层标签的片段。在中，我们需要判断当前的具体运行环境，以便执行相应的代码。

一、全栈开发平台 - 不仅仅是前端

Meteor和那些名声如雷贯耳的前端框架，比如Angular, React等都不一样，它是一个采用单一开发语言的全栈开发的平台：开发者可以使用JavaScript同时进行前端和后端的开发，然后交给Meteor运行这个包含了前后端的完整应用：

从图中你可以看到，Meteor在前端使用浏览器作为基础运行环境，在后端则是以NodeJS作为基础运行环境，以MongoDB作为数据持久化系统。

Meteor提供了一个横跨前端和后端的中间层平台，预置封装了很多功能库，简化了 Web应用的开发：使用单一语言快速开发Web应用，这是Meteor的最重要诉求。

二、初识Meteor

从构成来讲，可以认为Meteor开发平台由两部分构成：

Meteor库 - 以功能包的形式存在，封装了诸如实时通信、反应式编程之类的核心功能。当一个Meteor应用启动时，Meteor会自动加载这些库，为应用提供了一个基础环境。

Meteor工具 - 可以理解为命令行方式的开发环境，它使我们可以轻松地管理整个应用开发流程：从创建应用、调试应用、自动化测试到打包、部署、热升级。

现在，让我们让我们使用Meteor命令行工具meteor创建并启动第一个Meteor应用吧。

1. 创建应用 —— meteor create [project]

在终端中输入meteor create test,然后按回车：

~$ meteor create test

这个命令将在当前目录下创建一个子文件夹test，Meteor将使用内置的应用模板作为这个文件夹的内容。我们可以进入test文件夹，执行ls命令查看一下内容：

~$ cd test
~/test$ ls -al

你可以看到Meteor创建了3个文件和1个目录。

test.css - 前端的样式表文件

test.html -前端的HTML文件

test.js - 前端/后端共用的JavaScript文件。

全栈，对吧O(∩_∩)O~

.meteor - 这个子目录是Meteor应用必须的特殊子目录，由Meteor平台维护，我们不要动
先略过3个文件的具体内容，我们运行起来看看。

2. 运行应用 —— meteor run

执行meteor命令启动应用，在终端中输入meteor，这等价于运行meteor run：

~/test$ meteor

当你看到终端中出现下面的提示信息：

...
App running at: http://localhost:3000/

恭喜！我们的第一个Meteor应用已经运行起来了！

3.停止应用运行 —— Ctrl+C

用鼠标左键点击一下终端区域，确保它获得键盘输入焦点（你应该可以看到一个闪烁的光标），然后同时按Ctrl键和C键，即可停止应用运行：

    ^C
    ~/test$

4.复位应用数据 —— meteor reset

Meteor应用运行时会生成打包文件、创建应用数据库。可以使用下面命令清理这些生成的文件和应用数据：

~/test$ meteor rest

meteor reset命令不影响你的源代码文件。

三、模板文件 - test.html

打开test.html，你可能会略有不适：

它不是一个标准的HTML文件：没有html顶层标签，奇怪的符号{{> hello}}... 不过，在Metoer中这样的文件却是合法的文件 —— 模板文件。

1.模板顶层标签 —— head/body/template

Meteor规定，在一个模板文件里，只能出现三种顶层标签：head、body和template。也就是说，模板文件只能包含以这三种标签为顶层标签的HTML片段。

这是因为，Meteor在运行应用之前有一个打包/bundle的过程，此时Meteor会提取所有模板文件（一个应用中可以有多个模板文件）中的head、body和template片段，分别进行合并、编译后才呈现给用户：

上图中，a.html和b.html中的head片段合并后作为最终的head内容，b.html和c.html中的body片段合并后作为最终的body内容，至于c.html中的template的内容，则最终替换了 b.html中的{{> hello}}。

2.模板语言 —— Spacebars

Meteor的模板使用的语言是私有的spacebars语言，它基于流行的handlebars，通过在HTML片段中嵌入模板标签（以两对大括号为边界）实现模板化。因此，Meteor的模板其实就是HTML标签和模板标签的混合体。

{{> hello}}模板标签用来调用一个子模板，Meteor将在最终呈现给用户的HTML文档中，使用子模板hello的内容进行原地替换。

特殊的template标签用来定义一个子模板。

{{counter}}模板标签执行插值工作，Meteror将在最终呈现给用户的HTML文档中，使用标识符counter对应的值进行原地替换。

四、样式文件 - test.css

和模板文件类似，Meteor在打包过程中，会将所有的样式文件合并成一个大的样式文件，然后在呈现给用户的HTML文档中引用这个样式文件：

上图中，a.css和b.css的内容将被合并为一个文件，并在最终呈现给用户的HTML文档中，使用link标签引用这个文件。

五、代码文件 - test.js

test.js是最有趣的文件，Meteor将在前端和后端同时运行这个文件。可以这样理解：

前端 - Meteor将在最终呈现给用户的HTML文档中使用script标签引用test.js

后端 - Meteor将通过NodeJS读入并运行test.js

毫无疑问，如果不做任何处理，谁也没法保证一段JS代码既可以在前端浏览器环境中运行，也可以在后端NodeJS中运行。在test.js中，我们需要判断当前的具体运行环境，以便执行相应的代码。

1.判断代码执行环境 —— Meteor.isClient/Meteor.isServer

让同一个js文件即可以跑在前端，也可以跑在后端（比如NodeJS），已经有很多应用了，只需要判断下在某个特定环境才存在的变量就可以了（比如，NodeJS有global，而浏览器有window）。Meteor提供了一组更加清晰的API来实现这个判断：

Meteor.isClient - 为真时，表示当前运行环境为前端

Meteor.isServer - 为真时，表示当前运行环境为后端

你可以看到，在test.js中也是这么做的：

//test.js
if(Meteor.isClient){
  //仅在前端执行的代码块
}
if(Meteor.isServer){
  //仅在后端执行的代码块
}

2.前后端都执行的代码

很显然，如果在test.js中，不判断执行环境的代码将同时在前端和后端运行。比如：

//test.js
console.log("Hello,Meteor!");
if(Meteor.isClient){...}
if(Meteor.isServer){...}

运行应用后，你将在后台的终端中看到Hello,Meteor!，也将在前台的调试台中看到相同的输出。

六、前端代码 - 模板实例对象

回忆下，在模板文件test.html中，我们定义了一个模板：

当Meteor运行这个应用时，将自动创建一个对应的模板实例对象:Template.hello。对模板的数据绑定和事件绑定，这些通常需要使用JavaScript实现的功能，就通过这个对象来实现:

在hello模板中，{{counter}}模板标签中的标识符couter的值，将由对应模板实例对象的counter函数返回值决定，这个函数被称为模板的helper函数，使用模板实例的 helpers()方法声明模板标签中标识符对应的helper函数。

而通过模板实例对象的events方法，则为模板中的button元素挂接了click事件监听处理函数。

七、前端代码 - 模板标签标识符解析/helper

使用Template.hello.helpers(helpers)方法声明hello模板中模板标签标识符的解析函数。参数helpers是一个JS对象，属性表示应用在模板标签中的标识符，值通常是一个函数，被称为helper，大致是帮助Meteor解析模板中的标识符的值这样的意思。

比如，在test.js中我们为hello模板中出现在{{counter}}模板标签中的counter表达式声明其对应的helper函数：

//test.js
Template.hello.helpers({
  "counter":function(){
    return Session.get("counter");
  }
});

每次当Meteor需要对模板标签{{counter}}进行计算时，都将调用其counter标识符对应的helper函数进行计算：它简单地返回Session变量counter的当前值。

1.为helper函数设定参数

helper函数可以接受参数，比如对于模板test中的displayName标识符：

声明如下的helper函数：

Template.test.helpers({
  "displayName" : function(name,title){
    return title + " " + name;
  }
});

那么Meteor渲染后将获得如下的HTML结果：

Hello,Mr. Jason!

2.使用常量helper

当然，也可以将helper定义为一个常量：

Template.test.helpers({
  displayName : "Mr. WHOAMI"
})

这时，模板标签{{displayName}}将永远地被设定为固定的值了。

在线练习内容和更多示例可以去这里看看：
http://www.hubwiz.com/course/55b87a7b3ad79a1b05dcc339

私有云专线服务 Nodejs开发环境以用户为中心以深圳为机房的云vps 以深圳为机房的云主机

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/18784.html

预告：Javascript全栈开发的系列文章

摘要：自从一年前发布了小书的电子书，也有些日子没有碰过它们了，现在因为项目的缘故，需要使用全栈开发。说起来搭建全栈开发环境，设计到的东西真的不少。这个案例的数据模型就是对一个，的对象进行创建删除列表。自从一年前发布了Vuejs小书的电子书，也有些日子没有碰过它们了，现在因为项目的缘故，需要使用JavaScript全栈开发。所以，我得把这个全栈环境搭建起来。说起来搭建JS全栈开发环境，设计...

ChristmasBoy 2019-08-26 12:10 评论0 收藏0
XBlog： Vue+Express+Mongodb的全栈可扩展的完整博客系统

摘要：注册成功后会返回注册用户的此就是上面说到的，用于用户登陆的基础，请保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 说明（Instructions）本项目后台基于express、mongodb，前台基于Vue2.0全家桶、bootstrap、scss预编译器以及一众工具类插件项目前后台代码在同一个目录中...

Salamander 2019-08-22 16:43 评论0 收藏0
XBlog： Vue+Express+Mongodb的全栈可扩展的完整博客系统

摘要：注册成功后会返回注册用户的此就是上面说到的，用于用户登陆的基础，请保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 说明（Instructions）本项目后台基于express、mongodb，前台基于Vue2.0全家桶、bootstrap、scss预编译器以及一众工具类插件项目前后台代码在同一个目录中...

banana_pi 2019-08-29 15:11 评论0 收藏0
XBlog： Vue+Express+Mongodb的全栈可扩展的完整博客系统

摘要：注册成功后会返回注册用户的此就是上面说到的，用于用户登陆的基础，请保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 说明（Instructions）本项目后台基于express、mongodb，前台基于Vue2.0全家桶、bootstrap、scss预编译器以及一众工具类插件项目前后台代码在同一个目录中...

fizz 2019-06-26 17:39 评论0 收藏0
前端小白的全栈初体验

摘要：原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子，如图输入账户密码，提交表单，保存信息到数据库再重定向到页面获取数据库中的信息，渲染在浏览器上具体代码主要技术前端模板后台原文来源：全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了Nodejs和MongoDB并且做了一个应该算是最简单的前后...

wangym 2019-08-29 12:29 评论0 收藏0