NodeJs express框架

文章目录

1 express框架1.1 express特点2 app.use中间件2.1 概念2.2 中间件用法2.3 中间件应用2.4 错误处理中间件2.5 捕获错误3 express请求处理3.1 构建模块化路由3.2 GET参数的获取3.3 POST参数的获取3.4 路由参数.3.5 静态资源的处理4 express-art-template模块引擎4.1 介绍4.2 app.locals对象

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()方法用来响应客户端方法内部会检测响应内容的类型。方法会自动设置http状态码。方法会自动设置响应的内容类型及编码。 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();})

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/indexres.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。