express知识总结

express介绍

express 是一个基于node.js的工具包，封装了很多功能，用于开发http服务。

express使用

express是一个npm包，使用时需要先安装

npm init
npm i express

创建js文件index.js

//1. 导入 express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
//app.<method>(path，callback)
//回调函数有两个参数，一个是请求，一个是响应，可以根据这两个参数队请求和响应做一系列操作
app.get('/home', (req, res) => {
  res.send('欢迎来到home页面');
});

//4. 监听端口 启动服务
//这里的回调函数在服务启动的时候执行
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});

执行node 文件路径，如node .\index.js。
在浏览器地址栏输入127.0.0.1:3000/home就可以访问到刚刚创建的服务。

express路由

1.路由的官方定义：路由确定了应用程序如何响应客户端对特定端点的请求。
2.路由的使用格式：app.<method>(path，callback)
3.创建一些路由，代码如下：

//导入 express
const express = require('express');
//创建应用对象
const app = express();
//创建get请求路由
app.get('/home', (req, res) => { 
  res.send('网站home页');
});
//创建首页路由
app.get('/', (req,res) => { 
  res.send('我才是真正的首页');
});
//创建post请求路由
app.post('/login', (req, res) => { 
  res.send('登录成功');
});
//匹配所有的请求方法 
app.all('/search', (req, res) => {
  res.send('1 秒钟为您找到相关结果约 100,000,000 个');
});
//自定义 404 路由
//all匹配所有的请求，* 匹配所有路径，把这个路由放在最后是为了在其他路由访问不到时，显示404
app.all("*", (req, res) => {
  res.send('<h1>404 Not Found</h1>')
});
//监听端口 启动服务
app.listen(3000, () =>{
console.log('服务已经启动, 端口监听为 3000');
});

4.获取请求参数

//导入 express
const express = require('express');
//创建应用对象
const app = express();
//获取请求的路由规则 
app.get('/request', (req, res) => {
  //获取报文的方式与原生 HTTP 获取方式是兼容的 
  console.log(req.method); 
  console.log(req.url); 
  console.log(req.httpVersion); 
  console.log(req.headers);
 
  //express 独有的获取报文的方式
  console.log(req.query);  //获取查询字符串
  console.log(req.get('host'));// 获取指定的请求头
  
  res.send('请求报文的获取');//响应体的设置
});
//启动服务 app.listen(3000, () => {
console.log('启动成功....')
})

5.获取路由参数（动态url）
通俗来讲就是home后面的路径字符串是可以变化的，通过req.param就可以获取到

app.get('/home/:id', (req, res) => {
  res.send('商品详情, 商品 id 为' + req.params.id);
});

6.响应参数设置

//获取请求的路由规则 
app.get("/response", (req, res) => {
  //express 中设置响应的方式兼容 HTTP 模块的方式
  res.statusCode = 404; 
  res.statusMessage = 'xxx'; 
  res.setHeader('abc','xyz');
  res.write('响应体');
  res.end('xxx');

  //express 的响应方法 
  res.status(500); //设置响应状态码 
  res.set('xxx','yyy');//设置响应头 
  res.send('中文响应不乱码');//设置响应体
  //连贯操作 
  res.status(404).set('xxx','yyy').send('你好朋友')

  //3. 其他响应 
  res.redirect('http://baidu.com')//重定向
  res.download('./package.json');//下载响应，触发这个响应会直接下载文件
  res.json();//响应JSON，把响应的json格式转化为json字符串
  res.sendFile(__dirname + '/home.html') //响应文件内容，也就是说把某个文件（如/home.html）设置为响应体
});

express中间件

1.什么是中间件：

中间件（Middleware）的本质是一个回调函数，中间件函数可以像路由回调一样访问请求对象 和响应对象，中间件的作用就是使用函数封装公共操作，简化代码。

2.中间件分为: 全局中间件和路由中间件

3.全局中间件
每一个请求到达服务端之后都会执行全局中间件函数，express 允许使用 app.use()定义多个全局中间件，中间件和路由的执行顺序是自上而下依次执行。

app.use(function (request, response, next) {
  console.log('定义第一个中间件');
  //执行next函数(当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next)
  //next不能在响应处理完之后调用（也就是不能在res.send()之后调用）
  next();
})

那么我们利用全局中间件做一个404响应，只需要把这个中间件的位置放在所有路由和中间件之后，当所有路由都匹配不到的时候就返回这个404，和前面提到的app.all('*',()=>{ })效果一样，代码如下：

