7

Express 框架

根据官方的介绍,Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,可以轻松的创建各种 web 或者移动端应用

今天就来简单的了解一下 Express 框架

安装

首先安装 Express ,新建一个工作文件夹,并命名为 myapp ,在此文件夹下进行环境的初始化:

npm init

官方推荐的入口文件名为 app.js

entry point: (index.js) app.js

当然也可以使用 npm 默认的 index.js 的文件名

接下来安装 Express

npm install express --save

环境准备完成,现在尝试创建一个 Express 应用

进入 myapp 目录,新建一个 app.js 的文件,复制如下代码:

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

app.get('/',(req,res)=>{
    res.send('这是一个 Express 应用')
});

var server=app.listen(3000,()=>{
    console.log('服务已启动 http://localhost:3000')
})

上面的代码启动一个服务并监听从 3000 端口进入的所有连接请求。他将对所有 (/) URL 或 路由 返回 “这是一个 Express 应用” 字符串。对于其他所有路径全部返回 404

启动这个应用

node app.js

Express 应用生成器

Express 应用生成器可以快速创建一个应用的骨架

安装:

npm install express-generator -gd

安装完毕,创建一个名为myapp的应用:

express myapp

这条命令会在当前目录下创建 myapp 文件夹,并生成应用骨架

安装依赖包

cd myapp
npm install

依赖安装完成就可以启动此app了

Windows 平台在 cmd 内输入:

set DEBUG=myapp & npm start

Mac 或者 Linux 平台输入:

DEBUG=myapp npm start

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

当应用首次启动以后,下次启动只需要输入 npm start 就行了

打开 package.json 文件,应用程序的启动实际上是依赖于这句代码:

"scripts": {
    "start": "node ./bin/www"
  }

路由

Express 的主要内容有两个:

  • 路由
  • 中间件

先来说路由

路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET、POST 等)组成的,涉及到应用如何响应客户端对某个网站节点的访问。

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

先写一个简单的路由

在 routes 目录下新建一个 orders.js 的文件:

var express=require('express');
var router=express.Router();

router.get('/',function(req,res,nest){
    res.render('orders',{msg:'订单首页'})
})
router.get('/list',function(req,res,next){
    res.send('订单列表')
})

//导出
module.exports=router;

页面文件写好以后需要在在app.js中进行挂载,

var orders=require('./routes/orders');
···
app.use('/orders',orders)

这两句最好和其他的路由组件写在一起

在地址栏输入对应的 url 即可打开响应的页面

路由方法实例:

// 对网站首页的访问返回 "Hello World!" 字样
app.get('/', function (req, res) {
  res.send('Hello World!');
});

// 网站首页接受 POST 请求
app.post('/', function (req, res) {
  res.send('Got a POST request');
});

// /user 节点接受 PUT 请求
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});

// /user 节点接受 DELETE 请求
app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user');
});

中间件

中间件(Middleware) 是一个函数,它可以访问请求对象(request object (req)), 响应对象(response object (res)), 和 web 应用中处于请求-响应循环流程中的中间件,一般被命名为 next 的变量。

中间件的分类:

  • 应用级中间件
  • 路由级中间件
  • 错误处理中间件
  • 内置中间件
  • 第三方中间件

应用级中间件

应用级中间件绑定到 app 对象 使用 app.use() 和 app.METHOD(), 其中, METHOD 是需要处理的 HTTP 请求的方法,例如 get , put , post 等

var app = express();

