首页 > 技术文章 > Node.js 蚕食计划(三)—— Express 启航

wisewrong 2017-09-05 17:43 原文

如果看过上一篇《Node.js 蚕食计划》,就会发现手动搭建一个 web 服务器还是比较繁琐

而 express 就是一个可以极大地提高开发效率的 web 开发框架

 

一、创建项目

在 express 4.0 之前,我们使用 npm install -g express 来全局安装 express

但是 4.0 之后,express 的命令行工具被单独分离出来,叫做 express-generator

npm install -g express-generator

// 如果了解过 vue,express-generator 和 express 的关系就像 vue-cli 和 vue 的关系

然后可以通过 express --version 命令来验证是否安装成功

 

然后在需要创建项目的目录下,直接使用 express 命令创建项目

express Node-Project

上面的 Node-Project 是自定义的项目名称

命令执行完成后,会在当前目录生成一个 Node-Project 项目文件夹,目录如下:

进入项目目录(cd Node-Project),安装依赖

npm install

然后通过 npm start 命令启动项目

npm start

开发过程中建议在 debug 环境中运行,所以通常使用这个命令启动项目:

set DEBUG=Node-Project & npm start

然后在浏览器中打开 http://localhost:3000/ 就能打开项目

如果 3000 端口被占用,可以在 bin / www 文件中修改端口

 

 

二、认识路由

在生成的项目文件中,有一个 routes 文件夹,存放着 express 框架预置的基本路由

路由一般由一个 URI、HTTP 请求(GET、POST)和若干个句柄组成

基本句柄的结构通常都是 app.METHOD(path, callback)

其中 METHOD 除了 get、post 等 http 方法之外,express 还提供了一个 all() 用来处理所有请求

express.Router 对基本路由做了封装,实际项目中使用的是 router.METHOD()

 

上图中的 users.js 是一个最简单的路由

 

然后在 app.js 中引入模块

并配置路由结点

然后在浏览器中打开 http://localhost:3456/users 就能查看到响应内容

 

如果希望路由对外输出一个 html 页面,只需要使用 res.sendfile(url)

假如已经在 views 文件夹下准备了一个模板 test.html,然后在 users.js 中追加一个句柄

router.get('/test', function(req, res) {
  res.sendfile("./views/test.html")
});

然后打开 http://localhost:3456/users/test 就能查看到 test.html

// 实际开发中更多的是使用 jade 或 ejs 来返回一个页面

 

 

三、托管静态文件

如果刚才的 test.html 文件中,关联了 views 文件夹下的外部 css 或者 js 文件,就会发现这些文件都没有被加载

只要将 css 文件放到 public 文件夹下,并将文件路径改为绝对路径

这样外部文件就能正常加载了

甚至可以通过 http://localhost:3456/css/test.css 查看到对应的 css 文件

 

这是因为在 app.js 中,已经通过 express.static 中间件将 public 文件夹设置为静态资源的根目录

静态资源目录可以有多个,只需要多次调用 express.static 就行

app.use(express.static('public'));
app.use(express.static('wise'));
app.use(express.static('wrong'));

访问静态资源文件时,express.static 中间件会根据目录添加的顺序查找文件

 express 允许给这些文件夹指定一个虚拟挂载点

app.use('/static', express.static('public'));

这样就能通过带有 “/static” 前缀的地址来访问 public 目录下面的文件

比如之前的 test.css 文件的地址就变成了 http://localhost:3456/static/css/test.css

 

如果有多个静态资源目录,还可以把它们都指定在同一个挂载点下

这种方式必须要保证每个文件的路径不会冲突

如果多个文件都是同一个路径,就只有第一个文件能被正常访问

 

 

四、中间件

上面有提到 express.static 是一个中间件

在软件领域中,中间件在应用与应用之间起到连接的作用

比如一瓶可乐的生产流水线是这样的: 水 > 净化 > 调配 > 装瓶 > 质检 > 可乐

其中除了起点 “水” 和终点 “可乐” 都可以看做中间件

在 express 中,中间件就是处理 http 请求的各种函数,这些函数通过 next() 方法连接,形成了一个流水线

 

中间件一般用 app.use() 注册,针对不同的请求,还可以使用 all 或者 HTTP 动词作为方法名,如 get、post

中间件可以接收三个参数,依次为 request(HTTP请求)、response(HTTP响应),next 回调函数(下一个中间件)

每个中间件都可以对 request 进行加工,并使用 next() 将 request 对象传给下一个中间件

如果向 next() 传入参数(字符串 ‘route’ 除外),则代表抛出一个错误,参数为错误文本

而后的中间件将不再执行,直到发现一个错误处理函数为止

 

在注册中间件的时候,还可以传入一个 url,让中间件的调用具有针对性

比如这个例子,只会对路径前缀为 “/home” 的请求调用中间件

 

稍微改动一下...

眼熟吗?没错,这货成了一个路由

 

这时候再来看这段代码,是不是理解得更清晰了呢?

 

Express 其实就是由路由和中间件构成的,从本质上来说,一个 Express 应用就是在调用各种中间件

 4.0 版本之后,除了 express.static 之外的中间件都被独立出来作为模块安装使用

更多的中间件将在后续文章中介绍

推荐阅读