Javascript

express框架上--node.js(十二)

本文主要是介绍express框架上--node.js(十二),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

express框架上–node.js(十二)

在这里插入图片描述

小言

Express是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮助开发者创建各种 Web 和移动设备应用。

概述

它是一个基于 Node.js 平台,快速、开放、极简的 web 开发框架。优点是易上手高性能扩展性强

1、易上手:nodejs最初就是为了开发高性能web服务器而被设计出来的,然而相对底层的API会让不少新手望而却步。express对web开发相关的模块进行了适度的封装,屏蔽了大量复杂繁琐的技术细节,让开发者只需要专注于业务逻辑的开发,极大的降低了入门和学习的成本

2、高性能:Express仅在web应用相关的nodejs模块上进行了适度的封装和扩展,较大程度避免了过度封装导致的性能损耗

3、扩展性强:基于中间件的开发模式,使得express应用的扩展、模块拆分非常简单,既灵活,扩展性又强

安装

安装express前,首先安装nodejs,接下来为应用创建一个目录,然后进入此目录并将其作为当前工作目录

$ mkdir myapp
$ cd myapp

通过 npm init 命令为应用创建一个 package.json 文件

$ npm init

此命令要求输入几个参数,例如应用的名称和版本。 直接按“回车”键接受默认设置即可,下面这个除外:

键入 app.js 或者所希望的名称,这是当前应用的入口文件。如果希望采用默认的 index.js 文件名,只需按“回车”键即可

entry point: (index.js)

接下来安装 Express 并将其保存到依赖列表中:

 npm install express --save

如果只是临时安装 Express,不想将它添加到依赖列表中,只需略去 --save 参数即可:

npm install express

入门实例

在项目根目录下,新建一个启动文件,假定叫做index.js,新建一个public文件夹,并在public目录下,新建index.html

运行index.js后,访问http://localhost:8080,它会在浏览器中打开public目录的index.html文件

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8080);

当然,也可以在index.js之中,生成动态网页

运行index.js文件后,会在本机的3000端口启动一个网站,网页显示Hello World

// index.js
var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello world!');
});
app.listen(3000);

启动脚本index.js的app.get方法,用于指定不同的访问路径所对应的回调函数,这叫做“路由”(routing)。上面代码只指定了根目录的回调函数,因此只有一个路由记录。实际应用中,可能有多个路由记录

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello world!');
});
app.get('/customer', function(req, res){
  res.send('customer page');
});
app.get('/admin', function(req, res){
  res.send('admin page');
});

app.listen(3000);

这时,最好就把路由放到一个单独的文件中,比如新建一个routes子目录

// routes/index.js
module.exports = function (app) {
  app.get('/', function (req, res) {
    res.send('Hello world');
  });
  app.get('/customer', function(req, res){
    res.send('customer page');
  });
  app.get('/admin', function(req, res){
    res.send('admin page');
  });
};

然后,原来的index.js就变成下面这样

// index.js
var express = require('express');
var app = express();
var routes = require('./routes')(app);
app.listen(3000);

生成器

通过应用生成器工具 express 可以快速创建一个应用的骨架

[注意]一定要使用全局模式安装express-generator,否则无法使用express命令

npm install express-generator -g

-h 选项可以列出所有可用的命令行选项

express -h

例如,下面的示例就是在当前工作目录下创建一个命名为 myapp 的应用

express myapp

然后安装所有依赖包:

cd myapp npm install

启动这个应用(MacOS 或 Linux 平台):

 DEBUG=myapp npm start

Windows 平台使用如下命令:

set DEBUG=myapp & npm start

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。

通过 Express 应用生成器创建的应用一般都有如下目录结构:

├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

7 directories, 9 files

HTTP模块

Express框架建立在node.js内置的http模块上。http模块生成服务器的原始代码如下

var http = require("http");

var app = http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hello world!");
});

app.listen(3000, "localhost");

上面代码的关键是http模块的createServer方法,表示生成一个HTTP服务器实例。该方法接受一个回调函数,该回调函数的参数,分别为代表HTTP请求和HTTP回应的request对象和response对象。

Express框架的核心是对http模块的再包装。上面的代码用Express改写如下

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello world!');
});

app.listen(3000);

比较两段代码,可以看到它们非常接近。原来是用http.createServer方法新建一个app实例,现在则是用Express的构造方法,生成一个Epress实例。两者的回调函数都是相同的。Express框架等于在http模块之上,加了一个中间层

中间件

概述

Express 是一个自身功能极简,完全是由路由和中间件构成一个的 web 开发框架:从本质上来说,一个 Express 应用就是在调用各种中间件

