文章目录
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();})
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 中间件应用
路由保护。先使用中间件判断用户登录状态,若未登录则拦截请求,并响应禁止用户进入后续页面。网站维护公告。在所有路由最上面定义中间件接受所有请求。直接为客户作出响应,网站正在维护。自定义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
。
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>