NodeJs express框架

1 express框架

express框架是基于node.js的web应用开发框架。

1.1 express特点

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

//引入express框架	返回值其实是一个方法
//再创建服务器就不需要再引用http模块的createHttp方法了。
const express = require('express');
//创建网站服务器
const app = express();
app.get('/',(req,res)=>{
    /*
    send()响应客户端
    1、res.send()方法内部会检测响应内容的类型
    2、res.send()方法会自动设置http状态码
    3、res.send()方法会自动设置响应的内容类型及编码
    */
    res.send('hello express world');
})
app.get('/list',(req,res)=>{
    res.send({name:'张三',age:20});
});
//监听端口
app.listen(3000,()=>{console.log('服务器启动成功')})

• res.send()方法用来响应客户端
  1. 方法内部会检测响应内容的类型。
  2. 方法会自动设置http状态码。
  3. 方法会自动设置响应的内容类型及编码。
• res.status()方法为客户端设置响应状态码
  • res.status(404);

2 app.use中间件

2.1 概念

• 中间件就是一些方法，可以接收客户端发送的请求、对请求作出响应，也可以将请求交给下一个中间件来处理。

• 中间件主要由两部分组成：中间件方法和请求处理函数。

  • 中间件方法由express提供，负责拦截请求。
  • 请求处理函数由开发人员提供，负责处理请求。

  app.get('请求路径','处理函数');		//接收并处理get请求
  app.post('请求路径','处理函数');	//接收并处理post请求
  

  • 可以针对同一个请求设置多个中间件，对同一个请求进行多次处理。

    • 默认情况下，请求从上到下依次匹配中间件，一但匹配成功，就终止向下匹配。
    • 可以调用next()方法将请求的控制权传递给下一个中间件，直到遇到结束请求的中间件。

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

2.2 中间件用法

• app.use()匹配所有的请求方式，可以直接传入请求处理函数，代表接受所有的请求。
• app.use()第一个参数也可以传入请求地址，代表不论什么请求方式，只要是这个请求地址就接收这个请求。
• app.use()必须放在前面。

app.use((req,res,next) => {
    console.log(req.url);
    next();
})

app.use('/admin',(req,res,next) => {
    console.log(req.url);
    next();
})

const express = require('express');
const app = express();
// app.use()必须放在前面
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,next)=>{
    res.send('张三');
});
app.get('/request',(req,res,next)=>{
    req.name = '张三';
    next();
});
app.get('/request',(req,res)=>{
    res.send(req.name);
});
//监听端口
app.listen(3000,()=>{console.log('服务器启动成功')})

2.3 中间件应用

1. 路由保护。先使用中间件判断用户登录状态，若未登录则拦截请求，并响应禁止用户进入后续页面。
2. 网站维护公告。在所有路由最上面定义中间件接受所有请求。直接为客户作出响应，网站正在维护。
3. 自定义404页面。

2.4 错误处理中间件

• 错误处理中间件是一个集中处理错误的地方。只能捕获到同步代码执行出错，无法捕获异步代码。
• 当程序出现错误时，调用next()方法，将错误信息通过参数的形式传递给next()方法，即可触发错误处理中间件。

// err就是错误对象
const express = require('express');
const app = express();
app.get('/index',(req,res)=>{
    throw new Error('程序出错');
    res.send('正常执行')
});
//错误处理中间件    err就是错误对象
app.use((err,req,res,next)=>{
    res.status(500).send('服务器出错');
});


//监听端口
app.listen(3000,()=>{console.log('服务器启动成功')})	

const express = require('express');
const fs = require('fs');
const app = express();
app.get('/index',(req,res,next)=>{
    fs.readFile('./007.app.use.js','utf-8',(err,result)=>{
        if(err != null){
            next(err);
        }else{
            res.send(result);
        }
    });
    // throw new Error('程序出错');
    // res.send('正常执行')
});
//错误处理中间件    err就是错误对象
app.use((err,req,res,next)=>{
    res.status(500).send('服务器出错');
});

2.5 捕获错误

• node,js中，异步API的错误信息都是通过回调函数获取的，支持promise对象的异步API发生错误可以替换catch方法捕获。
• try catch可以捕获异步函数及同步代码在执行过程中发生的错误，但是不能捕获其他类型的API发生的错误。

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 freadFile('./a.js');
    }catch(ex){
        next(ex);
    }
});
//错误处理中间件    err就是错误对象
app.use((err,req,res,next)=>{
    res.status(500).send('服务器出错');
});
//监听端口
app.listen(3000,()=>{console.log('服务器启动成功')})

3 express请求处理

3.1 构建模块化路由

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