简单说,中间件(middleware)就是处理HTTP请求的函数。它最大的特点就是,一个中间件处理完,再传递给下一个中间件。App实例在运行过程中,会调用一系列的中间件

每个中间件可以从App实例,接收三个参数,依次为request对象(代表HTTP请求)、response对象(代表HTTP回应),next回调函数(代表下一个中间件)。每个中间件都可以对HTTP请求(request对象)进行加工,并且决定是否调用next方法,将request对象再传给下一个中间件

中间件的功能包括:

  1. 执行任何代码;
  2. 修改请求和响应对象;
  3. 终结请求-响应循环;
  4. 调用堆栈中的下一个中间件

如果当前中间件没有终结请求-响应循环,则必须调用 next() 方法将控制权交给下一个中间件,否则请求就会挂起

@_@ -------------------

一个不进行任何操作、只传递request对象的中间件,就是下面这样

function uselessMiddleware(req, res, next) {  next();}

上面代码的next就是下一个中间件。如果它带有参数,则代表抛出一个错误,参数为错误文本

function uselessMiddleware(req, res, next) {  next('出错了!');}

抛出错误以后,后面的中间件将不再执行,直到发现一个错误处理函数为止

分类

Express 应用可使用如下几种中间件:

  1. 应用级中间件

    ​ 应用级中间件绑定到 app 对象 使用 app.use()app.METHOD(),其中, METHOD 是需要处理的 HTTP 请求的方法,例如 GET, PUT, POST等等,全部小写

  2. 路由级中间件

    ​ 路由级中间件绑定的对象为 express.Router()

  3. 错误处理中间件

    ​ 错误处理中间件和其他中间件定义类似,只是要使用 4 个参数,而不是 3 个,其签名如下: (err, req, res, next)

     app.use(function(err, req, res, next) {
     	console.error(err.stack);
     res.status(500).send('Something broke!');
     });
    
  4. 内置中间件

    express.static 是 Express 唯一内置的中间件。它基于 serve-static,负责在 Express 应用中提托管静态资源

  5. 第三方中间件

    ​ 通过使用第三方中间件从而为 Express 应用增加更多功能。安装所需功能的 node 模块,并在应用中加载,可以在应用级加载,也可以在路由级加载。下面的例子安装并加载了一个解析 cookie 的中间件: cookie-parser

     npm install cookie-parser
    
     -----------
      
     var express = require('express');
     var app = express();
     var cookieParser = require('cookie-parser');
    
     // 加载用于解析 cookie 的中间件
     app.use(cookieParser());
    

use方法

use是express注册中间件的方法,它返回一个函数。下面是一个连续调用两个中间件的例子

var express = require("express");
var http = require("http");

var app = express();

app.use(function(request, response, next) {
  console.log("In comes a " + request.method + " to " + request.url);
  next();
});

app.use(function(request, response) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Hello world!\n");
});

http.createServer(app).listen(1337);

上面代码使用app.use方法,注册了两个中间件。收到HTTP请求后,先调用第一个中间件,在控制台输出一行信息,然后通过next方法,将执行权传给第二个中间件,输出HTTP回应。由于第二个中间件没有调用next方法,所以request对象就不再向后传递了。


use方法内部可以对访问路径进行判断,据此实现简单的路由,根据不同的请求网址,返回不同的网页内容

var express = require("express");
var http = require("http");

var app = express();

app.use(function(request, response, next) {
  if (request.url == "/") {
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.end("Welcome to the homepage!\n");
  } else {
    next();
  }
});

app.use(function(request, response, next) {
  if (request.url == "/about") {
    response.writeHead(200, { "Content-Type": "text/plain" });
  } else {
    next();
  }
});

app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error!\n");
});

http.createServer(app).listen(1337);

上面代码通过request.url属性,判断请求的网址,从而返回不同的内容。注意,app.use方法一共登记了三个中间件,只要请求路径匹配,就不会将执行权交给下一个中间件。因此,最后一个中间件会返回404错误,即前面的中间件都没匹配请求路径,找不到所要请求的资源。

除了在回调函数内部判断请求的网址,use方法也允许将请求网址写在第一个参数。这代表,只有请求路径匹配这个参数,后面的中间件才会生效。无疑,这样写更加清晰和方便

app.use('/path', someMiddleware);

上面代码表示,只对根目录的请求,调用某个中间件。

因此,上面的代码可以写成下面的样子

var express = require("express");
var http = require("http");

var app = express();

app.use("/home", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Welcome to the homepage!\n");
});

