Meteor——以NodeJS为基础环境,MongoDB为数据环境的全栈开发平台!
一、全栈开发平台 - 不仅仅是前端
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中,我们定义了一个模板:
<!--test.html-->
<template name="hello"><button>Click Me</button><p>You've pressed the button {{counter}} times.</p>
</template>
当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标识符:
<template name="test"><h1>Hello,{{displayName "Jason" "Mr."}}!</h1>
</template>
声明如下的helper函数:
Template.test.helpers({'displayName' : function(name,title){return title + ' ' + name;}
});
那么Meteor渲染后将获得如下的HTML结果:
<h1>Hello,Mr. Jason!</h1>
2.使用常量helper
当然,也可以将helper定义为一个常量:
Template.test.helpers({displayName : "Mr. WHOAMI"
})
这时,模板标签{{displayName}}将永远地被设定为固定的值了。
在线练习内容和更多示例可以去这里看看:
http://www.hubwiz.com/course/55b87a7b3ad79a1b05dcc339
Meteor——以NodeJS为基础环境,MongoDB为数据环境的全栈开发平台!相关推荐
- ❤️十分钟快速学会使用Nodejs全栈开发微信公众号【建议收藏】
一.准备 注册微信订阅号 注册小程序测试号 sunny-ngrok工具安装及注册账号 注意:sunny-ngrok的原型是ngrok,不过ngrok是国外的,sunny-ngrok是国内的一个私服,速 ...
- 7.4【微信小程序全栈开发课程】小程序上线--基于Ubuntu搭建小程序运行环境
上一节我们安装了nginx和SSL证书,这一节继续来搭建小程序运行环境 1.配置nodeJs环境 (1)安装node.npm 我们云服务器是Ubuntu系统,通过apt-get安装即可 //下载nod ...
- 将Sublime Text 3设置为Python全栈开发环境
为 Sublime Text 3 设置 Python 的全栈开发环境 Sublime Text 3 (ST3) 是一个轻量级的跨平台文字编辑器,尤以其轻快的速度,易用性和强大的社区支持而著称.它一经面 ...
- 3.1【微信小程序全栈开发课程】在本地搭建后端开发环境
第二章将前端页面的框架基本搭建好了,第三章,我们来做登录功能,登录功能需要在后端获取到用户信息,返回到前端.所以先来搭建后端开发环境 1.后端开发环境介绍 我们的项目用的是前后端分离开发 前端可以理解 ...
- Python全栈开发(一)——环境搭建和入门
今天是2023年的第一天,接下来的一个月里,我将持续更新关于python全栈开发的相关知识,前面一段时间都是基础语法.主要分成四大块:基础.面向对象.MYSQL数据库.Django框架.话不多说,进入 ...
- 全栈开发可能需要的环境及工具
全栈开发可能需要的环境及工具 本文主要以本人作为Java全栈开发工程师,在实际项目开发者需要使用的软件为依据来撰写的. 如果有不正确的地方,欢迎大家在评论区指正. 如果还有其他好用的环境及工具,也欢迎 ...
- 巨蟒python全栈开发flask8 MongoDB回顾 前后端分离之H5pycharm夜神
1.MongoDB回顾 1.启动 mongod - 改变data/db位置: --dbpath D:\data\dbmongod --install 安装windows系统服务mongod --rem ...
- springboot+vue全栈开发_springboot+vue(一)___开发环境以及前后端项目搭建
nodejs安装 安装: nodejs官网地址:https://nodejs.org/en/ 安装node.js,安装路径我默认安装在C盘 ,可以改变路径 安装配置全局安装路径和缓存 现在配置全局模 ...
- 打通前后端全栈开发node+vue+mongodb进阶
学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习vue和node基础 下载地址:https://download.csdn.net/download/qq_34223273 ...
最新文章
- NetBeans 时事通讯(刊号 # 27 - Sep 24, 2008)
- [YTU]_2383 ( 矩形类定义【C++】)
- UA MATH566 统计理论 Fisher信息论的性质下
- js 字符ascii码转换函数
- 动态规划-背包是否装满
- 李学勤:功利化是现在教育的最大问题
- Docker 使用Dockerfile构建自己的docker服务(三)
- 宜搭小技巧|找不到应用怎么办?群应用一键直达
- oracle生成存储过程示例,oracle创建简单存储过程示例
- ASP.NET的内置对象
- 成为iPhone游戏开发者的十大秘技
- 引入方式之内部样式表(CSS、HTML)
- [leetcode]5179. 将二叉搜索树变平衡
- jQueryEasyUI各个版本(1.1-1.9)下载
- hadoop面试题以及答案
- mac安装指定版本的ruby_Mac OS X 安装Ruby
- C# 如何插入、删除Excel分页符
- CAShapeLayer把图片做成圆形效果
- 2019年全国高校计算机能力挑战赛C++组题解
- 开关电源设计实例之Boost 篇
热门文章
- linux mysql 集群安装配置_linux下mysql集群的安装
- 7-125 切分表达式——写个tokenizer吧 (20 分)
- 计算机二级offic高级应用备考,备考2021计算机二级—二级MS Office高级应用高频考点.pdf...
- mysql分析表_MySQL分析表有什么用
- 怎么增加服务器容量,新睿云服务器硬盘容量怎么增加?
- 打包node服务端_如何基于NodeJS从零构建线上自动化打包工作流?
- 暑假集训-8.05总结
- 用provide/inject来实现简单的vuex状态管理功能
- mac home目录创建文件夹,修改权限
- 单个雪碧图多个图像资源你该如何解决它们的定位?