node express框架

最新推荐文章于 2024-05-14 17:07:10 发布

SYK---Programm

最新推荐文章于 2024-05-14 17:07:10 发布

阅读量241

点赞数

分类专栏： node.js 文章标签： express 前端

本文链接：https://blog.csdn.net/qq_62860882/article/details/128477763

版权

node.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

express

这篇文章，我们来说一下当前node.js开发框架最火的框架之一：express框架。

附上官网地址：Express - Node.js Web 应用程序框架 (expressjs.com)

1.使用express快速搭建一个node服务😔

const express = require('express')
const app = express()//创建node服务
app.get('/', (req, res) => {
    // res.end("三好咯多少")
    /*
         数组 对象  字符串 beffur json  
    */
    res.send("三好咯多少")//end的话会乱码，send的话封装好了，不用设置请求头了
})
app.listen("8080", () => {
    console.log("监听完成");
})

引入express包 ===》创建服务 ==>挂载端口

get请求方式

send()封装好的给前端发送数据的

2.拿取前端发送过来的参数😔

get请求

通过req.query拿到前面的数据😔😔

post请求

通过req.body来获取参数的数据。不过要解析数据格式：

使用express提供的中间件

在http原生中，获取到post请求的参数是通过函数来获取的，可以理解为这个中间件就是进行函数的处理

res.on('data',(chunk)=>{
	str+=chunk
})
res.on('end',()=>{
	data=str
})

app.use(express.urlencoded({extended:true})) // 解析post数据
app.use(express.json())

3.app.all()🤧

app.all不管是什么请求方式都可以进入。

app.all(path,callback)

callback有三个参数(req,res,next)

app.all(“*”)表示所有路由所有请求方式都可以进入🤧

4.next

next是回调函数的第三个参数，这个是中间件的关键原理，当使用callback的时候，执行next()表示进入下一个相同路径的相同请求方式。

const express = require('express')
const app = express()
app.use(express.urlencoded({ extended: true })) // 解析post数据
app.use(express.json())

// get请求

app.all("*", (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "*")
    next()
})


app.get('/', (req, res, next) => {
    console.log('get参数', req.query);
    // next()
})
app.get('/', (req, res, next) => {
    let obj = {
        name: '东兴要养'
    }
    res.send(obj)
})
app.post('/', (req, res) => {
    console.log('post参数', req.body);
})



app.listen("8081", () => {
    console.log("监听完成");
})

5.中间件🤠

中间件相当于一个加工工厂。经过多次next()，最后当成一个中间件使用。

创建一个简单的中间件示例：

const express = require('express')
const app = express()
let str = ""
app.get('/', (req, res, next) => {
    str += "东"
    next()
})

app.get('/', (req, res, next) => {
    str += "星"
    next()
})

app.get('/', (req, res, next) => {
    str += "军"
    next()
})

app.get('/', (req, res, next) => {
    str += "团"
    next()
})

app.get('/', (req, res, next) => {
    res.send(str)
})


app.listen("3000", () => {
    console.log("监听完成");
})

6.use函数👩🏻

use函数是express提供程序员使用中间件的。

我们在这里学习一个处理跨域的包 cors

// 操作中间件 => 第三方模块  
const express = require('express')
const app = express()  // 执行express
// 操作跨域中间件  cors 跨域中间件
const cors = require('cors')
// 允许谁能请求到数据
app.use(cors({ origin: "http://127.0.0.1:5500" }))  // use函数 => express提供给程序员操作中间件的
// 配置解析 post请求数据  内置body-parser 中间件
app.use(express.urlencoded({ extended: true })) // 解析post数据
app.use(express.json())


app.get("/", (req, res) => {
    res.send("123")
})

//  监听端口 并启动应用
app.listen("5000", () => {
    console.log("5000端口启动");
})

7.配置静态资源

首先静态资源的几个注意点：

1.配置完静态文件夹后，访问跟路由的时候，就会去找静态文件夹下面的index.html文件，如果有就返回，没有就不会返回，如果静态文件夹下面有其他的html文件也不会进行返回。需要在浏览器地址栏中手动去输入。

2.静态文件夹下面的东西会自动拼接协议域名端口。所以在里面写的css文件，引入的时候可以按照src里面的路径写入，但建议以/开头。还是那句话， img link a script 会自动发送请求

3.直接访问跟路由，写跟路由请求没用了

8.补充res的一些api🤵

download()向用户提供下载的，axios请求还是只能获取到数据。

sendFile(绝对路径)前端请求发送文件数据的，也可以向用户提供下载。