//构建模块化路由对象
const home = express.Router();
//为路由匹配路径
app.use('/home',home);
//调用home路由下面的get方法继续创建二级路由	
home.get('/index',(req,res)=>{
    //  /home/index
    res.send('欢迎。');
});
app.listen(3000,()=>{
    console.log('ok');
});

将路由文件单独放进router文件夹，构建模块化的路由

/*home.js*/
const express = require('express');
const home = express.Router();
home.get('/index',(req,res)=>{
    res.send('欢迎来到首页');
});
module.exports = home;

/*admin.js*/
const express = require('express');
const admin = express.Router();

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

/*主界面 模块化路由2.js*/
const express = require('express');
const home = require('./router/011.home');
const admin = require('./router/012.admin');
const app = express();
//选择进入二级路由
app.use('/home',home);      
app.use('/admin',admin);
app.listen(3000,()=>{
    console.log('ok');
});

3.2 GET参数的获取

• express框架使用req,query获取GET参数，内部框架将其参数转换为对象并返回。

const express = require('express');
const app = express();
app.get('/index',(req,res)=>{
    //获取get请求参数
    res.send(req.query);
});
app.listen(3000,()=>{
    console.log('ok');
});

在浏览器输入http://localhost:3000/index?name=张三&age=20，按回车。

输出对象：{“name”:“张三”,“age”:“20”}

3.3 POST参数的获取

• 借助第三方模块body-parser获取express框架中的POST参数。

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
/* 拦截所有请求
extended:false方法内部使用querystring模块处理请求参数的格式
extended:true方法内部使用第三方模块qs处理请求参数的格式 */
app.use(bodyParser.urlencoded({extended:false}));

app.post('/add',(req,res)=>{
    //获取post请求参数
    res.send(req.body);
});
app.listen(3000,()=>{
    console.log('ok');
});

<form action="http://localhost:3000/add" method="POST">
    <input type="text" name="username">
    <input type="text" name="paw">
    <input type="submit" name="">
form>

在表单内输入张三、123456，跳转页面，输出对象：{“username”:“张三”,“paw”:“123456”}

3.4 路由参数.

• 在地址后面用冒号标识的即代表路由参数，如id等在这里表示占位符。

const express = require('express');
const app = express();
app.get('/index/:id/:name/:age',(req,res)=>{
    //req.params获取请求参数
    res.send(req.params);
});
app.listen(3000,()=>{
    console.log('ok');
});

浏览器输入路径localhoat:3000/index/10/张三/56，输出{“id”:“10”,“name”:“张三”,“age”:“56”}

3.5 静态资源的处理

• 通过Express内置的express.static可以托管静态资源，如css、js、html等文件。

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

拦截请求，由方法处理，将静态资源的目录告诉方法。

方法内部会判断客户端发送的请求是否是静态资源请求；

若是，方法内部直接将资源响应给客户端，终止当前请求。

若不是，调用next()方法，将请求交给下一个中间件。

const express = require('express');
const path = require('path');
const app = express();
//实现静态资源访问功能  开启静态资源文件
app.use(express.static(path.join(__dirname,'public')));
//也可以添加一个虚拟路径
//app.use('static' , express.static(path.join(__dirname,'public')));
app.listen(3000,()=>{
    console.log('ok');
});

访问localhost:3000或localhost:3000/index.html或localhost:3000/static/index.html。

4 express-art-template模块引擎

4.1 介绍

• 在原art-template模块引擎基础上封装了express-art-template模块引擎，使能更好地与express框架配合。
• 安装：npm install art-template express-art-template
• 三件事，然后渲染。

const express = require('express');
const path = require('path');
const app = express();
//1、告诉express框架使用什么模块引擎，渲染什么后缀的模板文件（1.模块后缀；2.使用的模块引擎）
app.engine('art',require('express-art-template'));
//2、告诉express框架模板存放的位置在那里
app.set('views',path.join(__dirname,'views'));
//3、告诉express框架模板的默认后缀是什么
app.set('views engine','art');
app.get('/index',(req,res)=>{
    //使用res.render渲染
    //1、拼接了模板路径
    //2、拼接了模板后缀
    //3、哪个模板跟哪个数据进行连接
    //4、将拼接结果响应给客户端
	res.render('index',{
        msg:message,
    })
})
app.listen(3000,()=>{
    console.log('ok');
});

4.2 app.locals对象

将变量设置到app.locals对象下面，此数据可在所有模板中获取到。

app.locals.users = [{
    name:'张三',
    age:20,
},{
    name:'李四',
    age:25,
}]

<ul>
    {{each users}}
	<li>
		{{$value.name}}
        {{$value.age}}
	li>
	{{/each}}
ul>