本文将包括以下内容:
- 创建一个Express应用
- 使用npm和
package.json
管理应用依赖 - 调整Express工程结构到MVC架构
- Route和Controller概念分离
- 创建新的Node模块(module)
- 使用Git在线部署Express应用到Heroku
在进行一切操作之前, 需要先安装好Node.js, 对于*nix用户来说, 直接下载解压, 并添加到环境变量中即可完成安装.
首先从Express着手, Express是构建在Node之上的web应用框架.
使用package.json定义依赖
每个Node应用的根目录都有一个文件叫做package.json
, 用来记录Node应用的依赖, 例如:
|
|
其中”~”表示使用最近的patch版本, 推荐使用.
使用npm安装Node依赖
工程范围的依赖
在和package.json
相同的目录层级运行以下指令即可:
|
|
这会将所有的依赖(包括间接依赖)下载到node_modules
文件夹内. 如果后期你想向工程中追加依赖, 只需要运行以下指令:
|
|
以上指令完成了两步操作:
- 将指定
package
下载到node_modules
文件夹; - 将依赖条目追加到
package.json
文件内.
全局范围的依赖
一些通用的依赖需要安装成全局依赖, 例如express generator:
|
|
依赖会被安装到以下路径: ${NODE_HOME}/lib/node_modules/express-generator
创建并启动一个Express工程
- 新建一个文件夹
- 在文件夹内运行
express
npm install
按照package.json
的定义安装所有依赖npm start
启动程序, 浏览器访问localhost:3000即可.
Express的用户请求处理逻辑
如下图所示
重启一个Node应用
如果你修改了服务端的Node代码, 那么需要停止应用运行, 编译并重新启动
重启应用的方法有两种, 一种是从启动应用的控制台ctrl+c
, 然后npm start
, 另一种方法是使用nodemon, nodemom是Node应用的监控程序, 能够简化Node应用的开发. 安装方法如下:
|
|
然后使用nodemon
指令代替npm start
启动应用程序.
如果你只是修改了Jade模板, CSS文件, 或者客户端的js代码, 无需重新启动应用
调整Express工程结构到MVC模式
首先在根目录下新创建一个app_server
文件夹, 将根目录下的routes
和views
文件夹移到里面:
然后更改app.js
文件, 将两者重新定位到新的位置. 具体的来说就是将原来的
|
|
变更为
|
|
Node模块(module)的生成与使用
举个例子, 现在我们有a.js
和b.js
两个文件, 假设现在它们在同级目录下, 我们想在b.js
文件中调用a.js
中定义的变量或函数. 下面是a.js
文件的内容
|
|
上述代码将logThis
变量(函数)暴露出来, 供其他模块使用, 经过这样设定后我们就可以在b.js
中如下调用
|
|
需要注意的一点是, require()
方法并不需要加后缀, 它会自动依以下顺序搜索:
- 寻找同名js文件
- 寻找同名文件夹下的
index.js
文件
Bootstrap安装
- 首先下载Bootstrap发行版, 解压并添加到Express工程下的public目录(public目录是用于存放静态资源的目录)下的bootstrap目录(需新建).
- 由于Bootstrap依赖jquery, 所以我们还要下载jquery, 从这里下载, 注意下载完整版的, 不要下载slim版的, 点击之后, 会跳出一个代码页面, 直接拷贝全部, 然后保存在
public/javascript/jquery-<具体的版本.min.js
文件中即可. - 清空Express默认的样式. 具体的来讲, 就是清空
public/stylesheet/style.css
文件中的内容
安装Bootstrap主题
这里以Amelia主题为例, 从这里下载, 将解压得到的amelia.bootstrap.css
和amelia.bootstrap.min.css
拷贝到Express工程下的public/bootstrap/css
文件夹下.
Jade模板的使用
Jade模板的使用原则是:
设计一系列的模板布局, 然后让其他文件去扩展
这里我们来看一个例子, 下面分别是layout.jade
和index.jade
文件的内容:
|
|
上面代码的意思是index.jade
扩展了layout.jade
, block content
是layout.jade
中声明的一个html填充块, 这里向里面填充了一个<h1>
和一个<p>
.
下面让我们来看一下layout.jade
.
|
|
layout.jade
除了用于定义html的模板, 还用来进行css和js脚本的连接, 注意: js脚本放在页面最下面有利于提升网页的加载速度. 此外, 第一行设置的viewport
有利于页面能够在移动设备上良好的缩放.
到此, 使用Bootstrap的Amelia主题之后的显示效果如下:
使用Heroku进行网站的对外在线演示
将网站托管到在线平台上的意义是:
可以便利的进行跨浏览器的测试, 跨设备测试, 并且能够向同事和合作伙伴快速展示与交流开发阶段性进展.
类似的平台服务还有Google Cloud Platform, Nodejitsu, OpenShift等.
安装Heroku
- 从这里注册一个免费账号
下载Heroku toolbelt, 或者直接使用以下指令在Ubuntu中下载
1$ wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh触发安装
1$ heroku --version验证安装成果
1234$ heroku --versionheroku-toolbelt/3.43.15 (x86_64-linux) ruby/1.9.3heroku-cli/5.5.6-a9ddee4 (linux-amd64) go1.7.4You have no installed plugins.登陆(实际上完成了类似ssh密钥对生成并上传公钥的工作)
1$ heroku login
使用Heroku提交Node.js应用
首先需要保证云端的运行环境与本地开发环境一致
具体的是在package.json
中添加一个engines
配置块, 指明node和npm的版本, 如果不清楚的话, 还是确认一下比较好:
|
|
下面是示例的package.json
文件:
|
|
创建一个云端启动脚本
具体来说就是创建一个启动脚本, 指明我们应用的类型以及启动指令, 对于Node.js应用来说, 需要在应用的根目录下创建一个名为Procfile
的文件, 示例内容如下:
|
|
使用heroku local进行本地验证
heroku local
的前身是foreman
, 但是现在的heroku toolbelt中已经用前者替换掉了了后者, 详见如下官方通知
heroku local
工具是用来在提交应用前进行本地验证的, 使用heroku local
启动应用前需要先关闭本地应用, 然后使用以下指令启动:
|
|
程序成功启动后会监听在5000端口, 我们可以通过localhost:5000
来访问, 显示效果应与之前本地直接运行相同.
将应用托管到Heroku
首先需要初始化一个git仓库, 添加.gitignore文件, 推荐使用这里自动生成(键入Node即可).
然后在云端创建一个heroku应用容器(隐式完成了本地仓库的关联)
|
|
推送到远程仓库
|
|
在heroku云端用测试机(dyno)来运行部署的程序
每位用户都会免费获得一个可用的web测试机, 使用如下指令来开启它
|
|
在线浏览部署情况
|
|
自动在云端的网址上看到部署的应用的情况
之后修改了应用代码后, 只需要push到heroku容器的master分支, 就会自动更新并部署.