Node.js 蚕食计划(三)—— Express 启航
如果看过上一篇《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 之外的中间件都被独立出来作为模块安装使用
更多的中间件将在后续文章中介绍