node —— express

其他 2020-02-08 11:20:19 阅读次数: 0

express

  1. 使用express框架来搭建服务器无需再配置过多服务器端内容，其底层已经将其为我们配置。
  2. express框架的中间件、基本路由的底层实现了路由代码封装，根据不同的写法去实现不同的功能
  3. 在express框架的路由使用中，若想让页面正常显示，必须要在中间件/路由的回调函数中调用res.send(...)，否则页面会一直加载
一、 使用express创建一个工程
  • 创建app.js文件
  • 初始化：npm init后得到package.json文件
  • 安装express：npm install express --save-dev
  • 搭建服务器：
    ① 在app.js中引入express：const express = require("express");
    ② 创建app对象： let app = new express()/let app = express()
    ③ 配置当前服务器的路由：app.get("/",(req,res)=>{res.send("express")})
    ④ 给app配置监听端口号：app.listen(port,callback)
//搭建服务器demo
//打开localhost:8100页面显示express
const express = require("express");
let app = new express();
app.get("/",(req,res)=>{
	res.send("express")
	})
app.listen(8100,()=>{
    console.log("server start")
})

二、基本路由

  1. 路由的url可以为字符串、字符串模式以及正则表达式
  2. 如果需要在路径中加上$，需要用([\$])转义。eg："/data/([\$])book"最后会解析为/data/$book
  3. 当在路径中输入.txt等带有文件标识时，如果当前目录并不是静态资源目录，则会直接将其当做普通的字符串解析，而并不是去访问该目录下的文件。
  • app.all(url,(req,res)=>{})：访问地址为url（无论什么类型的请求都可以）
  • app.get(url,(req,res)=>{})：访问地址为url且为get请求
  • app.post(url,(req,res)=>{})：访问地址为url且为post请求
  • app.put(url,(req,res)=>{})：访问地址为url且为put请求
  • app.delete(url,(req,res)=>{})：访问地址为url且为delete请求
路由回调函数中可用的方法

在这里插入图片描述

url基于字符串模式：
1. 与acd和abcd相匹配
app.get('/ab?cd', function (req, res) {
  res.send('ab?cd')
})
2. 与abcd，abbcd，abbbcd等等相匹配
app.get('/ab+cd', function (req, res) {
  res.send('ab+cd')
})
3. 与abcd，abxcd，abRANDOMcd，ab123cd等匹配
app.get('/ab*cd', function (req, res) {
  res.send('ab*cd')
})
4. 与/abe和/abcde相匹配
app.get('/ab(cd)?e', function (req, res) {
  res.send('ab(cd)?e')
})

三、express中配置静态资源文件

  1. app.use(express.static(url))
  • url为要配置的静态资源目录
  • eg：app.use(express.static("public/static"))代表根目录下的public,public目录下的static文件为静态资源。当输入网址为https://localhost:8100/1.png时，实际上取的是https://localhost:8100/public/static/1.png文件(若直接输入这个网址是无法取到1.png的)
  1. app.use(输入的url,express.static(实际访问的资源目录))
  1. 第一个参数为虚拟路径，第二个参数中的的路径为实际配置的静态资源目录
    eg：app.use("/static",express.static("public/static"))：当输入localhost:8100/static时，实际上进入的是localhost:8100/public/static文件夹

四、中间件

  1. 对于同一个路由，每个中间件的req和res是完全相同的（所指向的指针相同）
  2. 所有中间件的执行都在请求收到回复后。
  3. 所有中间件中只能有一个res.send()
  4. 如果对于同一个路由有多个中间件，则会按照路由配置的顺序执行不同的中间件（如果要执行下一个中间件，必须在当前中间件中调用next()）
1. 中间件的任务
  • 执行任何代码。
  • 更改请求和响应对象（不能更改已经请求过的内容，eg:操作req的请求头,会报 Cannot set headers after they are sent to the client的错误）
  • 结束请求-响应周期。
  • 调用堆栈中的下一个中间件。
2. 应用层中间件
  1. 应用层中间件如果没有拦截url，只有一个回调函数，则所有路由都会执行（全局）
  2. 通过app.use(url,(req,res)=>{})方法将应用层中间件绑定在app实例上。该方法拦截请求路径为url的所有类型的请求
  3. 通过app.get(url,(req,res)=>{})/aqq.post(url,(req,res)=>{})来拦截路径为url的get/post请求。
    4.== 当请求当前路由对应的子路由时，也会执行当前路由的中间件==
  4. 若当前请求的路由不存在时，不会执行其父路由对应的回调函数，而是会报错。但会执行/路由对应的回调函数以及全局路由对应的回调函数
