Node.js——Express框架

Express框架

• • 1、认识express模块
  • • 1.1、基本使用步骤
    • 1.2、express中的响应对象
    • 1.3、express中的请求对象
  • 2、express中间件
  • • 2.1、认识中间件
    • 2.2、router中间件
    • 2.3、static中间件
    • [2.4、cookie parser中间件](#2.4、cookie parser中间件)
    • [2.5、body parser中间件](#2.5、body parser中间件)
  • [3、实现RESTful Web服务](#3、实现RESTful Web服务)
  • 4、express-generator模块
  • • 4.1、创建项目
    • 4.2、设置项目参数
    • [4.3、 express-generator模块应用](#4.3、 express-generator模块应用)
  • 5、Koa框架
  • • 5.1、认识Koa框架
    • 5.2、Koa框架的基本使用

1、认识express模块

express模块与http模块很相似，都可以创建服务器。不同之处在于，express模块将更多Web开发服务功能封装起来，让Web应用开发更加便捷。

1.1、基本使用步骤

express模块是第三方模块，使用之前，首先需要使用npm命令进行下载和安装，命令如下：

npm install express@4

express模块的版本变化非常快，上面安装命令后面跟了"@4"​，表示安装的是express 4.x版，如果不带该后缀，则会自动下载和安装express模块的最新版本。

express模块安装完后就可以在Node.js程序中使用了，其基本使用步骤如下。

1. 导入模块。
2. 使用构造函数创建Web服务器。
3. 调用listen()方法启动Web服务器。

例如，下面代码使用express模块创建并启动了一个服务器，服务器地址为http://127.0.0.1:52273/，代码如下：

//导入express模块
const express = require('express');
//创建Web服务器
let app = express();
//启动Web服务器
app.listen(52273, ()=>{
     console.log("服务器监听地址是 http://127.0.0.1:52273");
});

1.2、express中的响应对象

express模块提供了response对象，用来完成服务器端响应操作，其常用方法及说明如表所示。

方法	说明
response.send([body])	根据参数类型，返回对应数据
response.json([body])	返回JSON数据
response.redirect([status,]path)	强制跳转到指定页面

根据body参数数据类型的不同，response对象可以向客户端返回不同的数据，如表所示。

数据类型	说明
字符串	HTML格式的数据
数组	JSON格式的数据
对象	JSON格式的数据

示例：实现向客户端返回数组信息。

新建一个.js文件，首先导入express模块，并通过其构造函数创建一个Web服务器，然后使用use()方法创建一个数组，通过response对象的send()方法将其输出到客户端，最后使用listen()方法启动Web服务器。代码如下：

//引入express模块
const express = require('express');
//创建服务器
const app = express();
//监听请求与响应
app.use((request, response)=>{
     //创建数组
     let output = [];
     for (let i = 0; i < 3; i++) {
          output.push({
               count: i,
               name: 'name - ' + i
          });
     }
     //向客户端返回数组类型的信息
     response.send(output);
});
//启动服务器
app.listen(52273, ()=>{
     console.log('服务器监听地址在 http://127.0.0.1:52273');
});

运行.js文件，在浏览器中输入http://127.0.0.1:52273/，可以看到如图14.1所示的界面效果。从图14.1可以看出，向response对象的send()方法中传递了一个数组类型的参数，返回给客户端的是一个JSON数据。

1.3、express中的请求对象

express模块提供了request对象，用来完成客户端请求操作，其常用属性、方法及说明如表所示。

属性/方法	说明
params属性	返回路由参数
query属性	返回请求变量
headers属性	返回请求头信息
header()方法	设置请求头信息
accepts(type)方法	判断请求accept属性信息
is(type)方法	判断请求Content-Type属性信息

示例：判断当前请求用户使用的浏览器类型。

新建一个.js文件，导入express模块，使用express()方法创建一个Web服务器，然后在use()方法中使用request.header('User-Agent')方法获取请求客户端的User-Agent信息，通过判断该信息确定用户使用的浏览器类型。代码如下：

//导入express模块
const express = require('express');
//创建服务器
const app = express();
//监听请求和响应
app.use((request, response)=>{
     //获取客户端的User-Agent
     let agent = request.header('User-Agent');
     //判断客户端浏览器的类型
     if (agent.toLowerCase().match(/chrome/)) {
          //发送响应信息
          response.send('<h1>*_*欢迎使用谷歌浏览器</h1>');
     } else {
          //发送响应信息
          response.send('<h1>^_^您使用的不是谷歌浏览器，<br>当然这并不影响浏览网页</h1>');
     }
});
//启动服务器
app.listen(52273, ()=>{
     console.log('服务器监听地址在 http://127.0.0.1:52273');
});

2、express中间件

2.1、认识中间件

app.use()方法在express模块中的主要作用是注册全局中间件。所谓中间件，是指业务流程的中间处理环节。app.use()方法的语法格式如下：

app.use([path,] callback[,callback])

• path：可选参数，指定的中间件函数的路径（路由地址）。
• callback：指定的中间件函数，可以是多个，并且这些回调函数可以调用next()。

使用app.use()方法将指定的中间件功能放到指定的路径下，当请求的路径地址（客户端发过来的地址）与定义的路由(app.get/post)相同时，就会执行指定的中间件功能。中间件的调用流程是：当一个请求到达express的服务器后，可以连续调用多个中间件，从而对这次请求进行预处理，在这中间，next()函数是实现多个中间件连续调用的关键，它表示把流转关系转交给下一个中间件或路由。

例如，新建一个.js文件，使用express模块创建一个Web服务器，然后使用两次use()方法设置中间件，其中第一个use()方法中，定义了两个变量，并通过next()设置了中间件，最后在第二个use()方法中使用第一个use()方法中定义的变量。代码如下：

//导入express模块
const express = require('express');
//创建服务器
let app = express();
//设置中间件
app.use((request, response, next)=>{
     //定义变量
     request.number = 20;
     response.number =35;
     next();
});
app.use((request, response, next)=>{
     //发送响应信息
     response.send('<h1 style="color:green">' + request.number + ' : ' + response.number + '</h1>');
});
//启动服务器
app.listen(52273, ()=>{
     console.log('服务器监听地址在 http://127.0.0.1:52273');
});

express中常用的中间件及说明如表所示。

中间件	说明
router	处理页面间的路由
static	托管静态文件，如图片、CSS文件和JavaScript文件等
morgan	日志组件
cookie parser	cookie验证签名组件
body parser	对post请求进行解析
connect-multiparty	文件上传中间件

2.2、router中间件

express模块中使用router中间件来处理页面路由。在http模块中，通常使用if语句来处理页面的路由跳转，而在express模块中，使用router中间件就可以很方便地实现页面的路由跳转。router中间件的常用方法及说明如表所示。

方法	说明
get(path,callback[,callback])	处理GET请求
post(path,callback[,callback])	处理POST请求
pull(path,callback[,callback)]	处理PULL请求
delete(path,callback[,callback])	处理DELETE请求
all(path,callback[,callback])	处理所有请求

例如，新建一个.js文件，使用express模块创建一个Web服务器，然后使用app.get()方法设置页面的路由跳转规则，在访问页面时需要使用"/page/id"的形式。代码如下：

//导入express模块
const express = require('express');
//创建服务器
let app = express();
//设置页面路由规则
app.get('/page/:id', (request, response)=>{
     //获取request对象
     let name = request.params.id;
     //发送响应信息
     response.send('<h2 style="color:red">' + name + ' Page</h2>');
});
//启动服务器
app.listen(52273, ()=>{
     console.log('服务器监听地址在 http://127.0.0.1:52273');
});

2.3、static中间件

static中间件是express模块内置的托管静态文件的中间件，可以非常方便地将图片、视频、CSS文件和JavaScript文件等资源导入项目中。static中间件的使用方法如下：

express.static(root[,options])

• root：指定从中提供静态资源的根目录。
• options：可选参数，指定一些配置选项。

示例：实现向客户端返回图片。

本实例需要在项目中创建一个文件夹，名称为image，在该文件夹中存放一张图片，名为view.jpg；然后创建一个.js文件，在该文件中，首先使用express模块创建Web服务器，然后使用express.static()方法设置静态中间件，以便导入图片资源，其中__dirname表示项目的根目录。代码如下：

const express = require('express');
//创建服务器
let app = express();
//使用static中间件
app.use(express.static(__dirname + '/image'));
app.use((request, response)=>{
     //发送响应信息
     response.writeHead(200, {'Content-Type': 'text/html'});
     response.end('<img src="/82.jpg" width="100%" />');
});
//启动服务器
app.listen(52273, ()=>{
     console.log('服务器地址在 http://127.0.0.1:52273');
});

2.4、cookie parser中间件

cookie parser中间件主要用来处理cookie请求与响应，由于cookie parser中间件不是express模块内置的中间件，因此需要通过npm命令进行下载和安装，命令如下：

npm install cookie-parser

cookie parser中间件的使用方法如下：

cookie parser([secret])

• 参数secret为可选参数，用来设置加密签名。

例如，创建一个.js文件，通过在app.use()方法中调用cookieParser()来设置一个没有签名的cookie parser中间件，然后设置服务器端响应的cookie内容，并将该响应信息发送到客户端进行显示。代码如下：

//导入模块
const express = require('express');
const cookieParser = require('cookie-parser');
//创建服务器
let app = express();
//设置cookie parser中间件
app.use(cookieParser());
app.get('/', (request, response)=>{
     //设置cookie内容
     response.cookie('string', 'cookie');
     response.cookie('json', {
          name: 'cookie',
          property: 'delicious'
     })
     response.send(request.cookies)
     app.get('/get', (request, response)=>{
          //发送响应信息
          response.send(request.cookies);
     });
});
//启动服务器
app.listen(52273, ()=>{
     console.log('服务器地址在 http://127.0.0.1:52273');
});

2.5、body parser中间件

body parser中间件主要用来处理POST请求数据，使用body parser中间件的前提是设置request对象的body属性。body parser中间件不是express对象内置的中间件，需要使用npm命令进行下载和安装，命令如下：

npm install body-parser

body parser中间件的常用方法及说明如表所示。

方法	说明
bodyParser.json([options])	返回只解析JSON的中间件
bodyParser.raw([options])	将请求体内容作为Buffer或者字符串来处理并返回
bodyParser.urlencoded([options])	中间件只解析并返回urlencoded请求体，只支持UTF-8编码

示例：通过设置中间件实现登录验证功能。

1. 在WebStorm中创建js.js文件，在该文件中，主要通过cookie parser中间件和body parser中间件结合，实现用户登录验证的功能。其中，cookie parser中间件用来记录用户登录成功标识，body parser中间件用来处理用户登录请求数据。另外，通过app.get()方法分别设置了初始页面、登录成功页面和登录失败页面的路由规则。代码如下：

const fs = require('fs');
const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
//创建服务器
let app = express();
//设置中间件
app.use(cookieParser());
//extended选项为false，表示使用querystring库转换URL-encoded数据
app.use(bodyParser.urlencoded({ extended: false }));
//设置路由配置
app.get('/', (request, response)=>{
     if (request.cookies.auth) {
          response.send('<h1 style="color:red;text-align: center">登录成功</h1>');
     } else {
          response.redirect('/login');
     }
});
app.get('/login', (request, response)=>{
     //读取登录页面
     fs.readFile('login.html', (error, data)=>{
          response.send(data.toString());
     });
});
app.post('/login', (request, response)=>{
     //记录登录用户
     let login = request.body.login;
     //记录登录密码
     let pass = request.body.pass;
     //判断登录是否成功
     if (login == 'mingrisoft' && pass == '123456') {
          //登录成功，使用cookie记录登录成功标识
          response.cookie('auth', true);
          response.redirect('/');                             //跳转页面
     } else {
          //登录失败
          response.redirect('/login');
     }
});
//启动服务器
app.listen(52273, ()=>{
     console.log('服务器监听地址是 http://127.0.0.1:52273');
});

2. 创建login.html文件，用来作为用户登录页面，代码如下：

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>登录页面</title>
</head>
<body>
     <form method="post">
          <fieldset style="width: 250px;margin: 0 auto;padding:20px">
               <legend style="color:#ff5722">管理员登录</legend>
               <table>
                    <tr>
                         <td>
                              <label for="user">账&nbsp;&nbsp;&nbsp;号:</label>
                         </td>
                         <td>
                              <input type="text" name="login" id="user"/>
                         </td>
                    </tr>
                    <tr height="40">
                          <td>
                               <label for="pass">密&nbsp;&nbsp;&nbsp;码：</label>
                          </td>
                          <td>
                               <input type="pass" name="pass" id="pass"/>
                          </td>
                     </tr>
                     <tr>
                          <td colspan="2" align="center">
                               <input type="submit" style="background: #41d7ea;width: 85px;height: 25px;
                                     border: 1px solid #e0ac5e;outline: none;border-radius: 5px;"/>
                          </td>
                     </tr>
               </table>
          </fieldset>
     </form>
</body>
</html>

运行js.js文件，在浏览器中输入http://127.0.0.1:52273/，可以看到一个管理员登录页面，如图所示。

在页面中输入账号(mingrisoft)和密码(123456)，单击"提交"按钮，效果如图所示。

3、实现RESTful Web服务

RESTful Web服务是基于REST架构的Web服务，它是轻量级的，具有高度的可扩展性和可维护性，Web应用非常适合于按照RESTful服务的统一标准进行开发，下表是通用的表示用户信息的RESTful Web服务标准。

路由	说明
GET /user	查询所有的用户信息
GET /user/273	查询id为273的用户信息
POST /user	添加用户信息
PUT /user/273	修改id为273的用户信息
DELETE /user/273	删除id为273的用户信息

示例：实现用户信息的RESTful服务。

1. 创建虚拟数据库。本实例的用户信息存储在一个虚拟数据库中，该数据库使用JSON对象来表示，该对象中主要通过对数组的操作实现数据的查询、添加和删除功能，代码如下：

//创建虚拟数据库
module.exports = (function(){
    let DummyDB = {};
    let storage = [];
    let count = 1;
    //查询数据库
    DummyDB.get = (id)=>{
        if(id) {
            //将id转换为数字类型
            id = (typeof id == 'string') ? Number(id) : id;
            //遍历存储数据，并判断是否找到相应的id
            for(let i in storage) {
                if(storage[i].id == id){
                    return storage[i];
                }
            } 
        } else {
            return storage;
        }
    }

    //添加数据
    DummyDB.insert = (data)=>{
        data.id = count++;
        storage.push(data);
        return data;
    }

    //删除数据
    DummyDB.remove = (id)=>{
        id = (typeof id == 'string') ? Number(id) : id;
        for(let i in storage) {
            if(storage[i].id == id) {
                //删除数据
                storage.splice(i, 1);
                return true;
            }
        }
        return false;
    }

    return DummyDB;
})();

2. 使用POST请求添加数据。实现通过POST请求添加数据的功能时，首先需要一个添加页面，本实例中使用一个用户登录页面addUser.html来表示该页面，当用户在页面中输入用户名和密码并单击"提交"按钮后，会自动将用户输入的信息保存到虚拟数据库中。addUser.html页面的代码如下：

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>add User</title>
</head>
<body>
     <form method="post">
          <fieldset style="width: 250px;margin: 0 auto;padding:20px">
               <legend style="color:#ff5722">登录账户</legend>
               <table>
                     <tr>
                          <td><label>用户名：</label></td>
                          <td><input type="text" name="name"/></td>
                     </tr>
                     <tr height="40">
                          <td><label>密&nbsp;&nbsp;&nbsp;码：</label></td>
                          <td><input type="password" name="pass"/></td>
                     </tr>
                     <tr>
                          <td colspan="2" align="center">
                               <input type="submit" style="background: #41d7ea;width: 85px;height: 25px;
                                          border: 1px solid #e0ac5e;outline: none;border-radius: 5px;"/>
                          </td>
                     </tr>
               </table>
          </fieldset>
     </form>
</body>
</html>

3. 接口：

const fs = require('fs');
const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const DummyDB = require('./db.js');
//创建服务器
let app = express();
//设置中间件
app.use(cookieParser());
//extended选项为false，表示使用querystring库转换URL-encoded数据
app.use(bodyParser.urlencoded({ extended: false }));


//查询所有用户信息
app.get('/user', (request, response)=>{
    response.send(DummyDB.get());
});
//查询指定id的用户信息
app.get('/user/:id', (request, response)=>{
    response.send(DummyDB.get(request.params.id));
});
//添加用户
app.get('/addUser', (request, response)=>{
    fs.readFile('addUser.html', (error, data)=>{
        response.send(data.toString());
    });
});
app.post('/addUser', (request, response)=>{
    let name = request.body.name;
    let pass = request.body.pass;
    if(name && pass) {
        response.send(DummyDB.insert({
            name: name,
            pass: pass
        }));
    } else {
        throw new Error('error');
    }
});

//删除指定id的用户
app.delete('/user/:id', (request, response)=>{
    if(DummyDB.remove(request.params.id)) {
        response.send('删除成功');
    }else{
        response.send('删除失败');
    }
})

//启动服务器
app.listen(52273, ()=>{
     console.log('服务器监听地址是 http://127.0.0.1:52273');
});

添加用户：

查询所有：

根据id查询：

根据id删除：

4、express-generator模块

前面介绍了express模块的基本应用，在使用express模块编写程序时，都是手动编写代码，这在实际开发中比较耗时且效率低，这时可以使用express-generator模块。express-generator模块是express的应用生成器，通过该模块，可以快速创建一个express应用。

4.1、创建项目

express-generator模块与express模块一样，也是第三方模块，因此在使用之前，需要进行安装，命令如下：

npm install -g express-generator

安装完成以后，就可以使用express-generator来创建项目了。步骤如下。

1. 创建项目。创建项目时，首先需要使用"cd项目路径"命令来切换并选择路径，然后使用"express项目名称"命令来创建项目。例如，图14.11所示为通过WebStorm的命令终端在指定路径下创建了一个名称为my_project的项目。项目创建完成后，控制台会显示项目的相关命令，如安装项目所需模块、启动项目等命令。

cd ../
express my_project

2. 打开创建的项目文件夹，可看到自动生成了多个文件和文件夹，它们的作用如图所示。
   

使用express-generator模块创建的项目，默认使用jade模板引擎，即第pug模板，jade文件的结构及语法与pug文件一致。

3. 继续在命令终端中输入命令，可以进入项目，并安装相关模块，具体如图所示。
   
4. 所有配置完成后，使用命令"npm start"启动该项目，如图14.14所示，打开浏览器，输入网址http://127.0.0.1:3000（初始端口号为3000），可以看到浏览器运行效果如图所示。
   

4.2、设置项目参数

在创建项目时，还可以同时设定项目的参数，如模板类型等。在终端对话框中使用"express--help"命令，可以查看使用express-generator模块创建项目时能够设置的参数，如图所示。各参数说明如表所示。

express-generator模块可以设置的参数：

参数	说明
h或者-help	输出帮助信息
--version	输出Exp框架的版本信息
-e或者-ejs	使用ejs模板类型
--hbs	使用handlebars引擎
-H或者一hogan	使用hogan.js
-v<engine>或者-view<engine>	添加视图引擎支持，默认为jade,可选值有dust、ejs、hbs、hjs、jade、pug、twig、vash
-c<engine>或者-css<engine>	使用样式
--git	自动生成.gitignore文件
-f或者-force	强制创建项目

例如，创建一个名称为project的项目，并且设置要使用的模板引擎为ejs，则创建项目的命令如下：

express --e project

4.3、 express-generator模块应用

实现网站的登录和退出功能。

要实现该项目，首先使用express-generator创建项目，项目名称为login，命令如下：

express login

进入项目并下载项目的相关模块，命令如下。

cd login
npm install

准备工作完成后，接下来完成项目的实际功能，步骤如下。

1. 配置app.js文件。打开app.js文件，在该文件中，将项目的模板引擎修改为ejs，并将ejs模板映射至html文件，这样就可以直接在项目中访问html文件；然后通过中间件对网站的session信息进行设置；最后分别使用app.get()方法和app.set()方法实现设置用户登录状态、用户登录及用户退出的接口。代码如下：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var session = require('express-session');
var FileStore = require('session-file-store')(session);
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
//导入自定义模块
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
//创建服务器对象
var app = express();
var identityKey = 'skey';
var users = require('./routes/user').items;
var findUser = function(name, password){
  return users.find((item)=>{
    return item.name === name && item.password === password;
  })
}

//对服务器进行设置
app.set('views', path.join(__dirname, 'views'));
var ejs = require('ejs');
//将ejs模板映射至html文件
app.engine(".html", ejs.__express);
app.set("view engine", "html");

//设置中间件
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
  name: identityKey,
  secret: 'mingrisoft', //用来对session_id相关的cookie进行签名
  store: new FileStore(), //本地存储session
  saveUninitialized: false, //是否自动保存未初始化的会话
  resave: false, //是否每次都重新保存会话
  cookie: {
    maxAge: 1000 * 1000 //有效期，单位是毫秒
  }
}));

//GET请求，设置用户登录状态
app.get("/", function(req, res, next){
  var sess = req.session;
  var loginUser = sess.loginUser;//记录登录用户
  var isLogined = !loginUser; //将登录用户变量转换为对应的布尔值
  res.render("index", {
    isLogined: isLogined,
    name: loginUser 
  });
});

//Post请求，判断用户是否能够登录成功
app.post("/login", function(req, res, next){
  var sess = req.session;
  var user = findUser(req.body.name, req.body.password);
  if(user) {
    req.session.regenerate(function(err){
      if(err){
        return res.json({ret_code: 2, ret_msg: '登录失败'});
      }
      req.session.loginUser = user.name;
      res.json({ret_code: 0, ret_msg: '登录成功'});
    })
  } else {
    res.json({ret_code: 1, ret_msg: '账号或密码错误'});
  }
});

//GET请求，退出登录时，清空session
app.get("/logout", function(req, res, next){
  req.session.destroy(function(err){
    if(err){
      res.json({ret_code:2, ret_msg: '退出登录s失败'});
      return;
    }
    res.clearCookie(identityKey);
    res.redirect("/");
  });
});



app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

设置网站的session信息时，使用了express-session和session-fill-store模块。其中，express-session模块用来将会话数据存储在服务器上，默认为内存存储，所以一旦express服务器被重启，那么session数据将会丢失，而session-fill-store模块解决了这个问题，它提供了本地文件的存储，这样，即使服务器重启后，如果用户访问页面，访问的状态还在。因此，express-session和session-fill-store模块通常都一起配合使用。

2. 定义用户信息。新建一个user.js文件，作为虚拟数据库，在该文件中，添加用户名和密码，当用户输入的用户名和密码与该文件中的用户名和密码匹配时，客户端页面中显示当前登录用户。user.js文件中的代码如下：

module.exports = {
     items: [
          {name: 'mingrisoft', password: '123456'}
     ]
};

3. 修改客户端页面。由于在app.js文件中，页面的模板引擎修改为ejs，并且直接映射至html文件，因此需要将views文件夹中默认的jade文件的后缀修改为html。打开修改后的index.html文件，在该文件中首先添加用户登录相关的表单元素；然后判断用户登录状态，以确定要显示的HTML标签元素；最后为"登录"按钮添加单击事件，记录用户输入的用户名和密码，并定义一个函数，判断如果是登录成功状态，则刷新页面。index.html文件中的代码如下：

<!DOCTYPE html>
<html>
<head>
     <title>会话管理</title>
</head>
<body>
     <h2 style="text-align: center">会话管理</h2>
     <p id="loged">
          当前登录用户：<span style="color:red"><%= name %></span>，<a href="/logout" id="logout">退出登录</a>
     </p>
     <fieldset style="width: 300px;text-align: center;margin: 10px auto;border:1px solid #4caf50" id="unlog">
          <legend style="text-align: left">登录</legend>
          <form method="POST" action="/login">
               <label style="display: block;margin-top: 20px">
                     用户名：<input type="text" id="name" name="name" value=""/>
               </label>
               <label style="display: block;margin: 20px auto">
                     密&nbsp;&nbsp;码：<input type="password" id="password" name="password" value=""/>
               </label>
               <div style="text-align: center;margin-bottom: 10px">
                     <input type="submit" value="登录" id="login" style="background: #cddc39;border:1px solid #ff9800"/>
               </div>
          </form>
     </fieldset>
     <script type="text/javascript" src="/jquery-3.1.0.min.js"></script>
     <script>
          if (isLogined) {
               $("#loged").css("display", "block")
               $("#unlog").css("display", "none")
          }
          else {
               $("#unlog").css("display", "block")
               $("#loged").css("display", "none")
          }
     </script>
     <script type="text/javascript">
          $('#login').click(function (evt) {
               evt.preventDefault();
               $.ajax({
                     url: '/login',
                     type: 'POST',
                     data: {
                          name: $('#name').val(),
                          password: $('#password').val()
                     },
                     success: function (data) {
                          if (data.ret_code === 0) {
                               location.reload();
                          }
                     }
               });
          });
     </script>
</body>
</html>

4. 打开修改后的error.html文件，在该页面中设置错误信息，代码如下：

<!doctype html>
<html>
<head>
     <meta charset="utf-8">
     <title>出错了</title>
</head>
<body>
<script>
     document.getElementById("mess").innerHTML=message;
     document.getElementById("err").innerHTML=error;
     document.getElementById("errt").innerHTML=error.stack;
</script>
</body>
</html>

5. 更改端口号。默认情况下，项目的端口号为3000，用户可以根据自己的需要更改为其他端口号，更改端口号需要在项目的bin\www文件中进行，比如，这里将端口号修改为52273，代码如下：

/**
 * Get port from environment and store in Express.
 */
var port = normalizePort(process.env.PORT || '52273');
app.set('port', port);

6. 运行项目。首先在WebStorm终端命令对话框或者系统的"命令提示符"对话框中启动项目，启动项目时，可以使用命令"npm start"，也可以进入项目的bin文件夹中，使用命令"node www"，然后打开浏览器，输入网址http:\127.0.0.1:52273，初始效果如图所示。

输入用户名与密码，单击"登录"按钮，运行效果如图所示：

5、Koa框架

5.1、认识Koa框架

Koa框架是基于Node.js平台的一个新的Web开发框架，由Express幕后的原班人马打造，致力于成为Web应用和API开发领域中的更小、更富有表现力、更健壮的基石。通过利用async函数，Koa框架中丢弃了回调函数，并增强了错误处理，它没有捆绑任何中间件，而是提供了一套优雅的方法，帮助开发者快速而愉快地编写服务端应用程序。

要使用Koa框架，首先需要进行安装，命令如下：

npm install koa

5.2、Koa框架的基本使用

使用Koa框架时，首先需要进行导入，并创建其对象，然后调用其属性或方法实现相应的功能，导入Koa框架的代码如下：

const Koa = require('koa');
const app = new Koa();

Koa对象提供的主要属性、方法及说明如表所示。

属性/方法	说明
app.keys属性	设置签名的cookie密钥
app.context属性	Koa框架中Context上下文对象ctx的原型，可以通过编辑该属性为ctx添加其他属性
app.listen()方法	创建并返回HTTP服务器，将给定的参数传递给服务器端listen()
app.callback()	方法返回适用于http.createServer()方法的回调函数来处理请求，也可以使用此回调函数将Koa应用程序挂载到Connect//Express应用程序中
app.use(function)方法	将给定的中间件方法添加到此应用程序

ctx表示Koa Context上下文，它将Node.js的request和response对象封装到单个对象中，它为编写Web应用程序和API提供了许多有用的方法，这些方法会在HTTP服务器开发中频繁使用，每个请求都将创建一个Context，并在中间件中作为接收器引用。Context的常用方法和属性如表所示。

属性/方法	说明
ctx.req	Node.js的request对象
ctx.res	Node.js的response对象
ctx.request	Koa的Request对象
ctx.responses	Koa的Response对象
ctx.state	推荐的命名空间，用于通过中间件传递信息和前端视图
ctx.app	应用程序实例引用
ctx.app.emit	发出一个类型由第一个参数定义的事件
ctx.cookies.get(name[,options])	通过options获取cookie name
ctx.cookies.set(name,value[,options])	通过options设置cookie name的value
ctx.throw([status][,msg][,properties])	抛出一个包含.status属性错误的帮助方法，其默认值为500
ctx.assert(value[,status][,msg][,properties])	当！value时抛出一个类似.throw错误的帮助方法

例如，使用Koa框架创建一个服务器，并设置输出内容为经典的"Hello World"​，代码如下：

const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
     ctx.body = 'Hello World';
});
app.listen(3000);

Koa框架中同样支持next中间件，例如，下面使用Koa创建一个服务器，然后分别在两个use访问器中设置输出内容，并且使用next中间件设置内容的输出顺序，代码如下：

const Koa = require("koa")
const app = new Koa()
app.use((ctx, next) => {
     console.log("first")
     next()                           //设置中间件
     console.log("third")
     ctx.body = '在koa中使用中间件';
})
app.use((ctx, next) => {
     //同步操作
     console.log("second")
})
app.listen(3000)