app.use("/about", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Welcome to the about page!\n");
});

app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error!\n");
});

http.createServer(app).listen(1337);

托管静态资源

上面介绍了, express.static 是 Express 唯一内置的中间件,负责在 Express 应用中提托管静态资源,例如图片、CSS、JavaScript 文件等

express.static(root, [options])

参数 root 指提供静态资源的根目录,可选的 options 参数拥有如下属性

属性类型缺省值描述
dotfilesString“ignore”是否对外输出文件名以点开头的文件。可选值为allow、deny和ignore
etagBooleantrue是否启用 etag 生成
extensionsArray[ ]设置文件扩展名备份选项
indexMixed“index.html”发送目录索引文件,设置为 false 禁用目录索引
lastModifiedBooleantrue设置Last-Modified头为文件在操作系统上的最后修改日期。可选值为true或false
maxAgeNumber0以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。
redirectBooleantrue当路径为目录时,重定向至 “/”。
setHeadersFunction--------设置 HTTP 头以提供文件的函数
var options = {
  etag: false,
  extensions: ['htm', 'html'],
  index: false,
  maxAge: '1d',
  redirect: false,
  setHeaders: function (res, path, stat) {
    res.set('x-timestamp', Date.now());
  }
}
app.use(express.static('public', options));

一般地,如果不需要特殊的设置,将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如,假设在 public 目录放置了图片、CSS 和 JavaScript 文件

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

现在,public 目录下面的文件就可以访问了

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

如果静态资源存放在多个目录下面,可以多次调用 express.static 中间件:

访问静态资源文件时,express.static 中间件会根据目录添加的顺序查找所需的文件。

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

如果希望所有通过 express.static 访问的文件都存放在一个“虚拟(virtual)”目录(即目录根本不存在)下面,可以通过为静态资源目录指定一个挂载路径的方式来实现,如下所示:

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

现在,可以通过带有 “/static” 前缀的地址来访问 public 目录下面的文件了

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

常用中间件

cookie-parser()

用于解析cookie的中间件,添加中间后,req具备cookies属性。通过req.cookies.xxx可以访问cookie的值

npm install cookie-parser
var cookieParser = require('cookie-parser')
app.use(cookieParser(secret, options))

secret 是可选参数,用于对cookie进行签名 ,通过它可以判断出客户是否修改了cookie,这是处于安全考虑,这个参数是任意字符串

options 可选参数,是一个json对象,可选项包括path、expires、maxAge、domain、secure、httpOnly

var express = require('express')
var cookieParser = require('cookie-parser')
 
var app = express()
app.use(cookieParser())
 
app.get('/', function(req, res) {
  console.log('Cookies: ', req.cookies)
})
 
app.listen(8080)

express-session

session运行在服务器端,当客户端第一次访问服务器时,可以将客户的登录信息保存。 当客户访问其他页面时,可以判断客户的登录状态,做出提示,相当于登录拦截。session可以和Redis或者数据库等结合做持久化操作,当服务器挂掉时也不会导致某些客户信息(购物车)丢失。

当浏览器访问服务器并发送第一次请求时,服务器端会创建一个session对象,生成一个类似于key,value的键值对, 然后将key(cookie)返回到浏览器(客户)端,浏览器下次再访问时,携带key(cookie),找到对应的session(value)。客户的信息都保存在session中

npm install express-session
var express = require('express')
var session = require('express-session')
var app = express()
app.use(session(options))

options 常用选项如下:

  1. name - 默认’connect.sid’,可自定义
  2. store - session 储存器实例
  3. secret - 用于对cookie进行签名 ,通过它可以判断出客户是否修改了cookie,这是处于安全考虑,这个参数是任意字符串
  4. cookie - 对session cookie的设置 。默认值 { path: ‘/’, httpOnly: true, secure: false, maxAge: null }
  5. genid - 是个函数,调用它来生成一个新的会话ID。 (默认:使用UID2库)
  6. rolling - 强制对每个响应的Cookie,重置到期日期。 (默认:false)
  7. resave - 每一次都重新保存,即使没修改过(默认:true)
  8. proxy - ture/false,是否支持trust proxy,,需要设置 app.enable('trust proxy');一般来说,无需设置

常用方法如下:

Session.destroy() :删除session,当检测到客户端关闭时调用

Session.reload() :当session有修改时,刷新session

Session.regenerate():将已有session初始化

Session.save():保存session

var express = require('express');
var cookieParser = require('cookie-parser');
var session = require('express-session');
 
