Express框架

一、什么是Express框架
二、安装Express
三、框架的使用
- 1.监听get/post请求
- 2.获取 URL 中携带的查询参数
四、中间件
- 1.use中间件
- 2.中间件的作用
- 3.更改状态码
- 4.捕获错误的错误处理中间件
四、构建模块化路由Router
- 8.获取get请求附带的参数
- 9.获取post请求附带的参数
- 10.路由占位参数
- 11.静态资源访问功能
- 12.express的模板引擎
- 13.locals对象
- 14.jsonp方法
- 15.设置跨域响应头

一、什么是Express框架

官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。
Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。

二、安装Express

npm install express

三、框架的使用

1.监听get/post请求

const express = require('express')
//创建网址服务器
const app = express();
//监听端口
app.listen(3000,()=>
{console.log('服务器响应成功')
})//接收请求方法和地址
//get监听 GET 请求
app.get('/',(req,res)=>{res.send('hello world')
})
//post监听 post 请求
app.post('/aa',(req,res)=>{res.send({aa:11})})

res的send方法：
1.会检测响应内容的类型,是httml，css还是js
2.会自动设置http状态码,200,304,404,
3.会自动帮我们设置响应的内容类型和编码即type/html,ype/css,编码是utf8
4.所以send方法直接返回要返回的内容就行了。

2.获取 URL 中携带的查询参数

通过 req.query 对象，可以访问到客户端通过查询字符串的形式，发送到服务器的参数：

app.get('/',(req,res)=>{// req.query 默认是一个空对象 
//客户端使用 ?name=zs&age=20 这种查询字符串形式，发送到服务器的参数，//可以通过 req.query 对象访问到，例如∶
//   req.query.age // req.query.name console.log(reg.query))

四、中间件

就是一堆方法，可以接收客户端发来的请求，可以对请求做出响应，也可以将请求交给下一个中间件来处理。
可以对同一个请求进行多个中间件处理。
但是在默认情况下，请求时从上到下匹配中间件的，一旦匹配成功，就终止匹配，达不到一个请求进行多个中间件处理。
需要用到获取请求的第三个参数next

app.get('/',(req,res,next)=>{res.send('hello world')
req.name = '张三'
next()
//只要调用这个next(),下面的获取请求的方法也会执行。
})
app.get('/',(req,res,next)=>{res.send(req.name)
})

1.use中间件

app.use((req,res,next)=>{next()
})
//参数必须传一个处理函数进去.
也可以这么写
app.use(fn())
function fn(){return function (req,res,next){next()
}
}
//这样可以在fn()里传一个实参,在匿名函数中调用这个实参//表示不论请求的地址是什么都会进入这个函数，代表接收所有的请求。

也可以指定请求地址，第一个参数就是请求地址

app.use('/',(req,res,next)=>{next()
})

表示不论什么请求方式，只要请求地址是这个，就会进入方法。

2.中间件的作用

1.路由保护
客户端在请求用户登录后才能访问的地址时，可以先用中间件判断用户登录状态，如果没有登录，就拦截请求，禁止用户访问。

const express = require('express')
const app = express();
app.use('/admin',(req,res,next)=>{let login = false;if(login){next()
}else{res.send('您未登录')
}
})
app.get('/admin',(req,res,next)=>{res,sedn('您已登录')
})

2.网站维护

app.use('/admin',(req,res,next)=>{   res.send('网站正在维护')
})

3.自定义404页面
在最后写

app.use((req,res,next)=>{   res.send('网址未找到')
})

这样路由一层一层匹配下来后，没找到就回执行这个。

3.更改状态码

app.use((req,res,next)=>{   res.status(404).send('网址未找到')
})

4.捕获错误的错误处理中间件

1.文件读取错误，数据库连接错误。
都需要捕获到，不然不会程序继续的执行。
理论是在每个可能出错的地方进行判断，express有一个中间件可以集中处理错误。
当程序发生错误时，错误处理中间件就会自动执行。
但错误处理中间件只能处理同步错误，异步API的错误需要手动触发
Node.js中有一个内置错误构造函数

app.get('/index',(req,res)=>{throw new Error('程序发生错误')//当抛出错误时，会自动执行错误中间件})
//错误处理中间件，还是用use
app.use((err,req,res,next)=>{res.status(500).send(err.message)
})
//err.message就是错误的内容'程序发生错误'


//异步apiapp.get('/index',(req,res，next)=>{fs.readFile('./index.html',(err,res)=>{if(err){//如果读取文件出错，err就会存在next(err)//手动触发错误中间件，将err传过去。next带了参数表示要触发错误中间件，没参数，表示触发下一个获取同一个请求的地址方法
}
})
})
app.use((err,req,res,next)=>{res.status(500).send(err.message)
})