app.use((req,res) => {
  res.status(404)
  res.send('您访问的页面找不到')
})

4.路由中间件
如果只需要对某一些路由进行功能封装，则就需要路由中间件，以下两种写法产生的效果一样，代码如下：

//第一种写法
app.get('/home',(request,response,next)=>{
  next()
},(request,response)=>{
  res.send('路由中间件')
});
//第二种写法
app.use('/home',(request,response,next)=>{
  next()
})
app.get('/home',(request,response)=>{
  res.send('路由中间件')
})

//路由中可以添加多个中间件
app.get('/search',`中间件函数1`,`中间件函数2`,(request,response)=>{
  res.send('路由中间件')
});

5.静态资源中间件

const path = require('path')
//引入express框架
const express = require('express');
//创建服务对象
const app = express();
//静态资源中间件的设置，将public目录作为网站的根目录
//目录中的index.html文件为默认打开的资源
app.use(express.static(path.reslove(__dirname,'public'))); 
//当然这个目录中都是一些静态资源
//如果访问的内容经常变化，还是需要设置路由
//但是，在这里有一个问题，如果public目录下有index.html文件，单独也有index.html的路由，
//则谁书写在前，优先执行谁
app.get('/index.html',(req,res)=>{
  res.send('首页');
});
//监听端口
app.listen(3000,()=>{
  console.log('3000 端口启动....');
});

6.获取请求体数据

• 安装body-parser包：npm i body-parser
• 导入 body-parser包:const bodyParser = require('body-parser')
• 获取中间件函数:

//处理 querystring 格式的请求体
let urlParser = bodyParser.urlencoded({extended:false}));
//处理 JSON 格式的请求体
let jsonParser = bodyParser.json();

• 设置路由中间件，然后使用 req.body来获取请求体数据

app.post('/login', urlParser, (req,res)=>{
//获取请求体数据
console.log(req.body);
//用户名 
console.log(req.body.username);
//密码 
console.log(req.body.userpass); 
  response.send('获取请求体数据');
});

获取请求体还可以用中间件express.urlencoded({extended:true})方法，但这个方法仅支持express的4.16.0版本

Router

1. express 中的 Router 是一个完整的中间件和路由系统，可以看做是一个小型的 app 对象。
2. Router的作用就是对路由进行模块化，更好的管理路由。
3. 创建独立的js文件home.js

//1. 导入 express
const express = require('express');
//2. 创建路由器对象
const router = express.Router();
//3. 在 router 对象身上添加路由
router.get('/home', (req, res) => { 
  res.send('home页');
})
router.get('/cart', (req, res) => { 
  res.send('购物车');
});
//4. 暴露
module.exports = router;

4. 在主文件中

const express = require('express');
const app = express();
//5.引入子路由文件
const home = require('./routes/home');//node引入js文件会自动补全后缀
//6.设置和使用中间件
app.use(home);

app.listen(3000,()=>{
console.log('3000 端口启动....');
})

EJS模板引擎

1. 模板引擎是分离用户界面和业务数据的一种技术
2. express的模板引擎有很多，ejs只是其中一种
3. 安装ejs包：npm i ejs
4. ejs的语法：<% js语句 %>，<%= %> 它会输出转义的数据到模板上，<%- %>它会输出非转义的数据到模板上
5. ejs的应用：
   首先在主文件上设置ejs模板引擎和路径，用app.set()设置后就不需要在用require引入，要使用模板引擎则需要res.render()来渲染。

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

// 将ejs设置为默认的模板引擎
app.set('view engine', 'ejs')
// 设置模板路径，views是底下创建的文件夹
app.set('views', path.resolve(__dirname, 'views'))

app.get('/hello', (req, res) => {
  res.render('hello',{text:'你是狗蛋吗？'})
})

app.listen(3000, () => {
  console.log('服务器启动成功了~~~');
})

在当前文件夹下创建一个views文件夹，在里面创建一个hello.ejs文件，ejs文件和html的唯一区别就是，在ejs文件里可以使用ejs语法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2><%= text %></h2>
</body>
</html>

我们可以从上面的两部分代码中看到，res.render('hello',{text:'你是狗蛋吗？'})可以传入两个参数，第一个是ejs的文件名，且不带后缀，第二个则是传递给ejs文件的参数。在ejs文件中则可以使用<%= text %>接收，最终呈现在响应体中，如下：