app.use(cookieParser('sessiontest'));
app.use(session({
 secret: 'sessiontest',//与cookieParser中的一致
 resave: true,
 saveUninitialized:true
}));
//修改router/index.js,第一次请求时保存一条用户信息。
router.get('/', function(req, res, next) {
 var user={
  name:"Chen-xy",
  age:"22",
  address:"bj"
 }
 req.session.user=user;
 res.render('index', {
  title: 'the test for nodejs session' ,
  name:'sessiontest'
 });
});
//修改router/users.js,判断用户是否登陆。
router.get('/', function(req, res, next) {
 if(req.session.user){
  var user=req.session.user;
  var name=user.name;
  res.send('你好'+name+',欢迎来到我的家园。');
 }else{
  res.send('你还没有登录,先登录下再试试!');
 }
});

serve-favicon

设置网站的 favicon图标

npm install serve-favicon
var express = require('express')
var favicon = require('serve-favicon')
var path = require('path')
 
var app = express()
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))
 
// Add your routes here, etc. 
 
app.listen(3000)

body-parser

bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理

npm install body-parser
var bodyParser = require('body-parser')

1、底层中间件用法:这将拦截和解析所有的请求;也即这种用法是全局的。

var express = require('express')
var bodyParser = require('body-parser')
  
var app = express()
  
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
  
// parse application/json
app.use(bodyParser.json())
  
app.use(function (req, res) {
 res.setHeader('Content-Type', 'text/plain')
 res.write('you posted:\n')
 res.end(JSON.stringify(req.body, null, 2))
})

use方法调用body-parser实例;且use方法没有设置路由路径;这样的body-parser实例就会对该app所有的请求进行拦截和解析

2、特定路由下的中间件用法:这种用法是针对特定路由下的特定请求的,只有请求该路由时,中间件才会拦截和解析该请求;也即这种用法是局部的;也是最常用的一个方式

var express = require('express')
var bodyParser = require('body-parser')
  
var app = express()
  
// create application/json parser
var jsonParser = bodyParser.json()
  
// create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })
  
// POST /login gets urlencoded bodies
app.post('/login', urlencodedParser, function (req, res) {
 if (!req.body) return res.sendStatus(400)
 res.send('welcome, ' + req.body.username)
})
  
// POST /api/users gets JSON bodies
app.post('/api/users', jsonParser, function (req, res) {
 if (!req.body) return res.sendStatus(400)
 // create user in req.body
})

express的post(或者get)方法调用body-parser实例;且该方法有设置路由路径;这样的body-parser实例就会对该post(或者get)的请求进行拦截和解析

3、设置Content-Type 属性;用于修改和设定中间件解析的body内容类型

// parse various different custom JSON types as JSON
app.use(bodyParser.json({ type: 'application/*+json' });
 
// parse some custom thing into a Buffer
app.use(bodyParser.raw({ type: 'application/vnd.custom-type' }));
 
// parse an HTML body into a string
app.use(bodyParser.text({ type: 'text/html' }));

morgan

Mogran是一个node.js关于http请求的express默认的日志中间件

npm install  morgan

basic.js中添加如下代码

var express = require('express');
var app = express();
var morgan = require('morgan');

app.use(morgan('short'));
app.use(function(req, res, next){
    res.send('ok');
});

app.listen(3000);

node basic.js运行程序,并在浏览器里访问 http://127.0.0.1:3000 ,打印日志如下

::1 - GET / HTTP/1.1 200 2 - 3.157 ms
::1 - GET / HTTP/1.1 304 - - 0.784 ms

morgan支持stream配置项,可以通过它来实现将日志落地的效果,代码如下

var express = require('express');
var app = express();
var morgan = require('morgan');
var fs = require('fs');
var path = require('path');

var accessLogStream = fs.createWriteStream(path.join(__dirname, 'access.log'), {flags: 'a'});

app.use(morgan('short', {stream: accessLogStream}));
app.use(function(req, res, next){
    res.send('ok');
});

app.listen(3000);

morgan的API非常少,使用频率最高的就是morgan(),作用是返回一个express日志中间件

参数说明如下:

  1. format:可选,morgan与定义了几种日志格式,每种格式都有对应的名称,比如combined、short等,默认是default
  2. options:可选,配置项,包含stream(常用)、skip、immediate
  3. stream:日志的输出流配置,默认是process.stdout
  4. skip:是否跳过日志记录
  5. immediate:布尔值,默认是false。当为true时,一收到请求,就记录日志;如果为false,则在请求返回后,再记录日志

在这里插入图片描述

曾经发生的事不可能忘记,

只是暂时想不起来而已

​ ——《千与千寻》

这篇关于express框架上--node.js(十二)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!