//异步函数要用try catch捕获错误
app.get('/index',(req,res，next)=>{try{await User.find({name:'飞'})//发生错误就会执行catch(err)里的next(err)，触发错误处理中间件
}catch(err){next(err)
}
})app.use((err,req,res,next)=>{res.status(500).send(err.message)
})

四、构建模块化路由Router

1.嵌套路由

const express = require('express ')
//创建路由对象
const home  = express.Router()
//中间件监听请求地址，匹配路由//根路由再监听请求地址，返回子路由
home.get('/index',()=>{///home/index
res.send('欢迎来到home下的index页面')
})
app.use('/home',home)

2.模块化路由

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

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

//app.js
const express = require('express')
//创建网址服务器
const app = express();
//监听端口
app.listen(3000)
const home = require('./home.js')
const user = require('./user.js')app.use('./home',home)//访问/home/index时会触发这个中间件
app.use('./user',user)

多个路由模块合并使用

8.获取get请求附带的参数

app.get('/index',(req.res)=>{//req.query就是get请求方式附带的参数,会自动帮我们转成json对象形式{}
})

9.获取post请求附带的参数

需要第三方模块插件

npm install  body-parser

const bodyParser = require('body-parser')//false时会使用node的系统模块querystring来获取参数,true时会使用第三方模块的qs方法来获取参数,推荐用querystring
//配置body-parser模块,拦截所有请求
app.use(bodyParser.urlencoded({extended:false}))app.post('./add',(req,res)=>{console.log(req.body)//返回对象形式的参数
})

10.路由占位参数

app.get('/find/:id',(req,res)=>{// req.paramse就是{id:123}})//:id是一个占位符
//此时路由可以也称http://localhost/home/123
//:id就对应着123//不用写成http://localhost/home?name =123的形式了
//可以在:id后面接着写/:name/:age
//id,name,age就是对象的属性

11.静态资源访问功能

app.use(express.static(静态文件绝对路径))//http:127.0.0.1/public/img/0.1jpg

写了之后就开启了静态服务,浏览器可以直接根据地址来访问静态资源.
也可不写真实的路径,指定一个虚拟的路径来访问.

app.use('statc',express.static(静态文件绝对路径))//http:127.0.0.1/statc/public/img/0.1jpg

这也就需要在路径上,再加一层statc

12.express的模板引擎

还是使用art-template
但是art-template在express的基础上又进行了一次封装.比原生的node配合art-template简洁一点
安装

npm install art-template express-art-template

要把art-template和express-art-template都安装起来.
1.告诉express用的什么模板引擎

const express = require('express')
const app = express();
//表示要渲染后缀为art文件时,使用express-art-template模板引擎
//告诉框架使用什么模板引擎渲染什么后缀的模板文件
//第一个参数是模板的后缀,第二个参数是模板的引擎
//express框架可以使用多个模板引擎
app.engine('art',require('express-art-template'))

2.设置模板存放的目录

//第一个参数是固定的views,是express固定的配置,第二个views是文件夹的名字,
//第二个参数是位置,path模块需要引入
app.set('views',path.join(__dirname,'views'))

3.渲染模板时不写后缀,默认拼接后缀

//view engine是默认模板的配置项
app.set('view engine','art')

4.响应客户端

app.get('/',(req,res)=>{res.render('index',{msg:'hello'
})
})
//render方法执行了多个操作
//1.拼接了模板的路径
//2.拼接了模板的后缀
//3.将模板和数据连接
//4.直接将结果返回给数据,都不要使用send了
//第一个参数是模板的名字,第二个参数是模板的对象

模板是

//index.art
{{msg}}

将index模板返回给客户端,render方法会自动帮我们拼接好文件

13.locals对象

将变量设置到app.locals对象下,这个数据在所有的模板中都可以获取到

app.local.user = [
{name :'张三',age:18
},{nam:'李四'age:20
}
]

//index.art
//可以直接使用这个user
{{user}}

这样在所有模板中都能访问这个数据,不必在res.render的第二个参数中访问这个数据了

14.jsonp方法

app.get('/get',(req,res)=>{const  fnname = res.query.callback//获取jsonp传递过来的方法名const data = JSON.stringify({name:'飞'})const  result = fnname+"(" + data + ")"res.send(result )
})
//这是正常接受处理jsonp传递过来的方法app.get('/get',(req,res)=>{res.jsonp({//这里放的是返回给浏览器的参数
})
//jsonp方法能自动帮我们处理
})

