Express 新手概述

安装

1. 创建一个目录，并将此目录作为当前的工作目录

   $ mkdir myapp
   $ cd myapp

2. 初始化项目

   npm init -y

3. 打开 package.json，注意 "main" 为 index.js，这是它默认的入口文件，将其修改为 app.js

   • 关于 package.json 的作用，请参考：Specifics of npm’s package.json handling

4. 安装 express

   $ npm install express --save

   • 安装 Node 模块时，如果指定了 --save 参数，那么此模块将被添加到 package.json 文件中 dependencies 依赖列表中。 然后通过 npm install 命令即可自动安装依赖列表中所列出的所有模块
   • 如果只是临时安装 Express，不想将它添加到依赖列表中，只需略去 --save 参数即可：

     $ npm install express

Hello World

1. 注意，这里创建的是一个最简单的应用，并且只有一个文件，这和 Express 应用生成器 创建的完全不一样，Express 应用生成器所创建的应用框架包含多个 JavaScript 文件、Jade 模板 和 针对不同用途的子目录

2. 进入 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);
   })

3. 命令行启动

   node app.js

4. 打开 http://localhost:3000/ 就可以看到结果了

Express 生成器

1. 通过应用生成器工具 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

2. 创建名为 myapp 的应用

   $ express myapp

   

3. 安装依赖文件

   $ cd example
   $ npm install

4. 启动项目

   $ npm start

   • 打开 http://localhost:3000/ 即可查看结果

5. 注，该生成器创建的应用一般有：

   .
   ├── 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 路由做一个简单的介绍

1. 路由（Routing）是由一个 URL（或者叫路径） 和一个 特定的 HTTP（如 GET、POST） 方法，涉及到应用如何响应客户端对某个网站节点的访问

2. 每一个路由都可以有一个或者多个处理器函数，当匹配到路由时，这些函数将被执行

3. 路由的定义由如下结构组成：app.METHOD(PATH, HANDLER)

   • app 是一个 express 实例
   • METHOD 是请求方式中的一个
   • PATH 是服务器端的路径
   • HANDLER 是当路径匹配成功时需要执行的函数

4. 下面展示几个简单的路由案例：
   打开 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');
   });

托管静态文件

1. 通过 express 内置的 express.static 可以托管静态文件，比如 JavaScript 文件、CSS 文件、图片等

2. 将静态文件资源所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了

3. 托管案例

   • 在 example/public/images 目录下存放一个如下的图片（命名为 logo.png）：
     
   • 打开 example/app.js，添加上使用中间件的代码：

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

   • 现在，public 目录下面的文件就可以访问了，打开 http://localhost:3000/images/logo.png，即可查看图片
   • 注：所有文件的路径都是相对于存放目录的，因此，存放静态文件的目录名不会出现在 URL 中

4. 如果你的静态资源存放在多个目录下面，你可以多次调用 express.static 中间件，需添加上使用中间件的代码：

   // app.js
   app.use(express.static('public'));
   app.use(express.static('files'));

5. 若要想通过 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 协议》，转载必须注明作者和本文链接