redirect()axios请求不会发生重定向，可以跳转请求的时候，会发生重定向。可以防止用户乱填路由

const express = require('express')
const cors = require('cors')
const app = express()
// 处理跨域
app.use(cors())
// 处理post数据格式的
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
// 配置静态资源文件夹
app.use(express.static('./static'))

app.get('/qwe', (req, res, next) => {
    // console.log('1111');
    // res.send("13232432")
    // res.download('./static/index.html')
    res.sendFile(__dirname + '/static/index.html')
})
// app.get('/', (req, res, next) => {
//     res.send('我是跟路由返回的数据')
// })
app.listen("8080", () => {
    console.log("监听成功！！！");
})

9.动态路由

const express = require('express')
const cors = require('cors')
const app = express()
// 处理跨域
app.use(cors())
// 处理post数据格式的
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
// 配置静态资源文件夹
app.use(express.static('./static'))

app.get('/:id', (req, res, next) => {
    console.log(req.params.id);
})

app.listen("8080", () => {
    console.log("监听成功！！！");
})

以：变量名

然后通过req.params获取

动态写法在任何的路由后面加上 :变量名都会变成动态路由

10.express配置cookie

express => 配置cookie

=> npm i cookie-parser 解析cookie

后端配置cookie

res.cookie(‘key’, ‘value’, {options})

options配置 https://www.expressjs.com.cn/4x/api.html#res.cookie

重要属性

httpOnly 布尔值前端是否能够设置cookie

secure 布尔值 true 只能在https协议中使用

后端获取cookie 同时需要解析cookie 不安全的

req.cookies

这样做，是不安全的

const express = require('express')
const cookieParser = require('cookie-parser')
const app = express()
app.use(express.static('./static'))
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.use(cookieParser())

app.get('/setCookie', (req, res, next) => {
    res.cookie('name', 'shuyikang', { maxAge: 10 * 1000, httpOnly: false })
    res.send("1232")
})
app.get('/getCookie', (req, res, next) => {
    console.log(req.cookies);//要设置cookie-parser才能使用这个cookie
    res.send('getcookie')
})

app.listen("3000", () => {
    console.log("监听成功");
})

11.session

因为上述里面设置cookie是极其不安全的。所以采用session来进行操作

session自动登录，数据放在后端的

npm i express-session

session设置的值只能在后端看到，前端cookie里面存储的是一堆解码的东西

const express = require('express')
const cookieParser = require('cookie-parser')
const session = require('express-session')
const app = express()
app.use(express.static('./static'))
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.use(cookieParser())
app.use(session({
    secret: 'keyboard cat',  // 标签名
    resave: false,       // 更新时是否强制保存
    saveUninitialized: true,  // 初始化保存
    cookie: {
        secure: false,   // true 只会在https中使用
        maxAge: 6000,
    }  // 跟前端的cookie是一样的
}))
app.get('/setCookie', (req, res, next) => {
    // res.cookie('name', 'shuyikang', { maxAge: 10 * 1000, httpOnly: false })
    req.session.name = "12"
    res.send("1232")
})
app.get('/getCookie', (req, res, next) => {
    console.log(req.session.name);//要设置cookie-parser才能使用这个cookie
    // console.log(req.cookies);
    res.send('getcookie')
})
app.listen("3000", () => {
    console.log("监听成功");
})

session数据是不会保存在cookie本身中，只会保存在session ID中。

12.express子路由🚀

有时候，我们路由非常地多，也非常地杂乱，这样不方便路由管理，例如如下这段代码。

const express = require('express')
const app = express()

app.get('/login', (req, res, next) => {
    res.send('/login')
})

app.get('/login/ase', (req, res, next) => {
    res.send('/login')
})
app.get('/login/dsadas', (req, res, next) => {
    res.send('/login')
})
app.get('/login/asdasd', (req, res, next) => {
    res.send('/login')
})
app.get('/login/asd', (req, res, next) => {
    res.send('/login')
})




app.listen('8080', () => {
    console.log("监听成功！！");
})

这样，非常不方便进行路由管理，因此，我们引入了子路由这个概念。

Router/user.js

const express = require('express')
const router = express.Router()
router.get('/', (req, res, next) => {
    res.send('/login首页')
})
router.get('/dsadas', (req, res, next) => {
    res.send('/login')
})
router.get('/asdasd', (req, res, next) => {
    res.send('/login')
})
router.get('/asd', (req, res, next) => {
    res.send('/login')
})

module.exports = router

01.js

const express = require('express')
const app = express()
app.use(express.static('./static'))
app.use('/login', require('./Router/user'))
app.listen('8080', () => {
    console.log("监听成功！！");
})