express框架介绍mvc express orm框架

文章目录

• Express 框架

• 1.1 Express框架是什么
• 1.2 Express 框架特性
• 1.3 原生 node.js 与 Express 框架对比
• 1.4 基本使用（入门代码）
• 2. 中间件

• 2.1 什么是中间件
• 2.2 中间件的基本使用
• 2.3 app.use 中间件用法
• 2.4 中间件应用
• 2.5 错误处理中间件
• 2.6 捕获错误

• 3. express 请求处理

• 3.1 构建模块化路由
• 3.2 GET参数的获取
• 3.3 POST参数的请求
• 3.4 app.use（）方法的进一步理解

Express 框架

1.1 Express框架是什么

Express 是一个基于 Node平台的Web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。

• 下载
  npm install express

1.2 Express 框架特性

• 提供了简洁的路由定义方式
• 对获取 http 请求参数进行了简化处理
• 对模板引擎支持程度高，方便渲染动态HTML页面
• 拥有中间件机制有效控制 HTTP 请求
• 拥有大量第三方中间件对功能进行扩展

1.3 原生 node.js 与 Express 框架对比

1.4 基本使用（入门代码）

// 引入 express 框架
const express = require('express')
// 创建网站服务器
const app = express();

app.get('/', (req, res) => {
    // send()
    // 1. send 方法内部会检测响应内容的类型
    // 2. send 方法会自动设置 http 状态码
    // 3. send 方法还会帮我们自动设置响应的内容类型以及编码
    res.send('Hello Express');
})