// 没有挂载路径的中间件,应用的每个请求都会执行该中间件
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 挂载至 /user/:id 的中间件,任何指向 /user/:id 的请求都会执行它
app.use('/user/:id', function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 路由和句柄函数(中间件系统),处理指向 /user/:id 的 GET 请求
app.get('/user/:id', function (req, res, next) {
  res.send('USER');
});

在执行完一个中间件之后,next() 会使程序继续执行下一个中间件,如果没有 next(),程序则不会往下执行。

在向页面发送内容时,程序也不会往下执行

我们也可以装在一组中间件

app.use('/user/:id',function(req,res,next){
    console.log('Request URL:', req.originalUrl);
    next();
},function(req,res,next){
    console.log('Request Type:', req.method);
    next();
})

路由级中间件

路由级中间件和应用级中间件一样,只是它绑定的对象为 express.Router()。

在上一节中,我们自己写的 orders.js ,其内容就是一个路由级中间件

路由级使用 router.use() 或 router.VERB() 加载。

上述在应用级创建的中间件系统,可通过如下代码改写为路由级:

var app = express();
var router = express.Router();

// 没有挂载路径的中间件,通过该路由的每个请求都会执行该中间件
router.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 一个中间件栈,显示任何指向 /user/:id 的 HTTP 请求的信息
router.use('/user/:id', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 一个中间件栈,处理指向 /user/:id 的 GET 请求
router.get('/user/:id', function (req, res, next) {
  // 如果 user id 为 0, 跳到下一个路由
  if (req.params.id == 0) next('route');
  // 负责将控制权交给栈中下一个中间件
  else next(); //
}, function (req, res, next) {
  // 渲染常规页面
  res.render('regular');
});

// 处理 /user/:id, 渲染一个特殊页面
router.get('/user/:id', function (req, res, next) {
  console.log(req.params.id);
  res.render('special');
});

// 将路由挂载至应用
app.use('/', router);

错误处理中间件

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

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

在其他 app.use() 和路由调用后,最后定义错误处理中间件,比如:

var bodyParser = require('body-parser');
var methodOverride = require('method-override');

app.use(bodyParser());
app.use(methodOverride());
app.use(function(err, req, res, next) {
  // 业务逻辑
});

在我们创建的这个app中,app.js 内的错误处理中间件是这样写的:

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');
});

错误中间件执行时,会调用 views 目录下的 error.jade 文件,在页面中打印详细的错误信息

内置中间件

express.static(root,[options])

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

在 app.js 文件内也可以找到这个内置中间件

app.use(express.static(path.join(__dirname, 'public')));

详细信息参阅官方文档:www.expressjs.com.cn/guide/using-middleware.html

第三方中间件

通过使用第三方中间件从而为 Express 应用增加更多功能。

安装所需功能的 node 模块,并在应用中加载,可以在应用级加载,也可以在路由级加载。

实际上,我们创建的这个应用已经引入了两个第三方的中间件,在 package.json 中就可以找到

"dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "jade": "~1.11.0",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
}

其中 body-parser 和 cookie-parser 就是两个第三方中间件

模板引擎

Express 默认的模板引擎是 jade 。现在 jade 已经更名为 pug ,没错,似李,巴扎嘿!

图片描述

pug 的语法请参阅 pug 文档:

https://pug.bootcss.com/api/g...

我们在 views 目录下创建一个 orders.jade 的文件

doctype html
html
  head
    title 订单
  body
    h1 #{msg}
    p before the time begian

然后使用路由渲染它:

router.get('/',function(req,res,nest){
    res.render('orders',{msg:'订单首页'})
})

在向主页请求时,orders.jade 会被渲染为 HTML 文档

进程管理器

在编写程序时,我们发现,每次更改文件之后,都需要在命令行内停止当前的服务,然后输入 npm start ,很麻烦。我们需要一款自动刷新的工具

这里介绍一下 pm2

安装:

npm install pm2 -gd

安装完毕,运行我们的程序吧:

还记得我们之前说的 npm start 的启动路径没

> pm2 start ./bin/www --watch

[PM2] Applying action restartProcessId on app [www](ids: 0)
[PM2] [www](0) ✓
[PM2] Process successfully started
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬──────────┬──────────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem      │ user     │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼──────────┼──────────┼──────────┤
│ www      │ 0  │ fork │ 14448 │ online │ 0       │ 0s     │ 0%  │ 8.6 MB   │ pureview │ enabled  │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴──────────┴──────────┴──────────┘
 Use `pm2 show <id|name>` to get more details about an app

当显示 status 为 online 时,说明程序启动成功

现在可以打开 http://localhost:3000 就可以看到运行的程序了

从命令行中我们可以看出我们的 app 名称, id ,状态,内存和 cpu 占用,监视状态等信息

启动完成之后我们就可以根据我们程序的id进行控制了

下次启动可以输入

pm2 start 0 --watch

别忘了 --watch ,没有它,程序是无法自动刷新的

停止应用:

pm2 stop 0

重启

pm2 restart 0

显示程序信息

pm2 show 0

删除程序

pm2 delete 0

查看程序列表

pm2 list

好了,这次关于 Express 的介绍就到这里了,谢谢大家

官方文档地址:http://www.expressjs.com.cn


PureView
440 声望28 粉丝