Express 新手概述

安装

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

    $ mkdir myapp
    $ cd myapp
  2. 初始化项目

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

  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
  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 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!