jsonp方法会帮我们自动接受处理jsonp请求，我们只需要传递参数即可。

15.设置跨域响应头

使用 cors 中间件解决跨域问题
cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。
使用步骤分为如下 3 步：
① 运行 npm install cors 安装中间件
② 使用 const cors = require(‘cors’) 导入中间件
③ 在路由之前调用 app.use(cors()) 配置中间件
CORS （Cross-Origin Resource Sharing，跨域资源共享）由一系列 HTTP 响应头组成，这些 HTTP 响应头决定
浏览器是否阻止前端 JS 代码跨域获取资源。
浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，
就可以解除浏览器端的跨域访问限制。
CORS 的注意事项
① CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了 CORS 的接口。
② CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS 的服
务端接口（例如：IE10+、Chrome4+、FireFox3.5+）

app.get('./cross',(req,res)=>{// 设置请求头为允许跨域，其中，'*'的值指定了允许访问该资源的外域 URL。res.header('Access-Control-Allow-Origin', '*');// 设置服务器支持的所有头信息字段res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild, sessionToken');// 设置服务器支持的所有跨域请求的方法res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

Express框架学习记录一：Express框架基础使用相关推荐

python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...
HCIE学习记录——数通网络基础
HCIE学习记录数通网络基础 HCIE学习记录前言一.什么是网络? 1.通信的五要素二.简单网络设备 1.交换机 1.1.广播域 2.路由器总结前言 HCIE数通方向学习记录. 一.什么是 ...
框架学习系列之Struts2框架学习总结
1 介绍学习和使用Struts2框架有了一段时间,这里将学习心得总结在博客的文章里面.期间也参考学习了其他优秀的文章,如有错误之处欢迎指正,转载请申明原文地址,希望大家支持,谢谢. 2 What:什 ...
Scrapy框架学习记录
随着Python爬虫学习的深入,开始接触Scrapy框架记录下两个参考教程: 官网教程:http://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/tutor ...
SSM框架学习记录-Spring_day01
1.核心概念当前项目中的问题下面代码的实现十分简单,但是业务层需要调用数据层的方法,就要在业务层new数据层的对象,如果数据层的实现类发生变化,业务层的代码也需要跟着改变,意味着要编译打包和重新部 ...
Android camera2 框架学习记录
安卓相机架构概览 Android系统利用分层思想,将各层的接口定义与实现分离开来,以接口作为各层的脉络连接整体框架,将具体实现的主导权交由各自有具体实现需求的平台厂商或者Android 开发者,这样既 ...
EasyDarwin框架学习记录
Easy系列流媒体平台框架: EasyDarwin开源流媒体服务器:www.EasyDarwin.org EasyDSS商用流媒体解决方案:www.EasyDSS.com EasyNVR无插件直播方案 ...
Guns框架学习记录-5-全局异常拦截器+代码生成器
9.全局异常拦截器全局异常拦截器可以拦截程序中出现的已知异常(主动声明的异常)和未知异常.关于异常拦截,建立一个全局异常拦截器,对程序中所有异常进行分类拦截,并友好的返回异常信息,有利于提高程序的健 ...
Flask框架学习记录
Flask项目简要项目大致结构 flaskDemo1 ├─static ├─templates └─app.py app.py # 从flask这个包中导入Flask类 from flask imp ...

Express框架学习记录一：Express框架基础使用