//请求http://localhost:8100/test/test时输出：
//我是第一层中间件
//第一层
//第二层
//我是子路由
app.use("/",(req,res,next)=>{
	console.log("我是第一层中间件");
	next();
})
app.use("/test",(req,res,next)=>{
	console.log("第一层");
	next();
},(req,res,next)=>{
	console.log("第二层");
	next();
})
app.use("/test/test",(req,res,next)=>{
	console.log("我是子路由");
	res.send(123);
})
3. 路由中间件
  1. router.get(url,(req,res,next)=>{})：拦截路由为url且为get类型的http请求，不拦截其get请求的子路由的http请求
  2. router.get("/",(req,res,next)=>{})：拦截路由为/的get类型的http请求
  3. router.use("/",(req,res,next)=>{})：拦截所有路由的所有类型的请求，包括路由为/以及其子路由的http请求
  4. router.use(url,(req,res,next)=>{})：若请求路由为其子路由且该子路由未配置，则会执行该路由的回调函数。若其子路由配置，则不会执行。拦截路由为url的所有类型的http请求
  5. 对于4中的子路由未配置的情况不会报错，会执行其父路由的回调函数
//当输入https://localhost:8100/login/hello/hello时会输出：
//所有都执行
//hello执行
//1执行
let router = express.Router();
router.use("/",function(req,res,next){
    console.log("所有都执行");
    next();
})
router.get("/hello",(req,res,next)=>{
    console.log("get请求");
    next()
})
router.use("/hello",(req,res,next)=>{
    //http://localhost:8100/login/hello
    console.log("hello执行")
   next();
},(req,res,next)=>{
    console.log("1执行")
    res.send("hello")
})
router.use("/login",(req,res,next)=>{
    //http://localhost:8100/login/login 
    res.send("login")
})

// //路由和app关联
 app.use('/login',router)

//当输入https://localhost:8100/login/hello/hello时会输出：
//所有都执行
//子组件
let router = express.Router();
router.use("/",function(req,res,next){
    console.log("所有都执行");
    next();
})
router.get("/hello",(req,res,next)=>{
    console.log("get请求");
    next()
})
router.use("/hello",(req,res,next)=>{
    //http://localhost:8100/login/hello
    console.log("hello执行")
   next();
},(req,res,next)=>{
    console.log("1执行")
    res.send("hello")
})
router.use("/hello/hello",(req,res,next)=>{
    console.log("子组件")
    res.send("hello子组件")
})
// //路由和app关联
 app.use('/login',router)
步骤：
  • 获取路由对象：let router = express.Router();
  • 配置路由：router.use/router.get/router.post
  • 路由与app绑定：app.use(url,router)(第一个参数为在哪个路径下配置路由。eg:若url为“/login”，则对于第二步的所有路由配置，其相对根目录为https://localhost:8100/login，而不是https://localhost:8100)
//下面示例中，当输入http://localhost:8100/login时执行路由为/的中间件
//当输入http://localhost:8100/login/hello时执行路由为hello的中间件
let router = express.Router();
router.use("/",function(req,res,next){
    console.log("所有都执行");
    next();
})
router.get("/hello",(req,res,next)=>{
    console.log("get请求");
    res.send("123");
})
 app.use('/login',router)
4. 第三方中间件
①body-parser

当http请求为post方式时，需要用到body-parser（req.body）来提取出请求体里面的数据，否则在express中是无法取出来值的。

使用：
  • 安装：npm install body-parser --save-dev
  • 引入：let bodyparser = require("body-parser")
  • 在express中配置：
    ① 配置请求编码格式：app.use(bodyparser.urlencoded({extended:false}))
    ② 配置返回数据方式：app.use(bodyparser.json())
  • 通过req.body提取到提交的值（json值）
②cookie-parser

可将数据存入在浏览器缓存中，标记后的数据并不是加密，而是被加工过的标记字符分隔开了

使用
  • 安装：npm install cookie-parser --save-dev
  • 引入：let cookieparser = require("cookie-parser")
  • 与app关联：app.use(cookieparser())
属性
属性 解释
res.cookies 获取未标记的cookie ，返回的是json数据
res.signedCookies 获取标记的cookie，返回的是json数据
方法

res.cookie(key,value,options)

  • 设置cookie
  • option：maxAge设置存活时长 、signed设置是否被标记（true为被标记，false为不被标记）
    在这里插入图片描述
  • 当signed为true时，需要在cookie-parser与app关联时添加标记字符(eg：app.use(cookieparser("123")),标记字符为123)
5. express的get传值
①动态传值
  1. 对路径有要求，必须在路由配置时给路由添加:
  2. 通过req.params获取动态路由传递的参数，参数名为路由配置时:后的参数名。
② get传值

取值：url.parse(req.url,true).query

6. express框架里面的ejs
  1. 通过设置ejs模板引擎和html模板引擎都可以让express识别ejs语法。
  2. 若设置html模板引擎，则可以在html中写ejs语法。且renderFile中path为html文件的路径。
步骤：
  • 安装ejs：npm install ejs --save-dev
  • 设置ejs模板引擎：app.set("view engine","ejs")(让express识别ejs语法)
  • 使用ejs
 ejs.renderFile("view/index.ejs",{
         data:123
    },(err,str)=>{
         res.send(str)
   })
 })
添加html模板引擎
  • app.engine('html',ejs.renderFile)(或者app.engine('html',ejs.__express))
  • app.set("view engine","html")
  • 使用ejs
 ejs.renderFile("view/index.html",{
         data:123
    },(err,str)=>{
         res.send(str)
   })
 })
Lemon
发布了72 篇原创文章 · 获赞 72 · 访问量 6303
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43314846/article/details/103426459
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022