app.get('/list', (req, res)=> {
    // 向客户端直接响应一个对象 
    res.send({name: 'zhangsan', age: 20});
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

2. 中间件

2.1 什么是中间件

2.2 中间件的基本使用

// 引入 express 框架
const express = require('express')

// 创建网站服务器
const app = express();

app.get('/request', (req, res, next) => {
    req.name = 'zhangsan';
    next(); // 向下执行
})

app.get('/request', (req, res)=> {
    res.send(req.name);
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

2.3 app.use 中间件用法

app.use 匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求。

// 引入 express 框架
const express = require('express')

// 创建网站服务器
const app = express();

// 接收所有的请求的中间件
app.use((req, res, next) => {
    console.log('请求走了 app.use 中间件');
})

// 当客户端访问 /request 请求的时候走当前中间件
app.use('/request', (req, res, next) => {
    console.log('请求走了 app.use /request 中间件 ');
})

app.get('/request', (req, res, next) => {
    req.name = 'zhangsan';
    next();
})

app.get('/request', (req, res)=> {
    res.send(req.name);
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

可以发现网页在转圈

控制台输出结果见上图，说明后面的中间件没有走。

• 修改程序，在程序中加入 next（）
  // 引入 express 框架
  const express = require(‘express’)
  // 创建网站服务器
  const app = express();
  // 接收所有的请求的中间件
  app.use((req, res, next) => {
  console.log(‘请求走了 app.use 中间件’);
  next();
  })
  // 当客户端访问 /request 请求的时候走当前中间件
  app.use(’/request’, (req, res, next) => {
  console.log('请求走了 app.use /request 中间件 ');
  next();
  })
  app.get(’/request’, (req, res, next) => {
  req.name = ‘zhangsan’;
  next();
  })
  app.get(’/request’, (req, res)=> {
  res.send(req.name);
  })
  // 监听端口
  app.listen(3000);
  console.log(‘网站服务器启动成功’);

• 再加入 /list 路由
  // 引入 express 框架
  const express = require(‘express’);
  // 创建网站服务器
  const app = express();
  // 接收所有的请求的中间件
  app.use((req, res, next) => {
  console.log(‘请求走了 app.use 中间件’);
  next();
  })
  // 当客户端访问 /request 请求的时候走当前中间件
  app.use(’/request’, (req, res, next) => {
  console.log('请求走了 app.use /request 中间件 ');
  next();
  })
  app.get(’/list’, (req, res) => {
  res.send(’/list’);
  })
  app.get(’/request’, (req, res, next) => {
  req.name = ‘zhangsan’;
  next();
  })
  app.get(’/request’, (req, res)=> {
  res.send(req.name);
  })
  // 监听端口
  app.listen(3000);
  console.log(‘网站服务器启动成功’);

2.4 中间件应用

1. 路由保护：
   客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面。
   // 引入 express 框架
   const express = require(‘express’)
   // 创建网站服务器
   const app = express();
   app.use(’/admin’, (req, res, next) => {
   // 用户没有登录
   let isLogin = false;
   // 如果用户登录
   if (isLogin) {
   // 让请求继续向下执行
   next();
   } else {
   // 如果用户没有登录，直接对客户端作出响应
   res.send(‘您还没有登录，无法访问当前页面’);
   }
   })
   app.get(’/admin’, (req, res) => {
   res.send(‘您已登录 可以访问当前页面’)
   })
   // 监听端口
   app.listen(3000);
   console.log(‘网站服务器启动成功’);

如果将 let isLogin = false 改为：

let isLogin = true;

2. 网站维护公告
   在所有路由最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护中。
   // 引入 express 框架
   const express = require(‘express’)
   // 创建网站服务器
   const app = express();
   app.use((req, res, next) => {
   res.send(‘当前网站正在维护…’);
   })
   app.use(’/admin’, (req, res, next) => {
   // 用户没有登录
   let isLogin = true;
   // 如果用户登录
   if (isLogin) {
   // 让请求继续向下执行
   next();
   } else {
   // 如果用户没有登录，直接对客户端作出响应
   res.send(‘您还没有登录，无法访问当前页面’);
   }
   })
   app.get(’/admin’, (req, res) => {
   res.send(‘您已登录 可以访问当前页面’)
   })
   // 监听端口
   app.listen(3000);
   console.log(‘网站服务器启动成功’);

3. 自定义404页面
   // 引入 express 框架
   const express = require(‘express’)
   // 创建网站服务器
   const app = express();
   app.use(’/admin’, (req, res, next) => {
   // 用户没有登录
   let isLogin = true;
   // 如果用户登录
   if (isLogin) {
   // 让请求继续向下执行
   next();
   } else {
   // 如果用户没有登录，直接对客户端作出响应
   res.send(‘您还没有登录，无法访问当前页面’);
   }
   })
   app.get(’/admin’, (req, res) => {
   res.send(‘您已登录 可以访问当前页面’)
   })
   app.use((req, res, next) => {
   // 为客户端响应404状态码以及提示信息
   res.status(404).send(‘当前访问的页面是不存在的’);
   })
   // 监听端口
   app.listen(3000);
   console.log(‘网站服务器启动成功’);

2.5 错误处理中间件

在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如读取文件失败，数据库连接失败。

错误处理中间件是一个集中处理错误的地方。

• 例如显示服务器错误：
  app.use((err, req, res, next) => {
  res.status(500).send(‘服务器发生错误’);
  })
• 基本实例
  // 引入 express 框架
  const express = require(‘express’)
  // 创建网站服务器
  const app = express();
  app.get(’/index’, (req, res) => {
  // 创建一个错误实例并抛出
  throw new Error(‘程序发生了未知错误’);
  })
  // 错误处理中间件
  app.use((err, req, res, next) => {
  res.status(500).send(err.message);
  })
  // 监听端口
  app.listen(3000);
  console.log(‘网站服务器启动成功’);

当程序出现错误时，调用 next（）方法，并且将错误信息通过参数的形式传递给 next（）方法，即可触发错误处理中间件。

• 基本实例
  // 引入 express 框架
  const express = require(‘express’)
  // 引入文件模块
  const fs = require(‘fs’);
  // 创建网站服务器
  const app = express();
  app.get(’/index’, (req, res, next) => {
  // 创建一个错误实例并抛出
  // throw new Error(‘程序发生了未知错误’);
  fs.readFile(’./demo.txt’, ‘utf8’, (err, result) => {
  if (err != null) {
  // 文件读取失败 向下传递错误对象
  next(err);
  } else {
  // 文件读取成功
  res.send(result);
  }
  })
  // res.send(‘程序正常’)
  })
  // 错误处理中间件
  app.use((err, req, res, next) => {
  res.status(500).send(err.message);
  })
  // 监听端口
  app.listen(3000);
  console.log(‘网站服务器启动成功’);

demo.txt 的文件时不存在的，读取失败后会将错误对象通过 next （）方法传递给错误处理中间件，显示相应的错误信息。

2.6 捕获错误

在 node.js中，异步API的错误信息都是通过回调函数获取的，支持 Promise 对象的异步API发生错误可以通过catch方法捕获。

try catch 可以捕获异步函数以及其他同步代码执行过程中发生的错误，但是不能捕获其他类型的错误（回调函数的错误、Promise对象的错误）。

• 基本实例
  // 引入 express 框架
  const express = require(‘express’)
  // 引入文件模块
  const fs = require(‘fs’);
  const promisify = require(‘util’).promisify;
  const readFile = promisify(fs.readFile);
  // 创建网站服务器
  const app = express();
  app.get(’/index’, async (req, res, next) => {
  try {
  await readFile(’./aaa.js’);
  } catch (ex) {
  // 传递错误信息
  next(ex);
  }
  })
  // 错误处理中间件
  app.use((err, req, res, next) => {
  res.status(500).send(err.message);
  })
  // 监听端口
  app.listen(3000);
  console.log(‘网站服务器启动成功’);

3. express 请求处理

3.1 构建模块化路由

1. 构建模块化路由的基础语法
   // 引入 express 框架
   const express = require(‘express’);
   // 创建网站服务器
   const app = express();
   // 创建路由对象
   const home = express.Router();
   // 为路由对象匹配请求路径
   app.use(’/home’, home);
   // 创建二级路由
   home.get(’/index’, (req, res) => {
   res.send(‘欢迎来到博客首页’);
   })
   // 监听端口
   app.listen(3000);
   console.log(‘服务器开启成功’);

• 如何构建模块化路由



• 基础案例
  在 入口文件 app.js 文件的同级目录新建 route 文件夹
  在 route 文件夹下 新建 home.js 文件 以及 admin.js 文件
  home.js：
  const express = require(‘express’);
  const home = express.Router();
  home.get(’/index’, (req, res) => {
  res.send(‘欢迎来到博客首页页面’);
  });
  // 导出 home 这个路由对象
  module.exports = home;

admin.js：

const express = require('express');

const admin = express.Router();

admin.get('/index', (req, res) => {
    res.send('欢迎来到博客管理页面');
});

// 导出 admin 这个路由对象
module.exports = admin;

app.js：

// 引入 express 框架
const express = require('express');

// 创建网站服务器
const app = express();

const home = require('./route/home');
const admin = require('./route/admin');

app.use('/home', home);
app.use('/admin', admin);

// 监听端口
app.listen(3000);
console.log('服务器开启成功');

1. 在 route 文件夹中构建不同的路由模块，放在不同的文件中
2. 通过module.exports 将不同路由模块的路由对象导出
3. 在 app.js 文件中通过 require 将不同路由模块的路由对象导入，同时对导入的路由进行路由匹配

3.2 GET参数的获取

Express 框架中使用 req.query 即可 获取GET参数 ，框架内部会将GET参数转换为对象并返回。

// 引入 express 框架
const express = require('express');
// 创建网站服务器
const app = express();

app.get('/index', (req, res) => {
    // req.query 获取请求参数
    res.send(req.query)
})

// 监听端口
app.listen(3000);
console.log('服务器开启成功');

在浏览器的地址栏中输入：

http://localhost:3000/index

浏览器页面显示的是一个空对象，这是因为我们没有给GET请求地址传参数.

在浏览器的地址栏中输入：

http://localhost:3000/index?name=zhangbing&age=20&gender=男

可以看到请求参数为对象：

3.3 POST参数的请求

Express 中接收 POST请求参数 需要借助第三方包 body-parser

app.js：

// 引入 express 框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();
// 拦截所有请求
// extended: false  方法内部使用 querystring 模块处理请求参数的格式
// extended: true   方法内部使用第三方模块 qs 来处理请求参数的格式
app.use(bodyParser.urlencoded({extended: false}));

app.post('/add', (req, res) => {
    res.send(req.body);
})

// 监听端口
app.listen(3000);
console.log('服务器开启成功');

post.html 表单数据通过post方法提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:3000/add" method="post">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit">
    </form>
</body>
</html>

打开 post.html 文件，在表单中输入数据：

点击表单中的提交按钮，可以看到页面跳转到了 http://localhost:3000/add 页面，同时以对象的形式显示了提交的数据：

3.4 app.use（）方法的进一步理解

在上面获取post请求参数的方法中，我们使用了以下的代码：

app.use(bodyParser.urlencoded({extended: false}));

这行代码应该如何理解呢？且看我细细到来！

• app.use（）调用外部定义的函数的小例子
  // 引入 express 框架
  const express = require(‘express’);
  const bodyParser = require(‘body-parser’);
  // 创建网站服务器
  const app = express();
  // 拦截所有的请求
  app.use(fn ());
  function fn () {
  return function (req, res, next) {
  console.log(req.method);
  next();
  }
  }
  app.get(’/’, (req, res) => {
  // 接收 post 请求参数
  res.send(‘ok’);
  })
  app.post(’/add’, (req, res) => {
  res.send(req.body);
  })
  // 监听端口
  app.listen(3000);
  console.log(‘服务器开启成功’);

可以看到返回的函数被调用了，这些做有什么好处呢？

好处就是我们可以在调用 fn 函数的同时，向 fn 内部传递一些额外的参数，在请求处理函数内部可以根据这个参数改变请求处理函数的行为。可以看一下下面的例子：

// 引入 express 框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();

app.use(fn ({a: 1}));

function fn (obj) {
    return function (req, res, next) {
        if (obj.a == 1) {
            console.log(req.url);
        } else {
            console.log(req.method);
        }
        next();
    }
}

app.get('/', (req, res) => {
    // 接收 post 请求参数
    res.send('ok');
})

app.post('/add', (req, res) => {
    res.send(req.body);
})


// 监听端口
app.listen(3000);
console.log('服务器开启成功');

fn 的形参为一个对象，我们给 fn 函数传递了一个实参 {a: 1}，可以看到：

很显然，控制台打印出了请求地址中的 ‘/’ 现在如果将fn 的实参修改为 {a: 2}

则请求处理函数的行为也发生了改变

此时控制台打印的结果不是‘/’，而是请求的方式 GET。