Express 新手概述
安装
-
创建一个目录,并将此目录作为当前的工作目录
$ mkdir myapp $ cd myapp
-
初始化项目
npm init -y
-
打开
package.json
,注意 "main" 为index.js
,这是它默认的入口文件,将其修改为app.js
- 关于 package.json 的作用,请参考:Specifics of npm’s package.json handling
-
安装 express
$ npm install express --save
- 安装 Node 模块时,如果指定了
--save
参数,那么此模块将被添加到package.json
文件中dependencies
依赖列表中。 然后通过npm install
命令即可自动安装依赖列表中所列出的所有模块 - 如果只是临时安装 Express,不想将它添加到依赖列表中,只需略去 --save 参数即可:
$ npm install express
- 安装 Node 模块时,如果指定了
Hello World
-
注意,这里创建的是一个最简单的应用,并且只有一个文件,这和
Express 应用生成器
创建的完全不一样,Express 应用生成器所创建的应用框架包含多个 JavaScript 文件、Jade 模板 和 针对不同用途的子目录 -
进入 myapp 目录,创建
app.js
(这里的命名源于之前 package.json 修改的命名)// app.js var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('Hello World!'); }); var server = app.listen(3000, function() { var host = server.address().address; var port = server.address().port; console.log('Example app listening at http://%s:%s', host, port); })
-
命令行启动
node app.js
-
打开 http://localhost:3000/ 就可以看到结果了
Express 生成器
-
通过应用生成器工具
express-generator
可以快速构建一个应用的框架$ npm install express-generator -g
- 在终端中使用
-h
参数可以列出所有可用的命令行参数$ express -h Usage: express [options] [dir] Options: --version output the version number -e, --ejs add ejs engine support --pug add pug engine support --hbs add handlebars engine support -H, --hogan add hogan.js engine support -v, --view <engine> add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade) --no-view use static html instead of view engine -c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css) --git add .gitignore -f, --force force on non-empty directory -h, --help output usage information
- 在终端中使用
-
创建名为
myapp
的应用$ express myapp
-
安装依赖文件
$ cd example $ npm install
-
启动项目
$ npm start
- 打开 http://localhost:3000/ 即可查看结果
-
注,该生成器创建的应用一般有:
. ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes │ ├── index.js │ └── users.js └── views ├── error.pug ├── index.pug └── layout.pug
简单路由案例
对 Express 路由做一个简单的介绍
-
路由(Routing)是由一个 URL(或者叫路径) 和一个 特定的 HTTP(如 GET、POST) 方法,涉及到应用如何响应客户端对某个网站节点的访问
-
每一个路由都可以有一个或者多个处理器函数,当匹配到路由时,这些函数将被执行
-
路由的定义由如下结构组成:
app.METHOD(PATH, HANDLER)
app
是一个 express 实例METHOD
是请求方式中的一个PATH
是服务器端的路径HANDLER
是当路径匹配成功时需要执行的函数
-
下面展示几个简单的路由案例:
打开routes
之中的index.js
,并将下面的代码修改// index.js router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); });
修改为:
// 对网站首页的访问返回 "Hello World!" 字样 router.get('/', function (req, res) { res.send('Hello World!'); }); // 网站首页接受 POST 请求 router.post('/', function (req, res) { res.send('Got a POST request'); }); // /user 节点接受 PUT 请求 router.put('/user', function (req, res) { res.send('Got a PUT request at /user'); }); // /user 节点接受 DELETE 请求 router.delete('/user', function (req, res) { res.send('Got a DELETE request at /user'); });
托管静态文件
-
通过 express 内置的
express.static
可以托管静态文件,比如 JavaScript 文件、CSS 文件、图片等 -
将静态文件资源所在的目录作为参数传递给
express.static
中间件就可以提供静态资源文件的访问了 -
托管案例
- 在
example/public/images
目录下存放一个如下的图片(命名为logo.png
): - 打开
example/app.js
,添加上使用中间件的代码:// app.js app.use(express.static('public'));
- 现在,public 目录下面的文件就可以访问了,打开
http://localhost:3000/images/logo.png
,即可查看图片 - 注:所有文件的路径都是相对于存放目录的,因此,存放静态文件的目录名不会出现在 URL 中
- 在
-
如果你的静态资源存放在多个目录下面,你可以多次调用
express.static
中间件,需添加上使用中间件的代码:// app.js app.use(express.static('public')); app.use(express.static('files'));
-
若要想通过
express.static
访问的文件都存放在一个虚拟(virtual)目录
(即目录根本不存在)下面,可以通过静态资源目录指定一个挂在路径方式,如下所示:// app.js app.use('/static', express.static('public'));
- 现在,你就可以通过带有
/static
前缀的地址来访问 public 目录下面的文件了 - 可将之前的
http://localhost:3000/images/logo.png
改为http://localhost:3000/static/images/logo.png
- 现在,你就可以通过带有
本作品采用《CC 协议》,转载必须注明作者和本文链接