- A+
1. Express框架是什么
1.1 Express是一个基于Node平台的web应用开发框架,它提供了一系列的强大特性,帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。
1.2 Express初体验
// 引入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: '张三', age: 20}) }) // 监听端口 app.listen(3000); console.log('网站服务器启动成功');
2. 中间件
2.1 什么是中间件
中间件就是express框架提供的一堆方法,可以接收客户端发来的请求、可以对请求做出响应,也可以将请求继续交给下一个中间件继续处理,即接受请求,处理请求。
中间件主要由两部分构成,中间件方法以及请求处理函数。
中间件方法由Express提供,负责拦截请求,请求处理函数由开发人员提供,负责处理请求。
//中间件示例 app.get('请求路径', '处理函数') // 接收并处理get请求 app.post('请求路径', '处理函数') // 接收并处理post请求
可以针对同一个请求设置多个中间件,对同一个请求进行多次处理。
默认情况下,请求从上到下依次匹配中间件,一旦匹配成功,终止匹配。
可以调用next方法将请求的控制权交给下一个中间件,直到遇到结束请求的中间件。
//02.中间件.js //引入express框架 const express = require("express"); //创建网站服务器 const app = express(); //当客户端以get方式访问/request路由时 //第一个中间件 app.get('/request', (req, res, next) => { req.name = "张三"; next(); }); //下一个中间件 app.get('/request', (req, res) => { res.send(req.name); }); //监听端口 app.listen(3000);
2.2 app.use中间件用法
app.use 匹配所有的请求方式,可以直接传入请求处理函数,代表接收所有的请求。
app.use((req, res, next) => { console.log(req.url); next(); });
app.use 第一个参数也可以传入请求地址,代表不论什么请求方式,只要是这个请求地址就接收这个请求。
app.use('/request', (req, res, next) => { console.log(req.url); next(); });
- 输入
http://localhost:3000
,控制台打印请求走了app.use中间件
- 输入
http://localhost:3000/request
,控制台打印请求走了app.use中间件、请求走了app.use /request中间件
//03.app.use.js 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.listen(3000);
2.3 中间件应用
1.网站维护公告 ,写在最前面,直接为客户端做出响应,网站正在维护中。
// 引入express框架 const express = require('express'); // 创建网站服务器 const app = express(); app.use((req, res, next) => { res.send('当前网站正在维护...') })
2.路由保护,客户端在访问需要登录的页面时,可以先使用中间件判断用户登录状态,用户如果未登录,则拦截请求,直接响应,禁止用户进入需要登录的页面。
app.use('/admin', (req, res, next) => { // 用户没有登录 let isLogin = true; // 如果用户登录 if (isLogin) { // 让请求继续向下执行 next() }else { // 如果用户没有登录 直接对客户端做出响应 res.send('您还没有登录 不能访问/admin这个页面') } }) app.get('/admin', (req, res) => { res.send('您已经登录 可以访问当前页面') })
3.自定义404页面
app.use((req, res, next) => { // 为客户端响应404状态码以及提示信息 res.status(404).send('当前访问的页面是不存在的') }) // 监听端口 app.listen(3000); console.log('网站服务器启动成功');
3. Express请求处理
3.1 构建模块化路由
//路由对象也会有get、post方法 // 引入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);
把二级路由抽离出来模块化,然后再app.js中引入
//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;
// 引入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);
3.2 GET参数的获取
不再引用url模块通过对请求地址进行解析来获取请求参数,直接req.query即可获取,框架内部会将GET参数转换为对象并返回
// 引入express框架 const express = require('express'); // 创建网站服务器 const app = express(); app.get('/index', (req, res) => { // 获取get请求参数 res.send(req.query) }) // 端口监听 app.listen(3000);
3.3 POST参数的获取
Express中接收post请求参数需要借助第三方包 body-parser。
//10.如何获取post请求参数.js const express = require("express"); // 引入body-parser模块 const bodyParser = require("body-parser"); const app = express(); //拦截所有请求 //extended:false 方法内部使用querystring模板处理请求参数的格式 //extended:true 方法内部使用第三方模块qs处理请求参数的格式 // 配置body-parser模块 app.use(bodyParser.urlencoded({ extended: false })); // 接收请求 app.post("/add", (req, res) => { //接受post请求参数 res.send(req.body); }); // 监听端口 app.listen(3000);
<form action="http:localhost:3000/add" method='post'> <input type="text" name='username'> <input type="text" name='password'> <input type="submit" name=''> </form>
疑问:app.use方法需要传递一个请求处理函数进去,但是现在为什么传递了一个方法的调用呢?
实际上调用的这个方法,它的返回值也是一个函数,这个返回的函数正好作为了app.use() 的参数。
这样写的好处就是调用fn函数的同时向fn函数内部传递一些额外的参数,在请求处理函数内部可以根据参数改变请求处理函数的行为
// 引入express框架 const express = require('express'); const bodyParser = require('body-parser'); // 创建网站服务器 const app = express(); //拦截所有请求。把fn函数的调用写在use的里面,如果为1打印请求地址 app.use(fn ({a: 2})) 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.listen(3000);
3.4 Express路由参数
//传递和接受get参数还有另外一种方式,路由参数 //req.params获取请求参数 // 引入express框架 const express = require('express'); const bodyParser = require('body-parser'); // 创建网站服务器 const app = express(); app.get('/index/:id/:name/:age', (req, res) => { // 接收get请求参数 res.send(req.params) }) // 端口监听 app.listen(3000);
3.5 静态资源的处理
内置的express.static可以方便地托管静态文件,例如img、CSS、JavaScript 文件等。
//通过express内置的express.static可以托管静态文件,例如img/css/js文件等 //方法内部会判断客户端发来的请求是否是静态资源请求,如果是直接响应给客户端,终止当前请求 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);
4. express-art-template模板引擎
4.1 模板引擎
为了使art-template模板引擎能够更好的和Express框架配合,模板引擎官方在原art-template模板引擎的基础上封装了express-art-template。
npm install art-template express-art-template
//14.模板引擎.js const express = require('express'); const path = require('path'); const app = express(); // 1.告诉express框架使用什么模板引擎渲染什么后缀的模板文件 //app.engine('模板后缀', require('使用的模板引擎')) app.engine('art', require('express-art-template')) // 2.设置模板存放目录 //app.set('views为固定参数,express框架的配置项名字,告诉模板存放的位置',绝对路径 views模板文件夹) app.set('views', path.join(__dirname, 'views')) // 3.渲染模板时不写后缀 默认拼接art后缀 app.set('view engine', 'art'); app.get('/index', (req, res) => { //render功能: // 1. 拼接模板路径 // 2. 拼接模板后缀 // 3. '模板名称',{key:value} // 4. 将拼接结果响应给了客户端 res.render('index.art', { msg: 'message page' }) }); app.get('/list', (req, res) => { res.render('list', { msg: 'list page' }) }) // 端口监听 app.listen(3000);
4.2 express模块中的req,res参数的常用属性方法
const express = require('express'); const router = express.Router() router.get('/',(req,res)=>{ // Request // req.baseUrl 基础路由地址 // req.body post发送的数据解析出来的对象 // req.cookies 客户端发送的cookies数据 // req.hostname 主机地址 去掉端口号 // req.ip 查看客户端的ip地址 // req.ips 代理的IP地址 // req.originalUrl 对req.url的一个备份 // req.params 在使用/:id/:name 匹配params // req.path 包含请求URL的路径部分 // req.protocol http 或https协议 // req.query 查询字符串解析出来的对象 username=zhangsan&password=123 { username:zhangsan } // req.route 当前匹配的路由 正则表达式 // req.params 获取路由匹配的参数 // req.get 获取请求header里的参数 // req.is 判断请求的是什么类型的文件 // req.param(key名称) 用来获取某一个路由匹配的参数 //Response // res.headersSent 查看http响应是否响应了http头 // res.append(名称,value) 追加http响应头 // res.attachment(文件路径) 响应文件请求 // res.cookie() 设置cookie //res.setHeader('Content-Type','text/html;charset=utf8') // res.append('Content-Type','text/html;charset=utf8') // res.append('hehe','1008') // res.append('haha','1008') // res.attachment('./xx.zip') //Content-Disposition: attachment; filename="xx.zip" // res.clearCookie(cookiename) 删除cookie // res.cookie('zhangsan','lisi') 设置cookie // res.cookie('zhangsan1','lisi2',{ // maxAge:900000, // httpOnly:true, // path: '/admin', // secure: true, // signed:true // }) // res.clearCookie('zhangsan') // res.download(文件的path路径) 跟attachment类似 用来处理文件下载的 参数是文件地址 // res.end http模块自带的 // res.format()协商请求文件类型 format匹配协商的文件类型 // res.format({ // 'text/plain': function(){ // res.send('hey'); // }, // 'text/html': function(){ // res.send('<p>hey</p>'); // }, // 'application/json': function(){ // res.send({ message: 'hey' }); // }, // 'default': function() { // // log the request and respond with 406 // res.status(406).send('Not Acceptable'); // } // }); // res.get('key') 获取响应header数据 // res.json() 返回json数据 会自动设置响应header Content-type 为json格式 application/json // res.json({ // xx:100 // }) // res.json({ // xx:100 // }) // jsonp 利用的就是浏览器加载其他服务器的文件不会存在跨域问题 // ajax请求就会有跨域问题 // res.setHeader('Content-Type','text/javascript;charsert=utf8') // res.end(`typeof ${req.query.callback} == 'function' ? ${req.query.callback}({aa:100}):null`) // res.jsonp({aaa:100}) // 重定向 把访问的地址跳转到另一个地址上 // res.redirect(301,'/api/aes') // express jade // res.render('index',{title:"hehe",test:"23"}) // res.send('') 发送数据 可以是任意类型的数据 // res.sendFile() 发送文件的 // res.sendStatus(200) 设置发送时的状态码 // res.set('Content-Type', 'text/plain') //设置响应header // res.status(200) // 设置状态码 // res.type('') // 直接设置响应的文件类型 // res.type('pdf') // res.send({aa:100}) // res.end('ok') // res.end({aa:100}) // res.end('你好') // res.end(req.get('Accept-Language')) // res.json({ // is:req.is('text/html') // }) // res.json({ // type:req.baseUrl, // hostname:req.hostname, // // ip:req.ip, // // ips:req.ips, // // route:req.route, // ct:req.get('Accept'), // cs:'22' // }) }) router.get('/:id/:date',(req,res)=>{ console.log(req.params) // res.json(req.params) res.end(req.param('date')) }) router.get('/aes',(req,res)=>{ res.json({ type:req.baseUrl }) }) module.exports = router
参考:https://blog.csdn.net/weixin_40581714/article/details/111591005